Entradas

Mostrando las entradas con la etiqueta Polymer

Un módulo #Firebase utilizando #Polymer, comercios destacados

Imagen
En busca de la simplicidad, exploraremos en este articulo realizar el desarrollo de un nuevo módulo #Polymer integrando datos desde # Firebase basado en el proyecto # modulegen  (presentado en 7 arquetipos de la tecnología moderna, con base en el Polymer-Starter-Kit). El objetivo es representar en un módulo nuevo comercios destacados almacenados en # Firebase . Vemos en la Fig.1 la colección de comercios desde # Firebase , cada uno de los mismos y su ganancia general. [todos datos totalmente simulados] Fig.1 Firebase [datos] El objetivo es incorporar un nuevo módulo e incluir datos desde # Firebase . Siguiendo la Fig.2 para el proyecto  # modulegen Fig.2 UI de modulegen Vamos a construir este nuevo módulo de una forma desacoplada desde el sector #elements. Vamos a incorporar un #web-component, # firebase-element y solo nos queda crear la lógica de acceso. Fig.3 Generación del módulo Miren como se ve el código completo: Cargando .... Ahora ...

7 arquetipos #Polymer 1.0 puntos esenciales prácticos

Imagen
En este recorrido por LatAm he disfrutado mucho la conexión con las comunidades de desarrollo y cada conversación sobre alguno de los 7 entornos prácticos planteados en la conferencia #7 arquetipos de la tecnología moderna. Fig.1 Ejemplo presentado Hoy les quiero compartir el entornos presentado para Polymer1.0 . En primero lugar voy a recrear el polymer starter kit para reducir la curva de complejidad en la demostración. Luego vamos a concentrarnos en el sector central de contenido de la template y dentro de los iron-elements [= core-elements de la version 0.5]. Fig.2 iron-pages Para trabajar este efecto generalmente buscado en el pensamiento diseño Material, implementamos como se muestra en la Fig.2 los elementos iron-pages. Este elemento tiene una propiedad de elevación con lo cual podemos controlar el #eje-z bien simple variando los valores como lo propone la Fig.3 y 4 Fig.3 paper-material element Fig.4. Propiedades de elevación Dentro de cada page la idea es...

Spreadsheet-2-Polymer un newsletter particular

Imagen
Esta semana inició con un desafío muy interesante de desarrollo. La idea era crear un newsletter simple pero que obtenga los datos desde una spreadsheet. La características fundamental de presentación debería utilizar #Polymer para dar soporte responsivo y por supuesto demostrar su flexibilidad. La respuesta es spreadsheet2polymer . Fig.1 diseño general En esta solución he utilizado sampler-scaffold para representar el periodo de trimestres en el newsletter y cada trimestre con una estructura de programas/proyectos. Cada  programa/proyectos tiene elementos simples como muestra la Fig.2. Fig.2 diseño general de los programas/proyectos Lo interesante es que toda esta información se obtiene desde una spreadsheet. Como muestra la Fig.3. [ spreadsheet ]. O sea puedo el objetivo es armar mi reporte en segundos y que este tenga una presentación responsiva legible y flexible. Fig.3 Estructura de datos del newsletter La implementación tiene la funcionalidad responsiva, co...

Quiero Polymer en Blogger!

Imagen
Este fin de semana me propuse un simple desafío de integración. La idea era incorporar #Polymer en las plantillas de #Blogger. De esta forma actualizar el diseño general de esta potente herramienta de comunicación y de paso tener un poco de diversión para #desarrolladores. La estructura de las plantillas #Blogger tienen un estructura xml, y por este motivo hay que cumplir algunas reglas. De todas formas nada que en minutos no se pueda resolver. Estás listo para incorporar #Polymer a #Blogger? Zonas importante de la implementación: En este ejemplo, el objetivo era no solo incorporar marcado tradicional sino interacción con #js. 1. Incorporar webcomponents.js     <script src='//www.polymer-project.org/components/webcomponentsjs/webcomponents.js'/> 2. Incorporar en este caso el elemento de core-pages [utilizamos como ejemplo este elemento]     <link href='//www.polymer-project.org/components/core-pages/core-pages.html' rel='import'/> 3. Es...