usando a programação web para mobile com twitter bootstrap
DESCRIPTION
Nesta palestra, apresento o framework Twitter Bootstrap para o desenvolvimento ágil de layouts front-end...TRANSCRIPT
![Page 1: Usando a programação web para mobile com Twitter Bootstrap](https://reader034.vdocuments.mx/reader034/viewer/2022051212/559ba3df1a28abed148b4770/html5/thumbnails/1.jpg)
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
![Page 2: Usando a programação web para mobile com Twitter Bootstrap](https://reader034.vdocuments.mx/reader034/viewer/2022051212/559ba3df1a28abed148b4770/html5/thumbnails/2.jpg)
FLÁVIO M. SOUZA
Graduado em Análise e Desenvolvimento de Sistemas, vivencia esse submundo daprogramaçã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ívulosdiversos segmentos como mercantil, imobiliária, construtora, cartório, clínica odontológicaentre outros.
Atuamente é Sócio DIretor e Analista de Sistemas da empresa inGETI (Provedora de soluçõesdo SEBRAE/PI), trabalhando no projeto inSySALI (Sistema de gestão do SEBRAE para oprograma Agente Local de Inovação), Analista de Sistemas da empresa Aura Consultoria,trabalhando no projeto DiagonalWEB (Sistema comercial na plataforma WEB da construtoraDiagonal) e Professor da FATENE.
Possui conhecimento nas tecnologias JAVA SE, PHP, JAVASCRIPT, JQUERY, HTML, CSS,BOOTSTRAP, MYSQL e POSTGRESQL.
![Page 3: Usando a programação web para mobile com Twitter Bootstrap](https://reader034.vdocuments.mx/reader034/viewer/2022051212/559ba3df1a28abed148b4770/html5/thumbnails/3.jpg)
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
![Page 4: Usando a programação web para mobile com Twitter Bootstrap](https://reader034.vdocuments.mx/reader034/viewer/2022051212/559ba3df1a28abed148b4770/html5/thumbnails/4.jpg)
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
![Page 5: Usando a programação web para mobile com Twitter Bootstrap](https://reader034.vdocuments.mx/reader034/viewer/2022051212/559ba3df1a28abed148b4770/html5/thumbnails/5.jpg)
O QUE É BOOTSTRAP?
“Uma estrutura de front-end elegante, intuitiva e poderosa para
o desenvolvimento web mais rápido e fácil.”
![Page 6: Usando a programação web para mobile com Twitter Bootstrap](https://reader034.vdocuments.mx/reader034/viewer/2022051212/559ba3df1a28abed148b4770/html5/thumbnails/6.jpg)
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 muitasbibliotecas para o desenvolvimento de interfaces e isso gerava
muitas inconsistências e um nível elevado de manutenção.
![Page 7: Usando a programação web para mobile com Twitter Bootstrap](https://reader034.vdocuments.mx/reader034/viewer/2022051212/559ba3df1a28abed148b4770/html5/thumbnails/7.jpg)
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ódigoaberto
Em fevereiro de 2012 foi o projeto mais popular do GitHub
![Page 8: Usando a programação web para mobile com Twitter Bootstrap](https://reader034.vdocuments.mx/reader034/viewer/2022051212/559ba3df1a28abed148b4770/html5/thumbnails/8.jpg)
QUEM UTILIZA O BOOTSTRAP?
![Page 9: Usando a programação web para mobile com Twitter Bootstrap](https://reader034.vdocuments.mx/reader034/viewer/2022051212/559ba3df1a28abed148b4770/html5/thumbnails/9.jpg)
QUEM UTILIZA O BOOTSTRAP?
http://globocom.github.io/bootstrap/
![Page 10: Usando a programação web para mobile com Twitter Bootstrap](https://reader034.vdocuments.mx/reader034/viewer/2022051212/559ba3df1a28abed148b4770/html5/thumbnails/10.jpg)
“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í
. "
![Page 11: Usando a programação web para mobile com Twitter Bootstrap](https://reader034.vdocuments.mx/reader034/viewer/2022051212/559ba3df1a28abed148b4770/html5/thumbnails/11.jpg)
VERSÃO ATUAL 3.3.1 (13/11/2014)
http://getbootstrap.com/
![Page 12: Usando a programação web para mobile com Twitter Bootstrap](https://reader034.vdocuments.mx/reader034/viewer/2022051212/559ba3df1a28abed148b4770/html5/thumbnails/12.jpg)
PORQUE UTILIZAR O BOOTSTRAP?
![Page 13: Usando a programação web para mobile com Twitter Bootstrap](https://reader034.vdocuments.mx/reader034/viewer/2022051212/559ba3df1a28abed148b4770/html5/thumbnails/13.jpg)
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
![Page 14: Usando a programação web para mobile com Twitter Bootstrap](https://reader034.vdocuments.mx/reader034/viewer/2022051212/559ba3df1a28abed148b4770/html5/thumbnails/14.jpg)
![Page 15: Usando a programação web para mobile com Twitter Bootstrap](https://reader034.vdocuments.mx/reader034/viewer/2022051212/559ba3df1a28abed148b4770/html5/thumbnails/15.jpg)
![Page 16: Usando a programação web para mobile com Twitter Bootstrap](https://reader034.vdocuments.mx/reader034/viewer/2022051212/559ba3df1a28abed148b4770/html5/thumbnails/16.jpg)
ÓTIMA DOCUMENTAÇÃO
![Page 17: Usando a programação web para mobile com Twitter Bootstrap](https://reader034.vdocuments.mx/reader034/viewer/2022051212/559ba3df1a28abed148b4770/html5/thumbnails/17.jpg)
![Page 18: Usando a programação web para mobile com Twitter Bootstrap](https://reader034.vdocuments.mx/reader034/viewer/2022051212/559ba3df1a28abed148b4770/html5/thumbnails/18.jpg)
COMPONENTES FUNCIONAIS
![Page 19: Usando a programação web para mobile com Twitter Bootstrap](https://reader034.vdocuments.mx/reader034/viewer/2022051212/559ba3df1a28abed148b4770/html5/thumbnails/19.jpg)
![Page 20: Usando a programação web para mobile com Twitter Bootstrap](https://reader034.vdocuments.mx/reader034/viewer/2022051212/559ba3df1a28abed148b4770/html5/thumbnails/20.jpg)
OPEN-SOURCE
![Page 21: Usando a programação web para mobile com Twitter Bootstrap](https://reader034.vdocuments.mx/reader034/viewer/2022051212/559ba3df1a28abed148b4770/html5/thumbnails/21.jpg)
![Page 22: Usando a programação web para mobile com Twitter Bootstrap](https://reader034.vdocuments.mx/reader034/viewer/2022051212/559ba3df1a28abed148b4770/html5/thumbnails/22.jpg)
COMPATIBILIDADE ENTRE NAVEGADORES
![Page 23: Usando a programação web para mobile com Twitter Bootstrap](https://reader034.vdocuments.mx/reader034/viewer/2022051212/559ba3df1a28abed148b4770/html5/thumbnails/23.jpg)
![Page 24: Usando a programação web para mobile com Twitter Bootstrap](https://reader034.vdocuments.mx/reader034/viewer/2022051212/559ba3df1a28abed148b4770/html5/thumbnails/24.jpg)
COMO FUNCIONA O BOOTSTRAP?
![Page 25: Usando a programação web para mobile com Twitter Bootstrap](https://reader034.vdocuments.mx/reader034/viewer/2022051212/559ba3df1a28abed148b4770/html5/thumbnails/25.jpg)
ESTRUTURA DE ARQUIVOS
![Page 26: Usando a programação web para mobile com Twitter Bootstrap](https://reader034.vdocuments.mx/reader034/viewer/2022051212/559ba3df1a28abed148b4770/html5/thumbnails/26.jpg)
Containers
container / container-fluid
SISTEMA DE GRID
Linhas
row / row-fluid
Colunas
col-lg, col-md, col-sm, col-xs
![Page 27: Usando a programação web para mobile com Twitter Bootstrap](https://reader034.vdocuments.mx/reader034/viewer/2022051212/559ba3df1a28abed148b4770/html5/thumbnails/27.jpg)
![Page 28: Usando a programação web para mobile com Twitter Bootstrap](https://reader034.vdocuments.mx/reader034/viewer/2022051212/559ba3df1a28abed148b4770/html5/thumbnails/28.jpg)
![Page 29: Usando a programação web para mobile com Twitter Bootstrap](https://reader034.vdocuments.mx/reader034/viewer/2022051212/559ba3df1a28abed148b4770/html5/thumbnails/29.jpg)
COMPONENTES HTML
![Page 30: Usando a programação web para mobile com Twitter Bootstrap](https://reader034.vdocuments.mx/reader034/viewer/2022051212/559ba3df1a28abed148b4770/html5/thumbnails/30.jpg)
TABLE
![Page 31: Usando a programação web para mobile com Twitter Bootstrap](https://reader034.vdocuments.mx/reader034/viewer/2022051212/559ba3df1a28abed148b4770/html5/thumbnails/31.jpg)
FORM
![Page 32: Usando a programação web para mobile com Twitter Bootstrap](https://reader034.vdocuments.mx/reader034/viewer/2022051212/559ba3df1a28abed148b4770/html5/thumbnails/32.jpg)
BUTTON
![Page 33: Usando a programação web para mobile com Twitter Bootstrap](https://reader034.vdocuments.mx/reader034/viewer/2022051212/559ba3df1a28abed148b4770/html5/thumbnails/33.jpg)
IMAGE
![Page 34: Usando a programação web para mobile com Twitter Bootstrap](https://reader034.vdocuments.mx/reader034/viewer/2022051212/559ba3df1a28abed148b4770/html5/thumbnails/34.jpg)
COMPONENTES BOOTSTRAP
![Page 35: Usando a programação web para mobile com Twitter Bootstrap](https://reader034.vdocuments.mx/reader034/viewer/2022051212/559ba3df1a28abed148b4770/html5/thumbnails/35.jpg)
GLYPHICON
![Page 36: Usando a programação web para mobile com Twitter Bootstrap](https://reader034.vdocuments.mx/reader034/viewer/2022051212/559ba3df1a28abed148b4770/html5/thumbnails/36.jpg)
DROPDOWN
![Page 37: Usando a programação web para mobile com Twitter Bootstrap](https://reader034.vdocuments.mx/reader034/viewer/2022051212/559ba3df1a28abed148b4770/html5/thumbnails/37.jpg)
NAVBAR
![Page 38: Usando a programação web para mobile com Twitter Bootstrap](https://reader034.vdocuments.mx/reader034/viewer/2022051212/559ba3df1a28abed148b4770/html5/thumbnails/38.jpg)
PAGINATION
![Page 39: Usando a programação web para mobile com Twitter Bootstrap](https://reader034.vdocuments.mx/reader034/viewer/2022051212/559ba3df1a28abed148b4770/html5/thumbnails/39.jpg)
LABEL
![Page 40: Usando a programação web para mobile com Twitter Bootstrap](https://reader034.vdocuments.mx/reader034/viewer/2022051212/559ba3df1a28abed148b4770/html5/thumbnails/40.jpg)
ALERT
![Page 41: Usando a programação web para mobile com Twitter Bootstrap](https://reader034.vdocuments.mx/reader034/viewer/2022051212/559ba3df1a28abed148b4770/html5/thumbnails/41.jpg)
PANEL
![Page 42: Usando a programação web para mobile com Twitter Bootstrap](https://reader034.vdocuments.mx/reader034/viewer/2022051212/559ba3df1a28abed148b4770/html5/thumbnails/42.jpg)
COMPONENTES BOOTSTRAP JAVASCRIPT
![Page 43: Usando a programação web para mobile com Twitter Bootstrap](https://reader034.vdocuments.mx/reader034/viewer/2022051212/559ba3df1a28abed148b4770/html5/thumbnails/43.jpg)
MODAL
![Page 44: Usando a programação web para mobile com Twitter Bootstrap](https://reader034.vdocuments.mx/reader034/viewer/2022051212/559ba3df1a28abed148b4770/html5/thumbnails/44.jpg)
TAB
![Page 45: Usando a programação web para mobile com Twitter Bootstrap](https://reader034.vdocuments.mx/reader034/viewer/2022051212/559ba3df1a28abed148b4770/html5/thumbnails/45.jpg)
TOOLTIP
![Page 46: Usando a programação web para mobile com Twitter Bootstrap](https://reader034.vdocuments.mx/reader034/viewer/2022051212/559ba3df1a28abed148b4770/html5/thumbnails/46.jpg)
COLLAPSE
![Page 47: Usando a programação web para mobile com Twitter Bootstrap](https://reader034.vdocuments.mx/reader034/viewer/2022051212/559ba3df1a28abed148b4770/html5/thumbnails/47.jpg)
CAROUSEL
![Page 48: Usando a programação web para mobile com Twitter Bootstrap](https://reader034.vdocuments.mx/reader034/viewer/2022051212/559ba3df1a28abed148b4770/html5/thumbnails/48.jpg)
DÚVIDAS???