Criação Web com Bootstrap e Material Design
-
Upload
daniel-brandao -
Category
Education
-
view
1.012 -
download
3
Transcript of Criação Web com Bootstrap e Material Design
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
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á...
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 ..
Demonstração do 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)
Material Design for Bootstrap
⊙A ideia é criar um tema baseado nas cores, formatos e animações do MD junto ao Bootstrap.
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.
Obrigado! Alguma pergunta?
Você pode me achar aqui:
@daniel85br
www.danielbrandao.com.br