Slides da palestra apresentada na SEMAC 2015 - Semana da Computação em João Pessoa - PB

1. Criação Web com
Bootstrap &
Material Design
por Daniel Brandão

2. 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

3. 1
A Web do meu
tempo
Voltando no tempo

4. “

5. “

6. “

7. “

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

9. 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á...

10. 2. A WEB DE HOJE
Padrão é tudo.
Responsividade, Multiplataforma, Aplicações Dinâmicas

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

12. Material Design

13. 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

14. 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 ..

15. Então MDL
substitui o
Bootstrap
Twitter?

16. Demonstração do Material Design

17. 3. Principais Diferenças
entre Bootstrap &
Material Design

18. 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)

19. É Possível Uní-los
em um só
Framework?

20. É Possível
Uní-los em
um só
Framework?
Material Design Bootstrap

21. É Possível
Uní-los em
um só
Framework?
Material Design
for Bootstrap
Material Design Bootstrap

22. 4. Unindo Bootstrap
& Material Design

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

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

25. AFINALO que isso traz de bom para
WEB?
Minha vidaDe DESENVOLVEDOR

26. O Início do
Projeto:
Passos da
criação Wireframe Layout
Front-
end

27. 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.

28. GRIDS
⊙

29. MENUS
⊙

30. RODAPÉ
⊙

31. FORMULÁRIOS
⊙

32. BOTÕES
⊙

33. TABELAS
⊙

34. ⊙Bootstrap Studio
www.bootstrapstudio.io

35. Obrigado!
Alguma pergunta?
Você pode me achar aqui:
@daniel85br
www.danielbrandao.com.br
falecom@danielbrandao.com.br