Curso Apache ECharts Dashboards Design

Temas

1) Descripción y ejemplificación de Tecnologías Auxiliares:
- DOM | HTML | XML | XHTML | CSS | JS | AJAX | jQuery
2) Apache ECharts:
- ¿Qué es Apache ECharts?
- Principales aplicaciones.
- Licencia y condiciones de uso.
- Apache Software Foundation (ASF): descripción y principales proyectos.
- Características de Apache ECharts.
- Librerías, extensiones y componentes adicionales.
- Ejemplos de visualización.
3) Implementación y recursos necesarios:
- 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.
4) Configuración de Apache ECharts para integrarlo en página web:
- Recursos utilizados.
- Elementos de DOM.
- Obtención del Datasource.
- Estructura principal de configuración.
- Renderización.
5) 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.
6) Indicadores:
- Descripción, ejemplificación y características de:
  - Indicadores Financieros.
  - Indicadores No-Financieros.
  - Inductores de Actuación.
  - Relación Causa-Efecto.
- Descripción y ejemplificación de Indicadores en los Dashboards.
- Descripción de Indicadores de Resultado.
- Descripción de 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).
7) Perspectivas de Análisis:
- Descripción, ejemplificación y uso de Indicadores en cada Perspectiva.
- Perspectiva Financiera.
- Perspectiva Cliente.
- Perspectiva Proceso Interno.
- Perspectiva Aprendizaje y Crecimiento.
- Implementación de un Cuadro de Mando Integral.
8) Ciencia & 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.
9) 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.
10) Colores de Diseño:
- Definición de los conceptos: Color | Luz | Longitud de onda | Espectro visible.
- Conformación del Círculo Cromático: CMYK | RGB.
- Categorización de los Colores: Colores Primarios | Secundarios | Terciarios.
- Descripción de las propiedades del Color: Tono | Saturación | Luminosidad.
- Definición de Colores Acromáticos.
- Definición de Colores Fríos y Cálidos.
- Análisis de la Psicología del Color aplicada a la sensación que producen.
- 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.
- Definición y distintos 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.
11) Fuentes Tipográficas:
- Definición y ejemplificación de Tipografía, Fuente y Familia.
- Descripción, usos y características de las tipografías: Serif | Sans Serif.
- Características y aplicación de Alineación de acuerdo al tipo de elemento: Izquierda | Centro | Derecha.
- 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.
12) 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.
13) Charts | Gauges | Maps:
- Descripción, características y 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.
14) 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.
15) 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.
16) Editor Online:
- Descripción y utilización del editor online.
- Ejemplificación de uso.
- Código completo.
- Propiedades establecidas y valores por defecto.
17) 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.
18) 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.
19) 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.
20) 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.
21) 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 para seleccionar un rango de valores.
- Utilización de 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.
22) Spline Line Chart:
- Ventajas y diferencias con Line Chart.
- Principales usos.
23) Step Line Chart:
- Ventajas y diferencias con Line Chart.
- Principales usos.
- Diferentes tipos: Step Start | Step Middle | Step End.
24) 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.
25) Combo:
- Aplicación y usos de un Chart que combina Bar y Line.
- Aplicación y usos de un Chart que combina Bar y Area.
26) Candlestick:
- Definición de sus marcadores: Apertura | Cierre | Mínimo | Máximo | Estado.
- Configuración de Bar Chart complementario.
27) 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.
28) Trend Zone:
- Configuración de Zonas de Tendencia.
- Rango de valores | Configuración de colores | Múltiples zonas.
29) Radar Chart:
- Configuración avanzada para utilizar valores obtenidos del Datasource.
- Diferentes estilos: Spider | Circular.
- Configuración de Leyenda interactiva.
30) 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.
31) 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 Chart.
32) 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.
33) 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.
34) Datasource CSV:
- Configuración avanzada de funciones JavaScripts para trabajar con datasources CSV.
- Ejemplificación de cómo trabajar con otros tipos de datasources.
35) 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.

100% online

Descripción

Duración

Objetivos

Temas

Contacto: Dario Bernabeu