Cree aplicaciones web ultramodernas con material angular

En la Conferencia Google I/O de 2014, Google anunció Material Design, su nuevo lenguaje de diseño. Desde entonces, han convertido gran parte de sus aplicaciones populares para adherirse a esta nueva especificación en un esfuerzo por brindar una experiencia consistente. Ahora están tratando de convencerte de que también los sigas.

¿Qué es el diseño de materiales?

Después de una visita a las especificaciones oficiales de Material Design, inmediatamente tendrá una sensación de minimalismo ultramoderno. Las formas básicas y los colores planos son el tema aquí. Revisar la documentación es toda una experiencia. Recomiendo echar un vistazo por ti mismo, pero te lo resumiré aquí.

Meta

El propósito es crear un lenguaje visual que sintetice los principios clásicos del buen diseño con la innovación y la posibilidad de la tecnología y la ciencia. También para desarrollar un único sistema subyacente que permita una experiencia unificada en varias plataformas y tamaños de dispositivos.

Principios

Material Design se basa en tres principios.

El material es la metáfora

Inspirado en el estudio del papel y la tinta, el material vive en el espacio 3D y se basa en la realidad táctil. Da la ilusión de espacio mediante el uso de sombras realistas. El material de papel debe cumplir con las leyes de la física (es decir, dos hojas de papel no pueden atravesarse), pero pueden superar el mundo físico (es decir, un papel puede crecer o encogerse).

Atrevido, Gráfico, Intencional

Las opciones de color deliberadas, las imágenes de borde a borde, la tipografía a gran escala y el espacio en blanco intencional crean una interfaz gráfica audaz que sumerge al usuario en la experiencia. El botón de acción flotante, o FAB, es un excelente ejemplo de este principio. ¿Ha notado ese pequeño círculo con el símbolo 'más' flotando en su aplicación Google Inbox? Material Design deja muy claro que este es un botón importante.

El movimiento proporciona significado

El movimiento es significativo y apropiado, sirviendo para enfocar la atención y mantener la continuidad. La retroalimentación es sutil pero clara. Las transiciones son eficientes pero coherentes. El punto principal aquí es animar solo cuando tiene un propósito y no exagerar.

¿Cómo encaja AngularJS en Material Design?

AngularJS, el "Marco MVW de JavaScript Superheroico" de Google, aborda muchos de los desafíos encontrados en el desarrollo de aplicaciones de una sola página (SPA). Proporciona el marco necesario para crear aplicaciones web modernas que se conectan a las API y nunca necesitan que se actualice la página.

AngularJS: un nuevo enfoque

Angular es lo que habría sido HTML si hubiera sido diseñado para aplicaciones. HTML es un gran lenguaje declarativo para documentos estáticos, pero la creación de aplicaciones dinámicas no tanto.

La creación de aplicaciones dinámicas con HTML siempre ha sido un ejercicio para engañar al navegador para que haga cosas que no debe hacer. Hay un par de enfoques para hacer esto.

1. Biblioteca - una colección de funciones. (jQuery)
2. Marco: el código rellena dinámicamente los elementos estáticos cuando es necesario. (Durandal, Ascua)

Angular adopta un enfoque diferente para resolver este problema. En lugar de luchar con el HTML que se le proporciona, crea nuevas construcciones HTML. Angular le enseña al navegador una nueva sintaxis HTML a través de una construcción llamada 'directivas'. Angular viene con un conjunto de estas directivas incorporadas, pero también le permite crear directivas personalizadas, por lo que le permite escribir sus propios elementos HTML.

¿No sería genial si Google creara un conjunto de directivas basadas en los principios de Material Design?

Introducción al material angular

