Archivo: Categoría

 
0

martes,

octubre

10,

2017

Aplicaciones Móviles, Tecnologia, Web

Progressive Web Apps ¿las App del futuro?

Progressive web apps (PWA) o Aplicaciones Web Progresivas, es la manera de llamar a la nueva generación de apps que mejoran su eficiencia y eficacia en el funcionamiento, dependiendo de las capacidades del dispositivo en el que se ejecutan.

¿Qué diferencia una Progressive web apps de una aplicación nativa?

Sencillamente, la diferencia es que las aplicaciones nativas son todas aquellas que descargamos normalmente desde la tienda, app store o play store para android. Y que tienen la problemática de que tenemos que desarrollar una versión especial para cada tipo de sistema operativo con el que queramos que sea compatible, mientras que en las Progressive web apps accedemos a ellas directamente desde un navegador web mediante una URL sin importar el tipo de dispositivo que tengamos ni el sistema operativo que use.

Esto obviamente nos da varias ventajas importantes, con respecto a las web nativas, y es que podemos compartirlas con todo el mundo sin importar el dispositivo que tenga, y serán fácilmente localizables desde cualquier buscador web (google, bing, etc).

Tenemos que entre las principales objetivos/ventajas de una Progressive web apps podemos encontrar:

  • Ser Progresivo: De ahí su nombre, debe funcionar en cualquier dispositivo y mejorar progresivamente, es decir, aprovechar las funciones disponibles en el dispositivo del usuario y también del navegador. O dicho de otra manera, la aplicación corriendo desde el navegador web deberá ser capaz de acceder a los recursos del dispositivo (mandar notificaciones, hacer que vibre, usar los sensores del móvil, etc).
  • Detectable: Debe ser detectable en los motores de búsqueda. Esta es una gran ventaja sobre las aplicaciones nativas, ya que desde cualquier buscador (google, bing, etc) son más fácilmente localizables, puesto que las nativas todavía se quedan muy atrás en este campo.
  • Enlazable: Un sitio web bien diseñado debe utilizar una URI para indicar el estado actual de la aplicación. Esto permitirá a la aplicación web conservar o volver a cargar su estado cuando el usuario marque o comparta la URL de la aplicación.
  • Responsiva (Adaptable): Debe de ajustarse al tamaño y forma de cualquier dispositivo, esto es algo básico.
  • Ser como una app: Debe de tener el aspecto de una aplicación nativa y debe estar basada en el modelo de shell de aplicación, con un mínimo de refrescos de página.
  • Conectividad independiente: Debe funcionar en áreas de baja conectividad o fuera de línea. O lo que es lo mismo, es capaz de detectar si nos quedamos sin conexión a la red y ser capaz de funcionar con una versión anterior o la última versión que hayamos guardado en caché.
  • Instalable: Una aplicación web progresiva se tiene que poder instalar en la pantalla principal del dispositivo, haciéndola fácilmente accesible al usuario (al igual que cualquier app normal) mediante un acceso directo al escritorio.
  • Con el contenido actual: Cuando se publica nuevo contenido y el usuario está conectado a Internet, dicho contenido debe estar disponible en la aplicación para el usuario en ese mismo momento.
  • Ser segura: Dado que una aplicación web es usada de manera diferente por cada usuario, es imprescindible que la aplicación esté alojada a través de HTTPS para evitar ataques y además dar la sensación de seguridad al usuario.

¿Para qué tipos de tecnologías puede servir?

Destacamos las siguiente:

Service Workers

Según los propios desarrolladores de google podemos decir que esto es:

“Una secuencia de comandos que nuestro navegador ejecuta en segundo plano, separado de una página web, permitiendo el acceso a funciones que no necesitan una página web ni interacción de usuario.”
Service Workers

Básicamente lo que nos están tratando de decir es que nos permite ejecutar servicios en segundo plano.
Y esto conlleva múltiples beneficios, entre ellos destaco:

  1. Ser capaz de manejar las notificaciones push fácilmente.
  2. Poder sincronizar datos en segundo plano.
  3. Ser capaz de responder a las solicitudes de los recursos originales desde otros lugares.
  4. Recibir actualizaciones de manera centralizada.

