JavaScript

Ecoembes

Casanova — Tue, 27 Mar 2018 18:52:17 +0000

Ecoembes

Trabajando en nuestro CMS favorito (Drupal) y haciendo uso de diversas tecnologías como Js, Jquery, CSS y Compass, hemos dado soporte a diferentes necesidades de la web en general, como componentes, sliders y gestión de contenidos. Otro reto que asumimos en este sitio, fue la creación de un tema para adaptarlo a una versión móvil. Esto se implementó para que el sitio reconozca el dispositivo desde el que estaba entrando y muestre la versión para computadoras o dispositivos móviles según sea necesario.

En el mantenimiento de Ecoembes nos hacemos cargo en las reuniones con el cliente para dar una rápida retroalimentación sobre el impacto de los cambios, de alta prioridad y el plazo de resolución esperado.

www.ecoembes.com/en/

By Casanova Tue, 27/03/2018 - 20:53

Backend Developer

Frontend Developer

JavaScript

Drupal

CSS

Drupal 8 / D8

Drinki

Casanova — Tue, 27 Mar 2018 18:42:22 +0000

Drinki ES

Drinki (que ahora ha cambiado a DUSK) es en realidad un sitio web que promueve un APP para encontrar bares según los gustos del usuario e incluso localiza bares alrededor de los usuarios que tienen ofertas/promociones. Front.id desarrolló el frontend y el backend con Simphony, con integración de wordpress; animaciones y efectos.

https://drinki.com

By Casanova Tue, 27/03/2018 - 20:44

Backend Developer

Frontend Developer

JavaScript

Theming

La Drupalera

Casanova — Tue, 27 Mar 2018 18:34:28 +0000

La Drupalera

Para este proyecto desarrollamos un sitio web ligero, limpio y sencillo. Realizamos el diseño y desarrollo de ambos: backend y frontend.

También creamos algunos efectos con Parallax, este recurso es muy útil para dar a la web un cierto dinamismo y contrarrestar la planitud. Tampoco debemos olvidar que los dispositivos móviles promueven la verticalidad del diseño web por lo que el efecto de Parallax es más que interesante para añadir valor al tedioso scroll y sorprender al usuario con algo que no se espera.

www.ladrupalera.com/es

By Casanova Tue, 27/03/2018 - 20:35

Backend Developer

Frontend Developer

JavaScript

Drupal

Theming

SIASAR

Casanova — Tue, 27 Mar 2018 18:27:12 +0000

SIASAR

Nuestro equipo contribuyó al desarrollo del backend multilingüe personalizable así como al frontend y la aplicación móvil desarrollada con phonegap y JS. Todos los cuestionarios se almacenan en Drupal. Este backend permite a los países personalizar el contenido en función de sus necesidades y de los datos paramétricos nacionales/regionales. Otro componente del sistema se llama GEODashboard y es una aplicación puramente cliente. Todo lo que necesita para funcionar es un servidor de mapas con WMS, WFS y WPS habilitado. La idea detrás de este proyecto es que cualquiera que ya tenga un servidor compatible con OGC puede crear un panel de control simple y agradable con sólo unas pocas líneas de JavaScript.

También contribuimos al desarrollo del sitio web www.data.siasar.org. Un hermoso Dashboard dinámico que presenta información comprensible sobre las entidades principales del sistema, desarrollado con tecnologías React y GeoServer. Actualmente seguimos colaborando con el soporte de drupal y recientemente hemos añadido competencias en DevOps y administración de sistemas. Ahora somos responsables de los servidores de la iniciativa Global.

www.siasar.org

By Casanova Tue, 27/03/2018 - 20:29

Backend Developer

Frontend Developer

DevOps

Project Manager

Paralímpicos

Casanova — Tue, 27 Mar 2018 18:17:31 +0000

Paralímpicos

En este proyecto migramos y adaptamos su previo gestor de contenidos basado en asp.net a Drupal. Realizamos un nuevo diseño para el frontend del sitio basado en varios requerimientos específicos solicitados por el cliente. Teniendo en cuenta también las restricciones de accesibilidad (AA y AAA en algunos contenidos) y responsiveness solicitadas.

Una vez finalizada la migración, apoyamos al Comité en el diseño y desarrollo de una nueva utilidad en el portal para el envío de boletines mensuales y comunicación corporativa en línea, así como de un nuevo portal de contenidos multimedia. Diseñamos y desarrollamos tanto el backend como el frontend.

www.paralimpicos.es

By Casanova Tue, 27/03/2018 - 20:26

Backend Developer

Frontend Developer

SM Group

Casanova — Tue, 27 Mar 2018 18:14:30 +0000

Grupo SM

