Globo Bootstrap

Baseado no Twitter Bootstrap, o Globo Bootstrap é um framework de front-end poderoso, totalmente intuitivo para facilitar no desenvolvimento dos elementos de interface nos sites da Globo.com. Pode ser também usado em seus projetos como um guideline para produzir de forma consistente os padrões consolidados do Twitter e da Globo.com. Um projeto que pretende contribuir ativamente com o Twitter Bootstrap, ele é uma ferramenta poderosa que também pode ser usada para facilitar na padronização e nas melhores práticas de desenvolvimento HTML/CSS e Javascript, tanto para iniciantes no desenvolvimento web, quanto para os avançados que desejam dar um passo além em interações mais complexas.

Havia uma reunião toda semana para tentar estabelecer um padrão dos componentes de interface entre os diversos produtos da Globo.com. Nesta mesma época tivemos o primeiro contato com o Bootstrap do Twitter, além de ter surgido vários não tão antes nem muito depois, como o Kendo UI e o Foundation. Quando os primeiros componentes começaram a ser desenvolvidos, resolvi fazer um fork do Bootstrap, fazendo alguns ajustes e criando alguns componentes.

O primeiro passo de desenvolvimento foi a oportunidade de contribuir com uma tradução para o português e então criei um projeto de internacionalização do Bootstrap, utilizando um script em Node.js para extrair as strings nos templates, como explico neste post sobre o bootstrap em português. Este projeto é uma tradução não oficial do Twitter Bootstrap.

No momento em que o Globo.tv, o portal de vídeos da Globo.com precisava de um sistema de gerenciamento de conteúdo, usamos ele como piloto para implementar as interfaces em um CMS inicialmente básico. As tarefas basicamente eram adicionar, remover e editar a oferta de vídeos, a gestão de canais e de programas, com algumas histórias de usuário mais complexas. Cada componente de interface desenvolvido para o gerenciador era primeiro desenvolvido dentro do Bootstrap, documentado na forma de exemplos de uso e usados no projeto após este processo. Isto facilitou a comunicação com a equipe, tanto os mais experientes quanto estagiários conseguiram desenvolver as interfaces de forma intuitiva e com uma documentação bastante clara e concisa, em que usa os próprios elementos documentados para documentar (Seria uma meta documentação?).

Em meio a este processo, descobrimos alguns bugs e tivemos alguns pullrequests que foram integrados na versão 2.1.1 que está em desenvolvimento.

Pull requests aceitos do Globo Bootstrap

Alguns Pull requests aceitos pelo Twitter Bootstrap vindo do Globo Bootstrap

Então, para “inaugurar” com um componente útil, foi criada a borda interna, amplamente utilizada na Globo.com e que pode ser obtida com um pequeno truque de CSS resumindo neste post, em que o Dulcetti explica como esta técnica é feita.

Desta forma, usando o Globo Bootstrap, basta apenas inserir uma classe inner-border na tag de link nos thumbnails, que teremos este efeito.

Para maiores detalhes, visite a seção de thumbnails dentro do Globo Bootstrap.

Ilustrando a página de documentação da borda interna

Ilustração de como implementar a borda interna.

Por que usar o Bootstrap?

Bem, este projeto criado pelo Twitter é atualmente o projeto com mais forks no github. Isto mostra  a repercussão deste framework que se consolidou como um padrão de interface forte e conciso. Com design bastante intuitivo e elegante,  com dimensões e proporções calculadas de forma a manter a proporção das larguras , praticamente tudo no Bootstrap é feito através de um grid, que pode ser fluido ou responsive.

Não há dúvida que com tantas funcionalidades, ele tenha gerado várias formas de integração e uma enorme aceitação na comunidade de desenvolvedores, desde os mais iniciantes até os mais avançados.

Distância e proporções concisas

Praticamente todos os elementos no Bootstrap são dados pelo grid que vai de 1 a 12, que pode ser responsive ou não, depende apenas de incluir alguns arquivos css que controlam o responsive que podem ser obtidos através da página de Download do Bootstrap da Globo ou no Bootstrap.

