USANDO A PROGRAMAÇÃO 
WEB PARA MOBILE COM 
TWITTER BOOTSTRAP 
“Uma estrutura de front-end elegante, intuitiva 
e poderosa ...
 Graduado em Análise e Desenvolvimento de Sistemas, vivencia esse submundo da 
programação desde 2008 tendo o seu primeir...
 “é um conjunto de classes que colaboram para realizar uma 
responsabilidade para um domínio de um subsistema da 
aplicaç...
 é uma abstração que une códigos comuns entre vários projetos 
de software fornecendo uma funcionalidade genérica. 
 Ser...
 “Uma estrutura de front-end elegante, intuitiva e poderosa para 
o desenvolvimento web mais rápido e fácil.” 
O QUE É BO...
 Foi desenvolvido por Mark Otto e Jacob Thomton e hoje é 
mantido pelos demais desenvolvedores do Twitter assim como 
tam...
 O primeiro contato do Bootstrap com o público aconteceu em 
um evento da empresa chamado Hackweek que aconteceu 
entre 2...
QUEM UTILIZA O BOOTSTRAP?
http://globocom.github.io/bootstrap/ 
QUEM UTILIZA O BOOTSTRAP?
“But when you start to see the same layout over, 
and over, and over again 
… 
Your design looks like one of 6,000 other s...
http://getbootstrap.com/ 
VERSÃO ATUAL 3.3.1 (13/11/2014)
PORQUE UTILIZAR O BOOTSTRAP?
 O termo surgiu em 2010 quando o Ethan Marcotte (Web Design 
e Desenvolvedor) pensando em melhorar a sua experiência 
esc...
ÓTIMA DOCUMENTAÇÃO
COMPONENTES FUNCIONAIS
OPEN-SOURCE
COMPATIBILIDADE ENTRE NAVEGADORES
COMO FUNCIONA O BOOTSTRAP?
ESTRUTURA DE ARQUIVOS
Containers 
container / container-fluid 
SISTEMA DE GRID 
Linhas 
row / row-fluid 
Colunas 
col-lg, col-md, col-sm, col-xs
COMPONENTES HTML
TABLE
FORM
BUTTON
IMAGE
COMPONENTES BOOTSTRAP
GLYPHICON
DROPDOWN
NAVBAR
PAGINATION
LABEL
ALERT
PANEL
COMPONENTES BOOTSTRAP JAVASCRIPT
MODAL
TAB
TOOLTIP
COLLAPSE
CAROUSEL
DÚVIDAS???
Flávio M. de Souza 
flavio@inovup.com.br 
(85) 8667-2972 
CONTATO
Usando a programação web para mobile com Twitter Bootstrap
Usando a programação web para mobile com Twitter Bootstrap
Usando a programação web para mobile com Twitter Bootstrap
Usando a programação web para mobile com Twitter Bootstrap
Usando a programação web para mobile com Twitter Bootstrap
Usando a programação web para mobile com Twitter Bootstrap
Usando a programação web para mobile com Twitter Bootstrap
Usando a programação web para mobile com Twitter Bootstrap
Próximos SlideShares
Carregando em…5
×

Usando a programação web para mobile com Twitter Bootstrap

526 visualizações

Publicada em

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

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
526
No SlideShare
0
A partir de incorporações
0
Número de incorporações
16
Ações
Compartilhamentos
0
Downloads
26
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Usando a programação web para mobile com Twitter Bootstrap

  1. 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. 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. 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. 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. 5.  “Uma estrutura de front-end elegante, intuitiva e poderosa para o desenvolvimento web mais rápido e fácil.” O QUE É BOOTSTRAP?
  6. 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. 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. 8. QUEM UTILIZA O BOOTSTRAP?
  9. 9. http://globocom.github.io/bootstrap/ QUEM UTILIZA O BOOTSTRAP?
  10. 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. 11. http://getbootstrap.com/ VERSÃO ATUAL 3.3.1 (13/11/2014)
  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. Containers container / container-fluid SISTEMA DE GRID Linhas row / row-fluid Colunas col-lg, col-md, col-sm, col-xs
  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. PAGINATION
  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???
  41. 41. Flávio M. de Souza flavio@inovup.com.br (85) 8667-2972 CONTATO

×