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

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???

Flávio M. de Souza

flavio@inovup.com.br

(85) 8667-2972

CONTATO