Transformación digital de los estudios Meaningful Brands y Connect (Havas Media Group)

Planificación de una aplicación web para visualización de datos.

Durante los años 2016 y 2017, asumo la dirección y la planificación del 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.

 

Diagrama de flujo de la aplicación.
Diagrama de flujo de la aplicación.

 

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.

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.

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.

 

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.

 Desde unos datos en Excel a una  aplicación web interactiva

La aplicación interactiva para web recoge toda la información correspondiente al estudio Meaningful Brands y Connect 2017 de Havas Media Group. Junto con la empresa de inteligencia de localización Abacus Consulting Technologies,  se 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.

 

 

Datos estructurados en plantillas de Excel
Datos estructurados en plantillas de Excel

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.

 

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.

 

Ejemplo de datos estructurados en formato JSON.
Ejemplo de datos estructurados en formato JSON.

 

Proceso de prototipado de la aplicación

En labores de diseño y usabilidad web, realicé 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.

 

 

Primeros desarrollos web de la aplicación

Una vez aprobados los wireframes, se pasó a su desarrollo para web, tabletas y móviles. En esta ocasión,  el desarrollo se realizó con AngularJS, una arquitectura de trabajo realizada con el lenguaje JavaScript para el desarrollo de aplicaciones.

 

El selector principal de datos
El selector principal de datos

 

Las aplicaciones basadas en AngularJS logran mayor fluidez en experiencia de usuario ya que la comunicación entre el cliente y el servidor se realiza de manera transparente para el usuario. La sensación es que nunca abandona la página (mayor rapidez en la carga de datos).

 

El menú de visualizaciones y un ejemplo de matriz.
El menú de visualizaciones y un ejemplo de matriz.

 

Principales ventajas de AngularJS:

  • 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.

Prototipos y wireframes de visualizaciones

La aplicación comenzó siendo una plataforma para visualizar datos; por ello, las visualizaciones fueron analizadas y prototipadas de forma exclusiva.

Un wireframe es una herramienta de visualización para la presentación de propuestas de diseños de una página web. El  wireframe  debe ser capaz de explicar fácilmente cómo los usuarios interactúan con el sitio web y saber si estamos en el camino correcto.

Algunas tareas que destacamos de los prototipos:

  • Creación de un libro de estilo de visualizaciones (tipografías, colores, tipos de gráficos…).
  • Estudio y realización de los wireframes de los selectores de marcas y su repercusión en las visualizaciones.
  • Estudios de las proporciones y posiciones de los elementos gráficos que componen cada visualización o la información ofrecida por las distintas descripciones emergentes o ‘tooltips’ integradas en la aplicación.

 

Wireframe de los selectores de las visualizaciones.
Wireframe de los selectores de las visualizaciones.

 

 

 

Proporciones y colores de algunos elementos gráficos.
Proporciones y colores de algunos elementos gráficos.

 

 

Una vez que las visualizaciones han sido aprobadas en formato estático por el cliente, se realiza un nuevo wireframe con las visualizaciones integradas en la aplicación web. Todo proyecto interactivo debe estar validado en formato estático antes de comenzar su desarrollo.

 

Ejemplo de visualización
Ejemplo de visualización

 

El desarrollo web de las visualizaciones

Las visualizaciones fueron desarrolladas por Beatriz Martínez experta en la librería de javascript D3, gráficos vectoriales en SVG y el lenguaje de estilos CSS.

Algunos tipos de visualizaciones que se incluyen en la plataforma
Algunos tipos de visualizaciones que se incluyen en la plataforma

D3 es una excelente herramienta escrita por Mike Bostock para desplegar datos dentro de páginas web. Algunos ejemplos de gráficos realizados:

– Gráficos de línea
– Herramientas de matrices
– Gráficos de burbujas
– Histogramas
– Rankings de barras
– Mapas de posicionamiento
– Visualizaciones de araña
– Diagramas de procesos de decisión de compra
– Tablas dinámicas de datos

 

Visualizaciones interactivas realizadas con D3
Visualizaciones interactivas realizadas con D3

Algunas ventajas de la librería D3.js

Esta librería se basa en funciones predefinidas escritas en lenguaje javaScript que mejoran la selección de elementos, permiten crear y personalizar elementos SVG y añadir efectos como transiciones o tooltips. Tiene una gran capacidad para manipular grandes volúmenes de datos y vincularlos a dichos elementos para lograr crear gráficos de gran riqueza.

  • Flexibilidad: sólo la imaginación puede limitar lo que se puede hacer con la librería
  • Buena integración y facilidad de depuración
  • Librería modular
  • Manipulación del DOM dirigida por los datos
  • Permite un gran control sobre el resultado visual final
  • Crear elementos SVG (formas, líneas, axes)
  • Facilidad para crear escalas
  • Animaciones e interacciones de última generación
  • Transiciones y efectos visuales

