Apache ECharts | NextCollege | Big Data | Pentaho | Geomatica | Drones | Machine Learning

Responsable	Johana Diaz Acosta
Última actualización	04/09/2023
Miembros	1

MÓDULO 1: Pentaho Despliegue

Pentaho Server: Startup (Configuración, Download & Install)
Pentaho User Console (PUC) (Layout)
Datasource JSON
MIME Types
Show Hidden Files
Extendiendo el Soporte en PUC para Frameworks y Tecnologías Adyacentes

MÓDULO 2: Tecnologías Auxiliares

DOM (en CDE Layout)
HTML (en CDE Layout)
XML (en CDE Layout)
XHTML (en CDE Layout)
CSS (en CDE Layout)
JS (en CDE Layout)
AJAX / FETCH (en CDE Layout)

JQUERY & JQUERY UI

Descripción y Uso
JQuery en la Perspectiva Layout
Creando Tabs con JQuery
Creando Acordeon con Jquery
JQuery UI y su Uso en Pentaho

MÓDULO 3: Apache Echarts - Implementación

¿Qué es Apache ECharts?
Principales aplicaciones
Librerías, extensiones y componentes adicionales
Librería ECharts y jQuery
Creación de carpeta de Solución
Servidor local http-server de NodeJS: Características | Licencia | Configuración | Instalación
Docker: (Descripción | Características Licencia, Teminología Docker: Imagen | Contenedor, Principales usos y proyectos | Ventajas, Instalación | Funcionamiento | Ejemplos)
Utilización de http-server dockerizado para trabajar en Servidor local: (Instrucciones Start y Stop)

MÓDULO 4: Configuración & Cuadro de Mando Integral (CMI)

Recursos Utilizados
Elementos de DOM
Obtención del Datasource
Estructura Principal de Configuración
Renderización

CUADRO DE MANDO INTEGRAL (CMI)

Descripción, Características, Definición y Limitaciones del CMI
Evolución y Reseña Histórica del CMI
Descripción del modelo de Toma de Decisiones en la Era de la Información

MÓDULO 5: Indicadores

Tipos de indicadores: (Indicadores Financieros, Indicadores No-Financieros, Inductores de Actuación, Relación Causa-Efecto)
Indicadores de Resultado
Indicadores de Inducción
Criterios de Selección de Indicadores
Creación de diccionario y documentación de Indicadores
Descripción de las Key Performance Indicator (KPI)

PERSPECTIVAS DE ANÁLISIS

Perspectiva Financiera
Perspectiva Cliente
Perspectiva Proceso Interno
Perspectiva Aprendizaje y Crecimiento
Implementación de un Cuadro de Mando Integral

MÓDULO 6: Ciencia y Simplicidad

Justificación del Uso de la Ciencia al Diseñar Dashboards
Clasificación de Dashboards de Acuerdo a la Pirámide de toma de decisiones tradicional: Estratégico | Táctico | Operativo
Descripción y ejemplificación del concepto Fidelidad de Datos
Importancia de la Contextualización de los datos del Dashboard: Datos adyacentes | Categorías adyacentes | Indicadores aislados
Descripción, ejemplificación y comparación entre Indicadores contextualizados y descontextualizados: Gauges | Bullets
Creación de Dashboard en una sola página
Utilización de Tabs en Dashboards
Manejo de estructuras de carpetas
Importancia del concepto Precisión de Datos
Descripción de los principales Principios de Diseño
Importancia del concepto Datos Relevantes
Descripción, características y diferencias entre estilos de diseño: Flat Design vs Realist Design
Configuración de las líneas de la Grilla: Horizontales | Verticales

MÓDULO 7: Percepción Visual

Descripción de los conceptos: Percepción | Percepción visual | Visión
Aplicación del concepto Percepción Visual a los elementos del Dashboard
Importancia del Equilibrio en los elementos del Dashboard
Descripción e importancia de la Simetría en los Charts
Descripción del concepto Equilibrio Asimétrico
Descripción del concepto Cerramiento
Importancia de los conceptos Figura y Fondo
Descripción del concepto Asociación y aplicación a los elementos del Dashboard
Importancia del concepto Subordinación
Importancia de los conceptos Simplificación y Navaja de Ockham

MÓDULO 8: Colores de Diseño

