O documento apresenta o framework Bootstrap, descrevendo sua história, conceito, estrutura, grids, layouts fixo e fluido, viewport, ícones e informações sobre o crescente acesso a sites via dispositivos móveis. O Bootstrap foi desenvolvido para facilitar a criação de sites e aplicativos web, utilizando classes CSS e funções JavaScript. Foi criado por desenvolvedores do Twitter para padronizar o design interno e compartilhá-lo.
Utilização do Bootstrap para otimização de páginas
1.
2. 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
3. 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.
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
4. 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.
•Enquadra-se nos padrões
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
5. 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.
•Enquadra-se nos padrões
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
•Escrito em
6. 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.
•Enquadra-se nos padrões
•Escrito em
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
7. 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.
•Enquadra-se nos padrões
•Escrito em
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
8. Bootstrap – História e Apresentação
Criação
Foi 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.
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
9. Bootstrap – História e Apresentação
Criação
Foi 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...
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
10. Bootstrap – História e Apresentação
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
11. Bootstrap – História e Apresentação
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
12. Bootstrap – Pontos Positivos
Documentação
Sua documentação encontra-se disponível em português - graças a profissionais do
Globo.com – em:
http://globocom.github.io/bootstrap/
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
13. Bootstrap – Pontos Positivos
Documentação
Sua 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)
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
14. Bootstrap – Pontos Positivos
Código
Fá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).
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
15. Bootstrap – Pontos “Negativos”
Padrão Visual Bootstrap
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
16. Bootstrap – Pontos “Negativos”
Padrão Visual Bootstrap
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
17. Bootstrap – Pontos “Negativos”
Padrão Visual Bootstrap
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
18. Bootstrap – Estrutura
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
Arquivos e Pastas
19. Bootstrap – Grids
Guias para distribuir os elementos da página em um
Formato.
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
12 Colunas
20. 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.
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
21. 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
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
22. 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 Sousa
23. Bootstrap – ViewPort
A visualização com o layout menor que 768px.
Largura (tela) de 768px ou maior Largura (tela) menor que 768px
A Utilização do Bootstrap Para a Otimização de Páginas –– Por Ramon Sousa
24. 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.
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
25. Bootstrap – Ícones
Existem outras fontes de ícones, como por exemplo, a
Font-Awesome. (http://fortawesome.github.io/Font-Awesome/icons/)
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
26. 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.
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
27. 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
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
resultados orgânicos;
28. 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
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
resultados orgânicos;
• As empresas brasileiras deverão reestruturar seus sites para contemplar
esse crescente acesso via dispositivos móveis;
29. 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
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
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;
30. 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
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
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;
31. 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
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
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 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
32. Bootstrap – E-Commerce Responsivo
Ponto Frio
Home Menu Produtos - Home
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
33. Bootstrap – E-Commerce Responsivo
Ponto Frio
Telefones e Celulares Smartphones Produto
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
34. 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.
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
35. 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.
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
36. Bootstrap – Criando a index.html
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
37. Bootstrap – Estrutura HTML5
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
38. 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
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
39. Bootstrap – Divisões e Classes
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
Exemplo
40. Bootstrap – Divisões e Classes
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
Exemplo
41. Bootstrap – Divisões e Classes
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
Exemplo
42. Bootstrap – Divisões e Classes
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
Exemplo
43. Bootstrap – Divisões e Classes
Cada coluna do Bootstrap possui 70px de largura.
Cada espaçamento entre essas colunas contem 30px de
largura.
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
44. Bootstrap – Divisões e Classes
Cada coluna do Bootstrap possui 70px de largura.
Cada espaçamento entre essas colunas contem 30px de
largura.
Vamos fazer uma continha rápida?
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
45. Bootstrap – Divisões e Classes
Na primeira <div> foram utilizados 8 colunas (.span8).
Colunas = (8*70px=560px) | Espaços = (7*30=210px)
Total = (560px+210px=770px)
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
46. Bootstrap – Divisões e Classes
Na primeira <div> foram utilizados 8 colunas (.span8).
Colunas = (8*70px=560px) | Espaços = (7*30=210px)
Total = (560px+210px=770px)
Na segunda <div> foram utilizados 4 colunas (.span4).
Colunas = (4*70px=280px) | Espaços = (3*30=90px)
Total = (280px+90px=370px)
SOMA GERAL = (770px+370px=1140px)
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
47. Bootstrap – Divisões e Classes
Lembra que o layout fixo não pode ultrapassar 940px?
Fixo
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
48. Bootstrap – Divisões e Classes
Acima de 940px, temos que fazer uso do layout fluído
acrescentando o comando “-fluid” em nossas classes.
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
49. Bootstrap – Divisões e Classes
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
Exemplo
50. Bootstrap – Customização
Alguns exemplos padrão de customização do Bootstrap
Link: http://globocom.github.io/bootstrap/base-css.html
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
51. Bootstrap – Customização
Alguns exemplos padrão de customização do Bootstrap
Link: http://globocom.github.io/bootstrap/base-css.html
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
52. Bootstrap – Customização
Alguns exemplos padrão de customização do Bootstrap
Link: http://globocom.github.io/bootstrap/base-css.html
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
53. Bootstrap – Templates
Bootstrap Stage - bootstrapstage.com
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
54. Bootstrap – Templates
Bootbundle - bootbundle.com
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
55. Bootstrap – Templates
Bootswatch - bootswatch.com
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
56. Bootstrap – Bibliografia
Fontes
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
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
57. 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
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
Notes de l'éditeur
GRID 960 + Responsive = Bootstrap
O Google, por sua vez, tem se demonstrado preocupado com sites em seus resultados de busca que não apresentam boa experiência para esses dispositivos. Segundo um porta-voz do gigante das buscas, 61% dos usuários se mostram insatisfeitos quando um site não abre corretamente em seu celular ou tablet. Por isso, vai atualizar o seu algoritmo para diferenciar em seus resultados páginas com melhor experiência em dispositivos móveis dos que aqueles que funcionam bem apenas em computadores.
A atualização do algoritmo será feita em um de seus critérios de rankeamento que avalia como as páginas são exibidas na tela do usuário. Segundo Raphael Simoni, analista de SEO (search engine optimization) da Conversion, antes o algoritmo do Google só fazia essa avaliação simulando a tela de um desktop. “Em poucos meses, esse algoritmo, chamado de PageLayout, deverá priorizar sites com boa experiência em celular e, por isso, será imprescindível que as empresas atualizem seus sites”, explica Simoni.
Segundo o especialista, para que os sites fiquem mais bem posicionados, é preciso que as páginas sejam desenvolvidas com os princípios conhecidos como “Mobile First”. “Ou seja, têm de ser pensados primeiramente na experiência do usuário a partir do celular e, depois, no desktop”, ressalta Simoni. “Sites desenvolvidos a partir desse princípio, também conhecidos como “responsivos”, costumam se adaptar a qualquer dispositivo e agora poderão ficar mais bem posicionados nos resultados do Google”, finaliza.
- See more at: http://revistaw.com.br/blog/atualizacao-do-google-forca-lojas-virtuais-a-investirem-em-design-responsivo/#sthash.4nCvlXVA.dpuf