Desenvolvimento Ágil com Twitter Bootstrap

1.665 visualizações

Publicada em

Desenvolvimento Ágil com Twitter Bootstrap

Publicada em: Software
  • Seja o primeiro a comentar

Desenvolvimento Ágil com Twitter Bootstrap

  1. 1. DESENVOLVIMENTO ÁGIL COM TWITTER BOOTSTRAP “Uma estrutura de front-end elegante, intuitiva e poderosa para o desenvolvimento web mais rápido e fácil.” Flávio M. de Souza Faculdade de Tecnologia do Nordeste
  2. 2. REALIZAÇÃO
  3. 3. O QUE É FRAMEWORK?  “é um conjunto de classes que colaboram para realizar uma responsabilidade para um domínio de um subsistema da aplicação.” Fayad e Schmidt
  4. 4. O QUE É FRAMEWORK?  é uma abstração que une códigos comuns entre vários projetos de software fornecendo uma funcionalidade genérica.  Serve para nos poupar o tempo de “REIVENTAR A RODA” diversas e diversas vezes para cada novo projeto. Aplicação A Aplicação B Aplicação C Frame work
  5. 5. O QUE É BOOTSTRAP?  “Uma estrutura de front-end elegante, intuitiva e poderosa para o desenvolvimento web mais rápido e fácil.”
  6. 6. HISTÓRIA DO BOOTSTRAP  Foi desenvolvido por Mark Otto e Jacob Thomton e hoje é mantido pelos demais desenvolvedores do Twitter assim como também por colaboradores espalhados pelo mundo todo.  As equipes de desenvolvimento do Twitter utilizavam muitas bibliotecas para o desenvolvimento de interfaces e isso gerava muitas inconsistências e um nível elevado de manutenção.
  7. 7. HISTÓRIA DO BOOTSTRAP  O primeiro contato do Bootstrap com o público aconteceu em um evento da empresa chamado Hackweek que aconteceu entre 22 a 29 de outubro de 2010.  O projeto começou como interno e com o tempo teve-se a visão de documentar e compartilhar essa nova biblioteca.  Em agosto de 2011 foi lançado o Twitter Bootstrap como código aberto  Em fevereiro de 2012 foi o projeto mais popular do GitHub
  8. 8. QUEM UTILIZA O BOOTSTRAP?
  9. 9. QUEM UTILIZA O BOOTSTRAP? http://globocom.github.io/bootstrap/
  10. 10. “But when you start to see the same layout over, and over, and over again users … Your design looks like one of 6,000 other sites out there.”
  11. 11. VERSÃO ATUAL 3.1.1 (31/03/2014) http://getbootstrap.com/
  12. 12. PORQUE UTILIZAR O BOOTSTRAP?
  13. 13.  O termo surgiu em 2010 quando o Ethan Marcotte (Web Design e Desenvolvedor) pensando em melhorar a sua experiência escreveu para o blog A List Apart o artigo RESPONSIVE WEB DESIGN.  No artigo Ethan apresenta Christopher Wren um arquiteto inglês que certa vez disse que arquitetura é uma arte que “objetiva a eternidade”, diferentemente da web que o que se é projetado hoje, muito em breve já estará desatualizado. DESIGN RESPONSIVO
  14. 14. ÓTIMA DOCUMENTAÇÃO
  15. 15. COMPONENTES FUNCIONAIS
  16. 16. OPEN-SOURCE
  17. 17. COMPATIBILIDADE ENTRE NAVEGADORES
  18. 18. COMO FUNCIONA O BOOTSTRAP?
  19. 19. ESTRUTURA DE ARQUIVOS
  20. 20. container / container-fluid SISTEMA DE GRID row / row-fluid col-lg
  21. 21. COMPONENTES HTML
  22. 22. TABLE
  23. 23. FORM
  24. 24. BUTTON
  25. 25. IMAGE
  26. 26. COMPONENTES BOOTSTRAP
  27. 27. GLYPHICON
  28. 28. DROPDOWN
  29. 29. NAVBAR
  30. 30. NAVBAR
  31. 31. LABEL
  32. 32. ALERT
  33. 33. PANEL
  34. 34. COMPONENTES BOOTSTRAP JAVASCRIPT
  35. 35. MODAL
  36. 36. TAB
  37. 37. TOOLTIP
  38. 38. COLLAPSE
  39. 39. CAROUSEL
  40. 40. DÚVIDAS?

×