48

Click here to load reader

Desenvolvimento Ágil com Twitter Bootstrap

Embed Size (px)

Citation preview

Page 1: Desenvolvimento Ágil com Twitter Bootstrap

DESENVOLVIMENTO ÁGIL 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 SouzaFaculdade de Tecnologia do

Nordeste

Page 2: Desenvolvimento Ágil com Twitter Bootstrap
Page 3: Desenvolvimento Ágil com Twitter Bootstrap

REALIZAÇÃO

Page 4: Desenvolvimento Ágil 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 5: Desenvolvimento Ágil 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

Framework

Page 6: Desenvolvimento Ágil 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 7: Desenvolvimento Ágil 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 muitas bibliotecas para o desenvolvimento de interfaces e isso gerava muitas inconsistências e um nível elevado de manutenção.

Page 8: Desenvolvimento Ágil 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ódigo aberto

Em fevereiro de 2012 foi o projeto mais popular do GitHub

Page 9: Desenvolvimento Ágil com Twitter Bootstrap

QUEM UTILIZA O BOOTSTRAP?

Page 10: Desenvolvimento Ágil com Twitter Bootstrap

QUEM UTILIZA O BOOTSTRAP?

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

Page 11: Desenvolvimento Ágil com Twitter Bootstrap

“But when you start to see the same layout over, and over, and over again users…Your design looks like one of 6,000 other sites out there.”

Page 12: Desenvolvimento Ágil com Twitter Bootstrap

VERSÃO ATUAL 3.1.1 (31/03/2014)

http://getbootstrap.com/

Page 13: Desenvolvimento Ágil com Twitter Bootstrap

PORQUE UTILIZAR O BOOTSTRAP?

Page 14: Desenvolvimento Ágil 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 15: Desenvolvimento Ágil com Twitter Bootstrap
Page 16: Desenvolvimento Ágil com Twitter Bootstrap
Page 17: Desenvolvimento Ágil com Twitter Bootstrap

ÓTIMA DOCUMENTAÇÃO

Page 18: Desenvolvimento Ágil com Twitter Bootstrap
Page 19: Desenvolvimento Ágil com Twitter Bootstrap

COMPONENTES FUNCIONAIS

Page 20: Desenvolvimento Ágil com Twitter Bootstrap
Page 21: Desenvolvimento Ágil com Twitter Bootstrap

OPEN-SOURCE

Page 22: Desenvolvimento Ágil com Twitter Bootstrap
Page 23: Desenvolvimento Ágil com Twitter Bootstrap

COMPATIBILIDADE ENTRE NAVEGADORES

Page 24: Desenvolvimento Ágil com Twitter Bootstrap
Page 25: Desenvolvimento Ágil com Twitter Bootstrap

COMO FUNCIONA O BOOTSTRAP?

Page 26: Desenvolvimento Ágil com Twitter Bootstrap

ESTRUTURA DE ARQUIVOS

Page 27: Desenvolvimento Ágil com Twitter Bootstrap

container / container-fluid

SISTEMA DE GRID

row / row-fluid

col-lg

Page 28: Desenvolvimento Ágil com Twitter Bootstrap
Page 29: Desenvolvimento Ágil com Twitter Bootstrap

COMPONENTES HTML

Page 30: Desenvolvimento Ágil com Twitter Bootstrap

TABLE

Page 31: Desenvolvimento Ágil com Twitter Bootstrap

FORM

Page 32: Desenvolvimento Ágil com Twitter Bootstrap

BUTTON

Page 33: Desenvolvimento Ágil com Twitter Bootstrap

IMAGE

Page 34: Desenvolvimento Ágil com Twitter Bootstrap

COMPONENTES BOOTSTRAP

Page 35: Desenvolvimento Ágil com Twitter Bootstrap

GLYPHICON

Page 36: Desenvolvimento Ágil com Twitter Bootstrap

DROPDOWN

Page 37: Desenvolvimento Ágil com Twitter Bootstrap

NAVBAR

Page 38: Desenvolvimento Ágil com Twitter Bootstrap

NAVBAR

Page 39: Desenvolvimento Ágil com Twitter Bootstrap

LABEL

Page 40: Desenvolvimento Ágil com Twitter Bootstrap

ALERT

Page 41: Desenvolvimento Ágil com Twitter Bootstrap

PANEL

Page 42: Desenvolvimento Ágil com Twitter Bootstrap

COMPONENTES BOOTSTRAP JAVASCRIPT

Page 43: Desenvolvimento Ágil com Twitter Bootstrap

MODAL

Page 44: Desenvolvimento Ágil com Twitter Bootstrap

TAB

Page 45: Desenvolvimento Ágil com Twitter Bootstrap

TOOLTIP

Page 46: Desenvolvimento Ágil com Twitter Bootstrap

COLLAPSE

Page 47: Desenvolvimento Ágil com Twitter Bootstrap

CAROUSEL

Page 48: Desenvolvimento Ágil com Twitter Bootstrap

DÚVIDAS?