advertisement

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

36 %
64 %
advertisement
Information about A utilização do Bootstrap Para a Otimização de Páginas
Internet

Published on October 13, 2014

Author: rmnsousa

Source: slideshare.net

Description

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

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

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. 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. 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. 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. 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. 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 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. 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. Bootstrap – História e Apresentação 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 – 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. 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. 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. Bootstrap – Pontos “Negativos” Padrão Visual Bootstrap 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 – Estrutura A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa Arquivos e Pastas

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Bootstrap – Criando a index.html A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa

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

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. Bootstrap – Divisões e Classes A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa Exemplo

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 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. 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. 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. 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. 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. 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. Bootstrap – Divisões e Classes A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa Exemplo

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. 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 – Templates Bootstrap Stage - bootstrapstage.com A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa

53. Bootstrap – Templates Bootbundle - bootbundle.com A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa

54. Bootstrap – Templates Bootswatch - bootswatch.com A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa

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. 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

Add a comment

Related presentations

Online rank tracker!

Online rank tracker!

October 20, 2014

Rank tracker is a tool that helps everyone to find the traffic which a particular ...

Facebook y sus avances

Facebook y sus avances

November 11, 2014

facebook y sus avances

Preguntas Investigación

Preguntas Investigación

November 11, 2014

es una presentación de preguntas interesantes

Cartes interactives, frises chronologiques, diaporamas, carte Google Streetview in...

Related pages

Guia do Google de Introdução à Otimização para ...

... indexar e classificar os conteúdos do seu site. A otimização para motores de ... para todas as páginas do ... para utilização em ...
Read more

Otimização de Fotos para utilização na Web - YouTube

Otimização de Fotos para utilização na Web ... Otimização de Imagem para site ... 5 passos pra melhorar as postagens do seu blog ...
Read more

Ajuda do Fireworks | Utilização do Fireworks com o ...

Utilização do Fireworks ... vários layouts de páginas da Web antes da ... de otimização para uma imagem do Fireworks inserida ...
Read more

Otimização de imagens para o SharePoint Online - Suporte ...

... e da utilização de ... e otimização de imagens para acelerar o ... de páginas ao utilizar a cache do blogue do SharePoint ...
Read more

Otimização de Imagem para site - YouTube

Otimização de Imagem para site ... Otimização de Fotos para utilização na Web ... Como Nomear Fotos do Blog Usando os Atributos Alt ...
Read more

O que é Otimizar - Otimização de Sites | Brasilmedia.com

... um trabalho de Otimização bem feito pode fazer um site estar nas primeiras páginas do Google e ... Otimização do Layout, para facilitar a ...
Read more

Criação e Otimização de Sites profissionais | H8ten |

Criação e otimização de sites ... A H8ten desenvolve soluções web para a ... Utilizamos ferramentas para a melhor utilização das redes sociais ...
Read more