Material Design con Polymer

  • Por
Qué es Material Design y cómo Polymer facilita la vida a los desarrolladores que quieren aplicar estas guías de estilo en webs y progressive web apps.

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.

Nota: Este contenido y el sencillo nivel de dificultad lo hacen adecuado incluso para personas que no tienen conocimientos de programación. Tan solo hay que saber usar elementos de Polymer y es algo que cualquier persona con un poco de idea de HTML lo puede conseguir.

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.

Nota: Ahora bien, y aquí sí puede subir un poco la dificultad, para crear una app o sitio convenientemente optimizado sí que hay que seguir algunas buenas prácticas, como tener una buena arquitectura de aplicación y saber compactar los componentes con lo que llamamos el vulcanizado. Ahora con Polymer CLI tenemos una manera rápida de obtener un punto de inicio de una aplicación Polymer que ya nos da configurada la parte de optimización de los componentes y su unión en uno o varios archivos.

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

Nota: Ya hemos comentado la operativa de Bower otras veces. Para que ese comando funcione debes haber realizado antes el "bower init".

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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Roberto

29/9/2016
componentes
Muy interesante, he echado un vistazo a los componentes de Polymer para material design. hay muchas cosas muy útiles, me parece muy completo.

Chris

14/11/2016
DUDA
Estimado, como puedo hacer un buscador con polymer? de datos que se han desplegado de indexedmirror?