En este proyecto, todos los sitios web de WordPress específicos de la región creados por el editor fueron migrados para generar un único portal en Drupal para poder tener el mismo aspecto y conseguir una estrategia multi-sitio, en la que cada sitio corresponde a cada uno de los países donde la marca tiene presencia. En este proyecto trabajamos en nuestro CMS preferido (Drupal) y haciendo uso de tecnologías como Js y CSS para lograr los objetivos solicitados por el cliente.

www.grupo-sm.com

Desarrollamos un sitio de búsqueda de contenido global específico para la marca: buscaconsm.com.pe

By Casanova Tue, 27/03/2018 - 20:17

Backend Developer

Frontend Developer

Project Manager

Information Architect

goCO2free

Casanova — Tue, 27 Mar 2018 18:07:17 +0000

goCO2free

Ayudamos a GoCo2Free a crear una experiencia en línea que educa y anima a las comunidades a rastrear y reducir su huella de carbono de una manera competitiva, pero positiva.

Proporcionamos diseño y consultoría de UX para ayudar a agilizar los flujos de usuarios, a la vez que nos centramos en las capacidades del panel de control y el seguimiento. Es una plataforma multidominio, cada dominio pertenece a una ciudad diferente de EE.UU., y cada uno tiene su propio equipo para administrar el sitio. Colaboramos con la agencia Lullabot en este proyecto y actualmente somos el equipo principal de desarrollo.

www.communityclimate.org

By Casanova Tue, 27/03/2018 - 20:08

Backend Developer

Frontend Developer

Project Manager

Dolce Gusto Advents Calendar

Casanova — Tue, 27 Mar 2018 17:57:36 +0000

Dolce Gusto Calendarios de Adviento

A través de js, CSS/SASS hemos creado animaciones, aplicado la capa responsive correspondiente y obviamente el layout de la página de inicio. Creamos la animación principal y el menú interactivo sobre la animación. Utilizamos handlebars para generar componentes HTML independientes y manejables como el día activo, el modal, el modal de los días futuros, etc. Aquí tienes algunos ejemplos de piezas realizadas:

www.dolce-gusto.de/neues-premium-design

ernaehrungsstudio.nestle.de/adventskalender-gewinnspiel

By Casanova Tue, 27/03/2018 - 20:06

Frontend development

Theming

CSS

JavaScript

Number.formatCurrency()

Capy — Mon, 30 Dec 2019 09:00:00 +0000

Number.formatCurrency()

Submitted by By Capy on Monday, December 30, 2019 - 10:00.

A veces tengo que formatear un número a una moneda en concreto, y debido a que esto se ha vuelto algo común en estos años he decidido crear una función para simplificar esta tarea.

Number.formatCurrency() Es un prototype, por lo que simplemente puedes usarlo sobre un número como por ejemplo 100000.formatCurrency()

Admite una serie de argumentos Que permiten controlar el tipo de moneda, si muestra o no el símbolo de la moneda y el idioma en el que quieres el formateo.

Sin mas preámbulos, os dejo una pagina con la demo y el repositorio.

Repo: https://github.com/frontid/formatCurrency

Saludos!

Headless drupal: No es oro todo lo que reluce

alvar0hurtad0 — Mon, 17 Dec 2018 09:00:00 +0000

Headless drupal: No es oro todo lo que reluce

Submitted by By alvar0hurtad0 on Monday, December 17, 2018 - 10:00.

¿Qué es un drupal desacoplado?

En pocas palabras se trata de tener dos aplicaciones diferentes, una para el front, normalmente con un framework de javascript (vuejs, react, angular...) y otra para el back, que es nuestro drupal.

En algunas ocasiones los roles encargados de la edición de contenidos y la administración general de la herramienta, reutilizan la parte de administración de drupal para no tener que hacer toda esa parte en la aplicación de frontend. Si es algo que solo van a ver "los de casa" se puede explicar que hay dos aplicaciones y así nos ahorramos un montón de trabajo.

¿Qué problemas resuelve desacoplar el frontend del backend?

El principal problema que resuelve es la libertad a la hora de utilizar el HTML que los frontend quieran. Es decir, no obligamos a los frontend a utilizar el HTML que nos generan módulos tan útiles (para backend) como views, webform, paragraph, etc. A pesar de que todas las plantillas se pueden sobreescribir, la experiencia nos hace ver que muchos frontend terminan cansados de sobreescribir plantillas hacer preprocess, etc.

Con una aplicación desacoplada, todo esto se termina, los frontend hacen toda la aplicación con tecnologías en las que se sienten cómodos (HTML, Javascript y el generrador de CSS de turno) y solo interaccionan con el backend para pedirle los datos a la API. Incluso pueden tener una API que devuelva datos ficticios para hacer todo su trabajo y establecer esa API como "contrato" para que los backend hagan su trabajo a la vez y que nadie dependa de nadie.

