🎯 Objetivo de la sesión

La clase tuvo como objetivo iniciar la construcción manual de una aplicación de lienzo en Power Apps, enfocándose en:

• Arquitectura general de una aplicación empresarial.
• Diseño adaptable para web, tableta y teléfono.
• Uso de contenedores horizontales, verticales y libres.
• Organización mediante encabezado, contenido central y pie de página.
• Inserción de etiquetas, botones, iconos e imágenes.
• Uso inicial de fórmulas de Power Fx para adaptar la interfaz.
• Construcción de una primera pantalla de inicio responsive.

La sesión se centró en el diseño y la estructura visual. Las funcionalidades de registro, edición, eliminación y conexión con datos se desarrollarán en sesiones posteriores.

---

1. 🗃️ Selección del origen de datos

Al inicio se compararon las principales alternativas para almacenar información utilizada por Power Apps.

Origen	Uso recomendado	Consideraciones
Excel	Prototipos o datos sencillos	Limitado para concurrencia y aplicaciones empresariales
SharePoint Lists	Soluciones pequeñas o medianas	Fácil integración con Microsoft 365
Dataverse	Aplicaciones empresariales y relacionales	Mayor capacidad, seguridad y administración
SQL Server	Soluciones avanzadas o existentes	Requiere mayor conocimiento técnico y configuración

Criterio principal

La selección depende de:

• Cantidad de registros.
• Número de usuarios concurrentes.
• Complejidad de las relaciones.
• Seguridad requerida.
• Crecimiento esperado.
• Licenciamiento disponible.
• Sistemas existentes en la organización.

Orientación brindada en clase

• Utilizar SharePoint en soluciones relativamente sencillas, con volúmenes moderados.
• Utilizar Dataverse cuando se necesita mayor capacidad, relaciones, seguridad y administración empresarial.
• Utilizar SQL Server si la organización ya dispone de una arquitectura SQL o requiere capacidades avanzadas.

✅ El origen de datos debe elegirse antes de diseñar completamente la aplicación, ya que influirá en la arquitectura, seguridad y mantenimiento.

---

2. 🤖 Uso de Copilot en Power Apps

Se explicó que Copilot puede ayudar a generar:

• Tablas iniciales.
• Pantallas.
• Estructuras básicas.
• Fórmulas.
• Ideas de diseño.
• Prototipos funcionales.

Sin embargo, la salida generada por IA no debe considerarse una aplicación terminada.

Buenas prácticas

1. Utilizar Copilot como punto de partida.
2. Revisar las tablas y campos generados.
3. Validar las fórmulas.
4. Ajustar el diseño.
5. Incorporar controles de seguridad.
6. Probar la aplicación en diferentes dispositivos.
7. Confirmar que el resultado cumpla el proceso empresarial.

📌 Copilot puede acelerar el desarrollo, pero el creador continúa siendo responsable de la arquitectura, las validaciones y la experiencia de usuario.

---

3. 🏢 Aplicaciones empresariales y diseño

Power Apps está orientado principalmente a crear soluciones empresariales para digitalizar procesos.

En este contexto, la prioridad debe ser:

• Funcionalidad.
• Claridad.
• Facilidad de uso.
• Rendimiento.
• Seguridad.
• Adaptación a distintos dispositivos.
• Mantenimiento.

Es posible crear interfaces atractivas, pero alcanzar diseños visuales extremadamente personalizados puede requerir más tiempo que en herramientas especializadas de desarrollo web.

Recomendación de diseño

La interfaz debe ser:

• Consistente.
• Fácil de navegar.
• Legible.
• Accesible.
• Adaptable.
• Alineada con la identidad corporativa.

---

4. 🧱 Contenedores en Power Apps

Los contenedores permiten organizar controles y construir interfaces que se adapten a diferentes tamaños de pantalla.

Microsoft recomienda utilizar contenedores horizontales y verticales para organizar dinámicamente los elementos y responder a cambios en las dimensiones disponibles. [learn.microsoft.com], [learn.microsoft.com]

Tipos de contenedor

Contenedor	Comportamiento	Uso frecuente
Horizontal	Organiza de izquierda a derecha	Cabeceras, barras y botones
Vertical	Organiza de arriba hacia abajo	Formularios, secciones y menús
Libre	Permite posicionamiento manual	Diseños especiales o elementos superpuestos

---

Contenedor horizontal

Los elementos se agregan en secuencia horizontal.

Ejemplo:

Logo | Espacio disponible | Usuario | Menú

