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

Casiano Rodriguez León 2015-06-18