Google está desarrollando activamente Angular Material, una implementación de Material Design en AngularJS. Angular Material proporciona un conjunto de componentes de interfaz de usuario reutilizables basados ​​en el sistema Material Design. Material Angular se compone de varias piezas. Tiene una biblioteca CSS para tipografía y otros elementos, proporciona un enfoque de JavaScript interesante para la creación de temas y su diseño receptivo utiliza una cuadrícula flexible. Pero la característica más atractiva de Angular Material es su asombrosa colección de directivas.

Empezando

Creé un proyecto de código abierto para ayudar a impulsar su próximo proyecto de material angular. El propósito de este proyecto es dar un ejemplo de todo lo que Angular Material tiene para ofrecer, todo bajo un mismo techo. La navegación, la paginación, la creación de temas y toda la colección de directivas están listas para funcionar, todo lo que tiene que hacer es alimentar sus datos y vincularlos al HTML.

Eche un vistazo a la demostración aquí o bifurque el código en GitHub.

Directivas

Las directivas son una característica central de Angular. Angular viene con varias directivas que usas todo el tiempo como ng-model o ng-repeat. Son una pieza muy importante de Angular que hace que el marco funcione como debería.

Cómo usar una directiva de material angular

Angular Material amplía esta biblioteca de directivas con un conjunto de hermosas directivas inspiradas en Material Design. Las directivas de material angular son etiquetas HTML que comienzan con 'md'; abreviatura de Diseño de materiales. No podrían ser mucho más fáciles de usar. Por ejemplo, echemos un vistazo al buen botón antiguo.

Un botón HTML estándar podría verse así.

 <button>Click Me</button>

Un botón de material angular se ve así.

 <md-button>Click Me</md-button>

Y esto es todo lo que se necesita para hacer un botón Material. Ahora, hay varias otras opciones disponibles para esta directiva, como tematizarla y sacarla de la superficie para implicar importancia.

 <md-button class="md-raised md-primary md-hue-1">Click Me</md-button>

Servicios

Los servicios también son fundamentales para la funcionalidad de Angular. Se utilizan para compartir código en toda la aplicación. Un servicio central común como $http se usa y reutiliza para llamadas de datos en aplicaciones Angular.

Los servicios angulares son:

1. Instanciado perezosamente: Angular solo instancia un servicio cuando un componente de la aplicación depende de él.
2. Singletons: cada componente que depende de un servicio obtiene una referencia a la instancia única generada por la fábrica de servicios.

Cómo usar un servicio de material angular

Angular Material viene empaquetado con algunos servicios que brindan alguna funcionalidad adicional a la aplicación. También contribuyen al cumplimiento de algunas de las directivas. Un gran ejemplo de un servicio es el 'brindis'.

Un brindis es una pequeña notificación que se desliza desde la parte superior de la pantalla y desaparece después de unos segundos. Usar este servicio es fácil.

En JavaScript,

 $mdToast.show( $mdToast.simple('Simple Toast!') .position('left bottom') .hideDelay(3000) );

Este ejemplo muestra un brindis simple que aparece en la parte inferior izquierda de la pantalla y se retira después de 3 segundos.

Algunos servicios se pueden personalizar con plantillas personalizadas. En este caso, el servicio $mdToast puede usar una plantilla HTML personalizada mediante la directiva md-toast.

Tematización

Material Design es un lenguaje visual donde los temas transmiten significado a través del color, los tonos y el contraste. Estos temas se expresan en los componentes de toda la aplicación para brindar una sensación más unificada.

De acuerdo con las pautas de Material Design, debe "limitar su selección de colores eligiendo tres tonos de color de la paleta principal y un color de acento de la paleta secundaria". Angular Material simplifica el seguimiento de esta guía al usar JavaScript para configurar el tema. Pero primero, ¿qué es una paleta y un tono?

• Matiz: Un matiz es un solo color en una paleta.
• Paleta: Una paleta es una colección de tonos.

Por ejemplo, una paleta sería 'verde' y un tono sería un tono particular de verde. Angular Material viene empaquetado con todas las paletas válidas de la especificación Material Design. Puede obtener más información sobre las paletas de colores válidas aquí.

