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

1.576 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
0 comentários
6 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
1.576
No SlideShare
0
A partir de incorporações
0
Número de incorporações
5
Ações
Compartilhamentos
0
Downloads
103
Comentários
0
Gostaram
6
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide
  • 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
  • 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

    ×