1 HVID Sum Intro

Objetivos del tema

• El objetivo es familiarizarse con la asignatura y su metodología.
• El objetivo es la identificación de las herramientas a utilizar.
• El objetivo es una aproximación a HTML, CSS y JavaScript.

Librerías y herramientas de visualización

• La visualización de datos ayuda a tratar con información compleja, simplificándola y destacando lo relevante.
• La visualización de datos es útil para llamar la atención sobre mensajes clave.
• La presentación visual de datos revela patrones y elementos sorprendentes.

Herramientas y librerías para usuario desarrollador

• El uso de estas herramientas requiere conocimientos de programación.
• Este conocimiento es una ventaja, ya que otorga la capacidad de personalizar gráficos y posibilidades de desarrollo.

Google Chart

• Google Chart es la librería de visualizaciones utilizada por Google Spreadsheets
• Es la API de gráficos de Google, potente, sencilla y con variedad de gráficos.
• Página oficial de Google Chart: https://developers.google.com/chart

D3.js

• D3.js es una librería de JavaScript que utiliza HTML, CSS y JavaScript
• Se usa para mostrar diagramas y gráficos de diversas fuentes de datos.
• Permite visualizaciones avanzadas con complejos conjuntos de datos.
• Tiene una poderosa capacidad para gestionar gráficos vectoriales en formato SVG (Scalable Vector Graphics).
• Página oficial de D3.js: https://d3js.org/

R

• R es un paquete estadístico potente para analizar grandes conjuntos de datos.
• Requiere la utilización de Python como lenguaje de programación.
• Página oficial de R: https://www.r-project.org/

Herramientas y librerías para usuario no desarrollador

• La facilidad de uso caracteriza a este grupo de herramientas.
• El usuario final puede extraer y manejar datos, crear informes o compartirlos sin necesidad de un equipo de desarrollo.
• La autonomía de los usuarios en la visualización de datos es alta.

Plataformas ABI (Analytics and Business Intelligence)

• Ya no se diferencian por sus capacidades en la visualización de datos.
• Su diferenciación reside en su integración con otras aplicaciones corporativas de analítica e informes.
• Gartner evalúa las plataformas ABI con base en 15 capacidades, incluyendo:
  • Seguridad: protección de la plataforma, administración de usuarios y auditoría de acceso.
  • Capacidad de gestión: rastreo del uso, gestión de cómo se comparte la información, análisis de impacto y trabajo con aplicaciones de terceros.
  • Cloud: soporte para la construcción, despliegue y gestión de análisis y aplicaciones analíticas en la nube.
  • Conectividad de la fuente de datos: permite conectar e ingerir datos estructurados y no estructurados.
  • Preparación de datos: soporte para la combinación de datos de diferentes fuentes, arrastrar y soltar.
  • Complejidad del modelo: soporte para modelos de datos complejos, manejar múltiples tablas.
  • Catálogo: generación y agregación automática de un catálogo para buscar objetos creados y utilizados.
  • Insights automatizados: aplicar técnicas de machine learning e inteligencia artificial para generar conocimientos automáticamente.
  • Análisis avanzado: acceder fácilmente a capacidades analíticas avanzadas.
  • Visualización de datos: soporte para cuadros de mando interactivos y manipulación de imágenes gráficas.
  • Consulta de lenguaje natural: permite consultar datos utilizando búsquedas basadas en lenguaje natural.
  • Narración de datos: combinar la visualización interactiva de datos con técnicas narrativas.
  • Análisis integrado: incluye un SDK con API y soporte para estándares abiertos.
  • Generación de lenguaje natural: creación automática de descripciones lingüísticamente ricas de los conocimientos encontrados en los datos.
  • Presentación de informes: capacidad de crear y distribuir informes a los usuarios.

Magic Quadrant for Analytics and Business Intelligence Platforms