App Shell

Esto es, para cargar más rápidamente la app, almacenar la interfaz de usuario básica. Esto permite, un diseño o una arquitectura en los que se puede cargar el contenido de forma progresiva y dinámica, permitiendo a los usuarios interactuar con la aplicación a pesar de tener una conectividad limitada o nula.

Básicamente, almacenar la información localmente en la caché del navegador del dispositivo, permitiendo así su uso con la última versión guardada en la caché, en caso de no disponer de conexión.

Manifiesto de aplicación

Esto, es una especificación de W3C que define una codificación basada en JSON, para proporcionar a los desarrolladores un único sitio en el que poner los meta-datas de una aplicación web. Por por ejemplo:

Ejemplo de estructura de meta data

En conclusión, aún a pesar de tener bastante muy buena pinta, no es algo tan nuevo, ni es algo que se sea tan increíble como para dejar todo lo hecho hasta ahora y cambiar a esto. Tampoco quiero decir que no sirva, ni mucho menos, sino que simplemente como siempre hay que tener en cuenta que es lo que queremos y para qué lo queremos.

Pero es evidente que, cada vez más las Progressive web apps se van pareciendo cada vez más a las aplicaciones móvil nativas, así que es posible que en un futuro no muy lejano veamos un nuevo “boom” con respecto a la creación de apps.

Un cordial saludo a tod@s.

LEER MÁS →

Google Data Studio, la solución definitiva para controlar tu negocio en tiempo real

Como profesionales del comercio electrónico y del marketing digital, uno de los principales retos a los que nos enfrentamos cada día es la obtención e interpretación de datos y métricas. ¿Cuánto tiempo hemos invertido realizando informes?, ¿cuánto dinero hemos invertido (o gastado) en herramientas poco dinámicas o nada efectivas para desarrollar informes y paneles de mando? En este artículo te contamos la solución definitiva, que hemos decidido implantar en la agencia y que seguramente también pueda ayudar a tu negocio.

La innovación y la búsqueda de nuevas soluciones forma parte del ADN del equipo de FreshCommerce, agencia especializada en comercio electrónico. Ese es el motivo por el cual buscamos siempre nuevas herramientas que nos ayuden a realizar mejor nuestro trabajo, con mayor rapidez y, sobre todo, con efectividad. También, nos esforzamos en que dichas herramientas y soluciones ayuden al cliente a entender mejor su negocio y a tomar las mejores decisiones empresariales. Los datos son fundamentales para conocer el estado y la evolución de la empresa y poder así realizar las acciones necesarias para mejorar el rendimiento de la misma a futuro.

Desde hace algunos meses, y con el apoyo de Google cómo expertos certificados, en FreshCommerce estamos trabajando con la potente herramienta Google Data Studio. Una solución tecnológica que nos permite solucionar el problema de “reporting” tanto a nivel interno como externo, para facilitar la información del proyecto para el cliente.

Pero, ¿qué es Google Data Studio? Se trata de una herramienta que forma parte de Google Analytics 360 Suites, un grupo de aplicaciones de análisis desarrolladas para el mundo del marketing. Con Google Data Studio se pueden crear informes y paneles de mando interactivos, visualmente atractivos y que recopilen datos en tiempo real desde multitud de fuentes de datos. Los informes de Data Studio nos permiten contar y entender qué pasa realmente con nuestro negocio, campaña digital o proceso empresarial.

Ventajas

