Durante el desarrollo de aplicaciones interactivas para Havas Media Group, Abacus Consulting  utilizó el ‘framework’ de AngularJS, una arquitectura de trabajo realizada con el lenguaje JavaScript.

 

El selector principal de datos atiende a las directivas en AngularJS.

El selector principal de datos atiende a las directivas en AngularJS.

 

AngularJS (comúnmente llamado Angular.js o AngularJS), es un ‘framework’ de JavaScript de código abierto, mantenido por Google, que se utiliza para crear y mantener aplicaciones web de una sola página. Su objetivo es aumentar las aplicaciones basadas en navegador con capacidad de Modelo Vista Controlador (MVC), en un esfuerzo para hacer que el desarrollo y las pruebas sean más fáciles.

 

Diagrama orientativo sobre le funcionamiento de AngularJS.

Diagrama orientativo sobre le funcionamiento de AngularJS.

 

 

Sus principales ventajas:

  • 2-Way-data-binding (vinculación de datos en dos direcciones)AngularJS esta continuamente observando los cambios que suceden tanto en la Vista, así como en el Modelo y sincroniza datos entre estos.
  • Directivas: Las directivas permiten crear nuestros propios elementos HTML y manipular el DOM.
  • Vistas y Rutas: podemos agregar un solo elemento HTML (contenedor) dentro de un solo archivo HTML, y dentro de éste poder renderizar cada página que tenga que mostrarse, sin tener que recargar la URL.
  • Filtros: Los filtros apoyan a la vista a la hora de presentar los datos realizando transformaciones sobre ellos. Tiene un mecanismo para filtrar vistas basadas en variables de ámbito scope (por ejemplo, al buscar), sin la necesidad de escribir muchos códigos extra.
  • Soporta ‘routing’ y ‘deep linking’: El routing permite la interacción con la URL del navegador. Es muy importante para la experiencia del usuario, si se están construyendo aplicaciones de una sóla página.
  • Promesas (Promises): Tiene una implementación interna de especificación Promises/A+. Promises es una alternativa popular para callbacks cuando se está trabajando con las respuestas del servidor.
  • Animación: Dispone de un programa que incluye herramientas para crear animaciones fácilmente.
Principales características de AngularJS.

Principales características de AngularJS.

En labores de diseño y usabilidad web, Abacus Consulting ha realizado un prototipado personalizado de dos aplicaciones: una para Meaningful Brands y otra para Connect.

 

Primeros prototipos de la aplicación.

Primeros prototipos de la aplicación.

 

Primero se hicieron los primeros sketch o bocetos en papel de la futura aplicación y la navegación entre distintas pantallas.

 

Los wireframes son una representación estática de lo que será la plataforma web.

Los wireframes son una representación estática de lo que será la plataforma web.

 

Después elaboramos multitud de versiones de los wireframes y los mockups, que contienen información adicional en cada una de las pantallas: disposición de los botones, contenidos, llamadas a la acción, movimientos tipo dentro de la navegación entre pantallas.

En general, los wirefames y mockups permiten visualizar la línea gráfica, la estructura de la información, el contenido y avanza las funcionalidades del proyecto. Se trata de una representación estática, se entrega y aprueba en formato de imagen.

 

Realización de prototipos para web.

Realización de prototipos para web.

La aplicación interactiva para web de Havas Media Group recoge toda la información correspondiente al estudio Meaningful Brands y Connect 2017. Abacus Consulting convirtió la base de datos desde un formato en Excel a un formato CSV para optimizar las búsquedas.

 

Abacus Consulting Technologies ha realizado una optimización de la base de datos del estudio y una aplicación web con detallados gráficos interactivos sobre los cambios significativos tanto en industrias, sub-industrias y marcas.

 

Arquitectura del proyecto.

Arquitectura del proyecto.

 

Transformación de los datos en archivos CSV

Los archivos CSV (del inglés comma-separated values) son un tipo de documento en formato abierto sencillo para representar datos en forma de tabla, en las que las columnas se separan por comas (o punto y coma en donde la coma es el separador decimal: Argentina, España, Brasil…) y las filas por saltos de línea.

 

Datos estructurados en plantillas de Excel

Datos estructurados en plantillas de Excel

 