• Gartner elabora anualmente este informe donde posiciona plataformas y herramientas del mercado.
• Las herramientas líderes del mercado según Gartner son: Microsoft (PowerBI), Tableau, Qlik.
• Carto es una herramienta adicional especializada en datos cartográficos.

Tableau

• Tableau Public es una herramienta de visualización de datos con gráficos, tablas y mapas.
• Los usuarios pueden arrastrar y soltar datos y ver cómo se actualizan en tiempo real.
• Página oficial de Tableau: https://www.tableau.com/

PowerBI

• Power BI permite conectar diferentes orígenes de datos, transformarlos, limpiarlos, relacionarlos y visualizarlos.
• Página oficial de Power BI: https://powerbi.microsoft.com/

Qlik

• Qlik ofrece al usuario final la posibilidad de extraer y manipular datos directamente, creando informes sencillos.
• Maxima la facilidad de uso para usuarios no desarrolladores.
• Página oficial de Qlik: https://www.qlik.com/

Carto

• Una herramienta para combinar datos tabulares con mapas.
• Permite alimentar un archivo CSV con direcciones y convertirlo en latitudes y longitudes, trazándolas en un mapa.
• Página oficial de Carto: https://carto.com/

HTML, CSS y JavaScript

• HTML, CSS y JavaScript son lenguajes de programación necesarios para utilizar ciertas herramientas y librerías.
• Se proporcionan tutoriales para quienes no tengan conocimiento previo de estos lenguajes.
  • HTML: https://www.w3schools.com/html/
  • CSS: https://www.w3schools.com/css/
  • JavaScript: https://www.w3schools.com/js/

Estructura de una página web

• Se construye con base en tres niveles:
  • Estructura y contenido: elementos de la página web (textos, imágenes, enlaces, etc.), con HTML.
  • Apariencia: colores, tipografías, fondos, tamaños, alineación, con CSS.
  • Comportamiento: inteligencia para mostrar efectos y animaciones, automatizar tareas, etc., con JavaScript.
• Existen multitud de lenguajes de programación que permiten trabajar tanto en el frontal como en el backend, pero a los efectos de su utilización con herramientas de visualización emplearemos JavaScript.

HTML

• HTML es un lenguaje de marcas para el desarrollo de páginas web.
• Se basa en marcas o etiquetas que contienen información sobre la estructura o presentación del texto.
• Define la estructura y el contenido, pero no el estilo visual (CSS).
• Un documento HTML contiene dos partes principales: la cabecera (<head>) y el cuerpo (<body>).

CSS

• CSS permite generalizar y definir el estilo de la página HTML.
• Aísla el contenido de la presentación.
• Su código se introduce entre las tags: y .
• Se puede definir en archivos externos y conectar con etiquetas dentro de la cabecera en el HTML.
• Existen tres tipos de selectores o identificadores para aplicar estilos:
  • De elemento HTML: <h1>, <table>, <div>...
  • De identificador: elementos HTML con propiedad id determinada.
  • De clase: elementos HTML con propiedad class determinada.
• Ejemplos de uso de CSS: https://www.w3schools.com/css/css_examples.asp

JavaScript

• JavaScript permite añadir interacción a las páginas web.
• El contenido de las funciones se define dentro de las etiquetas: y .
• Corresponde al elemento que define la página HTML.
• Define el destino.
• Date es una función definida ya en JavaScript que da la hora y la fecha en el momento en que se invoca.

Editor código: Brackets

• Brackets es un editor de código fuente abierto, gratuito, creado por Adobe Systems, orientado al desarrollo web.
• Está enfocado hacia el desarrollo web de frontend (HMTL, CSS y JavaScript).
• Página oficial de Brackets: https://brackets.io/
• Las características de los brackets son: tener una interfaz sencilla y minimalista, escritura del código y sangrado en las sentencias de código, organización de los elementos del proyecto web con base en proyectos, Utiliza un código de colores bastante visible y tiene modo de vista previa en vivo.
• Guía oficial de Brackets: https://github.com/adobe/brackets/wiki/How-to-Use-Brackets