Your SlideShare is downloading. ×
  • Like
Keynote   por dentro do bootstrap
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Keynote por dentro do bootstrap

  • 1,997 views
Published

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 …

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.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,997
On SlideShare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
22
Comments
0
Likes
5

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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