Lectura, manipulación y análisis de datos con R

Lectura, manipulación y análisis de datos con R

 

 

Con un fichero de texto (.csv) podemos hacer maravillas en el mundo de la analítica web. Ya que con los medios adecuados podemos consultar los números que tenemos en nuestra base de datos de forma escalable, flexible y rápida.

 

 

Desde 2016, Abacus Consulting ha realizado el proyecto de transformación digital y de visualización de los estudios de marca Meaningful Brands y Connect (Havas Media Group).

El reto: crear una aplicación web de consumo interno de gráficos y visualización desde cero. La materia prima con la que contábamos eran millones de datos en formato excel.

El proyecto de visualización conduce los estudios de Havas Media Group desde unas herramientas estáticas, con visualizaciones básicas y una respuesta a la demanda muy lenta, hacia una plataforma interactiva integrada en los servidores de la compañía que permite la personalización de las peticiones en tiempo real.

 

Nuestra misión:

• Homogeneizar la entrada y salida de datos

• Mejorar el aspecto de las visualizaciones

• Simplificar la narración visual

• Conseguir una experiencia de usuario e interactividad excelentes.

 

Arquitectura del proyecto.

Arquitectura del proyecto.

Meaningful Brands

Meaningful Brands es el primer estudio que conecta el valor de una marca con su aportación al bienestar individual y social. En el contexto tecnológico actual, donde el consumidor es participativo y crítico en parte a través de canales como social media y pueden hundir una marca o derribar un gobierno, es crítico entender bien cuál es el impacto que las marcas tienen en la calidad de vida.

Por ello, a través de esta aplicación, los usuarios pueden consultar el estudio de cada país y descargarse todo tipo de informes en formato Power Point, imágenes en PDF o jpeg o guardar cada una de las consultas realizadas.

El estudio se ha realizado en más de 34 países y aglutina a más de 1.000 marcas comerciales.

El reto fue crear una aplicación web de gráficos y visualización desde cero con miles de datos en formato excel.

El reto fue crear una aplicación web de gráficos y visualización desde cero con miles de datos en formato excel.

Havas Media Connect

Connect es un estudio para medir y comparar los niveles de influencia y asociación que guardan las marcas de un país o región. Estos estudios sirven para hacer recomendaciones estratégicas a los clientes respeto a puntos de contacto potentes y sustentados para cada una de sus campañas

Havas Media Connect también esclarece la asociación que hace el consumidor entre los puntos de contacto y las marcas. Esto ayuda a entender si una marca tiene algún territorio mediático bien definido, y a cuantificar las oportunidades que tiene la marca en términos de inversión y desarrollo de nuevos puntos de contacto.

Connect cuenta con una amplia base de datos en la nueva aplicación que permite un entendimiento claro de la dinámica de los medios según una categoría, un país, y un target específico.

JasperReports (actualmente TIBCO Jaspersoft Studio, Palo Alto, California) es una aplicación de software libre (versión Community) escrita en Java (Eclipse) para crear informes con contenido dinámico.

iReport es el front-end gráfico de código abierto para la edición de informes —una herramienta para diseñar las páginas flexibles del documento desarrollada desde 2001—. Actualmente cuenta con más de 50 tipos de gráficos distintos, tablas, imágenes y mapas.

 

Formatos de exportación de Jaspersoft Studio.

Formatos de exportación de Jaspersoft Studio.

 

 

Tipos de gráficos en JasperReports en la versión 4, 2010

Tipos de gráficos en JasperReports en la versión 4, 2010

 

 

Tipos de gráficos HTML5, versión 6, 2016

Tipos de gráficos HTML5, versión 6, 2016

 

 

Los gráficos HTML5 (en la versión profesional) se pueden personalizar utilizando  propiedades para el control del nivel de píxel sobre cada visualización.

Jaspersoft Studio utiliza el lenguaje de consulta de sus fuentes de datos, por ejemplo SQL o MongoDB, para crear el primer pase de proyección de datos. Una vez que los datos ingresan a la herramienta, se pueden transformar aún más usando variables y grupos, y cada campo puede usar lógica personalizada para crear la transformación o proyección de datos deseada.

 

Descargas: Community Edition

TIBCO Visual Analytics