Integrações diversas

O Bootstrap integra com Django, com Rails, com WordPress, tem ótimos templates para venda, tem plugins para jQuery e ainda integra com o jQuery UI e originalmente em LESS, ele também tem uma versão para Sass.

Documentação orgânica

Documentação de guia de estilos de forma orgânica, onde os próprios componentes são usados como elementos na hora de descrever as interações com exemplos reais.

Por que usar o Bootstrap da Globo

O Bootstrap da Globo é uma extensão do Bootstrap do Twitter, onde haverá vários plugins que serão útil para os desenvolvedores web, que além de usarem poderão contribuir para termos um framework Brazooka forte. Já existe Kickstrap, por que não pode exisitr o Brazoostrap?

Por que você copiou o Twitter Bootstrap para desenvolver em sites da Globo.com?

Componentes de interface são elementos de uma aplicação Web, site ou qualquer dispositivo. Não gosto de reinventar a roda e vários padrões de interface são usados nestes sites, além de outros. O Bootstrap é um guia de estilo em HTML/CSS/Javascript e por definição com padrão de interação onde as cores junto com outros fatores dão a identidade. Tudo isto é personalizável, sendo possível gerar um pacote de componentes com temas para qualquer ocasião.

O Bootstrap criou um novo padrão para os Browsers. Como filosofia deste projeto, O Bootstrap não é o fim, mas sim uma nova forma de iniciar um projeto sem ter que se preocupar com elementos padrão de CSS, com todos os estados bem definidos e com uma ótima usabilidade.

Temas para diferentes produtos e plataformas

A possibilidade de personalização de cores e elementos de interação no Bootstrap é bastante vasta e isto se aplica perfeitamente a Globo.com que tem elementos semelhantes entre portais de esporte, jornalismo e entretenimento, que tem identidade ditada basicamente pela cor.

Assim como o Twitter criou vários elementos de interface que se tornaram padrão utilizado por muitos outros, a Globo.com também tem vários elementos em seus portais que passaram a ter seu padrão amplamente difundido, como usar as cores para identificar diferentes produtos, borda-interna, dentre outros.

Multiplataforma

Com tantas linguagens de back-end, não seria interessante o front-end ser uma aplicação separada, onde utiliza sua própria infra-estrutura otimizada para o browser? No final, no Bootstrap, tudo é estático.

Outro fator importante como decisão de ter o Bootstrap no front-end foi a possibilidade de ter um front-end único para todos os sistemas e assim poder facilitar o trabalho em uma empresa onde é usado Python, Rails, Java e PHP.

Esta separação do front-end também dá uma flexibilidade na hora de prototipar. Você não precisa mais ter aquele HTML feio para provar um conceito, criar uma aplicação de forma rápida, ou para focar nas regras de negócio, na moda rails rumble não é?

Bootstrap server

Iniciado no Fedex-day, o Bootstrap-server da globo foi o desenvolvimento de um servidor usando Node.js para servir a página de download de componentes do Globo Bootstrap. Como teríamos nossos próprios componentes, precisaríamos desta infra estrutura de compactar arquivos e gerar estáticos de acordo com as opções do usuário. Recentemente o Twitter também liberou o Bootstrap-server como open source e podemos fazer seu uso juntamente com o que já havia sido desenvolvido.

Um dos grandes desafios agora é elaborar um guia de como contribuir e contribuir de volta com o projeto original na correção de bugs e criação de novos componentes.

Data API’s

É possível utilizar os plugins javascript do Bootstrap sem sequer executar uma linha de javascript. Os plugins podem ser chamados em atributos data. Desta forma fica descrito no html a função daquele elemento, como por exemplo se um link deve se comportar como modal.

Falando em Javascript, o próximo passo é criar um componente do Bootstrap de notificação para desta forma utilizar a própria notificação criada para avisar dentro do Bootstrap da Globo os componentes novos que vão surgir.

Quais componentes legais vocês vêem nos sites da Globo.com que gostariam de ter no Bootstrap da Globo?

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>