Integrar Twitter Bootstrap con Ruby on Rails

Twitter Bootstrap es un framework que nos ayuda a desarrollar de forma rápida aplicaciones web. Provee una amplia variedad de código CSS y Javascript para implementar layouts, navegaciones y formularios, así como soporte para diseño adaptativo (Responsive Web Design).

Una opción para usar Bootstrap es la de descargarnos desde la página del framework el CSS y el Javascript e importarlos en el directorio /app/assets/ de nuestro proyecto rails, pero esta no sería la mejor manera de hacerlo si usamos Rails. Twitter Boostrap está escrito con LESS, que es un preprocesador de CSS similar al que usa Rails (SASS), así que si queremos aprovechar todo el potencial de Bootstrap, deberíamos usar un lenguaje como LESS, en lugar de ficheros estáticos. Para integrar LESS con Rails debemos usar varias gemas, como twitter-bootstrap-rails, que es la que yo he usado, aunque hay otras opciones.

Para integrar Bootstrap debemos partir de una aplicación rails ya creada mediante la orden rails new [nombre_app], así como algún modelo del tipo rails g scaffold product name price:decimal –skip-stylesheets. Hemos utilizado la opción --skip-stylesheets porque queremos utilizar las CSS de Bootstrap en lugar de la que sería generada automáticamente. Después, generamos la tabla en base de datos con rake db:migrate. Una vez hecho esto ya es posible ejecutar la aplicación pero con un aspecto nada atractivo todavía. Es hora de integrar Bootstrap.

Lo primero que hay que hacer es añadir la gema twitter-bootstrap-rails al fichero Gemfile que se encuentra en el directorio raíz de la aplicación.

/Gemfile
# Gems used only for assets and not required
# in production environments by default.
group :assets do
        gem 'sass-rails',   '~> 3.2.3'
        gem 'coffee-rails', '~> 3.2.1'

        # See https://github.com/sstephenson/execjs#readme for more supported runtimes
        # gem 'therubyracer'

        gem 'uglifier', '>= 1.0.3'
        gem 'twitter-bootstrap-rails'
end

Instalamos twitter-bootstrap-rails y sus dependencias (libv8 y less-rails) ejecutando bundle install. Una vez ejecutada la orden anterior, llamamos al generador para finalizar el proceso de instalación y colocar Bootstrap (javascript, css) en el directorio /app/assets.

$ rails g bootstrap:install
insert  app/assets/javascripts/application.js
create  app/assets/javascripts/bootstrap.js.coffee
create  app/assets/stylesheets/bootstrap_and_overrides.css.less
gsub  app/assets/stylesheets/application.css
gsub  app/assets/stylesheets/application.css

En el directorio css está situado el fichero bootstrap_and_overrides.css.less, que es el sitio ideal para personalizar nuestros estilos de la aplicación. De echo, si ejecutamos a continuación la aplicación, veremos que la misma tiene otro aspecto, aunque aún es mejorable.

A partir de ahora empezaríamos a diseñar el layout de la aplicación. Editaremos el fichero application.html.erb para incluir el header (encabezado) de todas las páginas de la aplicación:

/app/views/layouts/application.html.erb 
<!DOCTYPE html>
<html>
    <head>
            <title>Store</title>
            <%= stylesheet_link_tag    "application", :media => "all" %>
            <%= javascript_include_tag "application" %>
            <%= csrf_meta_tags %>
    </head>
    <body>
        <div class="container">
                <%= yield %>
        </div>
    </body>
</html>

Con el código insertado entre los tags head mejoramos el comportamiento de HTML5 para versiones anteriores de Internet Explorer, e incluimos los META para incluir Responsive Design para su mejor visualización en los dispositivos móviles. A partir de este momento podemos incorporar cualquier elemento que aparece en la sección de componentes de Bootstrap siguiendo la documentación existente, de manera fácil e intuitiva y utilizando el fichero bootstrap_and_overrides.css.less para personalizar los estilos.

Lo Básico

Si nunca has utilizado Bootstrap debes saber que utiliza un sistema de rejilla de 12 columnas, lo que facilita la creación de un layout especificando la anchura de cada columna. Este layout será responsive, por lo que si modificamos el ancho de la ventana, el contenido se adaptará al nuevo ancho, ideal para visualizar el diseño con un smartphone o tablet. Un ejemplo sería el siguiente, que crea una barra lateral con tamaño de 3 columnas (span3) y el contenido de nuestra aplicación en 9 columnas (span9).

 /app/views/layouts/application.html.erb 
