O Bootstrap se tornou um Framework de Front-end muito utilizado nas aplicações atualmente. Não é a toa que ele é um dos projetos com mais forks no Github. Nesta palestra você vai entender a fundo sua estrutura, construída com o Node.js e o projeto que serve os downloads personalizados, o Bootstrap server, de modo que você será capaz de entender a fundo como ele foi estruturado, além de ficar sabendo o que vem aí com o Bootstrap 3.

1. Entendendo o
Alexandre Magno
http://alexandremagno.net
Wednesday, July 10, 2013

2. Quem sou eu?
Wednesday, July 10, 2013

3. Apaixonado por música
Wednesday, July 10, 2013

4. tenho uma banda
Wednesday, July 10, 2013

5. também sou apaixonado por Open Source...
Twitter Bootstrap em português
jQuery sliding
jQuery Destaque
WP-Agenda
https://github.com/alexanmtz/bootstrap
http://www.github.com/alexanmtz
Wednesday, July 10, 2013

6. Style guide é onde tudo começa...
Definições dos elementos que compõe uma página, de forma independente
Wednesday, July 10, 2013

7. Entendendo o
Framework de front-end rápido e intuitivo para um desenvolvimento web rápido e fácil
2
tags: Bootstrap, jQuery, HTML5, Less, Node.js, CSS3, Responsive, Styleguide
Docs
HTML5
CSS3
4 Node.js
3
6
7
8
Style Guide
5 Jquery
Responsive
Customização
Wednesday, July 10, 2013

8. Por que rápido?
Framework de front-end rápido e intuitivo para um desenvolvimento web rápido e fácil
bootstrap-server
bootstrap-min.css
bootstrap-min.js
26KB css
8.9KB js
Wednesday, July 10, 2013

9. Por que intuitivo?
Framework de front-end rápido e intuitivo para um desenvolvimento web rápido e fácil
O HTML do Bootstrap é padronizado e bastante declarativo
Wednesday, July 10, 2013

10. Bootstrap em fases
Criado em 2011
v1 - Desktop
v2 - Responsive
v3 - Mobile First!
Wednesday, July 10, 2013

11. Popularidade em 26 de Junho de 2013
52.115
16.802
fonte:
Github
Wednesday, July 10, 2013

12. Popularidade Integração com outros frameworks
Wednesday, July 10, 2013

13. Popularidade Integração com outros frameworks
Wednesday, July 10, 2013

14. Frameworks similares ao Bootstrap
http://foundation.com
Wednesday, July 10, 2013

15. Frameworks similares ao Bootstrap
http://skeleton.com
Wednesday, July 10, 2013

16. Frameworks similares ao Bootstrap
“Mark Otto”
Wednesday, July 10, 2013

17. Tecnologias que compõe o Bootstrap
Wednesday, July 10, 2013

18. Bootstrap inspirando novos templates
http://expo.getbootstrap.com
Com o mesmo HTML e CSS você tem vários templates para websites e apps
Wednesday, July 10, 2013

19. Customizando turbinando o Bootstrap
Wednesday, July 10, 2013

20. Prototipar websites e apps com o jestrap
Wednesday, July 10, 2013

21. Bootstrapers sites que usam o Bootstrap
Grid formatado
Design limpo
Botões definidos
Formulário padrão
Wednesday, July 10, 2013

22. Bootstrepes sites que não usam o Bootstrap
Grid formatado
Design limpo
Botões definidos
Responsive!
Wednesday, July 10, 2013

23. Bootstrepes sites que “ousam” com o Bootstrap
Modificação mais intensaWednesday, July 10, 2013

24. Bootstrapers ferramentas para o Bootstrap
Wednesday, July 10, 2013

25. Bootstrap agora é responsive
Criado em 2011
v1 - Desktop
v2 - Responsive
v3 - Mobile First!
Wednesday, July 10, 2013

26. Não se esqueça da metatag
SERÁ
Wednesday, July 10, 2013

27. Será só imaginação
Wednesday, July 10, 2013

28. a metatag viewport é realmente necessária?
Wednesday, July 10, 2013

29. Responsive no Bootstrap
Wednesday, July 10, 2013

30. Responsive no Bootstrap com Formulários
As classes do grid podem ser aplicadas
para diferentes layouts de formulários
Wednesday, July 10, 2013