Conceptos: Color | Luz | Longitud de onda | Espectro visible
Conformación del Círculo Cromático: CMYK | RGB
Colores: Colores Primarios | Secundarios | Terciarios
Propiedades del Color: Tono | Saturación | Luminosidad
Colores Acromáticos, Colores Fríos y Cálidos
Análisis de la Psicología del Color
Importancia de la Armonías de Colores: Complementarios | Triada | Análogos
Creación de Paletas Custom: Colores Pastel | Naturales
Utilización de Paletas de Colores Online
Descripción de la notación Hexadecimal de los Colores
Tipos de Daltonismo: Protanopia | Deuteranopia | Tritanopia
Utilización de Colores Efectivos
Recomendaciones de diseño: Dirigir la atención | Evitar efecto camuflaje
Análisis de la Tendencia actual de paletas de Colores: Flat Design | Material Design | Bootstrap

MÓDULO 9: Fuentes y Tipografías

Tipografía, Fuente y Familia
Usos y características de las tipografías: Serif | Sans Serif
Importancia de definir Set de Tipografías. Análisis de sites web más populares
Análisis de Fuentes recomendadas en: Textos Cortos | Largos | Nivel de importancia. Tamaño de fuente recomendada
Consideraciones de diseño efectivas respecto a las Fuentes tipográficas
Aplicación en Apache ECharts de las Propiedades HTML para manipular fuentes: font-family | font-size | text-align | vertical-align | color
Heredar configuración y asignar estilos a elementos ECharts
Análisis y configuración de los diferentes Tipos de archivos de Fuentes: TTF | OTF | EOT | SVG | WOFF | WOFF2
Configuración avanzada de Fuentes tipográficas en Apache ECharts: Importar tipografía | Crear @font-face | Asignar tipografía a elementos ECharts | Utilización de Google Fonts

MÓDULO 10: Alertas y Tooltips

Descripción, características y tipos de Alertas
Consideraciones respecto a las alertas de tipo Semáforo
Descripción y ejemplificación de cómo resaltar un valor en un Apache ECharts. Configuración avanzada de Apache ECharts utilizando formatos condicionales y Funciones JavaScripts
Implementación de botón Bootstrap para obtener la descripción del Chart
Ejemplificación de cómo resaltar los ítems de un Line Chart que coincidan con una lista de valores. Configuración avanzada de Apache ECharts utilizando Arreglos, Bucles interactivos y Funciones JavaScripts
Configuración para Mobile: Charts para que muestren sus valores sin necesidad de interactuar
Configuración para Desktop: configuración de Tooltip, simple y formato HTML

MÓDULO 11: Charts | Gauges | Maps

Diseño efectivo de cada uno de los Charts de Apache ECharts
Ejemplificación de cada tipo de Chart y sus partes
Diseño eficiente
Series múltiples
Configuración avanzada de diseño minimalista
Configuración avanzada de diseño llamativo
Documentación completa

PIE CHART | RING CHART

Utilización de categoría 'Otros'. Utilizado en casos que las porciones más pequeñas no superen un límite mínimo
Buenas prácticas al configurar los Labels
Configuración de Labels adyacentes a las porciones del Pie Chart
Desventajas del uso de Pie Chart y alternativa de presentación efectiva

MÓDULO 12: Bar Chart

Presentación horizontal y vertical. Invertir ejes
Configuración avanzada de Bar Chart para representar valores actuales y valores esperados
Comparación entre Bar Chart y Line Chart
Utilización de diferentes símbolos (puntos, vectores) para marcar valores en la Grilla
Análisis de los distintos tipos de presentación de valores
Configuración de Bar Chart de tipo Stacked: simple y múltiple

EDITOR ONLINE

Descripción y utilización del editor online
Ejemplificación de uso
Código completo
Propiedades establecidas y valores por defecto

MÓDULO 13: Gauge Tacómetro

Configuración con puntero y barra de progreso
Configuración con rangos de valores: implementación de colores y etiquetas adyacentes
Configuración con valor esperado o target
Configuración con puntero creado a partir de vectores
Diseño reducido
Diseño similar al velocímetro de un automóvil

GAUGE ACTIVITY

Diseño similar al de Apple Watch: circulares, con barra de progreso, porcentajes e imagen representativa
Representación de ítem individual
Diseño de Gauges adyacentes
Diseño de Gauges anidados

MÓDULO 14: Scatter Chart | Scatter Color | Bubble Chart

