Criação Web com Bootstrap & Material Design

por Daniel Brandão

Me apresentando!

Eu sou Daniel Brandão

Na Informática desde 2002.

Desenvolvedor Web desde 2005

Professor pelo SENAI (2011-2014),

pelo IFPB e UNIPÊ (2015)

Graduado em SPI e

Especialista em Aplicações Web

1 A Web do meu

tempo Voltando no tempo

“

“

“

“

“ A web é a evolução da comunicação. Nela há o que mais se aproxima da real democracia.

Um passeio pela

evolução

⊙1990 - Surgimento da Web ⊙1994 - os primeiros

Navegadores ⊙1998 - Padronização HTML

para diferentes navegadores ⊙2000 - Popularização dos

Padrões Web ⊙De lá pra cá...

2. A WEB DE HOJE Padrão é tudo.

Responsividade, Multiplataforma, Aplicações Dinâmicas

“ A chave da web de hoje é ser Responsivo e Multiplataforma”

Material Design

Material Design

O Material Design é uma espécie de guia para definir/redefinir o visual de aplicativos Feito pelo Google Adotado por aplicativos como o WhatsApp. Versão Lite própria para a web

Próprio para Web O MDL é compatível com todos os navegadores modernos: Google Chrome, Mozilla Firefox, Opera e o novo Microsoft Edge que acaba de chegar no Windows 10. E claro, o MDL é responsivo.

Características marcantes do

MDL

Componentes Inclui um rico conjunto de componentes, incluindo botões, campos de texto, dicas de ferramentas e muitos mais. Também incluem uma grade responsiva que aderem às novas diretrizes de design de material de adaptação de interface do usuário ..

Então MDL

substitui o

Bootstrap

Twitter?

Demonstração do Material Design

3. Principais Diferenças entre Bootstrap &

Material Design

3 Principais Aspectos

Filosofia O Bootstrap foi criado pelo Twitter para criar sites responsivos. O Google criou o MDL para padronizar na web o seu formato adotado no Android.

Layout Bootstrap tem um sistema de Grids avançado com offsets, quebra de colunas e mais. MDL tem grids mais primitivas que ajuda no começo, mas não suporta funcionalidades avançadas.

Design Bootstrap trás designs padrões, com vasta opções de temas. MDL trás cores vivas e animações. Monta a estrutura padrão para Apps, com opção de cores e a base (Tablet, Phone ou Desktop)

É Possível Uní-los em um só

Framework?

É Possível Uní-los em

um só Framework? Material Design Bootstrap

É Possível Uní-los em

um só Framework?

Material Design for Bootstrap Material Design Bootstrap

4. Unindo Bootstrap & Material Design

Material Design for Bootstrap

⊙A ideia é criar um tema baseado nas cores, formatos e animações do MD junto ao Bootstrap.

Material Design for Bootstrap

⊙Na prática, trata-se de uma adaptação do MDL ao Bootstrap.

AFINAL O que isso traz de bom para

WEB?

Minha vida De DESENVOLVEDOR

O Início do Projeto:

Passos da criação Wireframe Layout Front-

end

Com um framework,

os passos se simplificam

Grid Ambos trazem uma estrutura que define as “grades”, adotando padrões de acordo com os dispositivo.

Menus Criação fácil de menus laterais, superiores e submenus com poucas mudanças de código.

Rodapé Também já vem com opções personalisáveis em CSS para adaptar o rodapé do seu site/app de maneira prática.

Formulários Os frameworks em CSS

e HTML também já

trazem opções próprias

para formulários de

Login e outras

necessidades do tipo.

Botões Uma gama de botões

são oferecidas, de todos

os tipos e cores, dando

a opção de

personalização e

agilidade no projeto.

Ícones e tabelas Ícones para cada

situação, prontos e de

fácil utilização.

Deixando os projetos

mais leves e dinâmicos.

GRIDS

⊙

MENUS

⊙

RODAPÉ

⊙

FORMULÁRIOS

⊙

BOTÕES

⊙

TABELAS

⊙

⊙Bootstrap Studio

www.bootstrapstudio.io

Obrigado! Alguma pergunta?

Você pode me achar aqui:

@daniel85br

www.danielbrandao.com.br

falecom@danielbrandao.com.br