Visualización de la noticia: EEUU, la ruta 66 del periodismo interactivo

Capítulo 1: EEUU
La ruta 66 del periodismo interactivo

Llega septiembre y volvemos a poner el tren de la visualización a toda máquina. ¡A por ello! Vamos a recoger algunos sitios digitales con buenas experiencias en gráficos de datos y narración visual. Ellos han hecho todo lo posible para ayudarnos a comprender mejor lo que sucede a nuestro alrededor con la ayuda de gráficos, mapas, infografías y piezas interactivas.

Detrás de cada periodista existe una persona con sus propios prejuicios, que piensa y trabaja con sus propias creencias y perspectivas, y que pueden influir en su trabajo. Por tanto, los datos promueven el conocimiento público de la información, agregando certeza en algunos casos pero también incertidumbre.

Claves de su estilo:

– Observación: Historias basadas en la evidencia. Existen diferentes formas de evidencia (datos, informes, experiencia de primera mano, investigación académica, etc.). Se trata de descubrir nuevos conocimientos, responder a más preguntas y tomar mejores decisiones o entender mejor el entorno que nos rodea.

– Precisión e integridad: Intentan ser lo más precisos y rigurosos en la presentación de la información y probar sus hipótesis y suposiciones.

– Transparencia: tratan de explicar cómo llegan a sus conclusiones y, siempre que es posible, comparten los datos detrás de sus historias.

– Personalidad: Son periodistas brillantes, con un estilo único, limpio y claro. La visualización pone hechos y cifras en contexto de una manera atractiva, lo que ayuda a que más personas aprendan con los datos.

– Tecnología: apuesta definitiva por la red y las nuevas tecnologías. Estadística, matemáticas, programación, bases de datos.

– Inversión: Los equipos de datos y gráficos son grandes y multidisciplinares: diseñadores, desarrolladores, analistas de datos, cartógrafos, ilustradores, editores y contadores de historias.

El creciente uso de la visualización de datos dentro del periodismo significa que hay un cambio de la escritura como principal modo semiótico a los datos y la visualización como elementos centrales en la narración periodística.

A continuación listamos algunos medios interesantes para conocer mejor el mundo de la visualización informativa. Como dice el dicho popular, ni son todos los que están, ni están todos los que son. Adentrémonos en la madre de todas las carreteras visuales de la mano de estas diez bestias pardas.

Bloomberg News, 2022

1. BloombergBloomberg LP
Nueva York, EEUU
Bloomberg ofrece noticias, datos, análisis y videos de negocios y mercados al mundo, con las historias de Businessweek y Bloomberg News.
Acceso por subscripción: 299 dólares anuales.
Referencias: Dave Merrill
En Twitter
Ver gráficos.

The Wall Street Journal, 2022

2. The Wall Street Journal, Almar Latour.

Nueva York, EEUU
El mítico diario de las finanzas de Wall Street.
Acceso por subscripción: 9.99 euros al mes.
Referencias: Stuar A. Thompson, Tonia Cowan, Randy Yelp, Stephanie Stamm, Hanna Sender, Matthew Weber
Libro: The Wall Street Journal Guide to Information Graphics.
En Twitter.
Ver gráficos.

Imperio visual, The New York Times, 2022

3. The New York Times, AG Sulzberger

Nueva York, EEUU
El diario líder mundial en diseño, infografía e interactividad (Documentary Emmys, Malofiej Awards, Press Club Awards, World Press Photo, SND World´s Best Designed Newspapers, Internacional Reporting Polk Awards, Online Journalism Awards, Ellie Awards…). Su sala de trofeos periodísticos no tiene parangón.

El modelo a seguir por el resto de los mortales.

Referencias: Steve Duenes, Aron Pilhofer, Gabriel Dance, Matthew Ericson, Andrew DeVigal, Archie Tse, Mike Bostock, Jeremy Ashkenas, Matt Ericson
Galería de Premios
En Twitter
Ver gráficos

The Upshot, NYTimes

4. The Upshot, Walt Disney Co.
Nueva York, EEUU
The Upshot es una revista web publicada por The New York Times que difunde artículos que combinan la visualización de datos con el análisis periodístico de noticias.
Referencias: Steve Duenes, Amanda Cox, Nate Silver.

En Twitter.

Nate Silver y el 538

