Polymer es una librería basada en Web Components que nos aporta un nutrido juego de componentes para implementar interfaces, páginas y aplicaciones basadas en las guías de Material Design de Google.

Los componentes “material” están catalogados dentro de la clasificación “paper elements”, que te ofrece desde elementos dedicados a implementar un layout, hasta elementos para interfaces tan sencillas como botones o tan complejas como cajas de diálogo.

En este artículo explicaremos por encima lo que es Material Design y cómo usar elementos de Polymer para implementar algunas interfaces.

Qué es Material Design

No vamos a detenernos para explicar todos los detalles en torno de Material Design, sino simplemente el concepto. Básicamente son unas guías de estilo para la realización de aplicaciones para móviles y aplicaciones web creadas por Google. Las Material Design son populares especialmente porque todos los productos de Google las implementan en mayor o menor medida, desde el propio buscador, la red social Google+, o servicios como Google Music.

Pero el lugar más común para experimentar Material Design es el propio Android, sistema en el que la mayoría de sus principales aplicaciones sigue estas guías de estilo. Si usas WhatsApp para Android, Google Play, Twitter, etc. verás que el Look & Feel tiene en parte una misma raíz. Eso es el Material Design.

Lo mejor para conocer algo mas es dirigirse a la propia página donde Google especifica su Material Design.

Cómo hacer un diseño Material Design con Polymer

Realmente para hacer Material Design no necesitas Polymer ni ninguna otra librería, sería solo aplicar las guías de estilo indicadas por Google. Pero lo cierto es que si te basas en Polymer la mayor parte del trabajo la puedes hacer muy rápidamente, porque la mayoría de las interfaces, patrones, bloques, estilos, y hasta los colores, de Material Design están modelizados en componentes del catálogo de elementos de Google.

Se trata simplemente de conocer los elementos y saber extraerles su jugo para desarrollar de una manera veloz y no tener que reinventar la rueda. Los elementos están ahí bien documentados y con abundantes ejemplos, pero a veces la práctica no es tan sencilla como podría parecer.

Conocerse los elementos es la clave, saber qué tienen y cuál es la manera más adecuada de usarlos. Pero todo se puede conseguir poco a poco. El nivel técnico o dificultad de la tarea no es muy grande, pero sí el número de elementos y de cosas que podemos necesitar aplicar.

Puedes comenzar echando un vistazo a los mencionados Paper Elements, que son los componentes que implementan las interfaces y estilos para crear sitios y progressive web apps con diseño "Material".

Cómo empezar un diseño Material Design con Polymer

Como hemos dicho, el primer paso es aprender a usar elementos. Ojo, no estamos hablando de aprender a programar con Polymer, tarea que pueda tener un poquito más de dificultad, sino más bien aprender a usar el catálogo de componentes creados por ellos.

Básicamente tendrás que aprender a importar los elementos que quieras usar y a continuación usarlos como si fuera cualquier otra etiqueta del HTML. Como esto es algo que ya hemos explicado anteriormente, te dejamos el enlace al artículo sobre usar elementos de Polymer.

Practicando con un componente de barra de herramientas (paper-toolbar)

Para no acabar el artículo sin introducirse en una parte un poco más práctica, vamos a trabajar con uno de los componentes paper-element más usados, como es el paper-toolbar. Este componente te sirve para implementar una barra de herramientas estándar según las guías de Material Design.

Si quieres usar el componente el primer paso es acercarse a la documentación y copiar el comando de Bower para descargarse el código en nuestro proyecto.

bower install --save PolymerElements/paper-toolbar

Una vez instalado el componente, importamos su código en el head de tu página.

<link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html">

Ahora estamos en condición de usar el elemento paper-toolbar, para lo cual podemos escribir el siguiente código.

<paper-toolbar>
    <div class="title">Título de la barra</div>
</paper-toolbar>

Eso nos colocará la barra de herramientas. Verás que dentro tiene una división con un class="title". Eso le indica al componente que ese elemento DIV hace la función de título de la barra.

Si abres la página desde un servidor web podrás ver en funcionamiento la primera barra de herramientas creada. Será algo como lo que puedes ver en esta imagen:

De momento no nos dirá mucho esta barra sólo con su título, pero es un comienzo. Ahora le vamos a agregar algo más de código.

<paper-toolbar>
  <paper-icon-button icon="menu"></paper-icon-button>
  <div class="title">Título de la barra</div>
  <paper-icon-button icon="info"></paper-icon-button>
</paper-toolbar>

Estamos usando un par de elementos con iconos. Son elementos que también pertenecen al catálogo de "paper elements", para las material design y se llaman paper-icon-button. Consisten en iconos que además son botones. El aspecto es el mismo que los iconos normales, pero si los pulsamos harán un efecto "ripple", como una onda de color que los destaca brevemente.

Si vemos la página después de este cambio observaremos que no se ve nada y es que el elemento paper-icon-button todavía no lo conoce el navegador. De nuevo tenemos que hacer un par de pasos. El primero descargarse el código de este componente mediante Bower.

bower install --save PolymerElements/paper-icon-button

Luego tendremos que importar el componente para que el navegador sea consciente de su código.

<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">

Puede que parezca ser suficiente, pero no lo es. Realmente estos componentes usan iconos y los propios archivos de los iconos no están todavía con nosotros. El tema de los iconos es sencillo, pero no es tan trivial. Están clasificados por paquetes de iconos y están en diversos archivos de componentes. Estos iconos que estoy usando "menu" e "info" pertenecen al paquete básico.

Todos los grupos de iconos están en la clasificación "iron-icons polymer elements". Los descargas todos de una vez con:

bower install --save PolymerElements/iron-icons

Luego tendrás que importar el paquete o paquetes de iconos que quieras usar. Para los iconos básicos tienes que realizar el import de "iron-icons" general.

<link rel="import" href="../bower_components/iron-icons/iron-icons.html">

Una vez realizado todo el proceso deberías ver tu barra de herramientas ya con los iconos usados.

Conclusión

Con lo que hemos visto tenemos una bonita introducción a lo que es Material Design en Polymer. Hemos usado solo un par de componentes de los paper-elements, pero ya vamos viendo que las mecánicas de trabajo están al alcance de cualquier persona.

Si deseas complementar esta información puedes además ver un vídeo donde realizamos este proceso desde cero en un proyecto nuevo. Será interesante sobre todo para aquellas personas que tengan menos experiencia con Polymer y necesiten ver cómo se hacen las cosas paso a paso.