Práctica: Añada Hojas de Estilo a Piedra Papel Tijeras

Añada hojas de estilo a la práctica anterior (sección 31.17.2).

1. Mostramos una posible estructura de ficheros en la que se incluyen hojas de estilo usando bootstrap :

   [~/local/src/ruby/sinatra/rack/rack-rock-paper-scissors(bootstrap)]$ tree
   .
   |--- Gemfile
   |--- Gemfile.lock
   |--- README
   |--- Rakefile
   |--- TODO
   |--- config.ru
   |--- lib
   |   `--- rps.rb
   |--- public
   |   |--- css
   |   |   |--- bootstrap-responsive.css
   |   |   |--- bootstrap-responsive.min.css
   |   |   |--- bootstrap.css
   |   |   `-- bootstrap.min.css
   |   |--- img
   |   |   |--- glyphicons-halflings-white.png
   |   |   |--- glyphicons-halflings.png
   |   |   `-- programming-languages.jpg
   |   `-- js
   |       |--- bootstrap.js
   |       `--- bootstrap.min.js
   |--- rps.rb
   `-- views
       `--- index.haml
   
   6 directories, 18 files
   

2. El middleware Rack::Static intercepta las peticiones por ficheros estáticos (javascript, imágenes, hojas de estilo, etc.) basandose en los prefijos de las urls pasadas en las opciones y los sirve utilizando un objeto Rack::File. Ejemplos:

       use Rack::Static, :urls => ["/public"]
   

   Servirá todas las peticiones que comiencen por /public desde la carpeta public localizada en el directorio actual (esto es public/*).

   En nuestro jerarquía pondremos en el programa rps.rb:

   builder = Rack::Builder.new do
     use Rack::Static, :urls => ['/public']
     use Rack::ShowExceptions
     use Rack::Lint
   
     run RockPaperScissors::App.new
   end
   
   Rack::Handler::Thin.run builder
   

   y dentro del template haml nos referiremos por ejemplo al fichero javascript como

         %script{:src => "/public/js/bootstrap.js"}
   

   Otro ejemplo:

       use Rack::Static, :urls => ["/css", "/images"], :root => "public"
   

   servirá las peticiones comenzando con /css o /images desde la carpeta public en el directorio actual (esto es public/css/* y public/images/*)

3. Véase el código en GitHub de Rack::Static
4. En el template views/index.haml deberá enlazar a las hojas de estilo:

   !!!
   %html{:lang => "en"}
     %head
       %meta{:charset => "utf-8"}/
       %title RPS 
       %link{:href => "/public/css/bootstrap.css", :rel => "stylesheet"}
        %link{:href => "/public/css/bootstrap.css", :rel => "stylesheet"}
   

   y las imágenes como:

   %img(src="/public/img/programming-languages.jpg" width="40%")
   

5. Rack::File es un middleware que sirve los ficheros debajo del directorio dado, de acuerdo con el path info de la petición Rack. por ejemplo, cuando se usa Rack::File.new("/etc") podremos acceder al fichero passwd como localhost:9292/passwd.
6. Vease el código en github de Rack::File
7. Para saber mas de Bootstrap véase la sección 41