Data Studio cuenta con diversas ventajas tecnológicas que la hacen una herramienta imprescindible para el sector, dejando de lado multitud de plataformas con altos costes que además pueden no satisfacer las necesidades de grandes proyectos online. Entre las ventajas que podemos destacar actualmente se encuentran:

  • Editor Visual: Data Studio cuenta con un potente sistema de edición que nos permite crear y editar informes, ubicando los diferentes elementos donde queramos. Utilizando un lienzo personalizable en muchos aspectos como el color y la orientación. Además de tener disponible una amplia biblioteca de recursos que nos ayudan a organizar la información, de manera que podamos interpretarla con mayor rapidez y facilidad. Por ejemplo, podemos utilizar series temporales, gráficos de barras, áreas, dispersión, viñetas, circulares, tablas, utilizar mapas geográficos o simples tarjetas de resultados globales. Elementos todos totalmente personalizables y configurables en muy pocos clics. Visualmente Data Studio es totalmente editable, lo que nos permite incorporar nuestra imagen corporativa y crear espectaculares informes con el diseño que queramos. También es posible copiar y pegar elementos, lo que facilita mucho el trabajo a la hora de crear nuevos informes o páginas adicionales.
  • Fuentes de Datos: Uno de los principales motivos por lo que decidimos incorporar Data Studio en nuestros procesos, es la gran cantidad de fuentes de datos que podemos añadir a los informes al mismo tiempo, desde simples hojas de cálculo de Google, cuentas de Adwords, Analytics, canales de Youtube, métricas de Searh Console, subir archivos directamente, o consultar bases de datos MySQL. Esto nos permite tener el control de la información y organizarla de manera que podamos, en un solo vistazo, saber que sucede en cualquier lugar y en cualquier momento. También, contamos con un sistema que nos permite editar la fuente de datos, crear parámetros y variables nuevas, saber en cuantos informes y gráficos se usa dicha fuente de datos y conocer el estado o disponibilidad de la misma.

    Pero, en FreshCommerce, hemos ido un paso más allá. Nuestro super equipo de programación ha colaborado de manera directa permitiéndonos desarrollar soluciones digitales propias:

    Fuentes de datos adicionales como, por ejemplo, cuenta y campañas de Mailchimp, el estado y evolución de las tareas programadas, informes sobre las cuentas de las principales redes sociales y los datos sobre las campañas de publicidad. Desarrollo de Módulo exclusivo para Prestashop en nuestros clientes o partners que nos permite hacer el seguimiento en tiempo real de las ventas y ver la evolución de las mismas.

    Conexión con los propios software de gestión/ERP, que nos permite cruzar nuestros datos online con sus datos de negocio, redundando en mejores decisiones empresariales. Todo esto nos ayuda a mantener bien informado a nuestros partners, además de ahorrar horas de trabajo adicional creando, comentado o enviando informes. Un plus de productividad y rendimiento empresarial que aprovechamos para seguir innovando y pujando por aumentar tráfico y ventas: nuestra principal razón de ser en la agencia.

  • Filtrado y organización de los datos: En ocasiones, necesitamos conocer datos específicos sobre algún parámetro o información. Data Studio cuenta con diversas opciones que nos permiten filtrar usando multitud de variables, por ejemplo, podemos tener la evolución de las ventas globales de nuestro comercio electrónico y en cualquier momento seleccionar un periodo de tiempo, compararlo con otro, filtrar dichas ventas y saber cuántas provienen desde dispositivos móviles, desde qué países, el canal de referencia que generó esa venta, etc., sin olvidar que podemos crear nuestros propios filtros. Todo esto entre otras muchas opciones que nos permitirán conocer mejor a nuestros compradores o simplemente saber los canales con mejores resultados y rendimiento.
  • Colaborar y compartir: Ya no es necesariodescargar los informes en archivos .PDF para enviar a otro miembro de la empresa o al cliente. Otra ventaja de Google Data Studio es que estamos ante una solución en la nube, por lo que varias personas del equipo, al mismo tiempo, pueden colaborar en el diseño, integración y maquetación de los informes creados. Podemos generar enlaces públicos para enviar, o dar acceso usando las cuentas de Google de la persona que lo recibe, manejando siempre los niveles de privilegio y acceso. Siempre con una disponibilidad total para poder consultarlo en el momento que necesitemos.

[easy-tweet tweet=”Google Data Studio es la herramienta de análisis digital ideal para cualquier proyecto. ” user=”@fresh_commerce”]

Google Data Studio el dashboard definitivo

