Desenvolvimento Ágil com Twitter Bootstrap

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

3. REALIZAÇÃO

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

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

6. O QUE É BOOTSTRAP?
 “Uma estrutura de front-end elegante, intuitiva e poderosa para
o desenvolvimento web mais rápido e fácil.”

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

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

9. QUEM UTILIZA O BOOTSTRAP?

10. QUEM UTILIZA O BOOTSTRAP?
http://globocom.github.io/bootstrap/

11. “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.”

12. VERSÃO ATUAL 3.1.1 (31/03/2014)
http://getbootstrap.com/

13. PORQUE UTILIZAR O BOOTSTRAP?

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

17. ÓTIMA DOCUMENTAÇÃO

19. COMPONENTES FUNCIONAIS

21. OPEN-SOURCE

23. COMPATIBILIDADE ENTRE NAVEGADORES

25. COMO FUNCIONA O BOOTSTRAP?

26. ESTRUTURA DE ARQUIVOS

27. container / container-fluid
SISTEMA DE GRID
row / row-fluid
col-lg

29. COMPONENTES HTML

30. TABLE

31. FORM

32. BUTTON

33. IMAGE

34. COMPONENTES BOOTSTRAP

35. GLYPHICON

36. DROPDOWN

37. NAVBAR

38. NAVBAR

39. LABEL

40. ALERT

41. PANEL

42. COMPONENTES BOOTSTRAP JAVASCRIPT

43. MODAL

44. TAB

45. TOOLTIP

46. COLLAPSE

47. CAROUSEL

48. DÚVIDAS?