Configuración avanzada de Chart de tipo Cuadrante mágico Gartner
Implementación de curva de tendencia con regresión lineal
Configuración avanzada de Chart tipo Scatter Color, en donde los ítems toman un color de acuerdo a su valor
Configuración avanzada de Bubble Chart con línea de promedio general.

DOCUMENTACIÓN

Bloques de configuración: title, legend, grid, xAxis yAxix, visualMap, tooltip, dataset, series, textStyle
Cómo utilizar la documentación: Árbol de propiedades | Descripción | Valores esperados | Ejemplos

SPLINE LINE CHART

Ventajas y diferencias con Line Chart
Principales usos

MÓDULO 15: Line Chart

Configuración de rangos de valores en eje horizontal
Implementación e importancia del uso de puntos (symbol)
Diseño con implementación de Imágenes en la Leyenda
Diseño avanzado con implementación de barra de Zoom
Imágenes representativas utilizadas como marcas en la línea
Configuración de los valores de inicio y fin del eje vertical: estático y dinámico

STEP LINE CHART

Ventajas y diferencias con Line Chart
Principales usos
Diferentes tipos: Step Start | Step Middle | Step End

COMBO

Aplicación y usos de un Chart que combina Bar y Line
Aplicación y usos de un Chart que combina Bar y Área

MÓDULO 16: Boxplot Chart

Definición de sus marcadores: Menor | Primer Cuartil | Segundo Cuartil | Tercer Cuartil | Mayor
Definición de los valores Outliers
Diseño avanzado de Chart con cálculo automático de marcadores y Outliers
Implementación de valores obtenidos del Datasource

CANDLESTICK

Definición de sus marcadores: Apertura | Cierre | Mínimo | Máximo | Estado
Configuración de Bar Chart complementario

TREND ZONE

Configuración de Zonas de Tendencia
Rango de valores | Configuración de colores | Múltiples zonas

MÓDULO 17: Trend Line

Configuración en diversos Charts de Líneas de Tendencia
Línea horizontal | Línea inclinada | Múltiples líneas
Configuración manual y automática

RADAR CHART

Configuración avanzada para utilizar valores obtenidos del Datasource
Diferentes estilos: Spider | Circular
Configuración de Leyenda interactiva

FUNNEL CHART

Definición de sus marcadores: Base | Cuello
Configuración de etiquetas: Adyacentes | Integradas
Implementación: Horizontal | Vertical
Utilización de diversos tipos de Funnel: Completo | Mitad

MÓDULO 18: Boxplot Chart

Definición de sus marcadores: Menor | Primer Cuartil | Segundo Cuartil | Tercer Cuartil | Mayor
Definición de los valores Outliers
Diseño avanzado de Chart con cálculo automático de marcadores y Outliers

CANDLESTICK

Implementación de valores obtenidos del Datasource
Definición de sus marcadores: Apertura | Cierre | Mínimo | Máximo | Estado
Configuración de Bar Chart complementario

TREND ZONE

Configuración de Zonas de Tendencia
Rango de valores | Configuración de colores | Múltiples zonas

MÓDULO 19: Pictorial Bar

Implementación de imágenes contextuales sobre los Charts
Configuración imágenes apiladas para simular un Bar Chart
Configuración avanzada de imágenes que simulan un Termómetro
Configuración avanzada de diversas series que simulan un Bullet

SEAT MAP

Creación y configuración de vectores con las principales secciones de un cuerpo humano
Configuración de Seat Map que utiliza un rango de colores para representar cada valor asignado a las partes del cuerpo humano
Configuración avanzada de Seat Map utilizado en los sistemas de venta/reserva de pasajes/butacas
Configuración avanzada de Seat Map utilizado en infografías y resultados de encuestas/censos

MÓDULO 20: Map

Bibliotecas de Mapas: Instalación | Configuración | Utilización de biblioteca con más de 250 mapas geográficos
Configuración de países/regiones resaltadas
Configuración avanzada de Tooltips
Configuración avanzada de la etiqueta que se colocará sobre cada zona/provincia. Modificación de la posición de las etiquetas
Implementación de zoom-in, zoom-out y desplazamiento
Configuración de mapa con diversas marcas, establecidas de acuerdo a sus coordenadas de latitud y longitud

BONUS TRACK | OPEN STREET MAP

Búsqueda e instalación de extensiones
Open Street Map: Descripción | Características | Licencia
Configuración avanzada de mapa Open Street Map con marcas (Bubble Chart) establecidas por coordenadas de latitud y longitud
Implementación de zoom-in, zoom-out y desplazamiento