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.

Actualizar a WordPress 3.2

Ya comenté en otro post como instalar WordPress en la empresa donde tengo alojado mi dominio (1&1), pues bien, la herramienta de edición y publicación evoluciona y presenta nuevas versiones con interesantes novedades. En este post describiré cómo exportar la base de datos, hacer una copia de seguridad de la actual versión de WordPress y actualizar de forma automática a WordPress 3.2.

Por qué actualizar a WordPress 3.2

A continuación hago un rápido repaso de las novedades de la versión de WordPress, para que compruebes si merece la pena actualizar. Personalmente considero que sí merece la pena:

  • Nueva interfaz de administración: Tiene un aspecto más ligero y se ha rediseñado totalmente el menú de la izquierda, con un funcionamiento más fluido.
  • El editor de entradas y páginas es más minimalista y su funcionamiento ha mejorado
  • Nuevo modo de escritura sin distracciones o Zen mode. Con un sólo clic de ratón eliminamos cualquier menú, enlace o botón de la pantalla, dejando únicamente el área de escritura. Sólo al pasar el ratón por la parte superior podemos ver las diferentes opciones. Esta es mi nueva funcionalidad favorita.
  • Mejoras en las actualizaciones. En actualizaciones menores dentro de la misma versión, no se tocarán los ficheros core de la versión.
  • Mejoras de velocidad. Se ha trabajado en la carga lenta de PHP y un parche para que el menú de administrador cargue más rápido (Aquí no he notado grandes diferencias).
  • Mejoras en la API de listado de tablas.
  • El escritorio no soportará Internet Explorer 6 y te avisará si la versión de tu navegador es inferior a Chrome 11, Safari 5, Firefox 4, Opera 11 e IE 9.
  • Twenty Eleven. Nuevo tema por defecto para el año 2011. Es sencillamente genial, es un tema muy sencillo y claro diseñado según el enfoque del Responsive Design, es decir, que el diseño de las páginas se verán perfectamente en cualquier dispositivo, con cualquier tipo de pantalla. La única pega es el gran tamaño de la imagen de cabecera (1000 x 288).
  • Además ahora, mientras estés autenticado y estás visualizando tu publicación, podrás ver una barra wordpress en la parte superior con enlaces directos a las herramientas más utilizadas.

En el siguiente vídeo se reflejan todas las novedades enumeradas anteriormente:

Haciendo copias de seguridad

Si nos hemos decidido y vamos a actualizar, es una buena costumbre realizar una copia de seguridad de nuestra base de datos MySql, así como de los ficheros de la versión que tenemos actualmente. De esta forma si ocurre algo no deseable, no perderíamos nuestros artículos, usuarios, tags, categorías, comentarios o ficheros que hayamos personalizado. En caso de que no desees hacer copias de seguridad, o tu empresa de hosting no es 1&1 puedes ir directamente al siguiente paso. Existen diferentes maneras de hacer esto (el propio wordpress incorpora herramientas para realizar un backup) pero esta vez voy a describir cómo realizarlas desde el panel de control de mi proveedor de hosting 1&1.

Para la base de datos:

  1. Desde la pantalla principal del panel de control, pulsamos sobre el enlace Gestión de MySQL.
  2. Aparecerá una pantalla con la lista de instancias de bases de datos que disponemos. Pulsamos sobre el botón phpmyAdmin de la base de datos que esté asociada a la instalación de wordpress. Si sólo tienes una como es mi caso pulsa el botón.
  3. Aparecerá la pantalla mysql-control-center en la que aparecen las tablas de la base de datos (izquierda) y la configuración de la misma, a la derecha. Pulsamos el enlace Exportar.
  4. En la siguiente pantalla aparecen todas las opciones para exportar. Como la exportación va a ser un fichero con los scripts de creación e inserción en la base de datos de todos los datos que tengamos, podemos personalizar o afinar las sentencias que genera. Si no tenemos conocimientos de BBDD, dejamos los valores por defecto y pulsamos Continuar.
  5. En unos segundos aparecerá el contenido del fichero generado. Debemos seleccionar todo y copiarlo para pegarlo posteriormente en un fichero local de texto en nuestro equipo. Si el fichero lo renombramos por ejemplo BBDD16_07_2011.sql, tendremos una “fotografía” de la BBDD en un día determinado.

Para los ficheros de WordPress de la versión actual, podríamos utilizar un cliente FTP y bajarnos el directorio de instalación pero esta vez vamos a crear un fichero comprimido y a continuación lo bajaremos a nuestro disco local:

  1. Desde la pantalla principal del panel de control, pulsamos sobre el enlace Gestión de Ficheros.
  2. Aparecerá la pantalla con el árbol de carpetas a la izquierda, y el contenido a la derecha. En el árbol de carpetas pulsamos sobre la carpeta raíz ‘/’ y en la parte de la izquierda seleccionamos la carpeta que contiene la instalación de WordPress (en mi caso blog), es la que contiene a las carpetas wp-admin, wp-content y wp-includes. Pulsamos sobre el menú Archivo Zip y luego sobre Comprimir.
  3. Aparecerá un diálogo para introducir el nombre del fichero zip. Podemos nombrarlo, como hicimos con la base de datos con la fecha actual (blog16_07_2011.zip). Generará en la carpeta raíz un fichero con todo el contenido.
  4. Para bajarlo del servidor a nuestro equipo, seleccionamos dicho fichero y pulsamos sobre el menú Transferencia y luego sobre Descargar.

Con estos dos sencillos pasos nos hemos cubierto las espaldas ante posibles desastres.

Actualización  a WordPress 3.2

Desde el escritorio de adiministración de WordPress nos avisa de que hay una nueva versión de la herramienta. Pero antes de actualizar es conveniente desactivar todos los plugins que se encuentren activos. En el menú plugins pulsamos sobre Plugins instalados para listar la lista de los mismos. Desde aquí desactivamos todos los que se encuentren activos.

A continuación vamos al menú Actualizar y pulsamos sobre el botón correspondiente de la actualización de WordPress 3.2. Lo normal es que haya dos opciones, una para la versión en inglés y otra para la versión en castellano, así que seleccionaremos la que tiene el sufijo es_ES. Aquí comienza el proceso de descarga e instalación automática de la actualización. Lo normal es que no haya problemas, pero mucho ojo: si se trata de un salto de una versión más antigua, reemplazará los ficheros que hayamos modificado o personalizado.

Para acabar y si todo ha ido correctamente, debemos ir activando los plugins uno a uno, es decir, activamos y probamos si es compatible con la versión. En caso negativo, lo dejamos desactivado hasta que encontremos alguna actualización o solución. Puedes aprovechar como en mi caso para actualizar el tema, yo me decanté por el TwentyEleven, un tema claro y sencillo que además, gracias al responsive design muestra el blog correctamente tanto en PC, Tablets, iPhone y Android.