Feb 03
Hoje em dia cada byte a mais no seu código pode significar gigabites de tráfego ali na frente, por isso é necessário utilizar em cada página que é renderizada somente o que é preciso para aquela página rodar. O ideal é pôr o stylesheet_link_tag e o javascript_include_tag dentro de cada view, somente com os arquivos necessários. Porém, surge um problema grave, que é o fato de o elemento <link> não poder ficar fora do elemento <head>, ou seja, se você usar um layout padrão com n views, o seu arquivo que contém as Stylesheets ficará fora do elemento <head>, tornando seu código fora do padrão da w3C, o que para muitos não é importante, para mim é imprescindível. Mas como o Rails é muito bom, também pensaram nisso. O método de pôr stylesheets e javascripts que estão na view dentro do elemento <head> é muito simples. app/views/layouts/application.rhtml 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt" lang="pt">
  <head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <meta name="language" content="pt-br" />
    <meta name="generator" content="emacs" />
    <title>Título da sua página</title>

    <%= javascript_include_tag :defaults %>

    <!--  Pega os blocos de CSS e Javascript e exibe nesta região da sua marcação. -->
    <%= yield(:page_javascript) %>
    <%= yield(:page_stylesheet) %>
  </head>
  <body>
    <div id="wrap" >
      <%= yield %>
    </div>
  </body>
</html>
app/views/teste/view.rhtml 
<% content_for(:page_stylesheet) do %>
  <%= stylesheet_link_tag 'redboox' %>
<% end %>

<% content_for(:page_javascript) do %>
  <%= javascript_include_tag 'redbox' %>
<% end %>

<div>
  <h4>Seu html aqui...</h4>
  ...
  ...
  ...
</div>

1 Response to “Poupe suas páginas, ponha somente o CSS e o Javascript necessário com Ruby on Rails”

  1. Everton J. Carpes:
    June/13/2008 11:40:32 at 11:40 AM Jah que andas falando de economias, fia a dica do plugin ''bundle'' que compacta os teus css e js em um arquivo soh... O uso eh SUPER simples, basta chamar o methodo bundle() passando o bloco os includes que tu quer, por exemplo: ... ... Veja mais em: http://code.google.com/p/bundle-fu/ Obs.: isso as vezes atrapalha no desenvolvimento, uma vez que tu fica com um arquivo soh no browser, pode ser dificil saber de q arquivo veio determinado CSS, etc... Mas a dica eh valida, aproveitem ;)

Leave a Reply