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

1.633 visualizações

Publicada em

Apresentação do Framework Twitter Bootstrap e algumas de suas funcionalidades.

Download dos arquivos utilizados: http://migre.me/mg2Gn

Publicada em: Internet
  • Seja o primeiro a comentar

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

  1. 1. 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
  2. 2. 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
  3. 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. •Enquadra-se nos padrões A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
  4. 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 •Escrito em
  5. 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 •Escrito em A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
  6. 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. 7. 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
  8. 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. OU SEJA... A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
  9. 9. Bootstrap – História e Apresentação A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
  10. 10. Bootstrap – História e Apresentação A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
  11. 11. 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
  12. 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/ 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
  13. 13. 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
  14. 14. Bootstrap – Pontos “Negativos” Padrão Visual Bootstrap A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
  15. 15. Bootstrap – Pontos “Negativos” Padrão Visual Bootstrap A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
  16. 16. Bootstrap – Pontos “Negativos” Padrão Visual Bootstrap A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
  17. 17. Bootstrap – Estrutura A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa Arquivos e Pastas
  18. 18. 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
  19. 19. 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
  20. 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. Fixo Fluído A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
  21. 21. 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
  22. 22. 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
  23. 23. 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
  24. 24. 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
  25. 25. 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
  26. 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. • 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;
  27. 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; • As empresas brasileiras deverão reestruturar seus sites para contemplar esse crescente acesso via dispositivos móveis;
  28. 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; • 20% dos acessos a e-commerce são feitos por dispositivos móveis, porém só 10% concretizam a compra;
  29. 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; • O hábito do consumidor mudou e o celular é um dos principais canais de acesso à internet no Brasil;
  30. 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 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
  31. 31. 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
  32. 32. 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
  33. 33. 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
  34. 34. 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
  35. 35. Bootstrap – Criando a index.html A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
  36. 36. Bootstrap – Estrutura HTML5 A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
  37. 37. 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
  38. 38. Bootstrap – Divisões e Classes A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa Exemplo
  39. 39. Bootstrap – Divisões e Classes A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa Exemplo
  40. 40. Bootstrap – Divisões e Classes A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa Exemplo
  41. 41. Bootstrap – Divisões e Classes A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa Exemplo
  42. 42. 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
  43. 43. 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
  44. 44. 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
  45. 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) 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
  46. 46. 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
  47. 47. 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
  48. 48. Bootstrap – Divisões e Classes A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa Exemplo
  49. 49. 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
  50. 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. 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. 52. Bootstrap – Templates Bootstrap Stage - bootstrapstage.com A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
  53. 53. Bootstrap – Templates Bootbundle - bootbundle.com A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
  54. 54. Bootstrap – Templates Bootswatch - bootswatch.com A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
  55. 55. 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
  56. 56. 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

×