Google Polymer: cómo cambiará la forma en que se crean las aplicaciones web

Además, estos elementos personalizados también pueden tener un par de atributos personalizados aceptados. Con respecto a la elemento, establece un atributo llamado username que se utilizará para especificar el nombre de usuario de Twitter.

Elementos personalizados en polímero

El polímero viene con un conjunto de elementos que representan (casi) todas las necesidades de aplicaciones web. Google divide estos elementos en grupos: elementos de hierro, elementos de papel, componentes web de Google, elementos de oro, elementos de neón, elementos de platino y moléculas.

1. Elementos de hierro

Iron Elements es una colección de elementos básicos. Estos elementos básicos son los que normalmente usamos para construir una página web, como una entrada, formulario e imagen. La diferencia es que Polymer agrega algunos poderes extra a estos elementos.

Todos los elementos en este grupo tienen prefijo de iron-, por ejemplo , que se usa para mostrar una imagen. los elemento ha sido equipado con algunos atributos adicionales que no podemos aplicar en el elemento. Podemos, por ejemplo, agregar atributos preload, fade y placeholder :

El ejemplo anterior mostrará primero el marcador de posición de la imagen y luego se desvanecerá en la imagen real en el src ya que está completamente cargado, realizando un efecto de carga suave de la imagen .

2. Elementos de papel

The Paper Elements es un grupo de elementos de diseño de materiales. Material Design es el lenguaje de diseño de Google para hacer que la interfaz de usuario y la experiencia en todas las plataformas de Google, tanto la Web como las aplicaciones de Android sean más consistentes visualmente. Algunos elementos que son exclusivos del diseño de materiales son el botón de acción de papel y flotante (FAB).

Papel

El papel es la metáfora de Google para el medio que subyace en el contenido . Para agregar un papel con Polymer, usamos el elemento. Este elemento tiene 2 atributos:

• elevation para levantar el papel, por lo tanto, agregar una sombra para reforzar la elevación
• animated aplicará animación como cambio de elevación de papel.

Botón de acción flotante (FAB)

El botón de acción flotante (FAB) es un botón circular con un ícono, flotando en la pantalla, generalmente con un color sobresaliente. Google sugiere que este botón tenga una función de acceso frecuente. Aquí hay un ejemplo:

El siguiente fragmento de código agrega un material de papel con una imagen y un FAB.

Tendremos el siguiente resultado:

• Ver la demostración de papel

3. Google Web Components

Los componentes web de Google son elementos especiales que hacen frente a las API y servicios de Google, como Google Maps, Youtube y Google Feed, por nombrar algunos. Los elementos de este grupo interactúan con los servicios de Google a solo unas líneas de distancia .

El siguiente es un ejemplo para mostrar un mapa de Google usando el elemento.

 Esto es Googleplex 

Como puedes arriba, el el elemento toma la latitude y la longitude para especificar la ubicación en el mapa. También podemos anidar para mostrar un marcador de mapa de esa ubicación junto con un texto que aparecerá al hacer clic en el marcador.

• Ver la demostración del mapa

¿Quieres mostrar un video de Youtube? puedes usar el elemento.

Del mismo modo, personalizamos la salida a través de los atributos.

• Ver la demostración de Youtube

4. Elementos de oro

Los Gold Elements son los elementos diseñados específicamente para aplicaciones de comercio electrónico . Aquí encontrará elementos para mostrar la tarjeta de crédito, el correo electrónico, el teléfono y la entrada ZIP, que han sido equipados con validación de formatos para garantizar la entrada de datos y la seguridad. Aquí hay un ejemplo para agregar la entrada de la tarjeta de crédito Visa.

5. Otros elementos

Los elementos restantes incluyen elementos de Neon para animación y efectos especiales, elementos Platinum para notificaciones fuera de línea y push y, por último, Moléculas, envoltorios para bibliotecas de terceros.

Nota del editor: En el momento de escribir este artículo, los elementos de neón, los elementos de platino y las moléculas todavía no están disponibles.

Polímero integrador

