Tutorial Power BI Desktop: Interfaz y Primeros Pasos

Prompt Inical mejorado con IA
Genera un archivo HTML completo, que funcione de manera autónoma sin
depender de archivos CSS o JavaScript externos (todo el CSS y JavaScript
debe estar embebido dentro del tag <style> y <script> respectivamente).
El propósito de este archivo es crear una aplicación web interactiva que
sirva como un tutorial paso a paso sobre el funcionamiento de la interfaz
de power bi. Crea con un diseño moderno acompañado de iconos con estilo
elegante y fácil de entender.
Coloca en el encabezado la imagen de esta dirección
https://i.postimg.cc/gjzsDhj4/logo-transparente.png
Usa las siguientes imágenes como apoyo al tutorial
Interfaz power bi: https://learn.microsoft.com/es-es/powerbi/fundamentals/media/desktop-what-is-desktop/what-is-desktop-01.png
Vistas de informe, tabla y modelo: https://learn.microsoft.com/eses/power-bi/fundamentals/media/desktop-what-is-desktop/what-is-desktopview-icons.png
Prompt final mejorado con IA
Genera un archivo HTML completo, que funcione de manera autónoma sin
depender de archivos CSS o JavaScript externos (todo el CSS y JavaScript
debe estar embebido dentro del tag <style> y <script> respectivamente).
El propósito de este archivo es crear una aplicación web interactiva que
sirva como un tutorial paso a paso.
**Detalles de la Aplicación Tutorial:**
1. **Tema del Tutorial:** "Introducción a la interfaz de Power BI
Desktop"
2. **Público Objetivo:** "Personas sin experiencia previa en Power BI
Desktop"
3.
**Diseño y Estilo:**
*
**General:** Moderno, limpio, profesional y fácil de usar.
*
**Colores:** Utiliza una paleta de colores profesional con buen
contraste, similar a la marca Power BI (ej. primario: #0078D4,
secundario: #01B8AA).
*
**Tipografía:** Clara y legible (ej. "Segoe UI, Arial, sansserif").
*
**Iconos:**
*
Integrar iconos SVG directamente en el HTML (usando
`<symbol>` y `<use>`, o embebiendo el SVG directamente).
*
Los iconos deben ser elegantes, fáciles de entender y
relevantes para el contenido que acompañan (ej. para títulos de sección,
puntos importantes). Usar iconos como `info-circle` para pasos y
`clipboard-list` para la evaluación.
4.
**Encabezado (`<header>`):**
*
Incluir una imagen de logo. Proporcionar la URL:
`https://i.postimg.cc/gjzsDhj4/logo-transparente.png`
*
Un título principal para el tutorial: "Introducción a la interfaz
de Power BI Desktop".
5.
**Contenido del Tutorial (Estructura de Pasos):**
*
El tutorial debe dividirse en `7` pasos (Paso 0 a Paso 6).
*
Cada paso (`<section class="tutorial-step">`) debe contener:
*
Un título claro precedido por un icono SVG relevante.
*
Texto explicativo del paso.
*
[Opcional] Una imagen de apoyo. Si no se proporciona URL, la
IA puede omitirla o usar un placeholder visual discreto.
*
[Opcional] Un bloque de "Consejo" o "Importante" (`<div
class="highlight">`) para resaltar información clave.
*
[Opcional] Listas (ordenadas o desordenadas) para enumerar
características, sub-pasos, etc.
*
**Detalle de cada paso:**
*
**Paso 0: Bienvenida al Mundo de Power BI**
*
Título: "Paso 1: Bienvenida al Mundo de Power BI"
*
Contenido Principal: "¡Bienvenido/a al tutorial
interactivo de Power BI Desktop! Esta herramienta de Microsoft te permite
conectar, transformar, visualizar y compartir datos de manera impactante.
El objetivo de este tutorial es familiarizarte con los componentes
principales de su interfaz, preparándote para crear tus propios informes
y dashboards. Power BI Desktop es una aplicación gratuita que puedes
instalar en tu equipo local y es el punto de partida para la mayoría de
los desarrollos en Power BI. A lo largo de estos pasos, descubrirás las
áreas clave que usarás constantemente."
*
URL Imagen: `https://learn.microsoft.com/es-es/power-
bi/fundamentals/media/desktop-what-is-desktop/what-is-desktop-01.png`
*
Highlight: "<strong>¡Prepárate!</strong> Este es el
primer paso para desbloquear el poder del análisis de datos con una
herramienta líder en el mercado."
*
**Paso 1: Explorando la Interfaz Principal**
*
Título: "Paso 2: Explorando la Interfaz Principal"
*
Contenido Principal: "Al abrir Power BI Desktop, te
encontrarás con una interfaz rica en funcionalidades. Los componentes
principales son: Cinta de Opciones (Ribbon), Vistas, Lienzo (Canvas) y
Paneles (Filtros, Visualizaciones, Campos)." (Expandir con una breve
descripción de cada uno como en el ejemplo original).
*
Contenido Lista:
*
Cinta de Opciones (Ribbon): Similar a otras
aplicaciones de Office, contiene pestañas como Archivo, Inicio, Insertar,
Modelado, Ver y Ayuda, cada una con grupos de comandos relevantes.
*
Vistas: A la izquierda, verás tres iconos principales
que te permiten cambiar entre la Vista de Informe, Vista de Datos y Vista
de Modelo.
*
Lienzo (Canvas): Es el área central donde construirás
tus visualizaciones y diseñarás tus informes.
*
Paneles: A la derecha, encontrarás paneles cruciales
como Filtros, Visualizaciones y Campos, que usarás para dar forma a tus
datos y gráficos.
*
URL Imagen: `https://learn.microsoft.com/es-es/powerbi/fundamentals/media/desktop-what-is-desktop/what-is-desktop-01.png`
*
Highlight: "<strong>Consejo:</strong> Dedica un tiempo a
explorar cada pestaña de la Cinta de Opciones para familiarizarte con las
herramientas disponibles. No te preocupes por entender todo de
inmediato."
*
**Paso 2: Paso Fundamental: Obtener Datos**
*
Título: "Paso 3: Paso Fundamental: Obtener Datos"
*
Contenido Principal: "Todo análisis comienza con datos.
Power BI Desktop ofrece una amplia gama de conectores para importar datos
desde diversas fuentes. Para acceder a tus datos: 1. Ve a la pestaña
Inicio en la Cinta de Opciones. 2. Haz clic en el botón Obtener datos. Se
desplegará un menú con fuentes comunes. 3. Si tu fuente no está listada,
haz clic en Más... para abrir una ventana con todos los conectores."
(Usar una lista ordenada para los sub-pasos).
*
URL Imagen: `https://learn.microsoft.com/es-es/powerbi/connect-data/media/desktop-shape-and-combine-data/get-data-web.png`
*
Highlight: "<strong>Importante:</strong> Power BI puede
conectarse a archivos locales, bases de datos, servicios en la nube y
mucho más. La capacidad de combinar datos de múltiples fuentes es una de
sus grandes fortalezas."
*
**Paso 3: Comprendiendo las Vistas**
*
Título: "Paso 4: Comprendiendo las Vistas"
*
Contenido Principal: "Power BI Desktop tiene tres vistas
principales, accesibles desde los iconos en el panel izquierdo: Vista de
Informe, Vista de Datos y Vista de Modelo." (Expandir con una breve
descripción de cada una, idealmente incluyendo los pequeños iconos de
vista como imágenes inline si es posible o solo texto).
*
Contenido Lista:
*
Vista de Informe (<img
src="https://learn.microsoft.com/es-es/power-bi/media/power-bi-reportview/report-view-icon.png" alt="Icono Vista Informe" style="height:1em;
vertical-align:middle;">): Es donde creas tus informes y visualizaciones.
Aquí pasarás la mayor parte del tiempo diseñando la apariencia de tus
dashboards.
*
Vista de Datos (<img
src="https://learn.microsoft.com/es-es/power-bi/media/power-bi-data-
view/data-view-icon.png" alt="Icono Vista Datos" style="height:1em;
vertical-align:middle;">): Te permite inspeccionar, explorar y entender
los datos cargados en tu modelo. Puedes ver las tablas, columnas y
realizar transformaciones básicas.
*
Vista de Modelo (<img
src="https://learn.microsoft.com/es-es/power-bi/media/power-bi-modelingview/modeling-view-icon.png" alt="Icono Vista Modelo" style="height:1em;
vertical-align:middle;">): Aquí es donde gestionas las relaciones entre
tus tablas de datos. Es fundamental para crear un modelo de datos
coherente y eficiente.
*
URL Imagen: `https://learn.microsoft.com/es-es/powerbi/fundamentals/media/desktop-what-is-desktop/what-is-desktop-viewicons.png`
*
Highlight: "<strong>Consejo:</strong> Cambiar entre estas
vistas es esencial. Cada una tiene un propósito específico en el flujo de
trabajo de desarrollo de informes."
*
**Paso 4: Los Paneles de la Derecha: Tus Herramientas Clave**
*
Título: "Paso 5: Los Paneles de la Derecha: Tus
Herramientas Clave"
*
Contenido Principal: "En la Vista de Informe, los paneles
del lado derecho son tus principales aliados para construir
visualizaciones: Panel de Filtros, Panel de Visualizaciones y Panel de
Campos." (Expandir con una breve descripción de cada uno).
*
Contenido Lista:
*
Panel de Filtros: Permite aplicar filtros a nivel de
visualización, página o informe completo.
*
Panel de Visualizaciones: Aquí seleccionas el tipo de
gráfico que deseas crear (barras, líneas, tarta, mapa, etc.) y configuras
sus propiedades (ejes, leyenda, colores, formato).
*
Panel de Campos: Muestra todas las tablas y campos
(columnas, medidas) disponibles en tu modelo de datos. Arrastras los
campos desde aquí a las visualizaciones o al panel de filtros.
*
URL Imagen: `https://learn.microsoft.com/es-es/powerbi/create-reports/media/power-bi-report-add-filter/power-bi-displaypanes.png`
*
Highlight: "<strong>Importante:</strong> Estos paneles
son interactivos. Lo que selecciones y arrastres aquí se reflejará
inmediatamente en el lienzo del informe."
*
**Paso 5: Creando tu Primera Visualización (Conceptual)**
*
(Conceptual)"
*
Título: "Paso 6: Creando tu Primera Visualización
Contenido Principal: "Aunque este tutorial se centra en
la interfaz, veamos conceptualmente cómo se crea una visualización: 1.
Asegúrate de estar en la Vista de Informe. 2. Desde el Panel de
Visualizaciones, selecciona un tipo de gráfico. 3. Desde el Panel de
Campos, arrastra los campos a las áreas correspondientes. 4. ¡Observa
cómo se actualiza el gráfico!" (Usar lista ordenada).
*
URL Imagen: `https://learn.microsoft.com/es-es/power-
bi/create-reports/media/desktop-excel-stunning-report/power-bi-mapvisual.png`
*
Highlight: "<strong>Consejo:</strong> Experimenta
arrastrando diferentes campos a diferentes roles en el panel de
visualizaciones. La interactividad es clave para aprender."
*
**Paso 6 (Último Paso Tutorial): Guardar tu Trabajo y
Próximos Pasos**
*
Título: "Paso 7: Guardar tu Trabajo y Próximos Pasos"
*
Contenido Principal: "Una vez que hayas trabajado en tu
informe, es crucial guardarlo: Ve a Archivo > Guardar o Guardar como
(.pbix). Periódicamente puedes Publicar al servicio Power BI.
¡Felicidades! Has completado esta introducción."
*
URL Imagen: `https://learn.microsoft.com/es-es/power-
bi/developer/projects/media/projects-overview/pbip-saveastype.png`
*
Highlight: "<strong>Próximos Pasos:</strong> (Lista
desordenada) Intenta conectar tus propios datos. Experimenta creando
visualizaciones. Explora la documentación oficial."
6.
**Navegación Interactiva:**
*
Implementar botones "Anterior" y "Siguiente".
*
Deshabilitar "Anterior" en el primer paso.
*
El botón "Siguiente" del último paso del tutorial ("Paso 6" o
"Paso 7" según título) debe cambiar a "Ir a Evaluación".
*
Mostrar indicador de progreso "Paso X de N" (donde N es el número
total de pasos del tutorial, excluyendo la evaluación).
*
JavaScript gestionará la visibilidad de los pasos y la sección de
evaluación.
7.
**Sección de Evaluación del Aprendizaje:**
*
**Ubicación:** Después del último paso del tutorial (Paso 6),
accesible mediante el botón "Ir a Evaluación".
*
**Título de la Sección:** "Evaluación del Aprendizaje", con un
icono SVG relevante (`icon-clipboard-list`).
*
**Formato:** Preguntas de opción múltiple.
*
**Número de Preguntas:** 3
*
**Opciones por Pregunta:** 4 (usar radio buttons).
*
**Funcionalidad:**
*
Un botón "Corregir Evaluación" al final de las preguntas.
*
Al hacer clic, se mostrará al usuario cuáles respuestas
fueron correctas e incorrectas (cambiando color de fondo o borde de las
opciones, y añadiendo iconos SVG de check/cross). Las opciones deben
deshabilitarse.
*
Mostrar una puntuación (ej. "Has acertado X de Y
preguntas."). El botón "Corregir" debe ocultarse o deshabilitarse tras la
corrección.
*
**Contenido de las Preguntas de Evaluación:**
*
**Pregunta 1:**
*
Enunciado: "¿Cuál de las siguientes NO es una de las tres
vistas principales en Power BI Desktop?"
*
*
Opción A: "Vista de Informe" (Correcta: No)
*
Opción B: "Vista de Datos" (Correcta: No)
*
Opción C: "Vista de Consulta" (Correcta: Sí)
*
Opción D: "Vista de Modelo" (Correcta: No)
**Pregunta 2:**
*
Enunciado: "El panel donde seleccionas el tipo de gráfico
(barras, líneas, tarta, etc.) se llama:"
*
*
Opción A: "Panel de Campos" (Correcta: No)
*
Opción B: "Panel de Filtros" (Correcta: No)
*
Opción C: "Panel de Visualizaciones" (Correcta: Sí)
*
Opción D: "Cinta de Opciones" (Correcta: No)
**Pregunta 3:**
*
de Modelo'?"
*
Enunciado: "¿Para qué se utiliza principalmente la 'Vista
Opción A: "Para escribir código DAX." (Correcta: No)
*
Opción B: "Para diseñar la apariencia visual de los
informes." (Correcta: No)
*
Opción C: "Para ver los datos en formato tabular."
(Correcta: No)
*
Opción D: "Para gestionar las relaciones entre diferentes
tablas de datos." (Correcta: Sí)
8.
**Pie de Página (`<footer>`):**
*
Un mensaje simple: "© 2023 Tutorial Interactivo de Power BI.
Creado con fines educativos."
9.
**Consideraciones Adicionales:**
*
El código debe ser semánticamente correcto y accesible.
*
El diseño debe ser responsivo.
*
Los iconos SVG `icon-check-circle` y `icon-x-circle` deben usarse
para el feedback de la evaluación
Genera las instrucciones (prompt)para crear un archivo HTML completo,
que funcione de manera autónoma sin depender de archivos CSS o JavaScript
externos (todo el CSS y JavaScript debe estar embebido dentro del tag
<style> y <script> respectivamente). El propósito de este archivo es
crear una aplicación web interactiva que sirva como un tutorial paso a
paso, ciclo a ciclo, dia a dia sobre la mision 1.1