Configuración del tema

Tematizar tu proyecto es pan comido. En el archivo app.js, configure las paletas y los tonos deseados mediante el servicio Proveedor de temas.

 angular.module('myApp', ['ngMaterial']) .config(function($mdThemingProvider) { $mdThemingProvider.theme('default') .primaryPalette('cyan', { 'default': '400', 'hue-1': '100', 'hue-2': '600', 'hue-3': 'A100' }) .accentPalette('amber') .warnPalette('red') .backgroundPalette('grey'); });

Usando el tema

Para aplicar el tema a los componentes, establezca la clase del elemento en la paleta y el tono deseados.

 <md-button class="md-primary">Click me</md-button> <md-button class="md-primary md-hue-1">Click me</md-button> <md-button class="md-primary md-hue-2">Click me</md-button> <md-button class="md-accent">or maybe me</md-button> <md-button class="md-warn">Careful</md-button>

Disposición

Flexbox es la última y mejor incorporación al diseño receptivo y Angular Material viene con él. Si está familiarizado con el sistema de cuadrícula Bootstrap, entonces debería poder entenderlo rápidamente. De hecho, Bootstrap cambiará a Flexbox en su próximo lanzamiento. Tiene el diseño familiar de filas y columnas al que te has acostumbrado, pero con mucho más. Aprenda a usar Flexbox con este tutorial o estudie la documentación oficial.

Las 9 mejores directivas de materiales angulares

Hay demasiadas directivas de material angular para enumerarlas todas, así que me gustaría compartir con ustedes mis favoritas.

9. Progreso lineal

A menudo, en los SPA, las páginas necesitan tiempo para cargar datos desde el servidor. Si la aplicación muestra una página en blanco durante este tiempo, los usuarios pueden pensar que la aplicación está rota y se irán. Informe a los usuarios que los datos se están cargando con la directiva Progress Linear. Los usuarios sabrán que deben esperar cuando vean una barra de progreso animada que indica que algo está sucediendo. Alternativamente, use la directiva Progress Circular para un indicador redondo.

8. Selector de fecha

La directiva Date Picker hace que elegir una fecha sea una experiencia clara y simple para el usuario y una verdadera frase ingeniosa para escribir. Simplemente use md-datepicker y, opcionalmente, limite el rango con md-min-date y md-max-date y eso es todo.

7. Autocompletar

Autocompletar proporciona una experiencia de usuario agradable al ayudarlo a elegir una opción. Es lo que hace que el motor de búsqueda de Google sea el mejor. La directiva Autocompletar agrega esta funcionalidad a su aplicación completando las palabras de un usuario a medida que escribe. Pero la mejor parte de esta directiva es la personalización. Al completar su autocompletar con md-item-template, puede dar más significado a las sugerencias. Por ejemplo, si un usuario estaba buscando nombres en una empresa, la función de autocompletar podría mostrar los nombres coincidentes con su imagen y rol en la empresa, brindando una experiencia de usuario más sólida.

6. Hoja inferior

La hoja inferior es un pequeño menú que se desliza hacia arriba desde la parte inferior de la pantalla, cubriendo el contenido y tomando el foco. Originalmente pensada para ser utilizada únicamente para dispositivos móviles, la hoja inferior ha ido ganando popularidad en pantallas más grandes. Para usarlo, cree una plantilla con md-bottom-sheet que contenga una md-grid o una md-list para un diseño de cuadrícula o de lista, respectivamente. Luego llámelo con el servicio Bottom Sheet, $mdBottomSheet.show().

5. Entrada

Los formularios de entrada son aburridos y lo han sido desde el comienzo de Internet. ¡Pero no tienen que serlo! Dale un poco de estilo a tus entradas con la directiva Input. Envuelva su etiqueta de entrada con md-input-container y observe cómo cobra vida. Observe cómo su marcador de posición se anima en una etiqueta flotante. Valide fácilmente su entrada con cambios de color instantáneos pero sutiles y mensajes de advertencia. La directiva de entrada toma un elemento que se espera que sea aburrido y ofrece una sorpresa agradable.

