Entendendo o
Alexandre Magno
http://alexandremagno.net
Wednesday, July 10, 2013
Quem sou eu?
Wednesday, July 10, 2013
Apaixonado por música
Wednesday, July 10, 2013
tenho uma banda
Wednesday, July 10, 2013
também sou apaixonado por Open Source...
Twitter Bootstrap em português
jQuery sliding
jQuery Destaque
WP-Agenda
https://g...
Style guide é onde tudo começa...
Definições dos elementos que compõe uma página, de forma independente
Wednesday, July 10...
Entendendo o
Framework de front-end rápido e intuitivo para um desenvolvimento web rápido e fácil
2
tags: Bootstrap, jQuer...
Por que rápido?
Framework de front-end rápido e intuitivo para um desenvolvimento web rápido e fácil
bootstrap-server
boot...
Por que intuitivo?
Framework de front-end rápido e intuitivo para um desenvolvimento web rápido e fácil
O HTML do Bootstra...
Bootstrap em fases
Criado em 2011
v1 - Desktop
v2 - Responsive
v3 - Mobile First!
Wednesday, July 10, 2013
Popularidade em 26 de Junho de 2013
52.115
16.802
fonte:
Github
Wednesday, July 10, 2013
Popularidade Integração com outros frameworks
Wednesday, July 10, 2013
Popularidade Integração com outros frameworks
Wednesday, July 10, 2013
Frameworks similares ao Bootstrap
http://foundation.com
Wednesday, July 10, 2013
Frameworks similares ao Bootstrap
http://skeleton.com
Wednesday, July 10, 2013
Frameworks similares ao Bootstrap
“Mark Otto”
Wednesday, July 10, 2013
Tecnologias que compõe o Bootstrap
Wednesday, July 10, 2013
Bootstrap inspirando novos templates
http://expo.getbootstrap.com
Com o mesmo HTML e CSS você tem vários templates para we...
Customizando turbinando o Bootstrap
Wednesday, July 10, 2013
Prototipar websites e apps com o jestrap
Wednesday, July 10, 2013
Bootstrapers sites que usam o Bootstrap
Grid formatado
Design limpo
Botões definidos
Formulário padrão
Wednesday, July 10, ...
Bootstrepes sites que não usam o Bootstrap
Grid formatado
Design limpo
Botões definidos
Responsive!
Wednesday, July 10, 2013
Bootstrepes sites que “ousam” com o Bootstrap
Modificação mais intensaWednesday, July 10, 2013
Bootstrapers ferramentas para o Bootstrap
Wednesday, July 10, 2013
Bootstrap agora é responsive
Criado em 2011
v1 - Desktop
v2 - Responsive
v3 - Mobile First!
Wednesday, July 10, 2013
Não se esqueça da metatag
SERÁ
Wednesday, July 10, 2013
Será só imaginação
Wednesday, July 10, 2013
a metatag viewport é realmente necessária?
Wednesday, July 10, 2013
Responsive no Bootstrap
Wednesday, July 10, 2013
Responsive no Bootstrap com Formulários
As classes do grid podem ser aplicadas
para diferentes layouts de formulários
Wedn...
Responsive no Bootstrap com Formulários
As classes do grid podem ser aplicadas
para diferentes layouts de formulários
Wedn...
Responsive no Bootstrap com Formulários
As classes do grid podem ser aplicadas
para diferentes layouts de formulários
Wedn...
Responsive no Bootstrap com Formulários
As classes do grid podem ser aplicadas
para diferentes layouts de formulários
Wedn...
Responsive no Bootstrap com Formulários
As classes do grid podem ser aplicadas
para diferentes layouts de formulários
Wedn...
Responsive no Bootstrap com Media Queries
Wednesday, July 10, 2013
Responsive no Bootstrap
Classes utilitárias
Wednesday, July 10, 2013
Vantagens filosofia Bootstrap
Atributos Data ao invés de Javascript declarativo
Extensões naturais do HTML e CSS
O Front-e...
desenvolvimento para o Bootstrap
Plugin Javascript
Tirando vantagem do Data api
Wednesday, July 10, 2013
desenvolvimento para o Bootstrap
Plugin Javascript
Animações por CSS3
Wednesday, July 10, 2013
desenvolvimento para o Bootstrap
Less
Use variáveis para gerar CSS customizados
controle
de z-index
por variáveis
Wednesda...
desenvolvimento para o Bootstrap
Less
Variação de cores através de funções
controle
de z-index
por variáveis
Wednesday, Ju...
Bootstrap de agora em diante
Criado em 2011
v1 - Desktop
v2 - Responsive
v3 - Mobile First!
Wednesday, July 10, 2013
Bootstrap 3.0 construído com Mobile First
Wednesday, July 10, 2013
Bootstrap 3.0 construído com Mobile First
Wednesday, July 10, 2013
Bootstrap 3.0 mas por que Mobile First?
A ergonomia do de um dispositivo móvel
nos leva a diferentes considerações sobre
u...
Estrutura dos arquivos
Wednesday, July 10, 2013
Building checando se está tudo nos conformes
Rodando o JSHINT, compilando LESS e compilando e minificando o Javascript
Wed...
Bootstrap na globo.com
Os desenvolvedores se reuniram
Precisamos
padronizar
os produtos!
Vamos construir
um framework!
Enq...
Bootstrap na globo.com
Várias tecnologias -> n front-ends?
Wednesday, July 10, 2013
Bootstrap na globo.com
Várias tecnologias -> 1 front-end?
Wednesday, July 10, 2013
Bootstrap na globo.com
Que joguem a primeira pedra
Usar o Bootstrap?
Wednesday, July 10, 2013
Bootstrap na globo.com
Nos grupos de discussão
Enquanto isso...
Wednesday, July 10, 2013
Bootstrap na globo.com
Somente
traduziram
e trocaram
o nome!
Wednesday, July 10, 2013
Bootstrap na globo.com
E Outros...
Wednesday, July 10, 2013
Bootstrap na globo.com
Opinião do @fat
Wednesday, July 10, 2013
Tradução primeira não-oficial recomendada pelo Bootstrap
Wednesday, July 10, 2013
Bootstrap na globo.com
Wednesday, July 10, 2013
Bootstrap na globo.com
Wednesday, July 10, 2013
Bootstrap na globo.com
Pull Requests aceitos no Bootstrap
Wednesday, July 10, 2013
Bootstrap na globo.com
Mande um pull-request
para gente ;-)
Wednesday, July 10, 2013
E vem aí
Bootstrap Mobile First
Wednesday, July 10, 2013
Perguntas?
Blog: blog.alexandremagno.net
Twitter: alexanmtz
github: github.com/alexanmtz
Wednesday, July 10, 2013
Upcoming SlideShare
Loading in...5
×