El usuario no puede arrastrarlos libremente a cualquier posición, pero sí puede:

• Cambiar su orden.
• Ajustar el espaciado.
• Modificar la alineación.
• Controlar el ancho.
• Configurar el desbordamiento.

---

Contenedor vertical

Organiza los controles de arriba hacia abajo.

Ejemplo:

Título

Subtítulo

Botón

Es adecuado para:

• Formularios.
• Tarjetas.
• Menús verticales.
• Paneles.
• Secciones informativas.

---

Contenedor libre

Permite colocar manualmente los controles dentro del área mediante propiedades o arrastre.

Resulta útil cuando el diseño necesita una distribución menos estructurada. Sin embargo, debe utilizarse con cuidado porque un posicionamiento excesivamente fijo puede dificultar la adaptación a pantallas pequeñas.

---

5. ⚙️ Propiedades de los contenedores

Durante la práctica se revisaron propiedades como:

• Dirección.
• Justificación.
• Alineación.
• Separación.
• Ancho.
• Alto.
• Posición X e Y.
• Altura flexible.
• Desbordamiento horizontal.
• Desbordamiento vertical.
• Color de fondo.
• Borde.
• Radio del borde.
• Visibilidad.

Justificación y alineación

• Justificar organiza los elementos en la dirección principal del contenedor.
• Alinear controla su ubicación en el eje transversal.

Estas propiedades permiten:

• Centrar controles.
• Distribuir el espacio.
• Llevar elementos al inicio o al final.
• Expandirlos dentro del contenedor.

Desbordamiento

Cuando el contenido supera el espacio disponible se puede habilitar desplazamiento:

• Horizontal.
• Vertical.

Esto permite que el usuario consulte todos los controles sin ampliar indefinidamente el contenedor.

---

6. 📐 Diseño responsive

Una aplicación responsive ajusta su estructura según:

• Ancho de la pantalla.
• Alto.
• Orientación.
• Tipo de dispositivo.
• Espacio disponible.

Microsoft recomienda desactivar Ajustar al área, Bloquear relación de aspecto y Bloquear orientación cuando se desea implementar una experiencia realmente adaptable. [learn.microsoft.com], [learn.microsoft.com]

Beneficios

• Una misma aplicación puede utilizarse desde teléfono, tableta y computadora.
• Los controles pueden cambiar de tamaño.
• Los elementos pueden reorganizarse.
• Algunos controles pueden ocultarse en pantallas pequeñas.
• Se aprovecha mejor el espacio disponible.

Microsoft señala que una aplicación responsive debe prever qué elementos cambian de tamaño, cuáles cambian de posición y cuáles deben ocultarse según el dispositivo. [learn.microsoft.com], [learn.microsoft.com]

---

7. 🖥️ Estructura prevista de la aplicación

Se presentó una arquitectura compuesta por tres pantallas principales.

Pantalla de inicio

Contiene:

• Encabezado.
• Nombre o logotipo.
• Información del usuario.
• Título de bienvenida.
• Descripción.
• Imagen.
• Botón para acceder a los módulos.
• Pie de página.

Pantalla de módulos

Muestra las áreas disponibles, por ejemplo:

• Contabilidad.
• Recursos Humanos.
• Inventario.
• Operaciones.

Cada módulo puede representarse mediante:

• Botón.
• Icono.
• Imagen.
• Tarjeta.

Pantalla principal

Incluye:

• Encabezado.
• Menú lateral.
• Área central.
• Pie de página.

El contenido del menú puede variar de acuerdo con el módulo seleccionado.

---

8. 🧭 Navegación prevista

La navegación propuesta fue:

Pantalla de inicio

↓

Pantalla de módulos

↓

Pantalla principal del módulo

↓

Formularios, registros y reportes

En las próximas sesiones se utilizarán elementos como:

• Navigate() para cambiar de pantalla.
• Variables globales para conservar el módulo seleccionado.
• Colecciones para administrar menús.
• Galerías para mostrar opciones dinámicas.
• ThisItem para acceder al registro actual de una galería.

---

9. 🧩 Pantallas y componentes

Se explicó la diferencia entre una pantalla y un componente.

Pantalla

Representa una vista completa de la aplicación.

Ejemplos:

• Inicio.
• Módulos.
• Registro de empleados.
• Inventario.
• Reportes.

Componente

Es una sección reutilizable que puede incorporarse en varias pantallas.

Ejemplos:

