{Palestra} Criação Web com Frameworks (Material Design e Bootstrap)

Olá Pessoal. Nessa sexta-feira, dia 02 de junho, apresentei na SIAP da faculdade FPB, a palestra Criação Web com Frameworks Front-end (Material Design e Bootstrap). Para quem esteve lá ou não, coloco aqui os Slides apresentados, que contém os links para cada framework abordado na palestra.

Dúvidas, críticas ou qualquer outra forma de opinião, fique a vontade para comentar abaixo.

Anúncios

Slides – Criação Web com Bootstrap e Material Design

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

Google traz o Material Design Lite com CSS, HTML e JavaScript

O Material Design Lite (MDL) do Google permite adicionar o look and feel do Material Design em websites. O Material Design é a linguagem visual padrão para Android e que, agora, o Google propõe como multiplataforma.

De acordo com o Google, o MDL têm os requisitos para que seja caracterizado como “lite”:

  • Tem poucas dependências de forma que é fácil de instalar e usar;
  • Não depende de frameworks, permitindo que os desenvolvedores façam sua integração com qualquer cadeia disponível de ferramentas para front-end;
  • Sua base de código é relativamente pequena;
  • Têm foco restrito, implementando as boas práticas do material design e não é um framework abrangente.

O MDL não é a primeira implementação de HTML/CSS/JS do material design e existem alternativas como o Materialize e Material Bootstrap. A principal vantagem que o MDL trás em relação a estas opções desenvolvidas pela comunidade, de acordo com o Google, é que o MDL foi desenvolvido “com a colaboração das equipes de Material Design e Chrome UX e é constantemente revisado buscando aderência às especificações do material design”.

Antes do MDL, o Polymer era a implementação canônica de material design para CSS/JS. Porém, comparado ao MDL, o Polymer tem escopo maior e vai além do domínio visual, incluindo componentes para comunicação de dados e componentes não especificados pelo material design.

Até o presente momento, o MDL não é otimizado nem suporta o uso de componentes individuais, por exemplo, um botão. Ainda sim, para desenvolvedores que querem usar apenas uma parte dos componentes MDL, é possível criar uma distribuição MDL customizada comentando componentes indesejados do material-design-lite.css e scripts inadequados do Gulpfile. Feito isso, basta executar gulp.

O MDL segue a convenção BEM de forma que os nomes para cada classe css são consistentes, isolados e expressivos. O Google detalha quais boas práticas eles seguiram ao aplicar BEM no desenvolvimento do MDL. Por outro lado, o BEM pode levar a explosão no comprimento dos nomes de classes e, de acordo com o feedback inicial, o MDL parece ser sensível a esse problema, por exemplo, ao necessitar de dezessete nomes de classe diferente para um simples card que é um conceito básico do material design.

O Google afirma que o MDL funciona em todos os navegadores modernos (Chrome, Firefox, Opera, Microsoft Edge e Safari) com degradação suave em navegadores como o IE9. Também sugerem referenciar a CDN para incluir o MDL no website, mas também é possível baixar ou importá-lo via npm ou Bower.

Fonte: InfoQ Brasil