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

B2519015997dff04abe2568ebb2cf729?s=128

Opensanca

March 17, 2016
Tweet

More Decks by Opensanca

Other Decks in Programming

Transcript

  1. Angular Material rauleite rauleite rauleite

  2. https://material.angularjs.org/latest/

  3. Material Design (Não Angular M.) Google's Material Design Specification

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

    a metáfora • Elementos têm significado e foco • Movimentos dão sentido
  5. None
  6. 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.
  7. 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;
  8. 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.
  9. http://www.google.com/design/spec/what-is- material/material-properties.html https://www.google.com/design/spec/layout/structure. html

  10. None
  11. AngularJS

  12. Framework Javascript • Desenvolvido pelo Google • Modular • A

    Single Page Application • Extende o HTML (diretivas) • MVW • Alguns conceitos similares: Backbone, Ember
  13. Model, View, Controller

  14. Sistema tradicional de templates

  15. Sistema de templates do Angular

  16. None
  17. Com JQuery fonte: http://www.c-sharpcorner.com/UploadFile/8ef97c/angularjs-vs-jquery-part-2/

  18. Com Angular (Two-Way Data Binding) fonte: http://www.c-sharpcorner.com/UploadFile/8ef97c/angularjs-vs-jquery-part-2/

  19. Com JQuery fonte: http://www.c-sharpcorner.com/UploadFile/8ef97c/angularjs-vs-jquery-part-2/

  20. Com Angular (Two-Way Data Binding) fonte: http://www.c-sharpcorner.com/UploadFile/8ef97c/angularjs-vs-jquery-part-2/

  21. None
  22. Organização

  23. Escopo

  24. 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
  25. Diretivas (Nome do elemento) (Atributo)

  26. Diretivas (Angular)

  27. 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
  28. 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>
  29. Mais sobre principais vantagens do AngularJS https://www.javacodegeeks.com/2015/11/15-reasons-developers-need-learn-angularjs.html

  30. Angular Material

  31. Angular Material é uma das implementação das especificações do Google

    Material Design.
  32. Fornece um conjunto de componentes UI reutilizáveis, testáveis, e acessíveis.

  33. Para desenvolvedores que usam AngularJS!

  34. Super-reforço aos desenvolvedores AngularJS.

  35. • 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
  36. 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)
  37. Let’s Code !!!

  38. Não é bala de prata, mas...

  39. Angular Material vs. Material Design Lite

  40. Angular Material vs. Material Design Lite Theming http://www.getmdl.io/customize/index.html

  41. 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.
  42. 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
  43. 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”;
  44. None
  45. 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”
  46. Por onde começar ??? • https://github.com/rauleite/angular-material-prototipo • https://docs.angularjs.org/tutorial • https://material.angularjs.org/latest/#/

    • http://www.tutorialspoint.com/angular_material/index.htm
  47. None
  48. • raul.areu.leite@gmail.com rauleite rauleite rauleite