Upload
flavio-souza
View
206
Download
0
Embed Size (px)
DESCRIPTION
Nesta palestra, apresento o framework Twitter Bootstrap para o desenvolvimento ágil de layouts front-end...
Citation preview
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
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.
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
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
O QUE É BOOTSTRAP?
“Uma estrutura de front-end elegante, intuitiva e poderosa para
o desenvolvimento web mais rápido e fácil.”
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.
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
QUEM UTILIZA O BOOTSTRAP?
QUEM UTILIZA O BOOTSTRAP?
http://globocom.github.io/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 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í
. "
VERSÃO ATUAL 3.3.1 (13/11/2014)
http://getbootstrap.com/
PORQUE UTILIZAR O BOOTSTRAP?
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
Ó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???