• Encabezado.
• Menú.
• Pie de página.
• Barra de navegación.
• Tarjeta corporativa.

Ventaja de los componentes

Si se modifica un componente reutilizado, el cambio puede aplicarse a todas las pantallas que lo contienen.

Esto evita:

• Repetir controles.
• Modificar cada pantalla manualmente.
• Crear diseños inconsistentes.
• Aumentar innecesariamente el mantenimiento.

---

10. 🛠️ Interfaz de Power Apps Studio

Se revisaron las áreas principales del diseñador.

Vista de árbol

Muestra la estructura jerárquica de:

• Aplicación.
• Pantallas.
• Contenedores.
• Controles.
• Componentes.

Insertar

Permite agregar:

• Etiquetas.
• Botones.
• Entradas de texto.
• Iconos.
• Imágenes.
• Galerías.
• Formularios.
• Contenedores.

Datos

Permite conectar la aplicación con:

• Dataverse.
• SharePoint.
• Excel.
• SQL Server.
• Otros conectores.

Multimedia

Permite administrar:

• Imágenes.
• Videos.
• Audios.
• Otros recursos.

Power Automate

Permite vincular flujos para ejecutar procesos desde la aplicación.

Panel de propiedades

Permite modificar:

• Tamaño.
• Color.
• Posición.
• Bordes.
• Texto.
• Visibilidad.
• Alineación.
• Apariencia.

---

11. 🧰 Controles utilizados

La primera pantalla utilizó principalmente:

• Contenedores.
• Etiquetas de texto.
• Botón.
• Iconos.
• Imagen.
• Elementos separadores.

Elementos multimedia

Power Apps permite agregar imágenes:

1. Cargándolas como recurso de la aplicación.
2. Utilizando una dirección URL.

Recomendación

Para imágenes corporativas estables, es preferible:

• Cargar el archivo en la aplicación, o
• Utilizar una URL administrada por la organización.

Una imagen externa puede dejar de mostrarse si:

• La URL cambia.
• El archivo es eliminado.
• Se modifican los permisos.
• El servidor bloquea el acceso.

---

12. 🏗️ Construcción de la primera pantalla

La pantalla se organizó mediante un contenedor principal vertical.

Estructura general

Contenedor principal

├── Contenedor de cabecera

├── Contenedor central

│ ├── Contenedor izquierdo

│ └── Contenedor derecho

└── Contenedor de pie de página

Cabecera

El encabezado se configuró como contenedor horizontal e incluyó:

• Nombre de la aplicación.
• Contenedor separador.
• Icono de usuario.
• Texto de usuario.
• Icono desplegable.

Contenido central

Se dividió en:

Sección izquierda

• Título.
• Subtítulo.
• Botón de navegación.

Sección derecha

• Imagen representativa.

Pie de página

Incluyó una etiqueta de texto con:

• Año.
• Nombre de la aplicación.
• Declaración de derechos reservados.

---

13. 🏷️ Nombres descriptivos

Durante la construcción se renombraron los controles para mejorar su identificación.

Ejemplos recomendados:

• scrInicio
• conPrincipal
• conCabecera
• conCentral
• conIzquierdo
• conDerecho
• conFooter
• lblTitulo
• btnModulos
• imgPrincipal

✅ Usar nombres descriptivos facilita:

• La búsqueda de controles.
• La creación de fórmulas.
• El trabajo en equipo.
• La solución de errores.
• El mantenimiento.

---

14. 📏 Propiedades dinámicas de tamaño

Para que el contenedor principal ocupara el tamaño de su elemento padre, se utilizaron propiedades dinámicas.

Parent.Width

«

Parent.Height

Estas expresiones asignan al control el ancho y alto de su contenedor padre.

Microsoft recomienda utilizar fórmulas basadas en Width y Height en lugar de depender únicamente de tamaños fijos, para que los controles respondan a las dimensiones reales de la pantalla. [learn.microsoft.com], [learn.microsoft.com]

Posición inicial

También se configuraron las coordenadas:

0

para las propiedades X e Y del contenedor principal, con el objetivo de ubicarlo desde la esquina superior izquierda.

---

15. 🔀 Cambio de dirección según el ancho

El contenedor central debía comportarse de dos maneras:

• Horizontal en pantallas amplias.
• Vertical en pantallas pequeñas.

La lógica conceptual utilizada fue:

If(

Parent.Width < 500,

LayoutDirection.Vertical,

LayoutDirection.Horizontal

)

Este patrón permite que las secciones izquierda y derecha se coloquen una debajo de otra en teléfonos.

