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?

35 Replies to “Globo Bootstrap”

  1. Salve Alexandre

    Primeiro gostaria de te dar os parabéns, realmente você mandou muito bem, o bootstrap está salvando o leitinho das crianças ultimamente, visto que eu sempre fui um Flash Developer e agora tenho que trabalhar com HTMl / CSS / JS

    Nunca tinha acessado seu site, mas vou divulgar ele no facebook realmente muito bom.

    Abs

    1. Olá Hélio,

      Como começamos a usar o Bootstrap na Globo.com houve uma tradução para se adequar mais a nossa realidade, já que falamos português e isto facilita o acesso para as pessoas aqui. A versão traduzida é uma primeira versão e iniciativa para ele ter componentes open source que foram construídos aqui.

      1. Ou seja, é só uma cópia em português com o nome Globo para levar o mérito do trabalho do pessoal que teve o trabalho duro!

        1. @Anderson: É um fork onde traduzimos para o português para tornar acessível para muitas pessoas como vem sendo útil e evoluindo para as necessidades e contribuições daqui. Foi apenas uma iniciativa, não queríamos levar o nome de nada, tem o nome Globo por que foi feito na Globo.com, como poderia ser qualquer coisa como os milhares de Forks que existem do Bootstrap que existem. O nosso objectivo foi disseminar conhecimento do Bootstrap para ser usado aqui e personalizado para as necessidades dos desenvolvedores daqui.

          1. Deu pra entender perfeitamente o que o Hélio e o Anderson Koester disseram. Em poucas palavras, o título, o texto, as informações no repositório do github, deveriam ser muito mais objetivos quanto à finalidade deste projeto: Tradução.

            Ou no mínimo falar concretamente sobre componentes em planejamento, expor showcases, métricas e prazos. É assim que se faz, ou ninguém acreditará no seu projeto. Você conhece o mercado.

          2. @Raul: O objetivo não foi somente tradução, era apenas o objetivo inicial. Existe um link na barra de navegação “O que há de novo” mostrando os componentes que foram desenvolvidos. Eu não espero que as pessoas acreditem ou não Raul, eu simplesmente usei o projeto open source e estou devolvendo na comunidade como ele foi feito e só de tê-lo tornado acessível para um desenvolvedor somente, valeu a pena o trabalho e não quero tirar mérito de ninguém, pois como sempre reforço nas minhas palestras, o Bootstrap é o projeto com mais forks do github, ou seja, várias pessoas criaram versões dele e nomeou como convieram. Abraços.

    1. Olá Bruno,

      Este artigo diz respeito a um grande problema que existe com os grids hoje, que é declarar de alguma forma através de classes definições de tamanho. Vários grids hoje no mercado fazem isto. Isto é o que semantic grid propõe a resolver e o Bootstrap ainda não tem suporte, mas dizer que ele será descontinuado foi de certa forma “polêmico”.

      Eu nunca testei mas já existem iniciativas para isto: http://stackoverflow.com/questions/9906571/semantic-grid-with-bootstrap-less-mixins-how

      Pelo fato do Bootstrap ter funções de grid separadas você pode incluir na declaração dos seletores e fazer um grid de forma semântica.

  2. Nossa cara maneiro e sucesso demais esse globo bootstrap, quando ces vão lançar uns componentes novos la que já existem no portal da globo.com…. sucesso d++++ vamo divulgar,
    boa ideia seria mostrar como ce faz aquela lista la do vai e vem de mercadoda bola junto com todos os recursos dela seria sensacionalllll

    1. Obrigado David, fico feliz que tenha gostado. A criação dos componentes vão surgindo na medida do tempo. Estou tentando contribuir com alguns e criando um guia detalhado de como contribuir para facilitar a integração de componentes dentro do Globo Bootstrap.

  3. Olá Alexandre,

    gostaria de ver o componente do ego que tem as setas laterais para passar de uma notícia para outra…

    E queria parabenizar pela iniciativa, apesar de saber inglês, precisamos sempre algo local pra referências…!

    Abs

  4. Gostaria de tirar uma dúvida quanto ao uso do bootstrap, há chamadas para arquivos externos e caso haja alguma modificação no código, etc isso poderia alterar alguma coisa nos sites que já estejam utilizando o bootstrap?

    Obrigado e parabéns Alexandre.

    1. @Antonio Carlos: Se você tiver baixado o Bootstrap e integrado no seu projeto, não irá alterar nada até que você baixe uma nova versão, mas caso for usado um link externo diretamente para o repositório do Bootstrap, poderá haver alguma mudança com novas versões.

  5. Bom dia Alexandre.

    Eu gostaria de saber se é possível adaptar o bootstrap para o CMS joomla 2.5, se for possível me diga como posso fazer essa adaptação, pois desenvolvi um site em joomla e achei muito interessante o bootstrap.

    Desde já agradeço sua atenção.

    Um abraço

  6. Estou estudando comecando aprender asp.net mvc logo to tendo certa dificuldade para comecar a usar Bootstrap vc poderia me indicar algum tutorial onde explicasse como configurar o ambiente mvc para trabalhar com ele ?

    1. @Fernando: Não é necessário de um tutorial específico do Bootstrap com um ambiente MVC, pois o Bootstrap é apenas CSS e Javascript e seguir o markup que está na documentação. Espero ter ajudado e boa sorte.

  7. Fantástico cara. Parabéns pela iniciativa. além de ajudar, aumenta bastante o interesse de iniciantes em desenvolvimento web, que já podem obter resultados agradáveis com pouca digitação.

  8. Cara, muito bom mesmo!

    Faço uso do Globo Bootstrap e tem sido de grande ajuda. Só tenho um grande problema com o tamanho das fontes. Não consigo fazer com que diminua ou aumente de acordo com a resolução. O que acontece são apenas quebras de linha.

    Não sei é assunto para esse post, mas se puder me ajudar, fico muito grato!
    Valeu!

    1. @joel: Bem, neste caso você precisa definir o tamanho da fonte através do media-querie. No Bootstrap tem um template de media-queries em diferentes resoluções, basta escrever os estilos de fontes para determinadas resoluções. Espero ter ajudado. Abraços e boa sorte.

      1. Demais brother! ajudou bastante. Já havia tentado isso outras vezes, porém, por descuido sempre me esqueci do “!important”.

        Agora ficou certinho!

        Valeu mesmo Cara!

  9. Eai Alexandre, primeiramente quero te parabenizar pelo post que concerteza vai ajudar muitas programadores front-end a abrir os olhos.

    Eu uso o Twitter Bootstrap a alguns meses e nao sabia dessa iniciativa da Globo.com, que bom que traduziram o mesmo. É uma mão na roda mesmo esse “Framework”.

    Mas eai, tem alguma previsão para versão 3 do bootstrap?

    Abraço!

    1. @Jefferson: Que bom que esteja sendo útil a tradução do Bootstrap. As iniciativas vem de pessoas daqui que acreditam que podem ajudar outros desenvolvedores e isto no fim das contas é bom para todo mundo que o seu conhecimento adquirido pode ser contribuído de volta.
      Em relação a tradução da versão 3 é um pouco mais delicada, pois com as mudanças que fizeram para renderização dos templates dificultou bastante eu poder fazer a tradução sem afetar os releases, já que agora os templates usam Jekyll e não tem nenhuma marcação de internacionalização que eu usava para fazer a tradução. Mas estou tentando achar outra solução e espero poder encontrar para disponibilizar para vocês.

  10. Gostaria de saber como faço para incorporar o BS em qualquer template no Joomla 3? pois t rabalho com artisteer e não estou conseguindo fazer uso do bootstrap.

  11. Acho que muita gente ficará brava comigo aqui, mas vou dizer. Eu não gosto do bootstrap, e o motivo ele facilita desfacilitando. Muitas pessoas não se importam com um código organizado com tanto que funcione.
    Mas pensem que um dia alguém pode pegar o seu código e não entender nada e mesmo que pense “não é problema meu” isso chama-se profissionalismo, com isso estou dizendo que pelos códigos mundo a fora todos com muitos erros de semantica.

    O próprio site da globo.com confiram no validator do W3C e verão o que eu estou dizendo, se você é uma pessoa que está há um certo tempo no mundo da programação sabe muito bem com o tempo vc monta sua própria base de dados e quando monta um site do zero vc tem a certeza de que será um site limpo sem erros e com herança.

    Podem até meu chamarem de saudosista mas esta é minha opinião

    1. Caro “tenio”, só por curiosidade: você participou das reuniões referentes a todos os processos que resultaram no site em questão?

      Como fala ou vc participou ou seu site serve uma quantidade muito maior de audiência e você tem, digamos, culhão pra falar assim.

      Sim é uma crítica, mas no sentido de compartilhar idéias e perguntar se não seria o caso de pensarmos mais ou menos como:

      1- “Procurada viva ou morta… PERFEIÇÃO!”
      2- “O ótimo é inimigo do bom!”

      Vc se referiu a itens importantes, mas há muito, muito mais além disso.

      Só o facilitar desfacilitando que descordo veementemente pois isso acontecerá com tudo e mais seja lá o que for se a pessoa responsável, não se importar.

      Imagine o que um péssimo motorista fará com seja lá qual melhor carro do mundo ele dirigir.

      Abração,

  12. Oi Alexandre,

    Interessante mesmo, muitíssimo bem feito e organizado.

    Interessante também por conta da empresa relacionada. É o que você disse sobre e estou contigo: Brazoostrap, BraSilstrap… (com S mesmo)!

    Ví que há tempos não ocorrem atualizações e espero que o projeto continue ativo. Como você, existem muitos e muitos outros talentos aqui neste nosso país que tantas e tantas vezes se esquece de quem é ou faz manha, mimimi ao invés de trabalhar, seguir em frente!

    Apenas não posso deixar de dizer que é F%$# mesmo ter de ler comentários que se não são ridículos são na melhor, desnecessários. Não ajuda? Simples: não enche e não atrapalha!

    Show de bola e humildemente, meus parabéns!

  13. Olá Alexandre, como desenvolvedor web novato, confesso que fiquei um pouco confuso, e não sabia por onde começar. Referente ao back end, decidi começar pelo php + mysql, e a dúvida era sobre um bom framework para front end. Não estava tão preocupado, pois ainda estou estudando html e css, mas quando descobri o bootstrap vi que é ele que vou usar.

    Gostei muito do trabalho feito no Globo Bootstrap, realmente a tradução ajuda muito, ainda não me aprofundei, mas vai ser usando o site do Globo boostrap e seu site http://alexanmtz.github.io/bootstrap/ que pretendo me aprofundar neste framework.
    Show de bola!

  14. Eai, cara! primeiramente queria parabenizar pelo ótimo trabalho que esta sendo feito! espero que tenham continuidade, pra mim que comecei a pouco tempo com Bootstrap foi uma grande ajuda este projeto, mesmo que entenda inglês, sempre é melhor ter um guia em nosso idioma pra ajudar!!

    Talvez não seja o lugar indicado, mas procurando na web sobre o assunto que vou te perguntar cheguei a este post. Estou realizando um projeto, um site que tem uma aba de noticias atualizadas quase que diariamente pelo próprio cliente, (algo parecido com noticias/blog) Que gerenciador de conteúdos em PHP você indica para usar com o bootstrap?? Qual vocês usam no globo.com? Espero que possa me ajudar!

    Grande abraço, e parabéns pelo projeto!!

    1. Obrigado Fernando, e fico feliz que esteja sendo útil.
      Bem, depende bastante da sua necessidade, mas o que mais posso dizer por mim que atende na maioria dos casos é o WordPress. Na Globo.com temos um CMS desenvolvido aqui. Tudo depende do projeto. Dependendo da complexidade do projeto, você nem precisaria utilizar um framework.

  15. Olá Alexandre, muito boa esa iniciativa sua com o globo bootstrap.

    Gostaria de saber se ele tem suporte ao CMS wordpress, estou fazendo uso dele e queria desenvolver alguns projetos nele, principalmente no órgão público onde eu trabalho.
    Se puder dar umas dicas fico agradecido e espero um dia poder contribuir com este grande projeto.

    Abraços

    1. @Thalles: Existem temas para wordpress usando o Bootstrap, caso contrário você terá que adaptar os atuais, o que muitas vezes não valhe a pena.

      Espero ter ajudado, abraços!

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *