Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Spin-Off sobre AngularMaterial e Prototipagem Rápida

Spin-Off sobre AngularMaterial e Prototipagem Rápida

Nosso #1º Spin-Off (Hangout) abordando o AngularMaterial + Prototipação foi gentilmente ministrado pelo amigo Raul Leite (https://www.linkedin.com/in/rauleite), se quiser ver o Video (http://bit.ly/1psMaXN).

Opensanca

March 17, 2016
Tweet

More Decks by Opensanca

Other Decks in Programming

Transcript

  1. Concebido com base em três princípios • O Material é

    a metáfora • Elementos têm significado e foco • Movimentos dão sentido
  2. Metáfora • Inspirado em papel e tinta; • Superfícies e

    bordas que remetem à realidade; • Os princípios de iluminação, profundidade e movimento, simulam interação como do mundo real.
  3. Significado e foco • Tipografia, grids, espaçamento, escala, cor, e

    correto uso de imagens; • Que criam hierarquia significado e foco. • Enfatiza as ações do usuário;
  4. Movimentos • Respeito aos movimentos, e reforça a intenção de

    movimento do usuário. • Todas as ações tem um lugar e um único ambiente. • Servindo para focar a atenção, mantendo uma continuidade.
  5. Framework Javascript • Desenvolvido pelo Google • Modular • A

    Single Page Application • Extende o HTML (diretivas) • MVW • Alguns conceitos similares: Backbone, Ember
  6. Diretivas São marcadores em um elemento DOM. Pode ser um

    atributo, o nome do elemento, comentário ou classe CSS) que o AngularJS compila, para adicionar um comportamento, ou até mesmo para transformar o elemento DOM por completo. https://docs.angularjs.org/guide/directive
  7. Diretivas vs Componentes • As diretivas do AngularJS estendem o

    código HTML, atribuindo funcionalidades aos componentes. • • Melhor maneira de distinguir diretivas e componentes, é que um componente, é um grupo de diretivas. Ou que um componente é um toolbar, e diretiva é a marcação que compilado gera o toolbar. • https://docs.angularjs.org/guide/directive
  8. Diretivas (Angular Material) <md-toolbar> <div class="md-toolbar-tools"> <span>My App's Title</span> <!--

    fill up the space between left and right area --> <span flex></span> <md-button> Right Bar Button </md-button> </div> </md-toolbar>
  9. • In-built designing responsivo. • Redefine os elementos de controle

    de ação do usuário. Como botões, check boxes, e text fields. • Inclui características especializadas como cards, toolbar, speed dial, side nav, swipe, e por ai vai. • Fácil manuseio do CSS. • Cross-browser. • Pode ser usado para criar web components reutilizáveis. • Gratuíto
  10. Layout • Elementos referente ao layout (estrutura e não cores,

    fontes etc), fica no html. • Usa sistema de flex box do CSS3. (http://www.w3schools. com/css/css3_flexbox.asp)
  11. Angular Material vs. Material Design Lite • Angular Material depende

    de Angular e dois módulos angular: angular-animate (ngAnimate) e angular-aria (ngAria). Enquanto Material Design Lite não há dependências. • • Angular Material suporta mais que 30 components, enquanto Material Design Lite suporta 15.
  12. Angular Material vs. Material Design Lite Simplificando: • A pergunta

    chave que você deve fazer é: Já estou usando AngularJS? Ou pretendo usar? https://scotch.io/bar-talk/angular-material-vs-material-design-lite
  13. Angular Material vs Polymer (Paper Elem.) • Ambos criam componentes.

    • • Ambos têm aparências idênticas. • • Mas ng-Material tem todo o poder de componentização e de criação de diretivas (ou componentes) que o Angular fornece, e o Polymer, é uma abstração dos 4 conceitos que definem o termo “Web Component”;
  14. Desambiguação Final • Material Design - Conceito criado pelo Google;

    • • Angular - Client MVC Framework; • • Angular Material - UI Components para Angular; • • Angular Material Lite - Framework CSS, como Twitter Bootstrap • • Polymer - Abstração dos padrões html5 que formam o conceito “Web Components”