4. Tostadas

La experiencia de usuario más agravante es no saber qué está haciendo la aplicación. Aliviamos este agravamiento con tostadoras o pequeñas notificaciones discretas. En los viejos tiempos, cuando enviábamos una solicitud al servidor, esperábamos en esa página hasta que llegaba la respuesta antes de poder continuar. La capacidad de atención del usuario se ha reducido drásticamente desde entonces. En los SPA de hoy, hacemos clic en un botón y esperamos avanzar de inmediato, lidiando con la respuesta del servidor cuando llega. La directiva Toast hace que esto sea pan comido. Se llama a una tostadora simplemente usando el Servicio Toast, $mdToast.show(), y configurando el texto, la duración y la esquina en la que aparecerá. Cree su propia tostadora personalizada con md-toast.

3. Lista de cuadrícula

¿Tus listas carecen de dinamismo? Las listas de cuadrícula son una alternativa a las vistas de lista estándar. Una lista de cuadrícula es mejor para presentar imágenes y está optimizada para la comprensión visual. Funciona colocando mosaicos de diferentes tamaños en una cuadrícula, dando una sensación ecléctica y dispersa. El tamaño y el diseño del mosaico responden al tamaño de la pantalla. Esta directiva seguramente le dará a su aplicación un aspecto emocionante y divertido.

2. marco blanco

El concepto de espacio es el núcleo de Material Design y su metáfora del papel. Dos hojas de papel en la misma posición z (o profundidad), forman una costura y deben moverse juntas. Dos hojas de papel superpuestas, con diferentes posiciones z, forman un escalón. Se mueven independientemente unos de otros. Para seguir el diseño, debemos poder desplazar elementos a lo largo del eje z. Angular Material proporciona una forma sencilla de hacer esto. Con la directiva Whiteframe, establezca la clase en md-whiteframe-z{x}, donde x son las unidades de profundidad desde el fondo. Cuanto mayor sea el número, mayor será la sombra proyectada por el papel.

1. Navegación lateral

Crear un menú de navegación lateral nunca ha sido tan fácil. La directiva Sidenav coloca un menú de navegación a la izquierda o a la derecha de la pantalla. Teniendo en cuenta los dispositivos móviles, se desliza hacia adentro y hacia afuera como se esperaba, o mediante programación con un clic de botón. Una buena adición es la función de bloqueo abierto. La navegación lateral se puede configurar para que se bloquee abierta cuando la pantalla alcance cierto tamaño. Al configurar el parámetro md-is-locked-open=”$mdMedia('gt-sm')”, el menú se ocultará en el teléfono pero se bloqueará en la tableta y en versiones más grandes.

Conclusión

Google está convirtiendo sus aplicaciones más populares a Material Design. Ahora están al frente del desarrollo de Angular Material, una implementación de Material Design escrita en AngularJS. Material Design utiliza una metáfora de papel, intenciones audaces y movimiento significativo. AngularJS organiza aplicaciones de una sola página. Angular Material aplica los principios de Material Design a las aplicaciones de AngularJS.

Material Design está aquí y Angular Material es una forma fantástica de aplicar la especificación de diseño de materiales a sus aplicaciones de una sola página. Si desea crear su propia aplicación de material angular, no pierda el tiempo comenzando desde cero. Más bien, comience con una aplicación en pleno funcionamiento con demostraciones de las directivas, temas ya configurados y navegación y enrutamiento listos para usar. Eche un vistazo a la demostración aquí o bifurque el código en GitHub. Por supuesto, también puede aprender todo sobre Angular Material visitando la documentación oficial.

¿Qué opinas de mis selecciones para las mejores directivas de material angular? ¿Los entendí bien? ¿Cuáles son tus favoritos?