Nesta palestra, apresento o framework Twitter Bootstrap para o desenvolvimento ágil de layouts front-end...

1. USANDO A PROGRAMAÇÃO
WEB PARA MOBILE 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.  Graduado em Análise e Desenvolvimento de Sistemas, vivencia esse submundo da
programação desde 2008 tendo o seu primeiro contato através da linguagem JAVA.
 Seu Know-how é em automação de processos de empresas, tendo em seu currívulos
diversos segmentos como mercantil, imobiliária, construtora, cartório, clínica odontológica
entre outros.
 Atuamente é Sócio DIretor e Analista de Sistemas da empresa inGETI (Provedora de soluções
do SEBRAE/PI), trabalhando no projeto inSySALI (Sistema de gestão do SEBRAE para o
programa Agente Local de Inovação), Analista de Sistemas da empresa Aura Consultoria,
trabalhando no projeto DiagonalWEB (Sistema comercial na plataforma WEB da construtora
Diagonal) e Professor da FATENE.
 Possui conhecimento nas tecnologias JAVA SE, PHP, JAVASCRIPT, JQUERY, HTML, CSS,
BOOTSTRAP, MYSQL e POSTGRESQL.
FLÁVIO M. SOUZA

3.  “é um conjunto de classes que colaboram para realizar uma
responsabilidade para um domínio de um subsistema da
aplicação.”
O QUE É FRAMEWORK?
Fayad e Schmidt

4.  é 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.
O QUE É FRAMEWORK?
Aplicação
A
Aplicação
B
Frame
work
Aplicação
C

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

6.  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.
HISTÓRIA DO BOOTSTRAP

7.  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
HISTÓRIA DO BOOTSTRAP

8. QUEM UTILIZA O BOOTSTRAP?

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

10. “But when you start to see the same layout over,
and over, and over again
…
Your design looks like one of 6,000 other sites
out there.”
"Mas quando você começa a ver o mesmo
layout mais, e mais , e mais uma vez
...
Seu design é um dos 6.000 outros sites por aí
. "

11. http://getbootstrap.com/
VERSÃO ATUAL 3.3.1 (13/11/2014)

12. PORQUE UTILIZAR O BOOTSTRAP?

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

16. ÓTIMA DOCUMENTAÇÃO

18. COMPONENTES FUNCIONAIS

20. OPEN-SOURCE

22. COMPATIBILIDADE ENTRE NAVEGADORES

24. COMO FUNCIONA O BOOTSTRAP?

25. ESTRUTURA DE ARQUIVOS

26. Containers
container / container-fluid
SISTEMA DE GRID
Linhas
row / row-fluid
Colunas
col-lg, col-md, col-sm, col-xs

29. COMPONENTES HTML

30. TABLE

31. FORM

32. BUTTON

33. IMAGE

34. COMPONENTES BOOTSTRAP

35. GLYPHICON

36. DROPDOWN

37. NAVBAR

38. PAGINATION

39. LABEL

40. ALERT

41. PANEL

42. COMPONENTES BOOTSTRAP JAVASCRIPT

43. MODAL

44. TAB

45. TOOLTIP

46. COLLAPSE

47. CAROUSEL

48. DÚVIDAS???

49. Flávio M. de Souza
flavio@inovup.com.br
(85) 8667-2972
CONTATO