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

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
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
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
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/
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”;
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
48. • raul.areu.leite@gmail.com rauleite rauleite rauleite