Power Apps – Sesión 02 – Resumen
Diseño y Construcción de la Primera Aplicación
1) 🎯 Propósito de la sesión
- Pasar de “generar una app con IA/prompt” (visto en la sesión anterior) a diseñar manualmente una aplicación en blanco, entendiendo:
- La estructura de Power Apps Studio (pantallas, árbol de controles, propiedades).
- El uso de contenedores para lograr una interfaz adaptativa a distintos dispositivos.
- Controles esenciales: Label, Text input, Button, Icon, Image.
- Navegación entre pantallas con la propiedad OnSelect y función Navigate. [learn.microsoft.com], [learn.microsoft.com]
2) 🔐 Configuración inicial: acceso con autenticación de 2 pasos (MFA)
- Se dedicó una parte a explicar el ingreso por primera vez y la necesidad de configurar Microsoft Authenticator como segundo factor.
- Flujo práctico (resumen):
- Iniciar sesión con el usuario/contraseña.
- Registrar la cuenta en Microsoft Authenticator (QR o código manual).
- Completar la verificación para habilitar el acceso seguro.
📌 Refuerzo oficial (Microsoft):
- Microsoft Authenticator permite MFA por notificación y códigos, mejorando seguridad en cuentas de trabajo/escuela. [learn.microsoft.com]
- La configuración de MFA en Microsoft 365 incluye flujo de “Más información / Next” y registro del método (Authenticator recomendado). [support.mi…rosoft.com]
3) 🧱 Estructura de Power Apps Studio (lo esencial)
Se repasó la interfaz y conceptos base:
- Pantalla (Screen): unidad principal del lienzo.
- Controles: elementos UI (texto, botones, imágenes, etc.) que se insertan y configuran por propiedades. [learn.microsoft.com], [learn.microsoft.com]
- Tree view / Vista de árbol: organización jerárquica para seleccionar, renombrar y ordenar controles. [learn.microsoft.com]
- Propiedades y barra de fórmulas: permiten definir comportamiento visual y lógico. [learn.microsoft.com], [learn.microsoft.com]
4) 🧩 Tema principal: Contenedores (Containers) y diseño responsive
4.1 ¿Qué son y por qué se usaron?
- Se enseñó que los contenedores permiten organizar controles y adaptar el diseño a diferentes tamaños de pantalla (móvil, tablet, escritorio), reduciendo el uso de posiciones fijas (X/Y).
- Se trabajaron tres tipos:
- Horizontal container
- Vertical container
- Container libre (ubicación sin restricciones estrictas)
📌 Refuerzo oficial (Microsoft):
- Para crear interfaces responsive, es clave usar propiedades Width/Height y expresiones dinámicas; la guía recomienda construir layouts adaptativos y ajustar configuración de pantalla. [learn.microsoft.com]
- Los controles dentro de contenedores se organizan con reglas (flujo horizontal/vertical) y responden mejor a cambios de tamaño del dispositivo. [learn.microsoft.com], [learn.microsoft.com]
4.2 Propiedades prácticas trabajadas en contenedores
Se revisaron propiedades típicas al diseñar:
- Justify / Align (centrar, distribuir).
- Gap / Espaciado (separación entre controles).
- Overflow / Desbordamiento (scroll vs ocultar).
- Border / Fill para diferenciar visualmente contenedores durante el prototipado.
📌 Refuerzo oficial (Microsoft):
- Los controles tienen propiedades comunes (Width, Height, Fill, Border…) y propiedades específicas por tipo; conocerlas acelera el diseño. [learn.microsoft.com], [learn.microsoft.com]
4.3 Responsive: problema real observado y solución
- Al probar en vista “móvil”, algunos controles (como el botón Ingresar) se “perdían” o quedaban fuera de vista.
- Se explicó que esto pasa cuando el layout está basado en tamaños fijos.
- Se introdujo el enfoque de:
- Ajustar Width/Height al tamaño del contenedor/pantalla.
- Usar alineación y distribución del contenedor.
- Empezar a utilizar fórmulas para responsive (concepto inicial; se profundiza después).
📌 Refuerzo oficial (Microsoft):
- Un enfoque recomendado es desactivar “Scale to fit” y trabajar con fórmulas basadas en dimensiones del app/screen para diseños verdaderamente adaptativos. [learn.microsoft.com]
5) 🧱 Construcción guiada de la app (pantallas y layout)
Se planteó una app educativa de 3–4 pantallas (con intención de completarla y volverla “real” en sesiones siguientes):
5.1 Pantalla 1 — Inicio (banner + botón “Ingresar”)
- Diseño de pantalla de entrada con:
- Imagen de fondo tipo “banner”.
- Contenedores para estructurar áreas superior/inferior.
- Botón Ingresar centrado con propiedades del contenedor.
5.2 Pantalla 2 — Login (usuario/contraseña)
- Diseño de login con dos zonas:
- Sección izquierda con logo + texto informativo.
- Sección derecha con formulario:
- Título “Login”
- Campos Usuario y Contraseña
- Texto “¿Olvidaste tu contraseña?”
- Botón de acceso
📌 Controles usados (refuerzo oficial):
- Label: muestra texto fijo o fórmula; propiedades clave como Text, Color, Font, Align. [learn.microsoft.com]
- Text input: captura texto; propiedades clave como Default, Text, HintText, Format. [learn.microsoft.com]
- Button / Icon / Image: forman parte del conjunto de controles estándar y se configuran por propiedades en el panel o barra de fórmula. [learn.microsoft.com], [learn.microsoft.com]
5.3 Pantalla 3 — Módulos / Bienvenida
- Se usó una plantilla para simular una pantalla de módulos (módulo 1, módulo 2…) y se dejó listo el flujo de navegación para conectarla desde el login.
6) 🖼️ Multimedia (imágenes y recursos)
- Se explicó cómo:
- Insertar un control Image.
- Cargar imágenes desde Multimedia (archivos locales).
- Ajustar propiedades como “rellenar/estirar/mosaico” para evitar distorsión.
📌 Refuerzo oficial (Microsoft):
- Power Apps permite agregar y configurar controles desde Insert y ajustar su comportamiento/propiedades en el panel y barra de fórmula. [learn.microsoft.com], [learn.microsoft.com]
7) 🧭 Navegación entre pantallas (OnSelect + Navigate)
Se implementó la navegación básica:
- Botón “Ingresar” (Inicio) → pantalla Login
- Botón “Acceder” (Login) → pantalla Bienvenida/Módulos
📌 Refuerzo oficial (Microsoft):
- Navigate(Screen, Transition, …) cambia la pantalla mostrada y se usa típicamente en la propiedad OnSelect de un botón. [learn.microsoft.com], [learn.microsoft.com]
- También existe Back() para regresar a la pantalla anterior, con transiciones opcionales. [learn.microsoft.com]
🗣️ Preguntas y respuestas destacadas (con refuerzo oficial)
Formato: Pregunta → ✅ Respuesta del docente → 🔎 Refuerzo Microsoft
1) “¿Tengo que escanear con el teléfono para entrar?”
✅ Se explicó que el acceso inicial puede requerir Microsoft Authenticator: se escanea el QR y luego se valida con el método de segundo paso.
🔎 Microsoft Authenticator es un método oficial para MFA (notificación/código) y añade una capa extra de seguridad. [learn.microsoft.com], [support.mi…rosoft.com]
2) “¿Qué tipo de contenedor corresponde al área verde del diseño?”
✅ Se resolvió identificando que, si contiene secciones “arriba y abajo” (bloques), corresponde a un contenedor vertical (organiza de arriba hacia abajo).
🔎 Microsoft recomienda construir layouts jerárquicos con contenedores/propiedades para lograr interfaces adaptativas. [learn.microsoft.com], [learn.microsoft.com]
3) “¿Por qué el botón desaparece cuando pruebo en móvil / horizontal?”
✅ Se explicó que ocurre por el layout fijo y el alto/ancho de contenedores; se corrige usando alineación/justificación y ajustando tamaños en función del dispositivo.
🔎 Para responsive, Microsoft recomienda usar dimensiones dinámicas del app/screen y ajustar configuración para que el layout responda a cambios de ventana y orientación. [learn.microsoft.com]
4) “¿Cómo hago que un botón me lleve a otra pantalla?”
✅ Se mostró el uso de OnSelect con Navigate() para ir de Inicio → Login → Bienvenida.
🔎 Navigate se usa exactamente en OnSelect para cambiar de pantalla, con opción de transición visual. [learn.microsoft.com], [learn.microsoft.com]
✅ Conclusiones
- La sesión consolidó la base para construir Canvas Apps profesionales: primero estructura (contenedores) y luego lógica (validaciones, datos). [learn.microsoft.com], [learn.microsoft.com]
- Los contenedores son el recurso clave para crear UI mantenible y adaptable; reducen el “arrastrar por coordenadas” que suele romperse en móvil. [learn.microsoft.com], [learn.microsoft.com]
- La navegación con Navigate es el patrón estándar para conectar pantallas y crear experiencia tipo “app real”. [learn.microsoft.com], [learn.microsoft.com]
- La sesión dejó preparado el camino para lo siguiente: validación real de login contra una fuente de datos (ej.: Dataverse) y mejoras de responsive con fórmulas. [learn.microsoft.com], [pondhouse-data.com]
🛠️ Recomendaciones (para estudiantes)
- Diseña primero el layout con contenedores, no con posiciones fijas.
- Te evitará re-trabajo al probar en móvil/tablet. [learn.microsoft.com], [learn.microsoft.com]
- Activa un enfoque responsive desde el inicio
- Ajusta configuración de pantalla y usa dimensiones dinámicas (Width/Height) para que el diseño responda al dispositivo. [learn.microsoft.com]
- Nombra y organiza controles en Tree view
- Renombrar “Button1” a “btnIngresar” facilita mantenimiento y fórmulas. [learn.microsoft.com]
- Separar UI y lógica
- UI: contenedores + controles; lógica: OnSelect, Navigate, validaciones y (luego) conexión a datos. [learn.microsoft.com], [learn.microsoft.com]
- Practica replicando la app
- Rehacer pantallas desde cero acelera tu aprendizaje y evita depender solo de IA.
📚 Referencias (solo documentación oficial de Microsoft)
- Diseño responsive en Canvas Apps (configuración + fórmulas de tamaño): [learn.microsoft.com]
- Agregar y configurar controles (Tree view, renombrar, propiedades, orden): [learn.microsoft.com]
- Controles y propiedades (catálogo + propiedades comunes): [learn.microsoft.com]
- Label control (propiedades clave): [learn.microsoft.com]
- Text input control (propiedades clave): [learn.microsoft.com]
- Navigate / Back (navegación entre pantallas y transiciones): [learn.microsoft.com]
- Microsoft Authenticator como método de autenticación (MFA): [learn.microsoft.com]
- Guía de configuración MFA para Microsoft 365 (usuario final): [support.mi…rosoft.com]