5. FiveThirtyEight, ABC News Internet Ventures.
Nueva York, EEUU
FiveThirtyEight, a veces representado como 538, es un sitio web que se centra en el análisis de encuestas de opinión, la política, la economía y los blogs deportivos.
Referencias: Nate Silver.
En Twitter
Su misión

ProPublica

6. ProPublica, Pro Publica Inc.
Nueva York, EEUU
ProPublica es una redacción independiente sin fines de lucro que produce periodismo de investigación de interés público.
Referencias: Lisa Larson-Walker, Lena V. Groeger, Lucas Waldron, Ryann Grochowski, Mauricio Rodriguez
Ver gráficos
Periodismo visual
Data Institute
En Twitter

Associated Press

7. AP, Associated Press
Nueva York, EEUU
El departamento de gráficos de la agencia Associated Press.
Referencias: Justin Myers, Michelle Minkoff
Data

Ver gráficos.

Wpost

8. The Washington Post, Nash Holdings LLC
Washington DC, EEUU
El diario del Distrito de Columbia lleva años invirtiendo en su equipo de datos y gráficos y ya es un Tyrannosaurus Rex del lenguaje multimedia y los datos.
Acceso por subscripción: 50-70 euros al año.
Referencias: Chiqui Esteban, Tim Meko, Manuel Canales, Joe Fox, Monica Ulmanu, Lauren Tierney, Meghan Hoyer, Brenna Maloney
En Twitter

Visual Explainers, USAToday

9. USA Today, Gannett
Washington DC, EEUU
El diario que trajo el color y la infografía a las portadas en los 90, en el podio de las tecnologías de la información.
Referencias: George Rorick, Sam Ward, Jeff Goertzen, Javier Zarracina
En Twitter
Ver gráficos.

LA Times

10. Los Angeles Times, Tribune Company.
LA, EEUU
La reina visual del Oeste americano.
Acceso por subscripción: 299 dólares anuales.
Referencias: Hanna Sender
En Twitter
En GitHub

En Observable

Un ejemplo.

Observable, interactividad al momento

Anexo 1. Observable
San Francisco, EEUU
Plataforma libre donde las personas pueden trabajar juntas para explorar, analizar y comunicarse con los datos directamente en el navegador. Según su lema: ‘Construyendo el futuro del trabajo colaborativo con datos’. A venido para quedarse.

Referencias: Melody Meckfessel, Mike Bostock
En Twitter.

Ver gráficos.

Visionary Press

Anexo 2. Visionary Press
San Francisco, EEUU
Editorial de libros interesantes sobre mapas y gráficos.
En Twitter

Referencias: RJ Andrews

National Geographic Magazine

Anexo 3. Otras referencias

National Geographic Magazine

The Atlantic
Newsweek
The Daily Beast
Univision
Tampa Bay Times
The Huffington Post
Scientific American
Dallas Morning News

Sesión magistral en el Máster en Periodismo Digital Multiplataforma – Universidad Loyola y CNN Academy

Máster en Periodismo Digital Multiplataforma LOYOLA - CNN Academy

Invitado por Rafa Hohr, estuve en Sevilla impartiendo un curso de cuatro horas sobre tipos de gráficos, visualización de datos e infografía para el módulo de Periodismo de Datos y Visualización.

La clase tuvo lugar el martes 18 de enero de 2022 en las aulas del Máster Loyola-CNN en Dos Hermanas (Sevilla), que dirige Francho Barón, corresponsal de la cadena de televisión en castellano.

Presentación sobre gráficos estadísticos, 2022

Los contenidos versaron sobre:

  • Visualización de datos y grafícos estadísticos.
  • Tipos de datos.
  • Tipos de gráficos.
  • Normas, consejos y ejemplos de publicaciones con gráficos estadísticos.

Romina Ishwar Mahtani Mahtani estuvo a cargo de la gestión de la visita. ¡Súper!

Máster en Periodismo Digital @cnn
@LoyolaMasteres. Ejecución de proyectos y claves.

Mapa del Sistema Universitario Vasco: Industria 4.0

Con el fin de responder mejor a las necesidades empresariales y a las de otros actores públicos, privados y sociales, así como conocer las capacidades formativas, investigadoras y de transferencia de los miembros del Clúster en el ámbito de la Industria 4.0.

Visualización interactiva del mapa de capacidades del Sistema Universitario Vasco en el ámbito de la Industria 4.0.

