Criação Web com Bootstrap e Material Design

1.024 visualizações

Publicada em

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

Publicada em: Educação
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
1.024
No SlideShare
0
A partir de incorporações
0
Número de incorporações
316
Ações
Compartilhamentos
0
Downloads
30
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Criação Web com Bootstrap e Material Design

  1. 1. Criação Web com Bootstrap & Material Design por Daniel Brandão
  2. 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. 3. 1 A Web do meu tempo Voltando no tempo
  4. 4.
  5. 5.
  6. 6.
  7. 7.
  8. 8. “ A web é a evolução da comunicação. Nela há o que mais se aproxima da real democracia.
  9. 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. 10. 2. A WEB DE HOJE Padrão é tudo. Responsividade, Multiplataforma, Aplicações Dinâmicas
  11. 11. “ A chave da web de hoje é ser Responsivo e Multiplataforma”
  12. 12. Material Design
  13. 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. 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. 15. Então MDL substitui o Bootstrap Twitter?
  16. 16. Demonstração do Material Design
  17. 17. 3. Principais Diferenças entre Bootstrap & Material Design
  18. 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. 19. É Possível Uní-los em um só Framework?
  20. 20. É Possível Uní-los em um só Framework? Material Design Bootstrap
  21. 21. É Possível Uní-los em um só Framework? Material Design for Bootstrap Material Design Bootstrap
  22. 22. 4. Unindo Bootstrap & Material Design
  23. 23. Material Design for Bootstrap ⊙A ideia é criar um tema baseado nas cores, formatos e animações do MD junto ao Bootstrap.
  24. 24. Material Design for Bootstrap ⊙Na prática, trata-se de uma adaptação do MDL ao Bootstrap.
  25. 25. AFINALO que isso traz de bom para WEB? Minha vidaDe DESENVOLVEDOR
  26. 26. O Início do Projeto: Passos da criação Wireframe Layout Front- end
  27. 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. 28. GRIDS ⊙
  29. 29. MENUS ⊙
  30. 30. RODAPÉ ⊙
  31. 31. FORMULÁRIOS ⊙
  32. 32. BOTÕES ⊙
  33. 33. TABELAS ⊙
  34. 34. ⊙Bootstrap Studio www.bootstrapstudio.io
  35. 35. Obrigado! Alguma pergunta? Você pode me achar aqui: @daniel85br www.danielbrandao.com.br falecom@danielbrandao.com.br

×