D3.js es una herramienta ideal tanto para gráficos sencillos de barras o líneas, hasta complejos gráficos relacionales o  visualizaciones con mapas.

 Informes en formato PowerPoint desde la aplicación

El usuario puede descargar informe específicos sobre un país en formato Microsoft Power Point. Todos los informes parten de una plantilla única. Cuando el usuario selecciona el ámbito geográfico del informe, automáticamente se genera el informe y se descarga en su ordenador.

Wireframe del módulo para exportar informes en formato PowerPoint
Wireframe del módulo para exportar informes en formato PowerPoint

 

Informe que se descarga desde la aplicación personalizado según el país escogido.
Informe que se descarga desde la aplicación personalizado según el país escogido.

 

 

También se ofrece al usuario la posibilidad de descargar el informe en formato Microsoft Excel; es decir, los números tabulados en bruto.

 

Desde la propia plataforma se pueden exportar informe en formato Excel o Power Point.
Desde la propia plataforma se pueden exportar informe en formato Excel o Power Point.

 

Descargas de imágenes

La aplicación permite, una vez seleccionada una visualización, exportarla en varios formatos o guardarla en un carrito de la compra personalizado.

Formatos de descarga de las visualizaciones seleccionadas en la web.
Formatos de descarga de las visualizaciones seleccionadas en la web.

Los formatos en los que se pueden descargar las imágenes son PNG, PPTx (Microsoft PowerPoint) y XLS (Microsoft Excel).

 

Módulo de administración de usuarios

El proyecto incluye un módulo de administración de los usuarios de la aplicación. Cada perfil de usuarios tiene sus correspondientes permisos para entrar en la aplicación.

 

El módulo de administración de usuarios y sus permisos.
El módulo de administración de usuarios y sus permisos.

 

El módulo de administración incluye las funciones básicas para gestionar una base de datos de usuarios (crear, listar, actualizar y borrar).

 

 

Los administradores pueden crear, ver, actualizar y borrar usuarios desde la plataforma.
Los administradores pueden crear, ver, actualizar y borrar usuarios desde la plataforma.

Gestión del proyecto

La gestión y comunicación del proyecto con el cliente se realizó a través de la herramienta online de colaboración Basecamp.

 

Basecamp, herramienta online para colaborar con clientes.
Basecamp, herramienta online para colaborar con clientes.

 

En cuanto a la gestión de incidencias, se realizó a través del gestor Mantis Bug Tracker.

Mantis Bug Tracker es un software que constituye una solución completa para gestionar tareas en un equipo de trabajo
Mantis Bug Tracker es un software que constituye una solución completa para gestionar tareas en un equipo de trabajo

Un esquema didáctico de La Celestina

La Celestina

Diagrama de personajes de La Celestina. 

Fernando de Rojas, 1499.

 

Ficha de la Comedia o Tragicomedia de Calisto y Melibea :

Su loca pasión por Melibea lleva a Calisto a romper todas las barreras morales y sociales y a aliarse con una vieja alcahueta. El destino de Calisto y Melibea, engarzado con habilidad insospechada por Celestina, culmina fatalmente con la muerte de ambos.

Desde el momento en que entra en escena, Celestina irrumpe no sólo en toda la obra, sino en toda la literatura, hasta convertirse en un personaje literario de fama universal. Reflejo de una sociedad conflictiva ─la española del siglo xv─ e intensa expresión de las más grandes pasiones humanas, Celestina resume y liquida la tradición medieval y abre las puertas a tiempos nuevos.

 

 

Diagrama de personajes de La Celestina.
Diagrama de personajes de La Celestina.

 

 

Esquema reducido de los principales personajes de La Celestina.
Esquema reducido de los principales personajes de La Celestina.

 

Tragicomedia de Calisto y Melibea, Juan Jofre, Valencia,
Tragicomedia de Calisto y Melibea, Juan Jofre, Valencia,

La cara oculta de los diagramas de relaciones

Visualizing graph Data
Visualizing graph Data

Corey L. Lanun

Manning Publications Co., 2017

208 pp $44

 

El experto en visualización Corey Lanum (Boston,  EEUU) nos acerca en este libro los conceptos principales de los diagramas de relaciones a través de una serie de introducciones prácticas y elementales a tecnologías como Gephy, Netlytic, Keylines y D3.

 

Apariencia de la aplicación Gephi para generar visualizaciones de relaciones.
Apariencia de la aplicación Gephi para generar visualizaciones de relaciones.

 

