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
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.
Algunas referencias sobre programas y recursos para trasladar una base de datos o un fichero a un entorno espacial, generalmente mapas digitalizados.
(en construcción)
Kepler, análisis geoespacial. KEPLER
Kepler.gl es una poderosa herramienta de análisis geoespacial de código abierto para conjuntos de datos a gran escala.
Es una aplicación basada en web de alto rendimiento y agnóstica de datos para la exploración visual de conjuntos de datos de geolocalización a gran escala. Construido en la parte superior de deck.gl, kepler.gl puede representar millones de puntos que representan miles de viajes y realizar agregaciones espaciales sobre la marcha.
Kepler.gl usa el reductor ‘redux’ para almacenar y administrar las transiciones de estado. Este paquete consta de un reductor y los componentes de la interfaz de usuario para ‘renderizar’ y personalizar el mapa.
CartoDB, geolocalización de datos. CARTODB
Geolocalización de grandes volúmenes de datos y combinación con visualizaciones. Integración con lenguajes de programación en D3js. Es una plataforma en plena expansión sobre google maps y está siendo incorporado por múltiples empresas para tomas de decisiones:
Quién lo utiliza: BBVA, Wall Street Journal, United Nations, Twitter, Mashable
MapBox, búsqueda de mapas, navegación y localización. MAPBOX
Proveedor de mapas online.
Mapbox es el creador, o un colaborador significativo, de algunas bibliotecas de mapeo de código abierto y aplicaciones, entre ellas la especificación MBTiles, la cartografía TileMill IDE, la biblioteca de Javascript de Leftlet, y el estilo de mapas y analizador sintáctico (parser) CartoCSS.
Quién lo utiliza: New York Times, NPR, ProPublica o el Washington Post, Foursquare, Evernote, Financial Times, The Weather Channel, Uber Tecnologies.
OpenStreetMap, mapas de código abierto. OPEN STREET MAP
OpenStreetMap (también conocido como OSM) es un proyecto colaborativo para crear mapas libres y editables. OpenStreetMap está creado por una gran comunidad de colaboradores que con sus contribuciones al mapa añaden y mantienen datos sobre caminos, senderos, cafeterías, estaciones de ferrocarril y muchas cosas más a lo largo de todo el mundo.
OpenStreetMap impulsa mediante geodatos a miles de sitios web, aplicaciones móviles y dispositivos de hardware.
Google Maps y su API de Javascript.
GOOGLE MAPS
Herramienta para posicionar información, en formato GeoJSON O JSON, sobre capas en un mapa.
Usando la API de Javascript de Google Maps, se pueden insertar en un mapa marcadores, polilíneas, polígonos, etc.
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
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.
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.
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
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.
Instructor de visualización de datos en el curso de formación en Castilla-La Mancha Media.
Redacción web.
Febrero de 2018
Castilla-La Mancha Media Isaías Blázquez, director de Informativos de la Televisión de Castilla-La Mancha. Mario Saavedra, Jefe de Economía y subdirector en Teinteresa.es
Calle Río Guadalmena, 45007 Toledo
Desde el 9 de febrero de 2018 y hasta el día 23 del mismo mes, varios miembros del equipo de Prodigioso Volcán impartieron cursos de formación en Toledo relacionados con la redacción digital en para Castilla-La Mancha Media, el medio de información público de esta comunidad autónoma. Además, al final de cada sesión también se entregó a los asistentes un manual con las dudas más frecuentes en cada materia.
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.
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.
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.
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
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.
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.
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.
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.
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
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.
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.
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
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
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
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
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.
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.
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 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.
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.
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
Second Story
Second Story is a network of design studios that focuses on responsive environments, story-driven experiences, experimentation, and innovation. For more than 20 years, we have conceptualized, designed, and developed projects that educate, immerse, and activate across the cultural and brand space.
Print is an iconic design and visual culture brand encompassing a venerated magazine, a website, premium book and e-book lines, and the Regional Design Annual, one of the most well-respected design competitions in the industry.
Founded in 1940, Print seeks to build a dialogue about design by detailing the intersections of art and culture. Rather than focusing on the how-to of design, the experts who write for Print cover the why—why the world of design looks the way it does, how it has evolved, and why the way it looks matters.
To fulfill its mission, Print focuses on a broad stroke of visual culture today, covering everything from publication design to interactive work, motion graphics, corporate branding, exhibitions, illustration and socially conscious design.
Print is sophisticated. Bold. Distinguished. Experienced. Savvy. The longest-running stateside graphic design publication, it has won five National Magazine Awards—the industry’s highest honor.
As the design world has evolved over the decades, Print has been right there with it, and will continue to evolve to bring its readers the best design writing from the most prominent authors, legends and critics in the field today. Print’s contributing editors and regular writersinclude such top design thinkers as Michael Dooley, Steven Heller, Claire Lui, Debbie Millman, Rick Poynor, Ellen Shapiro, Paul Shaw, Jude Stewart and Douglas Wolk.
2014 RDA: «Who the F#%K is Charlie Crist?» Miami New Times, Miami: Miche Ratto (art director/designer); Miami New Times (client)
Desde 2015, soy consultor autónomo para temas relacionados con el lenguaje multimedia, la narración visual, la visualización de datos, la infografía, el diseño y el desarrollo web.
Colaboro habitualmente con la empresa de consultoría estratégica Prodigioso Volcán.
CICE certifica el Máster y entrega diploma acreditativo al finalizarlo.
Características
Máster en Diseño y Programación Web. MDI
Duración: 300 horas lectivas.
Al menos 600 horas de dedicación
El objetivo general del Máster en Diseño y Programación Web es formar profesionales que conjuguen un exacto conocimiento técnico y creativo aplicado al diseño web; reuniendo en un mismo programa de estudios todas las aplicaciones y entornos de diseño, así como el desarrollo y programación web de sitios interactivos y adaptativos.
Este máster permite formar a la nueva generación de profesionales web que utilizan el estándar internacional W3C, dominando las técnicas creativas relacionadas con el Front-End (la parte del software que interactúa con el usuario) y el Back-End (la parte que procesa la entrada desde el Front-End).
El alumno consigue aplicaciones de acabado profesional, válidas para multiplataforma, aplicando herramientas de desarrollo y diseño web, utilizando lenguajes semánticos como HTML5 y CSS3 de manera ágil, escalable y productiva, y desarrollando la personalización de las aplicaciones mediante XML, PHP, MySQL y WordPress.
Al finalizar la formación el alumno podrá desarrollar su actividad laboral como:
Diseñador y desarrollador de sitios Web con HTML5, CSS, JAVASCRIPT utilizando Responsive Design
Desarrollador y programador de aplicaciones PhP y MySQL utilizando WordPress
Programa
Módulo 1. Introducción al PHP
Módulo 2. Bases de datos MySQL
Módulo 3. PHP estructurado y orientado a objetos
Módulo 4. WordPress
Módulo 5: Programación con HTML 5
Módulo 6: Presentaciones de documentos estructurados
Módulo 7: Programación JavaScript y jQuery
Módulo 8. Proyecto Final