Keynote por dentro do bootstrap

2,144

Published on

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.

Transcript of "Keynote por dentro do bootstrap"

  1. 1. Entendendo o Alexandre Magno http://alexandremagno.net Wednesday, July 10, 2013
  2. 2. Quem sou eu? Wednesday, July 10, 2013
  3. 3. Apaixonado por música Wednesday, July 10, 2013
  4. 4. tenho uma banda Wednesday, July 10, 2013
  5. 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. 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. 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. 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. 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. 10. Bootstrap em fases Criado em 2011 v1 - Desktop v2 - Responsive v3 - Mobile First! Wednesday, July 10, 2013
  11. 11. Popularidade em 26 de Junho de 2013 52.115 16.802 fonte: Github Wednesday, July 10, 2013
  12. 12. Popularidade Integração com outros frameworks Wednesday, July 10, 2013
  13. 13. Popularidade Integração com outros frameworks Wednesday, July 10, 2013
  14. 14. Frameworks similares ao Bootstrap http://foundation.com Wednesday, July 10, 2013
  15. 15. Frameworks similares ao Bootstrap http://skeleton.com Wednesday, July 10, 2013
  16. 16. Frameworks similares ao Bootstrap “Mark Otto” Wednesday, July 10, 2013
  17. 17. Tecnologias que compõe o Bootstrap Wednesday, July 10, 2013
  18. 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. 19. Customizando turbinando o Bootstrap Wednesday, July 10, 2013
  20. 20. Prototipar websites e apps com o jestrap Wednesday, July 10, 2013
  21. 21. Bootstrapers sites que usam o Bootstrap Grid formatado Design limpo Botões definidos Formulário padrão Wednesday, July 10, 2013
  22. 22. Bootstrepes sites que não usam o Bootstrap Grid formatado Design limpo Botões definidos Responsive! Wednesday, July 10, 2013
  23. 23. Bootstrepes sites que “ousam” com o Bootstrap Modificação mais intensaWednesday, July 10, 2013
  24. 24. Bootstrapers ferramentas para o Bootstrap Wednesday, July 10, 2013
  25. 25. Bootstrap agora é responsive Criado em 2011 v1 - Desktop v2 - Responsive v3 - Mobile First! Wednesday, July 10, 2013
  26. 26. Não se esqueça da metatag SERÁ Wednesday, July 10, 2013
  27. 27. Será só imaginação Wednesday, July 10, 2013
  28. 28. a metatag viewport é realmente necessária? Wednesday, July 10, 2013
  29. 29. Responsive no Bootstrap Wednesday, July 10, 2013
  30. 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. 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. 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. 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. 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. 35. Responsive no Bootstrap com Media Queries Wednesday, July 10, 2013
  36. 36. Responsive no Bootstrap Classes utilitárias Wednesday, July 10, 2013
  37. 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. 38. desenvolvimento para o Bootstrap Plugin Javascript Tirando vantagem do Data api Wednesday, July 10, 2013
  39. 39. desenvolvimento para o Bootstrap Plugin Javascript Animações por CSS3 Wednesday, July 10, 2013
  40. 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. 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. 42. Bootstrap de agora em diante Criado em 2011 v1 - Desktop v2 - Responsive v3 - Mobile First! Wednesday, July 10, 2013
  43. 43. Bootstrap 3.0 construído com Mobile First Wednesday, July 10, 2013
  44. 44. Bootstrap 3.0 construído com Mobile First Wednesday, July 10, 2013
  45. 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. 46. Estrutura dos arquivos Wednesday, July 10, 2013
  47. 47. Building checando se está tudo nos conformes Rodando o JSHINT, compilando LESS e compilando e minificando o Javascript Wednesday, July 10, 2013
  48. 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. 49. Bootstrap na globo.com Várias tecnologias -> n front-ends? Wednesday, July 10, 2013
  50. 50. Bootstrap na globo.com Várias tecnologias -> 1 front-end? Wednesday, July 10, 2013
  51. 51. Bootstrap na globo.com Que joguem a primeira pedra Usar o Bootstrap? Wednesday, July 10, 2013
  52. 52. Bootstrap na globo.com Nos grupos de discussão Enquanto isso... Wednesday, July 10, 2013
  53. 53. Bootstrap na globo.com Somente traduziram e trocaram o nome! Wednesday, July 10, 2013
  54. 54. Bootstrap na globo.com E Outros... Wednesday, July 10, 2013
  55. 55. Bootstrap na globo.com Opinião do @fat Wednesday, July 10, 2013
  56. 56. Tradução primeira não-oficial recomendada pelo Bootstrap Wednesday, July 10, 2013
  57. 57. Bootstrap na globo.com Wednesday, July 10, 2013
  58. 58. Bootstrap na globo.com Wednesday, July 10, 2013
  59. 59. Bootstrap na globo.com Pull Requests aceitos no Bootstrap Wednesday, July 10, 2013
  60. 60. Bootstrap na globo.com Mande um pull-request para gente ;-) Wednesday, July 10, 2013
  61. 61. E vem aí Bootstrap Mobile First Wednesday, July 10, 2013
  62. 62. Perguntas? Blog: blog.alexandremagno.net Twitter: alexanmtz github: github.com/alexanmtz Wednesday, July 10, 2013
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×