Google Data Studio es una herramienta fácil de utilizar y capaz de sorprender. Sin lugar a dudas, los profesionales del marketing online lo tendrán que tomar en cuenta, ya que tiene todos los ingredientes necesarios para desplazar a otras soluciones similares, pero mucho menos potentes y mucho más costosas.

Gracias a la integración de Google Data Studio con una gran cantidad de servicios y fuentes de datos externos, podemos crear paneles de mando muy visuales y fáciles de entender que ayudan a nuestros partners a gestionar mejor sus recursos y tomar unas decisiones adecuadas, ya que los informes se encuentran totalmente personalizados a las necesidades de cada proyecto y sus particularidades. Toda la información de la empresa en una sola pantalla, con la idea siempre de aumentar la venta online de productos o servicios.

En FreshCommerce contamos con un equipo de profesionales, expertos acreditados en Google Analytics y otros servicios, que pueden ayudarte a desarrollar tu negocio online, aportado soluciones innovadoras, rentables y sobre todo efectivas. ¡Conócenos!

LEER MÁS →

 
0

viernes,

marzo

13,

2015

eCommerce, Web

WhatsApp, ¿herramienta e-Commerce de atención al cliente?

A la hora de montar un nuevo proyecto de comercio electrónico, a menudo nos encontramos en la disyuntiva sobre cuales son los mecanismos que debemos implementar para procurar que el soporte a nuestros clientes se ejecute de la manera más cercana y eficaz posible. Las ventajas que nos proporciona la deslocalización, se vuelven en nuestra contra cuando se trata de ofrecer la atención personalizada que puede ofrecer un vendedor en una tienda física.

whatsAppWebPor suerte, contamos actualmente  con muchas herramientas que nos permiten llenar este vacío. De entre todas las existentes, hoy queremos destacar WhatsApp, que si bien ya entrados en 2015 no resulta una novedad para nadie, desde que se anunciara hace poco más de un mes la versión web, esta aplicación se ha vuelto un método muy recomendable para añadirlo a nuestros e-Commerce.

Con más de 700 millones de usuarios activos al mes, WhatsApp es la aplicación número uno en el sector móvil debido a que permite comunicarnos de forma bidireccional con otras personas de una forma extremadamente sencilla. Pero como todo, también tiene alguna pequeña pega. No resultaba tan simple tener que gestionar el soporte de múltiples usuarios desde dispositivos móviles.

Whatsapp-web-appEl proceso cambia radicalmente con la llegada de la plataforma web, ya que nos permite realizar interacciones con los usuarios como si se tratara de un chat online, teniendo toda la potencia y funcionalidades que nos ofrece el navegador de un ordenador. Podemos enviar archivos, enlaces u otra información en tiempo real de una forma más cómoda y productiva gracias al uso del teclado.

Este servicio puede probarse desde la siguiente URL https://web.whatsapp.com/, siendo el único requisito establecido tener actualizada la aplicación a la versión más reciente.

LEER MÁS →

 
0

viernes,

agosto

29,

2014

Tecnologia, Web

Botones de acción directamente en la bandeja de entrada con Gmail

En nuestro espacio de actualidad tecnológica, hoy presentamos las Actions in the Inbox de Google, o lo que es lo mismo, ¡funcionalidades agregadas a nuestra bandeja de entrada para ganar en productividad y arañar un tiempo muy valioso en nuestra apretada agenda!

Las posibilidades que estas funcionalidades para el comercio electrónico son muy atractivas. Ya sea una tienda online, un sitio web de reservas o simplemente una web de eventos de ocio, estos avances en programación web abren nuevas posibilidades de interacción entre los negocios y sus clientes. Ya es posible mostrar en los emails botones call-to-action para ver el pedido realizado o consultar el estado del envío. Otro ejemplo: obtener una opinión o testimonio sobre un producto (review) directamente desde el correo electrónico, sin salir de la bandeja de entrada. Son más comodidades para el usuario que contribuyen a crear una experiencia de compra positiva.