31. Responsive no Bootstrap com Formulários
As classes do grid podem ser aplicadas
para diferentes layouts de formulários
Wednesday, July 10, 2013

32. Responsive no Bootstrap com Formulários
As classes do grid podem ser aplicadas
para diferentes layouts de formulários
Wednesday, July 10, 2013

33. Responsive no Bootstrap com Formulários
As classes do grid podem ser aplicadas
para diferentes layouts de formulários
Wednesday, July 10, 2013

34. Responsive no Bootstrap com Formulários
As classes do grid podem ser aplicadas
para diferentes layouts de formulários
Wednesday, July 10, 2013

35. Responsive no Bootstrap com Media Queries
Wednesday, July 10, 2013

36. Responsive no Bootstrap
Classes utilitárias
Wednesday, July 10, 2013

37. Vantagens filosofia Bootstrap
Atributos Data ao invés de Javascript declarativo
Extensões naturais do HTML e CSS
O Front-end é um produto
Animações por CSS3
ex: atributo placeholder introduzido no HTML5
ex: <body data-spy=”scroll” data-target=”.bs-docs-sidebar”>
1
2
3
4
Wednesday, July 10, 2013

38. desenvolvimento para o Bootstrap
Plugin Javascript
Tirando vantagem do Data api
Wednesday, July 10, 2013

39. desenvolvimento para o Bootstrap
Plugin Javascript
Animações por CSS3
Wednesday, July 10, 2013

40. desenvolvimento para o Bootstrap
Less
Use variáveis para gerar CSS customizados
controle
de z-index
por variáveis
Wednesday, July 10, 2013

41. desenvolvimento para o Bootstrap
Less
Variação de cores através de funções
controle
de z-index
por variáveis
Wednesday, July 10, 2013

42. Bootstrap de agora em diante
Criado em 2011
v1 - Desktop
v2 - Responsive
v3 - Mobile First!
Wednesday, July 10, 2013

43. Bootstrap 3.0 construído com Mobile First
Wednesday, July 10, 2013

44. Bootstrap 3.0 construído com Mobile First
Wednesday, July 10, 2013

45. Bootstrap 3.0 mas por que Mobile First?
A ergonomia do de um dispositivo móvel
nos leva a diferentes considerações sobre
usabilidade
Wednesday, July 10, 2013

46. Estrutura dos arquivos
Wednesday, July 10, 2013

47. Building checando se está tudo nos conformes
Rodando o JSHINT, compilando LESS e compilando e minificando o Javascript
Wednesday, July 10, 2013

48. Bootstrap na globo.com
Os desenvolvedores se reuniram
Precisamos
padronizar
os produtos!
Vamos construir
um framework!
Enquanto isto na Globo.com
Wednesday, July 10, 2013

49. Bootstrap na globo.com
Várias tecnologias -> n front-ends?
Wednesday, July 10, 2013

50. Bootstrap na globo.com
Várias tecnologias -> 1 front-end?
Wednesday, July 10, 2013

51. Bootstrap na globo.com
Que joguem a primeira pedra
Usar o Bootstrap?
Wednesday, July 10, 2013

52. Bootstrap na globo.com
Nos grupos de discussão
Enquanto isso...
Wednesday, July 10, 2013

53. Bootstrap na globo.com
Somente
traduziram
e trocaram
o nome!
Wednesday, July 10, 2013

54. Bootstrap na globo.com
E Outros...
Wednesday, July 10, 2013

55. Bootstrap na globo.com
Opinião do @fat
Wednesday, July 10, 2013

56. Tradução primeira não-oficial recomendada pelo Bootstrap
Wednesday, July 10, 2013

57. Bootstrap na globo.com
Wednesday, July 10, 2013

58. Bootstrap na globo.com
Wednesday, July 10, 2013

59. Bootstrap na globo.com
Pull Requests aceitos no Bootstrap
Wednesday, July 10, 2013

60. Bootstrap na globo.com
Mande um pull-request
para gente ;-)
Wednesday, July 10, 2013

61. E vem aí
Bootstrap Mobile First
Wednesday, July 10, 2013

62. Perguntas?
Blog: blog.alexandremagno.net
Twitter: alexanmtz
github: github.com/alexanmtz
Wednesday, July 10, 2013