A utilização do Bootstrap Para a Otimização de Páginas

Apresentação

Ramon Sousa

Web Design (UCB)

Governo do Estado do Rio de Janeiro

Desenvolver Layout Para Sistemas Web

A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa

Bootstrap – História e Apresentação

Origem do Nome“Derivado de Bootstrapping – Palavra de origem inglesa que surgiu na década de 1880 e fazia referência a um acessório utilizado para calçar botas. Com o passar dos anos foi adquirindo vários significados, tendo o mais comum à realização de um processo sem ajuda externa, mas com etapas de facilitação interna. “

Wikipedia

O que é?Bootstrap é um Framework Front-End que foi desenvolvido para facilitar a criação de sites e aplicações web. É basicamente uma biblioteca – cheia de classes - para CSS, assim como é o JQuery - cheio de funções – para o JavaScript.




Wikipedia


•Enquadra-se nos padrões





Wikipedia



•Escrito em



Wikipedia



•Escrito em




Wikipedia



•Escrito em



CriaçãoFoi desenvolvido por 2 funcionários do – e no – Twitter (por isso o nome Twitter Bootstrap) como uma quadro de ferramenta interna. Após foi formado um grupo de desenvolvedores que viram a oportunidade de fazer algo mais robusto do que uma simples ferramenta de uso interno. A ideia era reinventar e compartilhar um novo padrão de design.

Compatibilidade (Navegadores)Bootstrap é compatível com as versões mais atuais dos navegadores.



CriaçãoFoi desenvolvido por 2 funcionários do – e no – Twitter (por isso o nome Twitter Bootstrap) como uma quadro de ferramenta interna. Após foi formado um grupo de desenvolvedores que viram a oportunidade de fazer algo mais robusto do que uma simples ferramenta de uso interno. A ideia era reinventar e compartilhar um novo padrão de design.

Compatibilidade (Navegadores)Bootstrap é compatível com as versões mais atuais dos navegadores.

OU SEJA...







Bootstrap – Pontos Positivos

DocumentaçãoSua documentação encontra-se disponível em português - graças a profissionais do Globo.com – em:

http://globocom.github.io/bootstrap/



DocumentaçãoSua documentação encontra-se disponível em português - graças a profissionais do Globo.com – em:

http://globocom.github.io/bootstrap/

Possui Responsive Design (A partir da versão 2.0)



CódigoFácil criação ou edição do código, contanto que se tenha conhecimento (mesmo que básio) em HTML 5, CSS e JavaScript (JQuery).


Bootstrap – Pontos “Negativos”

Padrão Visual Bootstrap








Bootstrap – Estrutura

Arquivos e Pastas


Bootstrap – Grids

Guias para distribuir os elementos da página em umFormato.

12 Colunas


Bootstrap – Layout Fixo e Fluído

Podemos trabalhar com layout fixo ou fluído. O layout fixo é configurado no CSS em pixel e o fluído em porcentagem.


Bootstrap – Layout Fixo e Fluído

Podemos trabalhar com layout fixo ou fluído. O layout fixo é configurado no CSS em pixel e o fluído em porcentagem.

Fixo Fluído


Bootstrap – ViewPort

A visualização com o layout menor que 768px.

Largura (tela) de 768px ou maior

A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon SousaA Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa

Bootstrap – ViewPort

A visualização com o layout menor que 768px.

Largura (tela) de 768px ou maior Largura (tela) menor que 768px


Bootstrap – Ícones

Os ícones no Bootstrap estão disponíveis em forma de sprite e são utilizados através da fonte glyphicons-halflings-regular.


Bootstrap – Ícones

Existem outras fontes de ícones, como por exemplo, a Font-Awesome. (http://fortawesome.github.io/Font-Awesome/icons/)


Bootstrap – Informações Relevantes

Segundo dados da consultoria Conversion, uso de aparelhos portáteis para acesso ao varejo eletrênico cresceu 200% no Brasil em um ano.




• Google anuncia priorizar sites orientados para celulares e tablets nos resultados orgânicos;





• As empresas brasileiras deverão reestruturar seus sites para contemplar esse crescente acesso via dispositivos móveis;






• 20% dos acessos a e-commerce são feitos por dispositivos móveis, porém só 10% concretizam a compra;







• O hábito do consumidor mudou e o celular é um dos principais canais de acesso à internet no Brasil;







• O hábito do consumidor mudou e o celular é um dos principais canais de acesso à internet no Brasil e 61% se mostram insatisfeitos com a página;

• A maioria dos sites não está preparada para gerar uma boa experiência com o consumidor.

Fonte: http://revistaw.com.br/blog/atualizacao-do-google-forca-lojas-virtuais-a-investirem-em-design-responsivo/Em10/10/2014


Bootstrap – E-Commerce ResponsivoPonto Frio

Home Menu Produtos - Home


Bootstrap – E-Commerce ResponsivoPonto Frio

Telefones e Celulares Smartphones Produto


Bootstrap – Download

Faça o download do Bootstrap versão 2.2.2 no link http://globocom.github.io/bootstrap/. Sugiro que faça o download da versão da Globo.com pois todo o site assim com a documentação estão traduzido para português.


Bootstrap – Download

Em contra partida, a versão da Globo.com encontra-se desatualizada se comparada a versão original do Bootstrap, que é a 3.2.


Bootstrap – Criando a index.html


Bootstrap – Estrutura HTML5


Bootstrap – Divisões e Classes

Independente da quantidade de colunas (grids) utilizadas, estas sempre serão dependente de uma linha (.row ou .row-fluid).

As classes span (.span4) define a quantidade de colunas que sua <div> terá.

Exemplo de layout fixo



Exemplo



Exemplo



Exemplo



Exemplo



Cada coluna do Bootstrap possui 70px de largura. Cada espaçamento entre essas colunas contem 30px de largura.



Cada coluna do Bootstrap possui 70px de largura. Cada espaçamento entre essas colunas contem 30px de largura.

Vamos fazer uma continha rápida?



Na primeira <div> foram utilizados 8 colunas (.span8).

Colunas = (8*70px=560px) | Espaços = (7*30=210px)Total = (560px+210px=770px)



Na primeira <div> foram utilizados 8 colunas (.span8).


Na segunda <div> foram utilizados 4 colunas (.span4).


SOMA GERAL = (770px+370px=1140px)



Lembra que o layout fixo não pode ultrapassar 940px?

Fixo



Acima de 940px, temos que fazer uso do layout fluído acrescentando o comando “-fluid” em nossas classes.



Exemplo


Bootstrap – Customização

Alguns exemplos padrão de customização do BootstrapLink: http://globocom.github.io/bootstrap/base-css.html








Bootstrap – Templates

Bootstrap Stage - bootstrapstage.com



Bootbundle - bootbundle.com



Bootswatch - bootswatch.com


Bootstrap – BibliografiaFontes

Bootstrap Globo.com - http://globocom.github.io/bootstrap/

Ponto Canal - https://www.youtube.com/channel/UCQjVM9M1rvPjiidoqTQ0z8g

SlideShare – Introdução ao Bootstrap, Desenvolvendo com Bootstrap e Interface Responsiva.

Revista W – http://www.revistaw.com.br


Bootstrap – Contatos Ramon Sousa

fb.com/ramonsousaa

twitter.com/rmn_sousa

linkedin.com/in/ramonsousa

plus.google.com/+RamonSousaWeb

“Pouco conhecimento faz com que as pessoas se sintam orgulhosas. Muito conhecimento, que se sintam mais humildes.”

Leonardo Da Vinci

Internet

A utilização do Bootstrap Para a Otimização de Páginas