Google ideó esta API, pensando en aquellos contenidos que se envían diariamente a través de correos electrónicos y que requieren una acción por parte del usuario (aceptar una reserva, confirmar un registro, ver un pedido, …), capaz de permitir solventar estas acciones de la forma más rápida y simple posible. Dicha API es capaz de habilitar nuevas funcionalidades en la bandeja de entrada de Gmail, mediante el uso de marcado Schema.org en los formatos microdata y JSON-LD. Estos metadatos van embebidos en los correos electrónicos que envíanos desde nuestra aplicación a los usuarios de la misma.

Para poder habilitar estas acciones, se requieren dos condiciones básicas:

  • Rellenar el formulario de registro habilitado por Google.
  • Aquellos emails que lleguen a la bandeja de entrada marcados con schema.org deben estar firmados mediante DKIM o SPF.

Hasta el momento, se ha centrado los esfuerzos en acelerar la ejecución de las acciones más cotidianas que llegan a la bandeja de entrada de usuarios de Gmail, las cuales han sido organizadas en las dos categorías que veremos a continuación.

Acciones In-App

Las acciones In-App, son aquellas que se manejan directamente desde la bandeja de entrada de Gmail, sin que el usuario tenga la necesidad de salir fuera del servicio de correo. Por el momento se han agregado tres acciones de este tipo.

Acciones One Click

Permiten a los usuarios ejecutar aquella acción para la que fue destinado el correo, gracias a un solo click y sin tener si quiera que abrir el correo electrónico. O también en aquellos casos que requieran guardar algún tipo de información, SaveAction, tal como añadir un producto a una lista de deseos, etc. Estas acciones solo permiten ser ejecutadas en una ocasión.

One Click Action: add to Queue (añadir a la lista)

Acciones Review

Se utiliza para añadir reviews a productos, servicios, locales desde la bandeja de entrada. Inicialmente, se mostrará un botón que solicitará al usuario un valor numérico o una escala de clasificación y un comentario asociado.

Review Action: botón para publicar una opinión desde el correo

Acciónes Rsvp

Son usadas para declarar la asistencia a un evento. Si bien Gmail ya usa esta característica de la API, cuando envía la confirmación de asistencia a un evento de Google Calendar, actualmente no se permite su uso al resto de usuarios.
Ejemplo de integración de invitación a eventos

Acciones Go-To

Las acciones Go-To se usan en aquellas interacciones de mayor complejidad que requieran utilizar un enlace directo a una función externa o precisen la captura de datos importantes. Para resumir, su uso va destinado en las acciones que necesiten ejecutar una funcionalidad externa a Google. A diferencia de las acciones In-App, pueden ser ejecutadas múltiples veces. Hasta el momento se permiten dos casos de uso.
Botón de acción Check-in en la bandeja de entrada

Acciones ViewAction

Van destinadas a aquellos correos que requieren ir a otro sitio web para completar una acción, como podría ser: comprobar los pedidos de nuestra plataforma e-Commerce o realizar el check-in de un vuelo.

Acciones TrackAction

Para aquellos mensajes que enlazan con las aplicaciones de rastreo de paquetes de los servicios de transporte.

Tarjetas interactivas

Para complementar a estas acciones, Gmail ha implementado paneles que muestran la información encapsulada en el interior de los correos electrónicos, algo que han denominado tarjetas interactivas. De momento solo existe compatibilidad con FlightReservation, un subtipo de la entidad Reservation perteneciente a Schema.org. En este caso, no se muestran desde la bandeja de entrada, sino al abrir el correo electrónico.

Ejemplo de tarjeta interactiva para reserva de vuelos

Si lo desean, pueden encontrar la información ampliada y ejemplos de código para cada acción en este enlace.

LEER MÁS →

 
0

sábado,

junio

1,

2013

eCommerce, Tecnologia, Web

¿Aún no sabes todo sobre el responsive web design? ¡Pues se te va acabando el tiempo!