¿Desea usar Polymer en su desarrollo web? A continuación, le mostramos cómo instalarlo e integrarlo en sus páginas web. Como la mayoría de los elementos de Polymer dependen uno del otro, la mejor manera de instalar Polymer es a través de Bower.

Bower es un administrador de dependencias de proyecto que facilita la instalación de scripts o estilos necesarios para ejecutar el proyecto. Echa un vistazo a nuestra publicación anterior sobre cómo instalar, actualizar y eliminar bibliotecas web fácilmente con Bower.

Para integrar Polymer, inicie Terminal y navegue hasta el directorio de su proyecto, suponiendo que haya creado uno. Luego ejecute el comando bower bower init para iniciar el archivo bower.json en su proyecto que se utilizará para registrar las dependencias del proyecto. Abra bower.json y agregue las siguientes líneas.

 "dependencias": {"polímero": "Polímero / polímero # ^ 1.0.0", "google-web-components": "GoogleWebComponents / google-web-components # ^ 1.0.0", "iron-elements": " PolymerElements / iron-elements # ^ 1.0.0 ", " elementos de papel ":" PolymerElements / paper-elements # ^ 1.0.0 ", " gold-elements ":" PolymerElements / gold-elements # ^ 1.0.0 "} 

Esta configuración asume que vamos a usar todos los elementos de cada grupo. Puede eliminar lo que no necesita de la lista de dependencia. A medida que se establecen las dependencias, ejecute el comando bower install para instalar las dependencias en la lista.

Aquí hay un ejemplo:

Esta configuración nos permitirá usar el , , elementos.

Vitrinas

Estas son algunas de las aplicaciones web que ya usan Google Polymer.

Google

Google usó Google Polymer en la página web de Google IO 2015; Google Fi, el servicio inalámbrico de Google para operadores y proveedores en sociedad; y Google Music.

Elementos personalizados

CustomElements es un concentrador donde puede encontrar elementos personalizados creados con Web Components. Hace uso del elemento Papel para contener y crear la lista. También proporciona una ruta conveniente para instalar estos elementos a través de Bower y NPM.

Una aplicación de Chrome para edición de código que funciona sorprendentemente bien. Esta aplicación utiliza el botón FAB, el menú Papel y los elementos del diálogo Papel en la interfaz de usuario.

Una herramienta para crear aplicaciones web con elementos de polímero usando una interfaz de arrastrar y soltar.

Un informe y pronóstico de la bolsa de valores construido completamente con elementos de polímero.

Una aplicación cliente de correo electrónico para Gmail. Se ve bien y fluido, aunque lamentablemente, no está funcionando completamente.

El polímero tiene un alcance enorme y puede llevarte un tiempo acostumbrarte a todos los elementos personalizados, así como a su API. No obstante, Web Components and Polymer ciertamente influirá en la forma en que creamos las aplicaciones web. Mantente al frente de la multitud leyendo más acerca de los componentes web: las referencias se encuentran a continuación.

• Ver demostración
• Descargar Fuente

Referencias útiles

• El estado de los componentes web
• Una introducción detallada a los elementos personalizados
• Blog oficial de Google Polymer

Crear un efecto de carga incorporado en los botones con LADDA

Hay varios tipos de animación que puede aplicar en su página web. Animación de texto, cuadro modal, transición y el indicador de progreso. Para los indicadores de progreso, generalmente en forma de barras, el progreso que ve en la barra indica cuánto progreso se ha realizado (o cargado). Sin embargo, si le interesa el progreso dentro de un botón, pruebe con Ladda.Ladda

(Consejos de tecnología y diseño)

Apple lanza un programa de reparación para combatir el problema de iPhone 6 Plus 'Touch Disease'

Si eres propietario de un iPhone 6 Plus, es probable que hayas tenido un problema con la pantalla táctil del iPhone 6 Plus. El problema de la pantalla táctil, conocido como " Enfermedad táctil ", ocurre después de demasiadas caídas del teléfono, lo que da como resultado una pantalla táctil que no responde con una línea gris visible en la parte superior de la pantalla.La caus

(Consejos de tecnología y diseño)