Diseño de Portales Interactivos y Altamente

Best Practices
Visualization & Interactive Portal Design
Juan Antonio Molina
Presales Principal Consultant
Southern Region
[email protected]
1
Back to the Dashboard Future
3
Back to the Dashboard Future
Objetivo
4
Back to the Dashboard Future
Objetivo
5
Back to the Dashboard Future
La representación gráfica mediante Infografías
Representación visual de los propios textos. La infografía nació
como un medio de transmitir información gráficamente.
6
Back to the Dashboard Future
La representación gráfica mediante Infografías
7
Back to the Dashboard Future
La representación gráfica mediante Infografías
8
The 4 D’s
9
The 4 D’s
 Data Discovery
 Do-it-yourself
 Dashboarding
 Design
10
Data Discovery
11
Data Discovery
What is Data Discovery?
Una forma de BI que permite a los usuarios de negocio analizar su
información sin requerir de soporte de IT.
 Cruzar y "mezclar" cualquier dato.
 Visualización “Drag & Drop” de los datos.
 Explore sus datos hasta identificar el “Porqué" (Pivotar, clasificar, Clasificar,
filtrar…)
12
Data Discovery
Chart Attribute Syntax
 Nueva sintaxis FOCUS específica para Visualizaciones.
 Uso interno en InfoDiscovery 8.1, para convertirse en estándar
JSCHART & HTML5 en WF 8.2
 También incluye lenguaje de marcado para la información de
tooltips interactivos y menús jerárquicos
13
Data Discovery
Chart Attribute Syntax
14
Data Discovery
Interactivity
 Animación
 Funcionalidad ‘Drill Anywhere’
 Menus emergentes
15
Data Discovery
ESRI Mapping
Nuevo visor ligero de mapas ESRI para JSCHART y InfoDiscovery.
16
Data Discovery
ESRI “Preview” – Heat mapping & multiple layers
17
Data Discovery
ESRI Maps – Geo-enriquecimiento
18
Data Discovery
ESRI “Preview” - Clustering
19
Data Discovery
ESRI Maps – Clustering
20
Data Discovery
ESRI Maps – Densidad por puntos
21
Data Discovery
ESRI Maps – Drive Time Analysis
22
Data Discovery
ESRI Maps – Routing
23
Dashboarding
24
Dashboarding
 Nuevos estilos de Gauge
 Múltiple Información en un único Widget
 Diseño Web Adaptativo (Responsive)
25
Dashboarding
Múltiple Información en un único Widget
26
Dashboarding
Múltiple Información en un único Widget
27
Dashboarding
Diseño Web Adaptativo
28
Dashboarding
Diseño Web Adaptativo
29
Do it Yourself
30
Do it Yourself
Arquitectura
 Arquitectura “Plug-In” para WebFOCUS 8200
 Uso de d3 o cualquier otra biblioteca JavaScript para crear visualizaciones y relacionarlas a las
medidas y dimensiones en WebFOCUS
 Modelo de objetos que facilita la reutilización de componentes de gráficos WF como clases de
ejes, leyendas, tooltips, selecciones o drill-downs
 Las visualizaciones personalizadas aparecen en las herramientas WF como tipos de gráficos
adicionales e interactúan con los gráficos integrados perfectamente.
 Las propiedades de los Complementos se almacenan en FEXs y/o es editado con las
herramientas WF.
 API público: Plug-ins pueden ser creados por los clientes, consultores IBI o desarrolladores
externos
31
Do it Yourself
Arquitectura
GRAPH FILE ibisamp/car
SUM CAR.BODY.DEALER_COST
BY CAR.ORIGIN.COUNTRY
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH EXTENSION
ON GRAPH SET AUTOFIT ON
ON GRAPH SET STYLE *
TYPE=REPORT, chart-look=com.ibi.simple_bar,
TITLETEXT=&WF_TITLE.QUOTEDSTRING, $
TYPE=DATA, COLUMN=N1, BUCKET=x-axis, $
TYPE=DATA, COLUMN=N2, BUCKET=y-axis, $
ENDSTYLE
END
32
Do it Yourself
Personalización
33
Design
34
Design
35
Design
Mejorando la Experiencia de Usuario
 Nuevas hojas de estilo mejoradas
 Nueva arquitectura de backend (Server side)
 Nueva interfaz de usuario para herramientas WebFOCUS
36
Design
Mejorando la Experiencia de Usuario
37
Design
Mejorando la Experiencia de Usuario (Modern Stylesheets “tuned” for Web 2.0)
38
Design
Mejorando la Experiencia de Usuario (Modern Stylesheets “tuned” for Web 2.0)
39
Design
Mejorando la Experiencia de Usuario (Modern Stylesheets “tuned” for Web 2.0)
40
Design
Mejorando la Experiencia de Usuario
42
Let’s run some of this…
43
But wait… Is there a FIFTH “D” ???
44
The Fifth D…Data Analysis
Integrating Statistical Analysis into core graph services
o R statistical language now part of WF
o Process Control Graphs
• X-Bar-R
• U/P/I-Charts
o Predictive Analytics
• Forecasting
• Trend & Visual Sentiment Analysis
45
Trend & SPC Analysis
46
¿Preguntas?
47
MUCHAS GRACIAS
Juan Antonio Molina
Presales Principal Consultant
Southern Region
[email protected]
48