Gephy, Keylines y D3 aportan tres aproximaciones distintas al mundo de los ‘networks graphs’. Gephy es un software libre y gratuito que se descarga en el ordenador y permite, junto con la herramienta de análisis Netlytic, realizar este tipo de gráficos a través de un cuadro de mandos interactivo.

 

Apariencia de una visualización realizada con la librería de Keylines.
Apariencia de una visualización realizada con la librería de Keylines.

 

Keylines es una librería de javascript especializada en conectar miles de nodos a través de líneas para establecer relaciones y estudios sobre esa red. La desilusión: es una librería de pago y, por ello, no se podrán realizar los ejercicios incluidos en el libro. No preocuparse por ello.

 

Apariencia estática de una visualización realzada con la librería de javascript D3.
Apariencia estática de una visualización realzada con la librería de javascript D3.

D3 es la librería libre y gratuita de javascript más comentada en los  últimos años en los sitios de visualización y, por tanto, sólo añadiremos que el libro le dedica el último apéndice a modo de introducción breve en sus fórmulas para trabajar con nodos.

Corey Lanun (Cambridge Intelligence) nos enseña a organizar y construir una visualización de nodos a través de ejemplos sobre seguridad e inteligencia, seguridad en la red, lucha contra el fraude o infraestructuras sociales o tecnológicas.

El lector interesado puede seguir, en la segunda parte de este manual,  los elementos básicos de una base de datos, adentrase en el mundo de la interacción con la visualización y los mapas,  jugar con el factor tiempo y conocer los principales problemas de la navegación en los gráficos de nodos.

El contenido de este libro va mucho más allá que un sencillo manual técnico. Sus páginas contienen una buena guía sobre visualización y muy buenos ejemplos y consejos. Como muestra este último botón: ‘Los mejores diseños de visualizaciones llegan a través de conocer a los usuarios y las preguntas que se deben estar haciendo con los datos’. Lo dice Corey Lanun.

 

 

 

Cómo visualizar los grupos de interés que están influyendo en tu proyecto

