Curso Apache ECharts Dashboards Design

100% online

curso online apache echarts dashboards design

Descripción

Aprenderás como implementar Apache ECharts en tus aplicaciones web. Aprenderás a diseñar tus propios Charts con base en conocimientos acabados sobre el modo en que las personas reaccionan ante los estímulos visuales, el modo en que perciben los datos, colores, formas, realizan comparaciones, etc. Diseñarás Charts, Gauges, Maps de estilo llamativo para presentar/vender una solución BI; y de estilo minimalista aplicando ciencia. Aprenderás a realizar configuraciones avanzadas a través de +100 ejemplos que podrás utilizar como guía en tus propios proyectos, de manera que no tengas que comenzar desde cero cada vez, sino que podrás adaptar alguno de estos ejemplos a tu propio contexto.

Duración

220 horas aproximadas.

Acceso habilitado durante dos meses.

El curso requiere tiempo y dedicación, ya que aborda muchos temas. Cada explicación se realiza de forma planificada y es complementada mediante práctica, ejercicios, ejemplos, etc. La cantidad de horas es un promedio del tiempo que se deberá invertir para completar el curso, incluido el práctico.

Este no es un típico curso que se encuentra en páginas dedicadas a video-cursos de muy corta duración y muy poco abarcativos.

Este curso es una experiencia nueva de aprendizaje hacia temáticas complejas.

Objetivos

Investigarás Apache ECharts, la librería JavaScript Open Source para visualización de datos más poderosa en la actualidad.

Aplicarás conceptos científicos al diseño de Charts mediante +100 ejemplos y lectura guiada.

Aprenderás los conceptos teórico/prácticos relacionados a Cuadros de Mando, KPI, Colores, Tipografías, Formas, Alertas, Tooltips.

Aprenderás a realizar configuraciones avanzadas en los Charts más utilizados: Pie, Line, Bar, Scatter, Bubble, Boxplot, Seat Map, Pictorial Bar, Map, Radar, Funnel, Gauge, etc.

Crearás Charts de estilo llamativo y minimalista.

Utilizarás diferentes formatos de Datasources para la obtención de datos.

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.

    Contacto: Dario Bernabeu

    dario bernabeu, avatar

    Mi nombre es Dario Bernabeu y estaré personalmente a cargo de responder preguntas y guiar el proceso educativo.

    Ing. en Sistemas, Docente, Investigador, Geek, Entusiasta del BI y del Software Libre.

    Especializado en el desarrollo e implementación de soluciones OSBI (Open Source Business Intelligence), Librerías Gráficas, Bases de Datos y Tecnologías Web.

    Coautor del artículo BI Usability en Novatica (pág 17).

    Mis contribuciones: +50 tutoriales y videos gratis

    Si te ha interesado alguno de los Cursos y quieres que te informe acerca de los Precios y Promociones, no dudes en consultarme:

    darioSistemas@gmail.com

    +59892891231 (Whatsapp/Telegram)