📌 Los puntos de interrupción deben definirse de acuerdo con el diseño real y probarse en múltiples tamaños. Microsoft permite utilizar puntos de interrupción personalizados para adaptar el contenido según las dimensiones disponibles. [learn.microsoft.com], [learn.microsoft.com]

---

16. 👁️ Visibilidad condicional

Algunos controles de la cabecera debían ocultarse en una pantalla pequeña.

Ejemplo conceptual:

If(

Parent.Width < 500,

false,

true

)

También puede expresarse de forma más directa:

Parent.Width >= 500

Elementos ocultados en móvil

• Texto del usuario.
• Icono desplegable.
• Algunos separadores.

Elemento mostrado únicamente en móvil

• Icono de menú tipo hamburguesa.

Ejemplo:

Parent.Width < 500

Esto permite simplificar la cabecera y aprovechar mejor el espacio en teléfonos.

---

17. 🎨 Estilos aplicados

Se modificaron propiedades visuales como:

• Colores.
• Tamaños de fuente.
• Ancho y alto.
• Bordes.
• Sombras.
• Radio de las esquinas.
• Espaciado.
• Alineación.

Esquinas redondeadas

El botón recibió un radio de borde para reducir las esquinas pronunciadas.

La práctica utilizó un valor aproximado de:

15

Un valor de cero produce esquinas cuadradas. Un valor mayor genera un efecto más redondeado.

---

18. 💾 Guardado y prueba

La aplicación fue guardada con un nombre relacionado con la sesión.

Se utilizó la vista previa para evaluar la interfaz en:

• Navegador.
• Tableta.
• Teléfono.
• Diferentes orientaciones.

Validaciones realizadas

• Tamaño del contenedor principal.
• Reorganización del contenido central.
• Ocultamiento de controles.
• Aparición del menú móvil.
• Visualización del encabezado.
• Comportamiento del pie de página.

La vista previa es indispensable, pero también es recomendable probar la aplicación en dispositivos reales antes de publicarla.

---

19. 📶 Uso de la aplicación sin conexión

Durante la clase se indicó que la aplicación requiere conexión a Internet. Como orientación general, esa respuesta es válida para aplicaciones web comunes, pero Power Apps admite escenarios móviles sin conexión si se configuran expresamente.

Las aplicaciones de lienzo ejecutadas en un navegador no funcionan sin conexión. En Power Apps Mobile se puede habilitar soporte sin conexión para Dataverse o implementar almacenamiento básico con SaveData() y LoadData() para otros conectores. [learn.microsoft.com]

Limitaciones

• El modo sin conexión requiere diseño adicional.
• No todos los conectores soportan sincronización offline.
• Los datos locales deben sincronizarse posteriormente.
• Las aplicaciones ejecutadas en navegador no funcionan offline.
• El almacenamiento local está sujeto a límites del dispositivo.

---

20. 📝 Ejercicio asignado

Se dejó como actividad opcional:

• Reproducir una pantalla de inicio basada en una imagen de referencia.
• Utilizar contenedores.
• Adaptarla para móvil y web.
• Mantener una estructura similar a la trabajada.
• Aplicar estilos, encabezado, contenido y botón.

El ejercicio busca reforzar:

• Estructura jerárquica.
• Selección de contenedores.
• Propiedades de diseño.
• Manejo de imágenes.
• Fórmulas responsive.
• Prueba en distintos tamaños.

---

❓ Preguntas y respuestas destacadas

1. ¿Cuándo utilizar SharePoint, Dataverse o SQL Server?

Respuesta del docente

SharePoint es apropiado para soluciones con menor volumen y complejidad. Dataverse es recomendable para aplicaciones más amplias. SQL Server es potente, pero exige mayor conocimiento.

Solución reforzada

La decisión debe considerar volumen, relaciones, concurrencia, seguridad, integración, costos y mantenimiento. Para una aplicación empresarial con relaciones y permisos avanzados, Dataverse suele ofrecer una arquitectura más sólida.

---

2. ¿La aplicación puede utilizarse sin Internet?

Respuesta del docente

En el uso normal presentado en clase se necesita conexión a Internet y una cuenta empresarial.

Refuerzo oficial

Las aplicaciones ejecutadas en navegador no funcionan offline. Power Apps Mobile permite configurar capacidades offline con Dataverse o almacenamiento local mediante SaveData() y LoadData(). [learn.microsoft.com]

---

3. ¿Qué tipo de imagen puede utilizarse?

