49
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

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

Embed Size (px)

DESCRIPTION

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

Citation preview

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

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

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

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

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

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

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

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

QUEM UTILIZA O BOOTSTRAP?

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

QUEM UTILIZA O BOOTSTRAP?

http://globocom.github.io/bootstrap/

Page 10: Usando a programação web para mobile com Twitter 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í

. "

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

VERSÃO ATUAL 3.3.1 (13/11/2014)

http://getbootstrap.com/

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

PORQUE UTILIZAR O BOOTSTRAP?

Page 13: Usando a programação web para mobile com Twitter 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

Page 14: Usando a programação web para mobile com Twitter Bootstrap
Page 15: Usando a programação web para mobile com Twitter Bootstrap
Page 16: Usando a programação web para mobile com Twitter Bootstrap

ÓTIMA DOCUMENTAÇÃO

Page 17: Usando a programação web para mobile com Twitter Bootstrap
Page 18: Usando a programação web para mobile com Twitter Bootstrap

COMPONENTES FUNCIONAIS

Page 19: Usando a programação web para mobile com Twitter Bootstrap
Page 20: Usando a programação web para mobile com Twitter Bootstrap

OPEN-SOURCE

Page 21: Usando a programação web para mobile com Twitter Bootstrap
Page 22: Usando a programação web para mobile com Twitter Bootstrap

COMPATIBILIDADE ENTRE NAVEGADORES

Page 23: Usando a programação web para mobile com Twitter Bootstrap
Page 24: Usando a programação web para mobile com Twitter Bootstrap

COMO FUNCIONA O BOOTSTRAP?

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

ESTRUTURA DE ARQUIVOS

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

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
Page 28: Usando a programação web para mobile com Twitter Bootstrap
Page 29: Usando a programação web para mobile com Twitter Bootstrap

COMPONENTES HTML

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

TABLE

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

FORM

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

BUTTON

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

IMAGE

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

COMPONENTES BOOTSTRAP

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

GLYPHICON

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

DROPDOWN

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

NAVBAR

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

PAGINATION

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

LABEL

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

ALERT

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

PANEL

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

COMPONENTES BOOTSTRAP JAVASCRIPT

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

MODAL

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

TAB

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

TOOLTIP

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

COLLAPSE

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

CAROUSEL

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

DÚVIDAS???

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

Flávio M. de Souza

[email protected]

(85) 8667-2972

CONTATO