Ruby on Rails internacionalizando / localizando views

O Rails 2.3 introduziu uma forma de internacionalizar / localizar suas views.

Por exemplo, nós temos a view: managers/mailer/reset_password_instructions.html.erb.
Você pode apagar esse arquivo ou renomear e criar templates de acordo com os idiomas que você tem disponível na sua aplicação, como:

managers/mailer/reset_password_instructions.en.html.erb e colocar o conteúdo de acordo com o idioma:

<p>Hello <%= @resource.email %>!</p>
 
<p>Someone has requested a link to change your password, and you can do this through the link below.</p>
 
<p><%= link_to 'Change my password', edit_password_url(@resource, :reset_password_token => @resource.reset_password_token) %></p>
 
<p>If you didn't request this, please ignore this email.</p>
<p>Your password won't change until you access the link above and create a new one.</p>

e

managers/mailer/reset_password_intructions.pt-BR.html.erb e colocar o conteúdo de acordo com o idioma:

<p>Olá <%= @resource.email %>!</p>
 
<p>Alguém pediu um link para alterar sua senha, e você pode fazer isso através do link abaixo.</p>
 
<p><%= link_to 'Alterar minha senha', edit_password_url(@resource, :reset_password_token => @resource.reset_password_token) %></p>
 
<p>Se você não solicitou, por favor ignore este e-mail.</p>
<p>Sua senha não será alterada até que você acessar o link acima e criar uma nova.</p>

O Rails utiliza a view de acordo com o idioma definido no momento.

Posted in Ruby on Rails at maio 5th, 2011. 1 Comment.

Google’s Pacman Doodle – Engenharia Reversa

Na página do Google de hoje (21 de maio de 2010) tem um doodle do Pacman – e o mais interessante disso: é jogável! E é o primeiro doodle jogável do Google.

Sendo um geek, eu decidi dar uma olhada no código-fonte para descobrir como o Google fez isso.

Eu não fiz engenharia reversa do código inteiro, eu só queria ter uma ideia geral de como eles tinham feito isso. Parece-me que o Google, afinal, tem um código extramamente conciso e eficiente para resolver muitos dos seus problemas.

Assim, em primeiro lugar eles têm um elemento div que contém a área do jogo:

<div id=lga>
  <a href="/search?q=PAC-MAN+30th+Anniversary&ct=pacman10-hp&oi=ddle" id="dlink">
  </a>
  <div id=logo style="width:554px;height:186px;background:black url(logos/pacman10-hp.png) 0 0 no-repeat;position:relative;margin-bottom:9px" title="PAC-MAN's 30th Birthday! Doodle with PAC-MAN™ & ©1980 NAMCO BANDAI Games Inc.">
    <div id="logo-l" style="width:200px;height:2px;left:177px;top:157px;background:#990;position:absolute;display:none;overflow:hidden">
      <div id="logo-b" style="position:absolute;left:0;background:#ff0;height:8px;width:0">
      </div>
    </div>
  </div>
  ...
</div>

E depois há o script mágico:

<script>
    google.pml = function() {
        function d(a) {
            if (!google.pml_installed) {
                google.pml_installed = true;
                if (!a) {
                    document.getElementById("logo").style.background = "black";
                    window.setTimeout(function() {
                        var b = document.getElementById("logo-l");
                        if (b) b.style.display = "block"
                    }, 400)
                }
                a = document.createElement("script");
                a.type = "text/javascript";
                a.src = "logos/js/pacman10-hp.2.js";
                google.dom.append(a)
            }
        }
        function e() {
            if (document.f && document.f.btnI) document.f.btnI.onclick = function() {
                typeof google.pacman != "undefined" ? google.pacman.insertCoin() : d(false);
                return false
            }
        }
        if (!google.pml_loaded) {
            google.pml_loaded = true;
            window.setTimeout(function() {
                document.f && document.f.q && document.f.q.value == "" && d(true)
            }, 1E4);
            e();
            google.rein && google.rein.push(e);
            google.dstr && google.dstr.push(function() {
                google.pacman && google.pacman.destroy();
                if (google.pml_installed) {
                    for (var a = (document.getElementById("xjsc") || document.body).getElementsByTagName("script"), b = 0, c; c = a[b++];) c.src.indexOf("/logos/js") != -1 && google.dom.remove(c);
                    google.pml_installed = false
                }
            });
            google.pacManQuery = function() {
                google.nav(document.getElementById("dlink").href)
            }
        }
    };
</script>

O que parece estar fazendo é o seguinte:

  • Define o estilo CSS e propriedades para vários elementos HTML jogáveis;
  • Carrega o código Javascript do Pacman: http://www.google.com/logos/js/pacman10-hp.2.js (nota: esse link era válido quando eu carreguei isso em 21 de maio de 2010, o dia do doodle, mas pode ser removido mais tarde. Depende do Google, e eu não quero guardar uma cópia offline por razões legais e outros.);
  • Quando o jogo é terminado, redireciona para o link do elemento a id=”dlink”, e basicamente procura pela frase “PAC-MAN 30th Anniversary”;
  • Responde ao botão “Insert Coin” quando é pressionado e reinicia o jogo.

No estilo Google: realmente puro e eficiente!

Eu usei dois recursos online para formatar o HTML e Javascript do Google melhor:

Esse post é uma tradução do post: http://sumanrs.wordpress.com/2010/05/21/googles-pacman-doodle-reverse-engineering-101/

Posted in Game, Javascript, Web 2.0 at maio 21st, 2010. No Comments.

 Assinar RSS Feed