Respuesta del docente

Power Apps incluye iconos propios y también permite usar imágenes como PNG o JPG, cargadas desde el equipo o mediante una URL.

Solución recomendada

Utilizar formatos optimizados, controlar el tamaño de archivo y evitar depender de URLs externas no administradas.

---

4. ¿Es mejor trabajar desde navegador o aplicación instalada?

Respuesta del docente

Ambas alternativas permiten desarrollar y utilizar la aplicación, siempre que exista conexión y acceso adecuado.

Recomendación

Para creación y edición, Power Apps Studio en navegador es la experiencia principal. Para probar comportamiento móvil, conviene utilizar Power Apps Mobile en un dispositivo real.

---

5. ¿Una aplicación diseñada inicialmente para tableta puede adaptarse a móvil?

Respuesta del docente

Sí, pero puede requerir cambios en tamaños, posiciones, propiedades y fórmulas. El esfuerzo será menor si se utilizaron contenedores.

Refuerzo oficial

Una aplicación diseñada para un formato fijo puede escalar, pero no necesariamente aprovechará bien el espacio. Para una adaptación natural es necesario construir un diseño responsive con contenedores y fórmulas dinámicas. [learn.microsoft.com], [learn.microsoft.com]

---

6. ¿Qué hacen Parent.Width y Parent.Height?

Respuesta del docente

Devuelven el ancho y alto del control padre, permitiendo asignar esas dimensiones al control seleccionado.

Solución recomendada

Utilizarlas para evitar dimensiones rígidas y combinar su uso con límites mínimos, máximos y contenedores de diseño automático. [learn.microsoft.com], [learn.microsoft.com]

---

7. ¿Cómo se muestran todos los caracteres del pie de página?

Respuesta del docente

Se debe ampliar el ancho de la etiqueta de texto.

Mejora recomendada

En lugar de depender únicamente de un ancho fijo, utilizar:

• Ancho basado en el padre.
• Ajuste de texto.
• Tamaño flexible.
• Alineación adaptativa.

---

8. ¿Cómo se redondean las esquinas de un botón?

Respuesta del docente

Mediante la propiedad de radio del borde. Un valor de cero mantiene las esquinas cuadradas y un valor mayor las redondea.

---

✅ Conclusiones

• Los contenedores son esenciales para crear interfaces ordenadas y adaptables.
• El contenedor horizontal organiza controles en fila.
• El vertical los organiza de arriba hacia abajo.
• El libre permite posicionamiento manual.
• Una aplicación empresarial debe priorizar funcionalidad, claridad y mantenimiento.
• Las fórmulas basadas en ancho y alto permiten adaptar la interfaz.
• La propiedad Visible permite simplificar las pantallas pequeñas.
• Los componentes facilitarán la reutilización de encabezados, menús y pies de página.
• Las imágenes pueden cargarse en la aplicación o recuperarse desde una URL.
• La primera pantalla responsive quedó estructurada como base para las siguientes vistas.
• Las operaciones con datos se desarrollarán después de completar la navegación y estructura general.

---

⭐ Recomendaciones finales

1. Definir los dispositivos compatibles antes de diseñar.
2. Utilizar un formato adaptable desde el inicio.
3. Desactivar Ajustar al área en aplicaciones responsive.
4. Construir la jerarquía mediante contenedores.
5. Evitar posiciones y tamaños totalmente fijos.
6. Utilizar fórmulas basadas en Parent.Width y Parent.Height.
7. Definir puntos de interrupción según el diseño real.
8. Ocultar elementos secundarios en pantallas pequeñas.
9. Utilizar nombres descriptivos para pantallas y controles.
10. Crear componentes reutilizables para encabezados y menús.
11. Optimizar imágenes antes de cargarlas.
12. Evitar URLs externas que no controle la organización.
13. Probar en teléfono, tableta y navegador.
14. Seleccionar el origen de datos según volumen, seguridad y complejidad.
15. Utilizar Copilot como apoyo, no como sustituto de la validación técnica.

---

📚 Referencias oficiales

• Microsoft Learn. Crear diseños dinámicos en aplicaciones de lienzo [learn.microsoft.com]
• Microsoft Learn. Creación de aplicaciones de lienzo receptivas [learn.microsoft.com]
• Microsoft Learn. Directrices de diseño responsive en Power Apps [learn.microsoft.com]
• Microsoft Learn. Desarrollar aplicaciones de lienzo con capacidad sin conexión [learn.microsoft.com]