Twitter Bootstrap em português

Existe uma versão do Bootstrap em português atualizada no github da globo.com.

Um kit completo de componentes de interface para iniciar algo mais complexo.

Isto é uma boa definição para o Bootstrap do Twitter. Eu diria também que seria um framework de redesenho, tentando aproximar de um modo muito simples os elementos de design mais ricos como padrão do browser, deixando o desenvolvedor livre para preocupar com interações mais complexas.

Bem, as inúmeras explicações para definir o Bootstrap muitas vezes se tornam não inteligíveis para muitos, então nada melhor do que um exemplo prático: formulários.

Formulário é algo que sempre temos que nos preocupar. Com uma infinidade de estados e possibilidades, muitas vezes não são bem definidas e nunca temos tempo de deixá-la no estado da arte em seus mínimos detalhes com todas suas possibilidades de interação: estados de erro, posicionamento e eventos.

Com um simples CSS, ou até mesmo uma pitada de javascript podemos diagramar formulários com uma melhor experiência, com estado de validações bem definidos e consistentes.

Um exemplo do controle dos estados de erro em um formulário

Além de formulários há um arcabouço necessário para construir uma aplicação web mais rica, ótimo para prototipagem ou para criar documentações. As aplicações do Bootstrap são bem variadas, e atualmente há até um repositório de templates para compra, o Wrap Bootstrap.

Bootstrap é também uma poderosa ferramenta para uma empresa que partilha dos mesmos componentes por vários produtos para manter identidade. Além disto estes produtos foram construídos em diferentes tecnologias, mas como uma mesma interface. Para isto o Bootstrap é uma ótima alternativa. Torne o front-end da sua aplicação um projeto separado onde várias fontes possam compartilhar dos mesmos estilos. O Twitter Bootstrap na verdade é um guia de estilo vivo. É a recreação de uma prática já difundida antes, mas que era feita pelo design que geralmente não sobrevivia por muito tempo por falta de atualizações e diferentes ciclos de vida do projeto.

Para difundir melhor o uso desta importante ferramenta, resolvi fazer um fork do Bootstrap para tornar sua documentação em português.

Esta é uma página do Bootstrap de personalizar componentes em português

Os templates gerados da documentação tem uma marcação de internacionalização. Com isto criei um script em Node.js para extrair estas strings, salvar em um arquivo onde posso fazer as traduções, mantendo a documentação intacta(e com isto poder continuar pegando as atualizações do twitter). Com isto pude traduzir todo o projeto e vocês podem entender melhor como funciona, pois sua documentação é bem valiosa e as orientações que são passadas por ele vale a pena considerar, pois eles fazem um ótimo trabalho quando o assunto é interface e usabilidade.

Esta é a demonstração da página inicial do Twitter Bootstrap em português

Desafios do projeto

Sempre tive bastante interesse com projetos que envolvem tradução. Recentemente vi o Localle App, serviço para traduções de gems para Rails. No momento poucos aderiram, mas já é possível traduzir o will paginate por lá, por exemplo. Também sei o quanto é difícil para quem tem dificuldades em aprender inglês e ainda na corrida do aprendizado por novas tecnologias web. Traduzir é uma forma de repassar o conhecimento para muitas pessoas que não tem acesso ao poder que estas informações oferecem para o nosso desenvolvimento.

Descobri em engines de template formas de internacionalização. O mustache, que depois evoluiu para o Hogan.js, um fork criado pelo Twitter para renderizar o template do Bootstrap.

O difícil foi exatamente saber diferenciar o que é “traduzível” ou não, pois termos muito técnicos, como engine, é uma palavra em inglês, mas está no sangue de qualquer pessoa da área de desenvolvimento.

Como funciona

O Bootstrap funciona da seguinte forma:

Você altera os arquivos .less, e a cada vez que você executa o comando make você regera novamente um bootstrap.css e um bootsrap.min.css. Os templates também são precompilados usando o Hogan.js. Através de um comando make docs ele renderiza estes templates em arquivos HTML estático.

No final no Bootstrap tudo é estático. O projeto tem a flexibilidade de rodar em qualquer ambiente e no próprio projeto é possível já copiar arquivos para a branch gh-pages do github, que gera automaticamente um website para o seu projeto no repositório.

Com isto foi possível criar um novo comando, make translate que varre os templates e lê um arquivo pt-br.json, no formato onde há toda a tradução. Cada vez que o comando é executado ele exibe no terminal informações sobre strings que precisam de tradução. Ele também cria um arquivo, o template.js onde é possível criar qualquer traducao, bastaria salvar o template como um arquivo de linguagem e executar make translate [linguagem], no caso do brasil é por padrão pt-br.

O script mostra depois que a tradução é executada o que ainda falta para completar a tradução.

Com isto a cada pull que pego originalmente do twitter posso saber o que surgiu para ser traduzido. Este script abre também a possibilidade de traduzir o bootstrap para qualquer linguagem.

Enquanto oTwitter Bootstrap não lança a versão oficial, esta versão que desenvolvi é a tradução indicada por eles em seu wiki:

https://github.com/twitter/bootstrap/wiki/translations

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

*

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>