El buscador del Clúster 4Gune (Formación Universitaria en Ciencia, Tecnología e Ingeniería de Euskadi) recoge las capacidades formativas, investigadoras y de transferencia de los centros formativos miembro para orientar y ayudar a la hora de emprender unos estudios determinados, para encontrar profesionales del futuro o para mejorar las diversas actividades de la cadena de valor de las empresas.

La finalidad del proyecto es hacer accesibles las capacidades universitarias para el tejido productivo y empresarial (PYMES) y para otros actores de la Red Vasca de Ciencia, Tecnología e Innovación.

Clúster de Formación Universitaria en Ciencia, Tecnología e ingeniería de Euskadi
Clúster de Formación Universitaria en Ciencia, Tecnología e ingeniería de Euskadi

Desde una serie de hojas Excel se creo una base de datos digital para visualizar las capacidades del sistema universitario vasco categorizadas en función de:

  • El tipo de capacidad: formativa (grado, posgrado, formación continua), investigadora (equipos de investigación, unidades, institutos), equipamientos (laboratorios) y de transferencias (aulas).
  • Las correspondencia con los ámbitos de al Industria 4.0: 10 categorías de primer nivel (Robótica flexibles, ciberseguridad, fabricación aditiva.) desglosados a su vez en 49 de segundo nivel.
  • El impacto en las actividades de la cadena de valor de las empresas: 7 categorías (Producción, I+D, Ventas, Administración).
Esquema de un análisis funcional de la aplicación.

Ficha de Universidades y capacidades.

Para ello, primeramente se realizó un prototipo estático de la aplicación y un análisis de las funcionalidades del buscador.

Diagrama de árbol interactivo, librería de javascript D3.

La aplicación se desarrolló con las tecnologías web HTML5, CSS, Gulp y la librería de visualización D3.js.

Ver aquí.

Euskampus Fundazioa

Prodigioso Volcán, 2018.

Orden de clasificación en tablas

Big Ten Conference Standings Board

Buscando soluciones gráficas para visualizar una clasificación de mayor a menor he encontrado esta tabla visual de USA Today Sports que resume y compara de forma contundente las diferentes conferencias de fútbol americano (Football Bowl Subdivision) según diferentes categorías en 2015.

Cómo se comportaron las conferencias con fútbol americano en 2015.
Cómo se comportaron las conferencias con fútbol americano en 2015.

The Power Rank ofrece otra manera visual de presentar la misma información. En el ejemplo que podemos ver un poco más abajo, se comparan las distintas conferencias según el promedio de clasificación de cada equipo.

Las mejores conferencias de fútbol universitario, 2013, The Power Rank.

Plano de las marcas renombradas de España

Detalle del plano del Foro de Marcas Renombradas de España, 2018

Diagrama conceptual sobre las marcas renombradas de España.
Se incluye como desplegable en la Memoria de Actividades 2017.
Foro de Marcas
Dosis Font
2018

Diagrama conceptual de las marcas renombradas de España, 2018
Diagrama conceptual de las marcas renombradas de España, 2018

Portada del plano de marcas renombradas de España, 2018
Portada del plano de marcas renombradas de España, 2018

Exterior tríptico, Foro de Marcas, 2018
Exterior tríptico, Foro de Marcas, 2018

Interior tríptico, Foro de Marcas, 2018
Interior tríptico, Foro de Marcas, 2018

Formato tríptico 'C', 450x320 mm
Formato tríptico ‘C’, 450×320 mm

Sesión Bajo el Volcán: Vida audiovisual de los gráficos

Sesión en Prodigioso Volcán sobre el resurgir de los gráficos en el medio audiovisual. Mario Tascón, Rafa Höhr, Juantxo Cruz

Sesión Bajo el Volcán
Viernes 23 de febrero de 2018
Usos más innovadores de gráficos en el audiovisual y reflexionaremos sobre cómo las marcas pueden aprovechar estos recursos en sus estrategias de comunicación y marketing.

La nueva vida audiovisual de los gráficos
La nueva vida audiovisual de los gráficos

Rodrigo Fuentes diseñó el cartel; el éxito de la convocatoria para la sesión Bajo el Volcán fue rotundo. En tan sólo dos días se completó el aforo.

Error en un gráfico de tarta que apoya el mensaje de Obama.
Error en un gráfico de tarta que apoya el mensaje de Obama.