Otro gran problema que resolvemos es que tenemos mucho más control sobre las URL que publicamos. Seguramente a muchos nos habrá pasado que creamos una taxonomía, o una entidad X para categorizar cosas dentro de un contexto determinado. Las entidades que creamos posiblemente no tengan sentido por si solas, en cambio tenemos una URL pública para poder "ver" ese elemento. Hay muchos mecanismos para que esa URL no sea accesible o simplemente no exista, pero muchas veces nos la dejamos abierta hasta que llega google, la indexa y alguien nos dice "tenemos una página desmaquetada" (OF!).

Desacoplando tenemos mucho más control sobre este tipo de cosas, porque hay que crear las rutas.

Hay más ventajas, pero la red está llena de charlas y artículos en los que se cuentan las bondades de este sistema y no quiero que este artículo sea uno más.

¿Qué problemas te crea desacoplar el frontend de drupal?

Este tipo de arquitecturas te resuelve unos problemas pero te crea otros, por lo que hay que elegir bien qué problemas podemos afrontar más fácilmente para decantarnos por una opción.

Hay que mantener dos infraestructuras

Esto es sencillo, si tenemos el backend en un dominio y el frontend en otro, tenemos que tener las dos aplicaciones corriendo, posiblemente en dos máquinas y seguramente con dos pilas tecnológicas completamente diferentes.

Si nos preocupa el SEO de nuestro frontend tendremos que hacer Server Side Rendering (que la primera respuesta de nuestro frontend venga en HTML ya montado para que los buscadores lo indexen) por lo que el servidor del front estará seguramente sirviendo Node JS, y el de drupal PHP.

Esto es trivial si tenemos un buen equipo de sistemas, pero también nos complica los despliegues cuando hay cambio de API si no la estamos versionando muy bien o no tenemos cuidado con la caché para la aplicación de frontend (recuerda que el javascript se cachea en el navegador).

Vamos a echar de menos cosas que nos hace drupal

Cuando queramos un sitemap.xml de nuestro sitio no nos valdrá con instalar el módulo.
Cuando queramos controlar las metatags de nuestros contenidos vamos a tener que montarnos un sistema para inyectarlas correctamente en la aplicación de frontend.
Cuando tengamos que generar ficheros descargables, por ejemplo un PDF o un CSV que dependa del usuario validado, el frontend va a tener que hacer de proxy con el fichero que genere el backend, porque nuestra aplicación estará validada en el drupal, pero nuestro navegador no, por lo que no podríamos llamar directamente a una URL de nuestro drupal.
La autenticación con nuestra cuenta de google, twitter o facebook, se complica bastante porque los módulos de drupal que hacen que esto sea trivial actúan sobre el dominio donde está drupal.
Los famosos mensajes de alerta y notificaciones de drupal, es algo que normalmente no tenemos en cuenta a la hora de estimar, pero ahora es un componente más a realizar.
Tenemos que ocuparnos de ocultar enlaces a cosas que no tenemos acceso.
... Seguramente más cosas, pero estas son las que yo he echado de menos en los proyectos que he hecho de forma desacoplada.

Los sistemas de autenticación no son triviales

No son una complicación muy grande, pero hay que tener en cuenta que los sistemas de autenticación seguros no siempre son fáciles de implementar.

Por poner un ejemplo, con oAuth2, los token expiran cada poco tiempo y hay que renovarlos.

"Pues se renuevan con el token de renovación"

Claro, pero hay que tener en cuenta que esto se produce en cualquier momento, y mientras estás renovando el token puede que el usuario haga más peticiones a la API. Tenemos que ser transparentes para que el usuario no note que algo que no tiene por qué entender está ocurriendo ahí dentro.

Esto se soluciona con una pequeña cola que se active en el momento en que recibamos un error de token expirado y que se mande de nuevo para que se resuelvan todas las promesas en cuanto lo tengamos renovado.

Tiene solución pero es otro problema que nos vamos a encontrar.

Hay que afinar la seguridad de nuestra API

Ahora tenemos una API expuesta al público sobre la que se pueden autenticar los servicios, por lo que hay que configurar bien CORS.

También hay que tener en cuenta que de serie no vamos a tener el mecanismo de flood que hace que si un usuario falla varios intentos de autenticación en poco tiempo tenga que esperar un rato para poder hacer login.

TL;DR

Antes de tirarte de cabeza a hacer drupal desacoplado piensa bien a qué vas a renunciar y qué vas a ganar. Puede que no merezca la pena, o puede que si.