Mapas de los círculos de interés (gestión estratégica de los

Cuando hablamos de los grupos de interés, realmente ¿de qué estamos tratando? ¿Es posible establecer u diálogo con ellos o gestionarlos de alguna manear? Una parte importante en la gestión estratégica de los activos intangibles de una empresa es el conocimiento de las partes interesadas en el diseño de un servicio.

Estas partes interesadas son individuos o grupos de personas que pueden impactar o ser afectados por el diseño y la prestación de un servicio existente o futuro. A la hora de gestionar la reputación corporativa es imprescindible conocer a los potenciales clientes y a las partes interesadas, a quiénes quizás nunca se les prestó atención.

Primer paso:  Identificar a los agentes implicados

Todo producto debe adaptarse a su público objetivo, por ello, tenemos que determinar el público al que deseamos llegar por medio de análisis cualitativos proporcionados por encuestas temáticas, tormentas de ideas y la observación para recopilar datos. ¿Quién es el público de nuestro producto? ¿Está preparada la audiencia para recibir la información que se le proporciona? ¿Qué necesitan aprender para usar la información de manera efectiva? ¿Que es lo que ya entienden? Adicionalmente se pueden dar un enfoque cuantitativo para confirmar los primeros análisis y realizar árboles, diagramas de Venn, matrices y mapas de la compañía y las empresas asociadas.

Se trataría de poner nombres y caras sobre los miembros de la sociedad que son de interés para los negocios y así reforzar la credibilidad de la información que se les presenta.

Las partes interesadas clave: Aquellas personas o grupos que tienen una influencia significativa en el diseño del servicio o que se ven afectados significativamente por el mismo y cuyos intereses e influencia deben ser reconocidos para asegurar su éxito. Un grupo o individuo clave podría poner fin a un determinado proyecto (alta dirección).

El entorno interno: Son personas o grupos de personas que son parte de la organización (accionistas, empleados, directivos, personas que integran la organización).

El entorno externo: Son personas o grupos de personas con ‘intereses creados’ en la organización (activistas, inversores, proveedores, consumidores, clientes, autoridades reguladoras, ONGs, gobiernos y Administraciones Públicas, competidores, entorno social, entorno ambiental).

Conocer los cuatro modelos de mapeo

Un mapa de grupos de interés es una herramienta que ayuda a identificar y clasificar de manera visual a las distintas partes interesadas en función de diferentes parámetros y atributos: interés, influencia, legitimidad, participación, poder o creatividad.

Modelo de Gardner (1986): Matriz de poder y dinamismo

El modelo de mapa de grupos más común es la matriz de poder de James R. Gardner que clasifica a los individuos y grupos de acuerdo al poder que poseen en las estrategias de la empresa y su capacidad para tomar decisiones (dinamismo) sobre una matriz.  Señala la dirección en la que se debe canalizar el esfuerzo “político” o de gestión antes de tomar algunas medidas o acciones.

 

Matriz genérica de poder e interés (Gardner, Mendelow)
Matriz genérica de poder e interés (Gardner, Mendelow)

 

Modelo de Mendelow (1991):  Matriz de poder e interés

El modelo de Aubrey L. Mendelow (Kent State University, Ohio) presenta, como Gardner, una matriz  para identificar a los grupos que influyen en la organización. Posee dos ejes críticos: el potencial de estos actores para influir en  la organización y el potencial de estos grupos de interés de cooperar con la organización.

Diagrama de Venn en el cual se relacionan las variables poder, legitimidad y urgencia (Modelo de Mitchell, Agle y Wood)
Diagrama de Venn en el cual se relacionan las variables poder, legitimidad y
urgencia (Modelo de Mitchell, Agle y Wood)

Modelo de Mitchell, Agle y Wood (1997): Diagrama de Venn

El modelo clasifica a los ‘stakeholders’ en siete tipos según tres variables, poder, legitimidad y urgencia que se resume en un diagrama de Venn.

La variable ‘poder’ significa la capacidad del ‘stakeholder’ de influenciar en la organización. La variable ‘legitimidad’ se refiere a la relación y a las acciones del grupo de poder con la organización en términos de participación, propiedad o conveniencia. La ‘urgencia’ alude a los requisitos que los grupos o individuos plantean a la organización en términos de urgencia y oportunidad.

Así, la combinación de estos tres atributos  lleva a siete tipos de ‘stakeholders’: latentes, discrecionales, reclamantes, dominantes, peligrosos, dependientes y definitivos (jugadores clave).

Modelo de Bourne & Walker (2005):  El círculo de poder

El diagrama del círculo de partes interesadas sirve para identificar y visualizar la influencia relativa de cada uno de los principales interesados ​​y planificar formas de interactuar y gestionar sus expectativas o contribuciones.

 

El diagrama del círculo de partes interesadas: proximidad, influencia y poder.
El diagrama del círculo de partes interesadas: proximidad, influencia y poder.

 

Para desarrollar el “círculo”, las partes interesadas se ponderan según tres características:

Eje del círculo de poder:  Algunas partes interesadas pueden ‘matar’ el proyecto usando su propio poder; en cambio, otras partes interesadas tienen el poder de cambiar o dañar el proyecto, pero no pueden por sí mismas cancelarlo o ‘matarlo’.

Eje de proximidad: Este eje considera cuál es la asociación de una parte interesada con el día a día del proyecto. El pequeño círculo en el centro del diagrama representa el proyecto. El espacio entre los dos círculos representa la esfera de influencia del proyecto en toda su comunidad de actores. La proximidad de una parte interesada al proyecto está representada por la proximidad de su segmento al proyecto en el centro.

Eje de urgencia o importancia: La anchura del arco representa la cantidad de urgencia o importancia atribuida a una parte interesada desde la perspectiva de los equipos (es decir, la probabilidad de que el ‘stakeholder’ use su poder), cuanto más amplio sea el segmento, mayor será la urgencia.

 

 

 

Referencias

James R. Gardner, Rober Rachlin, H. W. Allen Sweeney: Handbook of Strategic Planning (1986)

ehow.com: What Is a Stakeholder Map?

CSR Europe: The Sustainable Development Goals (SDGs): The value for Europe.

ORSE: Observatoire de la responsabilité sociétale des entreprises.

Imperial College London: Project Stakeholder Analysis (doc template)

Blackwell Publishing: Construction Stakeholder Management (pdf).

Project Management Institute: Visualizing stakeholder influence (article, 2006)

CHARTS: El diagrama de caja y bigotes de John W. Tukey

Exploratory Data Analysis, John W. Tukey, 1977

John W. Tukey (1915-2000), de la Universidad de Princeton (EEUU), definió en 1970 el diagrama de caja (‘box-plot’ en inglés). Este gráfico se utiliza cuando deseamos explicar cómo se distribuyen una serie de datos cuantitativos. Otras opciones para reflejar distribuciones son los histogramas y las curvas de distribución. En comparación con estos últimas, el gráfico de caja es más sencillo de entender, más claro y, por tanto, hace más rápida la comprensión visual.

 

Gráfico de caja y bigotes de John W. Tukey comparando los puntos más altos de cada estado de EEUU y altitudes de algunos volcanes, 1977
Gráfico de caja y bigotes de John W. Tukey comparando los puntos más altos de cada estado de EEUU y altitudes de algunos volcanes, 1977

 

Morfología del diagrama de caja

En su forma más simple, el gráfico de caja representa cinco datos estadísticos en una sola dimensión: el valor mínimo, el cuartil inferior (percentil 25), la mediana, la media, el cuartil superior (percentil 75) y el valor máximo.

Los cuartiles son los valores que dividen los datos en cuatro partes iguales o cuartos. Los percentiles, en cambio, dividen los datos en cien partes iguales. De esta forma,  el cuartil inferior (Q1) se corresponde con el percentil 25 y el cuartil superior (Q3) con el percentil 75.

· Caja: La longitud de la caja representa la distancia entre los percentiles 25 y 75: el tramo de la escala que va desde el primer cuartil al tercer cuartil de la distribución (rango intercuartílico o rango intercuartil). Esto incluye el 50 % de las observaciones centrales.
· Punto interior de la caja: Representa la media.
· Línea interior de la caja: Representa la mediana.

 

Los gráficos de caja muestran un resumen de distribución de datos en muy poco espacio.
Los gráficos de caja muestran un resumen de distribución de datos en muy poco espacio.

 

· Líneas verticales (bigotes): Representan los valores máximos (corte superior) y mínimos (corte inferior) del conjunto de datos. Sirven como referencia para ubicar las observaciones que están por fuera del 50% central de la distribución. Por tanto, estos diagramas descriptivos son muy valiosos para observar los valores atípicos (‘outliers’) y las dispersiones de los puntos con respecto a los percentiles.

Evolución de la potencia de salida (kwatts;). Cada gráfico de caja representa un día en concreto.
Evolución de la potencia de salida (kwatts;). Cada gráfico de caja representa un día en concreto.
Morfología del gráfico de caja: el valor mínimo, el valor máximo, la mediana, el primer cuartil y el tercer cuartil de los datos.
Morfología del gráfico de caja: el valor mínimo, el valor máximo, la mediana, el primer cuartil y el tercer cuartil de los datos.

John Wilder Tukey

Tukey fue un polifacético científico: matemático, químico y estadístico. En 1977 publicó el libro ‘Exploratory Data Analysis’ (‘EDA) en el cual propone una nueva didáctica de la enseñanza de la estadística descriptiva mediante innovadoras herramientas visuales.

 

El termino 'software' fue usado por primera vez por John Wilder Tukey en el año 1957.
El termino ‘software’ fue usado por primera vez por John Wilder Tukey en el año 1957, creador del diagrama de caja.

 

Exploratory Data Analysis , 1977
Exploratory Data Analysis , 1977

Exploratory Data Analysis
John W. Tukey.
1977
Addison-Wesley Publishing Company.
688 pp.

DATA: La oportunidad del análisis y la visualización de datos

Out of Sight, Out of Mind, pitchinteractive.com

Texto publicado en UNIR Revista el 28 de enero de 2014.

Sin duda, el tratamiento de los datos se ha convertido en una poderosa herramienta en todos los frentes del mundo de la comunicación. ¿De dónde salen todos estos datos? ¿Quién está detrás de ellos? Podemos pensar que la ciencia de los datos la desarrollan increíbles mentes pensantes de los departamentos de Ingeniería y Ciencia Computacional en las más importantes compañías de tecnología. Y por un lado es así. Los ingenieros en computación, los estadísticos y los matemáticos han encontrado un nuevo continente en el desarrollo de aplicaciones que manejan millones de datos. Es lo que se conoce como ‘Big Data’. Sus trabajos no deben quedarse en el manejo de las cifras: los números hay que convertirlos en algo que se pueda consumir.

Hablamos de la visualización de los datos a través de lenguajes de programación. El principal lenguaje de programación del lado del cliente e implementado por todos los navegadores (Chrome, Safari, Explorer…) es JavaScript. Así, el desarrollo de este lenguaje en los últimos años ha disfrutado de una evolución exponencial. Cada día nacen nuevas librerías del lenguaje para tareas de lo más diversas y especializadas.

Para la visualización de datos, la librería más dinámica y estructurada para la visualización de cantidades se llama ‘Data-Driven Documents –D3–’. Estas dos letras, D3, están de moda entre las empresas que se dedican a la presentación de datos en el navegador. Buscan ‘chicos D3’: Urgente. Obviamente, se trata de un perfil tecnológico; una persona que sepa programar, que tenga un buen conocimiento de Javascript y controle los lenguajes de la World Wide Web moderna (HTML5) y sus hojas de estilo (CSS).

Sin embargo, ser un gran programador no garantiza ser un buen contador de historias. Y aquí se abre la gran oportunidad para los periodistas en cualquiera de sus ramas. Se trata de encontrar la respuesta adecuada a cuestiones a veces muy complicadas y darles una solución sencilla.

 

Ejemplo de visualización de datos:

Out of Sight, Out of Mind Pitch Interactive, Berkely, California.
Out of Sight, Out of Mind Pitch Interactive, Berkely, California.

 

Ejemplo de estadística de investigación:

 Ejemplo de estadística de investigación In Climbing Income Ladder, Location Matters The New York Times, NY, EEUU
In Climbing Income Ladder, Location Matters The New York Times, NY, EEUU

 

Todo trabajo de investigación debe comenzar por la formulación de preguntas relevantes para luego identificar, obtener y transformar los datos en algo manejable que pueda utilizarse en infografías, gráficos, visualizaciones y textos escritos.

La cultura del ciudadano está cambiando: ahora exige que las información que se aporta esté sustentada en datos. Si no se los damos, el mismo puede consultar en la red lo que están diciendo otros, y siempre tendrá más fuerza un argumento con los pies en los datos que un comentario o opinión sin ellos. Ahora, los datos y su análisis ya no son exclusivos de las grandes compañías tecnológicas como Google, eBay o Facebook: prácticamente todo tipo de industria, grande o pequeña, necesita el análisis de datos para convencer al ciudadano y mejorar el rendimiento de sus negocios.

 

Se necesitan programadores, claro, pero también gente que sepa como hacer las preguntas adecuadas, qué datos recoger, cómo tratarlos para encontrar los datos que nos sirvan, como hacer un resumen de ellos y finalmente, qué herramientas existen para presentarlos en sociedad. A veces, tendremos que echar mano de programadores especializados en visualización; otras, bastará una infografía sencilla realizada por uno mismo en Excel o Tableu.

La comunicación es un aspecto de la nueva cultura de la red que interesa a todo tipo de industria y actividad, desde educadores y estudiantes hasta agentes de publicidad. Los personas que se dedican o quieran dedicarse a la comunicación deben conocer cómo trabajar con distintos perfiles en el desarrollo de los gráficos y el análisis de datos.

Muchas veces, las empresas echan en falta la penetración de sus informe en su propia empresa o hacia el exterior. La mayoría de las veces, la causas se encuentran en la mala presentación de los conceptos, la poca o nula información visual y la gran extensión de los textos. En una sociedad sin tiempo, es imprescindible el resumen de conceptos y ofrecer una alternativa visual. Los sectores más interesados en el análisis de los números son las empresas de análisis de los consumidores (marketing, análisis social, consultoría, gobiernos), de los resultados de las máquinas (ingeniería, medicina, topografía, finanzas), de los contenidos (medios de comunicación, educación) y de la investigación (I+D, alta tecnología). Los profesionales con más proyección en la visualización de información son periodistas, documentadores, directores de arte, diseñadores y desarrolladores de páginas web que deben presentar la información de forma coherente y digerible para el usuario final. En definitiva, personas que sepan encontrar el valor en los datos para después presentarlo de forma eficaz.

PRESS: Una apasionante y maravillosa aventura periodística

Texto publicado el 10 de mayo de 2017 en la Edición Extraordinaria de EL MUNDO con motivo de los primeros 10.000 números del diario: Nuestros primeros diez mil días en EL MUNDO.

 

Tuve noticias de EL MUNDO desde el mismo día de su nacimiento en 1989. Me encontraba cursando la carrera de Ciencias de la Información en la Universidad de Navarra. Como no podía ser de otra forma, los estudiantes de Periodismo seguimos el acontecimiento con especial interés; un diario dirigido por Pedro J., que arrancaba con una encuesta a pocos días de unas elecciones generales y con una presentación arrebatadora.

 

En la calle Pradillo

EL MUNDO se puso en contacto conmigo a través de Mario Tascón. Fue en 1995, justo después de la captura de Luis Roldán en Laos. A mí me tocó vivirla en la redacción de Diario 16, en un edificio en la carretera de La Coruña colindante con la urbanización de La Florida. Estuve poco tiempo en el diario dirigido por José Luis Gutiérrez, pero fue suficiente para entender lo apasionante y surrealista que puede llegar a ser esta profesión.

No lo pensé demasiado. Para un infografista que comenzaba su profesión periodística trabajar con EL MUNDO era un sueño. Además, vivía en Prosperidad, a doscientos metros de la calle Pradillo, que es dónde se encontraba la redacción del diario.

La Prosperidad es un suburbio histórico madrileño adosado al extremo nororiental del barrio de Salamanca en el camino a Hortaleza y Canillas. La ‘Prospe’ se hizo salvaje en los años de La Movida, la selva del V.O., el Garaje Hermético y la Ópera Flotante. El Mundo de la calle Pradillo también fue salvaje.  La redacción no era muy grande, una planta de aquel edificio divida en dos zonas por los ascensores, con sillas y mesas para no más de doscientos periodistas. Todos nos conocíamos. Muchos de los redactores y redactoras de aquella época son ahora directores de algún medio de comunicación. EL MUNDO siempre fue una gran escuela de periodismo y de vida.

 

Una de las página del especial que conmemora los 10.000 números de EL MUNDO Una de las página del especial que conmemora los 10.000 números de EL MUNDO

 

 

El Mac y el diseño

EL MUNDO y el diseño compartían la pasión por los ordenadores Mac de Apple Computers. El Mac cambió radicalmente la forma de relacionarnos con las máquinas. En los diarios permitió la edición electrónica en un tiempo récord. En los diarios y en las agencias de publicidad o de medios la materia prima corre muy deprisa y se transforma con mucha facilidad. En el caso de los diarios, la gasolina que mueve la rotativa son las noticias imprevistas, las que alteran el estado de la casa desde los sótanos hasta las azoteas.

El ordenador de Apple era un artefacto fácil de manejar, entender y fácil de transportar. Los primeros programas de dibujo y edición de páginas permitían cambiar los diseños en pocas horas, algo que hasta entonces era impensable. Así, el departamento de Diseño, Infografía e Ilustración se convirtió en uno de los más dinámicos y entretenidos del panorama nacional y, en muy pocos años, estuvo reconocido entre los periódicos mejor diseñados del mundo.

 

Logotipo El Mundo 10.000 números Logotipo El Mundo 10.000 números

 

Teletipos y cierres

La infografía en España nació en los antiguos departamento de Ilustración, muy vinculada al dibujo a mano alzada. Las infografías de sucesos eran viñetas de dibujo realizadas con la información que aportaban los inolvidables teletipos de agencia. EL MUNDO, como todos los diarios, tuvo un departamento de teletipos.

Allí llegaban los mensajes de las agencias y los faxes. Se iban clasificando por temáticas o por secciones del diario. Aquí, los de Deportes, en este otro montón, los de Nacional. Cuando el montón tenía un volumen considerable o cuando llegaba una noticia urgente, se repartían en la redacción.

Recuerdo llegar después de comer y encontrar los famosos teletipos perfectamente colocados enfrente de los teclados de los respectivos redactores jefe. Ser responsable de los teletipos no era algo trivial. ¡Ay de ti si extraviabas alguno importante! Así era Internet a principios de los 90.

Luego, los teletipos se repartían entre los redactores y, si estimaba que se podía enriquecer con una infografía, el redactor de turno acudía al departamento de Diseño para solicitarla. No dábamos abasto para atender a todas las peticiones.

Los redactores sabían que si su noticia aportaba una infografía tendría mayor aceptación por parte del lector. Además, EL MUNDO no paraba de recibir premios de Diseño y toda la redacción quiso compartir la experiencia en sus páginas. Se llegó a proponer, siguiendo un modelo norteamericano, un formulario para solicitar una infografía. El sistema duró media hora. Misión imposible.

En la calle Pradillo, aprendimos el arte de trabajar deprisa, desafiando siempre a la hora de cierre y a los empleados de la rotativa. Una lucha interminable para evitar ser el último que cerraba el planillo de control del diario. El departamento de Infografía se llevó el trofeo muchos días, que consistía en una cariñosa tarjeta roja en la reunión de mañana del día siguiente. Con los años, los cierres del diario pasaron de ser algo muy serio y respetuoso: llegar tarde a la rotativa costaba mucho dinero al editor.

 

 

Nuestros primeros diez mil días en El Mundo

Las noticias de última hora

En el departamento de Infografía tuvimos que hacer muchas infografías de noticias de última hora. Muchos lectores conocían nuestro trabajo por ellas.–_

– Oye, ¿tú a qué te dedicas?

– Hago infografía en EL MUNDO, respondía.

– Y, ¿eso qué es?

–  Bueno, verás, cuando se cae un avión o cuando hay un atentado, son los mapas y dibujos que acompañan a la noticia…

– ¡Ah, ah, vale!

 

En la década de los 90, en EL MUNDO hicimos infografías de todos los atentados de ETA. Siempre estuvo muy vivo el debate entre el periodismo y la Ilustración. En esa década, muchos periodistas con formación en Diseño entraron a formar parte de las redacciones de diarios. Estábamos ahí para aportar un punto de vista más riguroso a la información visual. De alguna manera, los infografistas fuimos pioneros del actual Periodismo de Datos.

No valía con interpretar a través de un dibujo lo que decía un teletipo. Había que mojarse. Si se podía, un infografista se tenía que desplazar al lugar del atentado y mandar un croquis lo más fiel a la realidad. En la redacción ya no se dibujaban viñetas, ahora se hacían diagramas explicativos sobre planos cartográficos reales. En la cultura de la noticia de última hora, EL MUNDO estableció unas pautas para que el infografista se desplazase también a los sitios y enriqueciese las crónicas con sus notas visuales.

Más adelante, la infografía dio una nueva vuelta de tuerca a la representación de las noticias con el uso de fotografías, sobre las cuáles se explicaba el suceso. La redacción entendía que un suceso trágico era algo muy delicado y que nuestros lectores eran rigurosos y serios. Por tanto, las infografías tenían que estar a la altura del acontecimiento y de los lectores.

 

La gestión de la información

Si la noticia podía estar acompañada de datos, se buscaban en una biblioteca visual que teníamos en la redacción: diccionarios, enciclopedias, atlas geográficos, anuarios estadísticos, guías de gráficos, manuales de diseño, libros especializados en todo tipo de materias. Puede parecer un chiste si se compara con la cantidad de información que podemos encontrar hoy en la red, sin embargo, en aquella época era el departamento con más documentación visual del panorama nacional.

EL MUNDO reconoció la importancia de la documentación en las infografías creando la figura del documentador visual, un periodista dedicado a tiempo completo a ayudar a la redacción a encontrar los datos apropiados para la historia.

 

Encuestas y resultados electorales

Las situaciones más inverosímiles en la sección de infografía se suelen producir en el fin de semana que se publica una encuesta de opinión o en la vorágine de resultados de una noche electoral.  Para el lector que no sepa cómo funcionan, las encuestas de opinión encargadas por el diario – las encuestas de SIGMA DOS en nuestro caso- suelen mantenerse en riguroso secreto hasta pocas horas antes de su publicación. Por tanto, los gráficos hay que planificarlos, maquetarlos y realizarlos en un escaso margen de tiempo.

En las encuestas y en las noches electorales, antes de llegar la automatización de las tablas de resultados, la sección de infografía necesitaba cantidades ingentes de periodistas que terminaban dictando al infografistas los resultados de cada pueblo de España. La primera edición al 95% escrutado, una segunda edición al 98%, una tercera al 99,9% y una cuarta cuando ya ha salido el sol con el celebrado 100%. Internet, por supuesto, acabó con toda aquella tramoya electoral.

 

En la Avenida de San Luis

A finales de 2007, la redacción de Pradillo se trasladó a un nuevo edificio en la Avenida de San Luis para alojar a más de 1.500 periodistas. El diario se había convertido en un gran grupo editorial y las nuevas tecnologías habían enterrado muchas de las técnicas de la profesión, pero la teoría debía ser la misma que nos había llevado hasta allí.

Internet trajo la integración de los equipos de trabajo off-line y on-line hasta su fusión en uno solo. La mutación fue complicada y en mucho caso traumática. Internet ofrece la posibilidad de incorporar el movimiento, el sonido y la interactividad en nuevos formatos informativos como son el vídeo o los gráficos interactivos.

En San Luis, la infografía evoluciona hacia el Periodismo de Datos, buscando información en bases de datos públicas y haciendo visualizaciones para explicar historias y dar nuevas respuestas al lector.

Sigo viendo EL MUNDO a menudo. Lo veo en su firmas de opinión y en sus periodistas de investigación. Lo reconozco en sus geniales viñetas e impecables ilustraciones, en su vibrante diseño, es sus siempre premiadas infografías –animadas y estáticas-, en las curiosas miradas de sus periodistas fotográficos y de vídeo. Gracias por tanto periodismo. Felicidades por esto primeros 10.000 números. ¡Y que cumplamos muchos más!

 

 

Ver más páginas en:

encajabaja

inconsolata

EL MUNDO

 

Leyendo la edición especial de EL MUNDO con motivo de sus primeros 10.000 números.
Leyendo la edición especial de EL MUNDO con motivo de sus primeros 10.000 números.

Instructor en el Curso de infografía para ATRESMEDIA 2017

instalaciones del Grupo Antena 3 en San Sebastián de los Reyes.

Curso: ‘Cómo mejorar una noticia con infográficos’
Perfiles: Periodistas de televisión de Antena 3
Lugar: ATRESMEDIA, San Sebastián de los Reyes
Fechas: meses de Julio y Septiembre de 2017
Duración: 6 horas
Organización: ATRESMEDIA, Elena Alonso Albiñana.
Realización: Prodigioso Volcán.
Tutores: Mario Tascón, Rafa Höhr, Juantxo Cruz

Presentación y curso para periodistas sobre cómo mejorar una noticia con gráficos, 2017.
Presentación y curso para periodistas sobre cómo mejorar una noticia con gráficos, 2017.