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

586 visualizações

Publicada em

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

Publicada em: Tecnologia
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

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

×