Anlise tcnica sobre o uso de bootstrap no tema

padro do Portal Educacional

O que ?
uma coleo de ferramentas para criao de sites e aplicaes web, totalmente gratuita. Ela
contm modelos de design (HTML e CSS) para diversas funcionalidades de sites como, por
exemplo, tipografia, formulrios, botes, reas de navegao, entre outros. Alm de possuir
extenses Javascript para funcionalidades de tela [2].
Ele foi criado internamente no Twitter, para encorajar a padronizao e consistncia de ferramentas
internas. Antes da criao desta ferramenta, as diferentes interfaces no utilizavam padronizao
interopervel, o que dificultava a integrao entre ferramentas desenvolvidas por equipes diferentes.

Caractersticas principais
HTML5
Usa alguns elementos HTML 5 e CSS 3 para aproveitar as novas funcionalidades, mantendo
a compatibilidade com navegadores mais antigos;

Mobile first
A verso 3 baseada no conceito mobile first, o que permite a criao de layouts
interoperveis entre diferentes resolues sem problemas mais graves de adaptao;

Sistema grade
Utiliza uma estrutura padronizada de grade de 12 colunas, com largura varivel de acordo
com a resoluo da tela. Existem classes especficas para reorganizar os elementos para cada
uma das resolues suportadas;

Media queries
Permite controlar a exibio de contedos de acordo com a resoluo de tela, evitando
sobrecarregar a tela para dispositivos com menor resoluo;

Uso de preprocessadores
Usam variveis para preprocessar a folha de estilo, por exemplo, adicionando variveis de
cores, evitando o trabalho manual de substituio de cores em todos os pontos da folha de
estilo[3,4];

Estilos padronizados
Elementos-padro do HTML tem o estilo padronizado e condizente com a estrutura global
do site;

Componentes
Alguns componentes comuns em sites so estilizados, reduzindo a necessidade de reescrever

funcionalidades e evitando a discrepncia em diferentes partes do site. Exemplo de

componentes existentes: cones, dropdowns, botes, grupos de botes, reas de navegao,
breadcrmbs, paginao, exibio de thumbnails, alertas, entre outros.

Quem utiliza?
Alguns grandes sites utilizam o bootstrap, em alguns casos o core padro em outros um core
modificado. Entre eles esto: o prprio Twitter, alguns sites da NASA, MSNBC [5], Globo.com [7]
(core modificado) e Locaweb style [6] (core modificado).

Benefcios
Ao utilizar o bootstrap, alguns benefcios so alcanados:

Flexibilidade na criao de layouts;

Rapidez na montagem de layouts;
Rapidez na montagem da estrutura da pgina;
Design responsivo nativo;
Documentao consolidada;
Cdigo reutilizvel;
Componentes padronizados;
Uso de preprocessadores de CSS;
CSS interopervel entre navegadores;
Acessibilidade preparado para leitores de tela;

Por que utilizar no Tema padro do Portal Educacional?

A principal caracterstica que torna o bootstrap uma alternativa ideal para o uso dentro do tema do
Portal Educacional a sua flexibilidade. Como exposto acima, este framework, permite a
reutilizao de componentes, alm da estilizao em diferentes padres do core padro [3, 4].
Trabalhamos no como uma agncia que dispem de uma ampla equipe para criao de sites nicos
e totalmente personalizados para cada um dos clientes, onde cada alterao um novo contrato com
novos recursos (financeiros, humanos e materiais) sendo injetados.
Nosso foco de trabalho deve ser na mxima padronizao do nosso ambiente de desenvolvimento. A
criao de um novo ambiente padro para estilo, criar dois problemas distintos, mas relacionados.
O primeiro deles ser a necessidade de uma grande anlise para determinar a gama completa de
estilos, entidades e componentes necessrios para a criao dos sites. O outro problema gerado ,
que devido nossa necessidade de agilidade para criao deste tema, ser necessria a fixao de
determinadas caractersticas do tema, em primeiro momento isso viabilizar a modelagem do tema
padro, mas em um futuro prximo restringir a evoluo natural dos sites.
O tema deve ser uma forma de padronizao, evitando a criao de mltiplos ambientes que em
certo momento no sejam mais interoperveis, alm disso, temos os plugins desenvolvidos, que

devem ser funcionais em todos os sites existentes.

O link [1] demonstra um ambiente, da Locaweb [6], muito parecido com o existente dentro do setor
agora. Temos inmeras abordagens para realizar o mesmo trabalho (desenho dos sites), algumas
solues implementadas para determinados sites no so interoperveis para outros por inmeras
questes, desde o CSS utilizado para uma pgina especfica at questes mais abrangentes, como
a prpria estrutura do site. Precisamos, como no caso exibido no link, que uma mentalidade padro
seja criada, permitindo que as alteraes pontuais, ainda seja interoperveis e que ambientes
desenvolvidos em diferentes momentos, dentro do mesmo site, sejam iguais para as mesmas
funes (por exemplo uma estrutura flutuante ou uma mensagem de alerta).
O bootstrap, ultrapassa nosso ponto de padronizao atual, que baseado em uma layer da
programao visual, que contempla alguns itens estilizados no HTML, ele nos permite a criao de
uma estrutura HTML padronizada (no-estilizada) que manter todos os sites com a mesma
semntica. Isso facilitar que os designers e os programadores conseguirem conversar de forma
mais simples sobre questes inerentes das duas funes, sem gerao de conflitos. Como existe um
padro que ser utilizado por ambas as partes, questes de entendimento mais tcnicos entre as
reas no sero necessrias para a implementao tanto da programao visual como do
desenvolvimento do site.
A questo dos componentes nos permitir reduzir o retrabalho para criao de algumas
funcionalidades, por exemplo uma janela modal flutuante com um banner, j previamente
padronizada no bootstrap, inclusive com as funcionalidades de javascript para fechar a janela
flutuante. Atualmente seria necessrio criar uma soluo para cada um dos sites, para disponibilizar
esta mesma funcionalidade.

Fontes
[1] http://tableless.com.br/locaweb-style-como-iniciamos/
[2] http://en.wikipedia.org/wiki/Bootstrap_(front-end_framework)
[3] http://lessframework.com
[4] http://tableless.com.br/css-dinamico-com-less/
[5] http://msnbc.com
[6] http://locaweb.github.io/locawebstyle/
[7] http://globocom.github.io/bootstrap/