¿Has escuchado hablar de diseño adaptable o “responsive web design? Probablemente a estas alturas del 2013, la respuesta sea si, y también lo apliques en tus proyectos. Si no aún no te han hablado de este concepto o sigues dudando en aplicarlo, te daremos una serie de razones de peso para que veas lo que te pierdes. El Responsive Web Design es una técnica de diseño y desarrollo web que surge en 2010 de la mente de Ethan Marcotte. Es capaz de adaptar el contenido web a cualquier dispositivo, independientemente de que se trate de un smartphone, tablet, ordenador tradicional o porque no… ¡una nevera!. Su cometido es garantizar la mejor usabilidad y accesibilidad a los usuarios presentando nuestros contenidos con la mayor calidad posible y el tamaño e interfaces adecuados.

¿Cómo se consigue esto?

Mediante una serie de consultas al dispositivo que le indican al navegador la resolución actual. Así dependiendo del valor devuelto se adaptarán las imágenes, los textos, menús u otras secciones de forma que sean perfectamente legibles o se pueda interactuar con ellos. Es muy importante que TODO el contenido se muestre en la ventana sea cual sea el tamaño, sin que aparezca la odiosa barra de desplazamiento horizontal.

Ejemplo de diseño responsive en web y ecommerce

¿Importancia y beneficios del Responsive Design?

  • No será necesario tener diferentes subdominios de nuestro sitio, algo altamente beneficioso para el posicionamiento y facilitar el linkbuilding. Los buscadores se basan en una URL canónica y cualquier subdominio de esta URL lo indexarán como un web site diferente.
  • Reduce los costes de mantenimiento, ya que descarta la tediosa labor de crear y mantener diferentes versiones del proyecto adaptado a la mayoría de soportes disponibles. (Una para iPhone, otra Desktop, otra para tablets, Smart TVS, etc…)
  • Es una inversión rentable. Obviamente desarrollar un sitio web en “responsive” implica trabajar varios layouts y ese “trabajo extra” no puede ser realizado gratis, pero las visitas y conversiones a tu portal bien lo valdrán.
  • La última pero quizás más importante: Garantiza la presencia en dispositivos móviles. Algo que no podemos obviar ya que este año está previsto que las conexiones desde estos artilugios superen a las realizadas desde dispositivos de sobremesa cómo se ve en el siguiente gráfico (y sospechamos que nunca volverá a ser al revés)

Internet móvil contra Internet desde PCs wen web y tiendas online

En definitiva, invertir en este diseño adaptado a móviles implica que todos los actores salgan beneficiados. Desde desarrolladores hasta clientes o buscadores, pero sobre todo para quien van destinados nuestros contenidos, los usuarios finales.

¿Cómo sé si una web es responsive?

¡Pues fácil, con tu móvil!  Y si no tienes batería, no lo tienes a mano, aún vas con tu Nokia 3310 o no te quieres levantar ahora mismo del PC…  A nosotros nos encanta este servicio: quirktools.com/screenfly

¿Cómo va la adaptación en Internet?

Pues es cierto que el boom móvil nos ha cogido a todos un poco desprevenidos  y dependiendo de la complejidad del proyecto, la adaptación puede ser realmente costosa y complicada. Incluso marcas y proyectos gigantes aún están pendientes de transformar, por ejemplo Fnac, Zara, Dell y muchos otros. Aunque gran parte ya han cambiado o están en proceso. Algunos ejemplos geniales para probar el diseño elástico: FoodSense o Cacao Tour (Prueba a abrirlos y redimensionar tu navegador web)

¿Y en FreshCommerce?

Por nuestra parte, nuestros últimos proyectos ya utilizan diseño “responsive” cómo por ejemplo Artenerife, Náutica y Deportes, IslandShake, Liceo de Taoro o Distribuciones Canarias entre otros. Además los proyectos en marcha y los futuros serán 100% responsive, y los “no responsive” se adaptarán (aprovechando de paso para hacer algunos cambios). Por supuesto (y aquí nos damos una “autocolleja” por el mal ejemplo)  la nueva FreshCommerce también será adaptada, pero ya se sabe… “los clientes son lo primero”  😉

LEER MÁS →