Palestra apresentada sobre Frameworks Web, como Material Design e Bootstrap. Ferramentas essenciais para um bom desenvolvimento de sistemas e sites web.

1. Criação Web com
Frameworks
Front-end
por Daniel Brandão

2. Daniel Brandão
 Graduação e Pós-graduação em
Desenvolvimento Web
 Atuo em Informática desde 2003.
 Desenvolvedor Web desde 2006
 Professor pelo SENAI (2011-2014)
 Faculdade AVEC(2013)
 IFPB e UNIPÊ (desde 2015)

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
Responsiva e Multiplataforma”

12. COMO
ALCANÇAR
ISSO?

13. Material Design

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

15. “Material Design é um sistema
unificado que combina teoria,
recursos e ferramentas para criar
experiências digitais.
”

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

17. Demonstração do Material Design

18. E o Bootstrap?

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

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

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

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

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

24. 4. Unindo Bootstrap
& Material Design

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

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

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

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

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

32. GRIDS
⊙

33. MENUS
⊙

34. RODAPÉ
⊙

35. FORMULÁRIOS
⊙

36. BOTÕES
⊙

37. TABELAS
⊙

38. ⊙Bootstrap Studio
www.bootstrapstudio.io

39. ⊙ Disponível em
www.mdbootstrap.com/
www.Material.io
www.GetBootstrap.com

40. Obrigado!
Alguma pergunta?
Você pode me achar aqui:
Twitter: @daniel85br
Youtube: goo.gl/4M1T8x
www.danielbrandao.com.br
falecom@danielbrandao.com.br