<!DOCTYPE html>
<html>
    <head>
            <title>Store</title>
            <%= stylesheet_link_tag    "application", :media => "all" %>
            <%= javascript_include_tag "application" %>
            <%= csrf_meta_tags %>
    </head>
    <body>
        <div class="container">
                 <div class="row">
                      <div class="span9"><%= yield %></div>
                      <div class="span3">
                         <h2>About Us</h2>
                         <p>Lorem ipsum dolor sit amet, 
consectetur adipisicing elit, sed do eiusmod tempor incididunt 
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate 
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
mollit anim id est laborum.</p>        
                      </div>
                 </div>
       </div>
    </body>
</html>

Para añadir una barra de navegación responsive en la parte superior de la pantalla, cuyo menú se colapse en un icono desplegable con los enlaces del menú cuando el ancho de la ventana se reduzca, Bootstrap incluye estilos para el siguiente código:

/app/views/layouts/application.html.erb
<div>
    <div>
        <div>
            <a data-toggle="collapse" data-target=".nav-collapse">
                <span></span>
                <span></span>
                <span></span>
            </a>
            <a href="#">Some Store</a>
            <div>
                <ul>
                    <li><%= link_to "Browse Products", products_path %>
                          </li>
                    <li><%= link_to "Price List" %></li>
                    <li><%= link_to "Contact Us" %></li>
                    <li><%= link_to "Cart" %></li>
                </ul>
            </div>
        </div>
    </div>
</div>

 

somestore

En este post hemos visto como integrar Bootstrap en una aplicación rails mediante twitter-bootstrap-rails, como personalizar los estilos en el fichero bootstrap_and_overrides.css.less mediante LESS y como incorporar componentes básicos en nuestra aplicación.

Buscar Ficheros de Gran Tamaño

Cómo buscar y listar todas aquellos ficheros de imágenes de gran tamaño, digamos mayor de 1Mb. Con un sencillo comando desde el terminal de linux en el servidor es posible.

En uno de los proyectos en los que trabajo manejamos una gran cantidad de imágenes que se publican en la web, y es posible su visualización mediante un visor, que permite sencillas transformaciones en las mismas. Las imágenes se van cargando en el servidor de forma periódica ya que existen diversas fuentes de las mismas. En la última carga aparecieron un gran número de ellas cuyo tamaño era excesivo para su publicación en Internet, lo que conllevaba problemas en el visor de las mismas, así como numerosos errores de memoria en el servidor, en el momento de aplicar transformaciones. El dilema era cómo buscar y listar todas aquellos ficheros de imágenes de gran tamaño, digamos mayor de 1Mb.

Lo primero que se nos ocurrió fue desarrollar un proceso en lenguaje java que leyera todas las rutas de las imágenes de la base de datos y se recorriera fichero a fichero para consultar su tamaño. Si era mayor, almacenábamos su nombre y ruta, junto con su tamaño en una lista que, al finalizar el proceso, guardábamos en un fichero de texto.

Al final no es necesario implementar lo descrito en el párrafo anterior, con un simple comando de la shell de linux, fuimos capaces de generar el listado. Abrimos un terminal y tecleamos lo siguiente:

find /MOUNTFIC/PERGAMINOS_INCUNABLES_1  -type f -size +1000k -printf "%h/%f\t%s\n" >> imagenesGrandes.txt

El comando anterior busca en el directorio pasado en el primer parámetro y en todos sus subdirectorios, todos los ficheros, para eso escribimos que el tipo sea f (-type f), cuyo tamaño sea superior a 1Mb (-size +1000k). El código que se muestra a continuación, -printf “%h/%f\t%s\n” formatea la salida, escribe: la ruta + nombre del fichero + tabulador + tamaño del fichero. Separamos cada fichero con un retorno de carro. Con el código >> imagenesGrandes.txt vamos agregando los registros al fichero del mismo nombre.

En el caso de que tengamos las imágenes en varios directorios podemos lanzar este comando varias veces sobre diferentes directorios. El contenido del fichero de texto con el listado de los ficheros no se va machacando con cada ejecución, sino que se va añadiendo al final. Si quisiéramos que se machacara la información deberíamos escribir un sólo signo de mayor que (> imagenesGrandes.txt).

Sistema de Puntuación y Opiniones Cinco Estrellas con MySQL

Lo que vamos a ver en este post es una manera de modelar en MySQL un sistema de puntuación y opiniones cinco estrellas, es decir, puntuaciones entre 1 – 5.