Los gráficos de noticias evolucionan de manera imparable. Cada día podemos ver trabajos más y más espectaculares, tanto impresos como digitales. Sin embargo, la innovación en este tipo de recursos informativos está sucediendo en otro lugar: las pantallas de televisión. Gracias a la realidad aumentada, experiencias inmersivas, pantallas interactivas o escenarios virtuales, la visualización de datos está adquiriendo un papel fundamental (por no decir el protagonista) a la hora de contar una noticia.

Lo primero es saber que estás intentando decir. Con la gran cantidad de datos que podemos obtener hoy en día es fácil perderse y al final no contar nada. Debes ser selectivo con los datos para encontrar la mejor forma de comunicar tu idea.
Lo primero es saber que estás intentando decir. Con la gran cantidad de datos que podemos obtener hoy en día es fácil perderse y al final no contar nada. Debes ser selectivo con los datos para encontrar la mejor forma de comunicar tu idea.

La cita fue en el local de la Calle Escorial 17 de Madrid y duró en torno a una hora. Comida oriental y baos de de Toy Panda.
La sesión arrancó con una presentación de los formatos más novedosos desde el punto de vista de la manera en la que el conductor, presentador o periodista interactúa con la información. A continuación, se analizó de forma práctica cuáles son las diez experiencias necesarias para construir un gran gráfico.

Sesión Bajo el Volcán: gráficos y televisión
Sesión Bajo el Volcán: gráficos y televisión

Rafa Höhr ha sido director de Infografía de The Sunday Times, del grupo Joly; y responsable de infografía digital de El País. Ha obtenido a lo largo de su carrera los más prestigiosos galardones en infografía multimedia periodística, como el Peter Sullivan, equivalente al Pulitzer en esa disciplina.

Juantxo Cruz ha sido responsable del departamento de infografía de El Mundo durante más de diez años. Cuenta con una larga experiencia en gráficos y visualización de información y en la actualidad desarrolla proyectos de Big Data e información visual.

El valle inquietante de la animación 3D

Diferentes renderizados virtuales.

El valle inquietante (‘The Uncanny Valley’) es una hipótesis acuñada por el profesor de robótica Masahiro Mori en 1970 que afirma que cuando la apariencia de un robot se parece más a un humano, la respuesta emocional del observador se irá haciendo más positiva. Sin embargo, llega un punto en el que la respuesta  se vuelve muy negativa. En esa zona negativa se encontraría el valle inquietante. Pasado el valle, la empatía con el robot vuelve subir.

The Uncanny Valley: Existence and Explanations, Shensheng Wang, Scott O. Lilienfeld, and Philippe Rochat
The Uncanny Valley: Existence and Explanations, Shensheng Wang, Scott O. Lilienfeld, and Philippe Rochat

 

Según la hipótesis, tenemos una respuesta psicológica negativa a los robots que casi se parecen al ser humano al apreciar algo extraño (nos da mal rollo, vemos algo siniestro, como un cadáver espeluznante).

 

En 1970 el Doctor Mori diseñó un gráfico en el cual se encuentra la representación de los diseños de los robots en función del parecido humano y como resultante obtenemos el agrado del diseño, dicho gráfico es el conocido como “Uncanny Valley”.
En 1970 el Doctor Mori diseñó un gráfico en el cual se
encuentra la representación de los diseños de los robots en función del parecido
humano y como resultante obtenemos el agrado del diseño, dicho gráfico es el
conocido como “Uncanny Valley”.

 

 

Se supone que el gusto por un robot aumenta cuanto más humano es, hasta que cruza hacia el valle (el área gris).
Se supone que el gusto por un robot aumenta cuanto más humano es, hasta que cruza hacia el valle (el área gris).

 

Wired: La hipótesis del valle inquietante aplicada a 'celebrities'
Wired: La hipótesis del valle inquietante aplicada a ‘celebrities’

 

Userlike: la hipótesis del valle inquietante aplicado a los servicios al cliente.
Userlike: la hipótesis del valle inquietante aplicado a los servicios al cliente.

Referencias:

  • La influencia del Efecto ‘Uncanny Valley’ en el Diseño de un Robot Social (pdf), Anaís Garrell Zulueta
  • Face Reality: Investigating the Uncanny Valley for virtual faces, Rachel McDonnell, Trinity College Dublin (pdf)
  • Total Recoil: The Uncanny Valley is an Uncanny cliff, Jessica Outlaw (web)

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,

!Gracias por visitar mi sitio! | Copyright © 1992- 2022 juantxo_cruz. Todos los derechos reservados.