Todos hemos visto, e incluso hemos votado o aportado alguna opinión en multitud de sitios sobre algún producto, alguna app, hotel o restaurante, o alguna canción/álbum de nuestro artista favorito. Es típico pulsar sobre 5 pequeñas estrellas para valorar en el rango 1 a 5 (1 = malo, 5 = excelente), de manera que la contabilización de las votaciones de todos los usuarios nos dará una puntuación media de lo que opina la gente.

Opiniones en Google Play para Angry BirdsLo que vamos a ver en este post es una manera de modelar en base de datos un sistema de votaciones y opiniones, de manera que el código a escribir en la parte servidora (PHP, RoR, Java) sea el menor posible. Imaginemos un sistema en el que tenemos una colección de imágenes. Los usuarios autenticados que visitan la exposición virtual de dichas imágenes pueden valorar de 1 – 5 cada una de ellas. Opcionalmente pueden comentar algo sobre cada una, y para todas ellas se muestra la votación media así como el total de votos emitidos. Este ejemplo se ha desarrollado con MySQL.

En base de datos tendremos una tabla que llamaremos image para almacenar todas las imágenes, identificadas con un id único (image_id). Además almacenaremos su número de votos (num_votes), la puntuación total (total_score) y la puntuación media (rating), es decir, la puntuación total / número de votos:

drop table if exists image;
create table image
(
image_id int unsigned not null auto_increment primary key,
caption varchar(255) not null,
num_votes int unsigned not null default 0,
total_score int unsigned not null default 0,
rating decimal(8,2) not null default 0
)
engine = innodb;

Además, crearemos una tabla donde almacenaremos todas las votaciones y valoraciones de los usuarios. Para cada voto almacenaremos el id del usuario (user_id), el id de la imagen (image_id) y la puntuación personal de 1 a 5. Como opción podemos añadir una opinión (review) que explique su votación.

drop table if exists image_vote;
create table image_vote
(
image_id int unsigned not null,
user_id int unsigned not null,
score tinyint unsigned not null default 0,
review varchar(4000) null,
primary key (image_id, user_id)
) 
engine = innodb; 

Por último necesitamos que los campos num_votes, total_score y rating de la primera tabla (image) se actualicen cada vez que se reciba un voto y se almacene dentro de la tabla image_vote. Para ello generamos un trigger en BBDD que se ejecute tras una inserción en la tabla image_vote, aumentando en uno el número de votos, sumando la puntuación otorgada a la puntuación total, y finalmente recalculando la media.

create trigger image_vote_after_ins_trig after insert on image_vote
for each row
begin
 update image set 
    num_votes = num_votes + 1,
    total_score = total_score + new.score,
    rating = total_score / num_votes  
 where 
    image_id = new.image_id;
end

Con este modelo que hemos creado en base de datos, el procedimiento funcionará de la siguiente manera:

  1. El sistema recogerá la votación del usuario para la imagen visualizada, junto con sus comentarios.
  2. Se almacenará la puntuación para la imagen mostrada y el usuario autenticado en la tabla image_vote.
  3. Automáticamente se actualizará el registro de la imagen seleccionada en la tabla image. El número de votos se incrementará en uno, la puntuación total se incrementará con la puntuación otorgada. Asimismo se calculará la nueva puntuación media.
  4. Al consultar la imagen de nuevo mostraremos la nueva puntuación media junto con el número total de votos.

Me gusta esta solución por su sencillez, minimizando el código que tenemos que escribir en la parte servidora, delegando toda la lógica en la capa de Base de Datos. Se puede completar mostrando las opiniones de los usuarios, junto con la puntuación que aportaron, e incluso el número de votos agrupados por los distintos valores (1 – 5).

Gestión ágil de proyectos con la metodología SCRUM

Me han publicado en el blog corporativo de la empresa en la que trabajo, GFI Informática, “Gestión ágil de Proyectos con la metodología SCRUM”, en la que describo los conceptos básicos de esta metodología. SCRUM es una metodología de la que se ha escrito mucho, la más conocida (junto con Extreme Programming) dentro de las llamadas metodologías de desarrollo ágil, y que hemos podido poner en práctica.

Historia de mi Experiencia

A principios del año 2012 el cliente en el que me encuentro trabajando establece un calendario para el desarrollo e implantación de un sistema de gestión interna en varios centros, con la particularidad de que el sistema comience a utilizarse con unas funcionalidades básicas, completándose el desarrollo en base a los requisitos y feedback que cada uno de los centros nos fuera reportando. A esto debemos añadir la gestión y resolución de las incidencias que se fueran produciendo. La implantación comenzaría en el mes de Marzo (2012) en dos centros de manera simultánea y se iría completando cada 4 semanas hasta completar un total de 9 centros.

Establecimos junto con los usuarios los requisitos mínimos con los que debería implantarse en los primeros centros. También aquellos que no eran críticos para la puesta en producción pero que deberían ir acometiéndose en paralelo. Asimismo, se fueron creando versiones parciales del sistema el primer miércoles de cada mes, y tras las pruebas de usuario y calidad, el departamento de sistemas subía al entorno de producción, como muy tarde la tercera semana de cada mes.

Tras esta nueva versión nos reuníamos todos los implicados en el proyecto para evaluar los cambios desarrollados y establecer prioridades sobre las tareas a realizar en la siguiente versión, añadiendo los nuevos requisitos definidos por los centros que ya estaban trabajando con los nuevos módulos. A pesar de unos comienzos difíciles, ya que los primeros dos centros aseguraban que el sistema no contemplaba los requisitos mínimos para comenzar a utilizarlo, esta forma de trabajar fue un éxito, y ya en el mes de noviembre todos los centros estaban trabajando con el nuevo sistema, incluyendo los nuevos requisitos detectados y solucionadas las incidencias que hubieran ido apareciendo.

Si quieres profundizar más en los conceptos de la metodología SCRUM puedes seguir leyendo aquí.

Instalar Ruby on Rails en Windows

En este post te mostraré cómo instalar Ruby on Rails en Windows y preparar el entorno para comenzar a desarrollar en este sistema operativo, mediante RailsInstaller.

En este post te mostraré cómo instalar Ruby on Rails en Windows y preparar el entorno para comenzar a desarrollar en este sistema operativo. Yo personalmente recomiendo Linux, pero lo normal es que manejemos varios equipos, incluido el del trabajo en el que no tengo elección del sistema operativo a utilizar. Si estás en esta situación o simplemente tu equipo es Windows sigue leyendo.

Para esto vamos a utilizar RailsInstaller, un proyecto simple para proporcionar, de manera muy simple, el entorno de Ruby on Rails sobre Windows XP o superior. Tras una sola instalación guiada por un asistente o wizard, tendríamos Ruby 1.9.3, Rails 3.2, Git 1.7.6 y la base de datos SQLite 3.

Para empezar ejecutamos un navegador y abrimos la url railsinstaller.org, allí descargamos el Kit de instalación de los paquetes anteriormente descritos. Una vez descargado, abrimos la carpeta de descarga en la que se almacenó el archivo con nombre railsinstaller-versión.exe. Hacemos doble clic para ejecutarlo. Comenzará inmediatamente el asistente de instalación con un mensaje de bienvenida. Pulsamos Next. En el siguiente paso debemos aceptar los términos de la licencia. Para continuar debemos aceptar y pulsar Next. Tan sólo nos queda especificar la ruta en la que instalar. Una vez especificada pulsamos Install. El tamaño de la instalación suele ser aproximadamente 447 Mb.

Cuando hayamos completado la instalación aparecerá un mensaje indicándolo con un botón Finish. Pulsamos el botón y aparecerá la consola para configurar git y ssh. Para configurar git debemos introducir un nombre de usuario y una dirección de correo. De momento no debes preocuparte por la clave ssh generada.

Una vez hecho esto cierra la ventana y abre una nueva ventana de línea de comandos pulsando Inicio, Ejecutar…, teclea cmd y pulsa Aceptar. Ya tienes preparado el entorno para comenzar a construir tus proyectos con Ruby on Rails. Puedes probar que se han instalado las versiones correspondiente ejecutando los comandos:

C:\>rails -v
 Rails 3.2.13

C:\>ruby -v
 ruby 1.9.3p392 (2013-02-22) [i386-mingw32]

Si eres nuevo en esto de la programación de aplicaciones con RoR (Ruby on Rails) te aconsejo no utilizar un IDE (entorno de desarrollo integrado). Aunque parezca sorprendente, la mayoría de los desarrolladores de Rails no utilizan un IDE, sino editores de texto plano con más o menos funcionalidades. Yo utilizo Sublime Text 2, un editor avanzado multiplataforma con multitud de añadidos como múltiples selecciones, reconocimiento de sintaxis, paleta de comandos, interfaz personalizable e incluso modo sin distracciones, entre otras. Sublime Text lo puedes descargar y usar de forma gratuita, pero cada cierto tiempo de uso te avisará que estás utilizando una versión gratuita y consideres la opción de comprar una licencia.

Tras la instalación del entorno revisa Rails Guides (en inglés) para obtener información sobre desarrollo de aplicaciones Ruby on Rails.