Tema 1 - Introducción al desarrollo de interfaces gráficas de usuario PDF

Tema 1. Introducción al desarrollo de interfaces gráficos de usuario Ciclo: Desarrollo de Aplicaciones Multiplataforma. Módulo: Desarrollo de interfaces. Luis José Molina Garzón Septiembre 2024 Tema 1. Introducción al desarrollo de interfaces gráficos de usuario Septiembre 2024 ”El diseño no es solo cómo se ve y cómo se siente. El diseño es cómo funciona.” – Steve Jobs © 2024 Luis Molina Garzón. Todos los derechos reservados. Estos apuntes no puede ser reproducido, distribuido ni transmitido de ninguna forma, ni por ningún medio, sin el permiso previo por escrito del autor, excepto en el caso de breves citas incorporadas en reseñas o artículos críticos. Todos los nombres de productos, marcas comerciales y compañías mencionadas en estos apuntes son propiedad de sus respectivos dueños. Las marcas y nombres comerciales utilizados en estos apun‑ tes son únicamente con fines de identificación y referencia, y no implican aprobación de los productos o servicios de esas marcas por parte del autor. Estos apuntes han sido realizados con la asistencia de gpt‑4o y Claude 3.5 Sonnet. IES Virgen del Carmen ‑ Jaén. Desarrollo de Aplicaciones Multiplataforma. Desarrollo de interfaces. [email protected] Luis José Molina Garzón 1 Tema 1. Introducción al desarrollo de interfaces gráficos de usuario Septiembre 2024 Resultado de aprendizaje: 1. Genera interfaces gráficos de usuario mediante editores visuales utilizando las funcionalidades del editor y adaptando el código generado. Criterios de evaluación: a. Se han analizado las herramientas y librerías disponibles para la generación de interfaces gráficos. b. Se ha creado un interfaz gráfico utilizando las herramientas de un editor visual. c. Se han utilizado las funciones del editor para ubicar los componentes del interfaz. d. Se han modificado las propiedades de los componentes para adecuarlas a las necesidades de la aplicación. e. Se ha analizado el código generado por el editor visual. f. Se ha modificado el código generado por el editor visual. g. Se han asociado a los eventos las acciones correspondientes. h. Se ha desarrollado una aplicación que incluye el interfaz gráfico obtenido. Luis José Molina Garzón 2 Tema 1. Introducción al desarrollo de interfaces gráficos de usuario Septiembre 2024 Índice 1 Introducción a las interfaces gráficas de usuario (GUI) 6 1.1 Historia y Evolución de las GUI............................... 6 1.1.1 Primera GUI ‑ Xerox PARC (1973)......................... 6 1.1.2 Apple y la Popularización de la GUI (1984).................... 8 1.1.3 Microsoft Windows (1985 ‑ actualidad)...................... 8 1.1.4 Avances Modernos................................. 9 1.2 Importancia de las GUIs en el Software Moderno..................... 9 1.3 Facilitan la Usabilidad................................... 9 1.4 Mejoran la Productividad................................. 9 1.5 Son Atractivas y Agradables................................ 10 1.6 Compatibilidad Multiplataforma.............................. 10 1.7 Accesibilidad........................................ 10 1.8 Tipos de interfaces gráficas de usuario.......................... 10 1.8.1 GUIs de Escritorio................................. 11 1.8.2 GUIs Web...................................... 12 1.8.3 GUIs Móviles.................................... 14 1.9 Tecnologías nativas vs multiplataforma.......................... 15 1.9.1 Tecnologías Nativas................................ 15 1.9.2 Tecnologías Multiplataforma........................... 17 1.9.3 Tecnologías Híbridas................................ 18 2 Componentes 19 2.1 Ventanas.......................................... 20 2.2 Botones........................................... 20 2.3 Cuadros de Texto...................................... 21 2.4 Menús............................................ 21 2.5 Barras de Desplazamiento (Scrollbars).......................... 22 2.6 Etiquetas (Labels)...................................... 23 2.7 Cuadros de Diálogo (Modales)............................... 23 2.8 Iconos............................................ 24 2.9 Listas y Tablas........................................ 24 2.10 Barras de Progreso y Carga................................. 25 2.11 Controles de Formularios................................. 25 2.12 Layout............................................ 25 2.12.1 Layout en Aplicaciones de Escritorio....................... 26 2.12.2 Layout en Diseño Web............................... 27 Luis José Molina Garzón 3 Tema 1. Introducción al desarrollo de interfaces gráficos de usuario Septiembre 2024 2.13 Flexbox........................................... 29 2.13.1 Configuración Inicial: El Contenedor Flex..................... 29 2.13.2 Propiedades Principales del Contenedor Flex.................. 30 2.13.3 Propiedades de los Elementos Hijos (Items Flex)................. 33 2.14 Flexbox Grid......................................... 35 2.14.1 Configuración Inicial: El Contenedor Grid..................... 35 2.14.2 Definir las Filas y Columnas de la Cuadrícula................... 36 2.14.3 Controlar el Espaciado y el Tamaño Automático................. 37 2.14.4 Controlar el Espaciado entre Filas y Columnas.................. 38 2.14.5 Colocar Elementos dentro de la Cuadrícula................... 39 2.14.6 Alineación en CSS Grid............................... 39 2.14.7 Ejemplo Completo................................. 40 2.15 Eventos........................................... 41 2.15.1 Tipos de Eventos Comunes............................ 41 2.15.2 Ciclo de Vida de un Evento............................. 44 2.15.3 Propagación de Eventos.............................. 44 3 Editores visuales 44 3.1 Editores Visuales para Aplicaciones de Escritorio..................... 45 3.1.1 Microsoft Visual Studio (Windows)........................ 45 3.1.2 Qt Designer (Multiplataforma)........................... 45 3.1.3 SceneBuilder (JavaFX)............................... 45 3.2 Editores Visuales para Aplicaciones Móviles........................ 46 3.2.1 Android Studio (Android)............................. 46 3.2.2 Xcode Interface Builder (iOS)........................... 46 3.2.3 FlutterFlow (Multiplataforma)........................... 46 3.3 Editores Visuales para Aplicaciones Web......................... 47 3.3.1 Webflow...................................... 47 3.3.2 WordPress con Elementor............................. 47 3.3.3 Adobe Dreamweaver................................ 47 3.3.4 Editores Visuales para Aplicaciones Multiplataforma.............. 48 3.4 Webflow........................................... 48 3.4.1 Características principales:............................ 49 3.4.2 Secciones de la página web de Webflow..................... 49 3.4.3 Tutorial Guiado: Crear una Página Web Básica en Webflow........... 50 Luis José Molina Garzón 4 Tema 1. Introducción al desarrollo de interfaces gráficos de usuario Septiembre 2024 4 Arquitectura de Aplicaciones GUI: Frontend y Backend 65 4.1 Frontend: La GUI y la Interacción del Usuario....................... 65 4.1.1 Funciones clave del Frontend:........................... 65 4.1.2 Ejemplo de Flujo de Interacción en el Frontend:................. 66 4.2 Backend: Procesamiento, Lógica y Gestión de Datos................... 66 4.2.1 Tecnologías del Backend:............................. 66 4.2.2 Funciones clave del Backend:........................... 67 4.3 APIs y Servicios Web: Conexión entre Frontend y Backend................ 67 4.3.1 XML‑RPC...................................... 67 4.3.2 SOAP (Simple Object Access Protocol)...................... 67 4.3.3 REST (Representational State Transfer)...................... 68 4.3.4 GraphQL...................................... 68 4.3.5 Comparativa de Métodos de Comunicación:................... 68 4.4 REST............................................. 69 4.5 Práctica Guiada: Consultar una API Pública con Postman................ 71 4.5.1 Paso 1: Instalar Postman.............................. 71 4.5.2 Paso 2: Elegir una API Pública........................... 71 4.5.3 Paso 3: Realizar una Solicitud GET........................ 71 4.5.4 Paso 4: Analizar la Respuesta........................... 71 4.5.5 Paso 5: Realizar una Solicitud GET para obtener un solo usuario........ 72 4.5.6 Paso 6: Realizar una Solicitud POST........................ 73 4.5.7 Paso 7: Realizar una Solicitud PATCH....................... 74 4.5.8 Paso 8: Explorar Otros Endpoints......................... 75 5 Ejercicios I 75 6 Ejercicios I resueltos 76 7 Ejercicios opcionales 82 Luis José Molina Garzón 5 Tema 1. Introducción al desarrollo de interfaces gráficos de usuario Septiembre 2024 1 Introducción a las interfaces gráficas de usuario (GUI) Una Interfaz Gráfica de Usuario (GUI) es un entorno visual que permite a los usuarios interactuar con una computadora o dispositivo mediante componentes gráficos como botones, ventanas, me‑ nús, iconos, entre otros. A diferencia de las interfaces de línea de comandos (CLI), donde los usuarios deben escribir instrucciones textuales, las GUIs facilitan la interacción mediante elementos visua‑ les que pueden ser manipulados usando dispositivos de entrada como ratones, pantallas táctiles o teclados. 1.1 Historia y Evolución de las GUI El concepto de GUI nació para facilitar la interacción con computadoras, reemplazando las interfa‑ ces de texto que requerían comandos precisos. A continuación, se destacan los momentos clave en la evolución de las GUIs: 1.1.1 Primera GUI ‑ Xerox PARC (1973) El primer sistema que utilizó una GUI fue desarrollado en los laboratorios de Xerox PARC en 1973, denominado Xerox Alto. Presentaba una interfaz con ventanas, iconos y un ratón para interactuar con el sistema, pero no fue comercialmente exitoso. Luis José Molina Garzón 6 Tema 1. Introducción al desarrollo de interfaces gráficos de usuario Septiembre 2024 Figura 1: Primer sistema con GUI, Xerox Alto. Fuente: Wikipedia Figura 2: Primer sistema con GUI, Xerox Alto. Fuente: Wikipedia Luis José Molina Garzón 7 Tema 1. Introducción al desarrollo de interfaces gráficos de usuario Septiembre 2024 1.1.2 Apple y la Popularización de la GUI (1984) En 1984, Apple lanzó el Macintosh, que popularizó las interfaces gráficas de usuario a gran escala. Este sistema introdujo conceptos revolucionarios como el ratón, el uso de ventanas y menús des‑ plegables, marcando un hito en la historia de la interacción humano‑computadora. Figura 3: Macintosh 128k. Fuente: Wikipedia 1.1.3 Microsoft Windows (1985 ‑ actualidad) Microsoft lanzó Windows 1.0 en 1985, como respuesta a la creciente demanda de sistemas más ac‑ cesibles. Desde entonces, ha seguido evolucionando con cada versión, dominando el mercado de sistemas operativos para computadoras personales. Luis José Molina Garzón 8 Tema 1. Introducción al desarrollo de interfaces gráficos de usuario Septiembre 2024 Figura 4: Imagen de Windows 1.03 en español. Fuente: Wikipedia 1.1.4 Avances Modernos Hoy en día, las GUIs se han extendido más allá de los computadores personales. Con la llegada de los smartphones y tablets, las interfaces gráficas se adaptaron para soportar gestos táctiles y pantallas multitáctiles. Además, las GUIs han trascendido a aplicaciones web, donde frameworks modernos permiten crear interfaces visuales interactivas a través del navegador. 1.2 Importancia de las GUIs en el Software Moderno Las GUIs han transformado la manera en que los usuarios interactúan con el software, haciéndolo más accesible, intuitivo y eficiente. Estas son algunas de las razones por las que las GUIs son esenciales en el desarrollo de software moderno: 1.3 Facilitan la Usabilidad La mayoría de los usuarios no están familiarizados con los comandos textuales, pero pueden fácil‑ mente utilizar elementos gráficos. Las GUIs permiten que cualquier persona pueda usar complejas aplicaciones de software con un mínimo de entrenamiento. 1.4 Mejoran la Productividad Las GUIs ayudan a los usuarios a realizar tareas de manera más rápida y precisa, ya que los elementos visuales facilitan la comprensión inmediata de las funciones y opciones disponibles en un sistema o aplicación. Luis José Molina Garzón 9 Tema 1. Introducción al desarrollo de interfaces gráficos de usuario Septiembre 2024 1.5 Son Atractivas y Agradables Una buena GUI no solo es funcional, sino también visualmente atractiva. El diseño gráfico y la estéti‑ ca se han convertido en un componente importante del software, lo que puede afectar directamente la percepción del usuario sobre la calidad de un producto. 1.6 Compatibilidad Multiplataforma Las GUIs, en particular las basadas en tecnologías web, permiten que las aplicaciones sean accesibles desde diferentes plataformas (como Windows, macOS, Linux) y dispositivos (smartphones, tablets y computadoras). 1.7 Accesibilidad Gracias a las GUIs, las personas con discapacidades pueden interactuar con la tecnología de una for‑ ma más fácil. Las interfaces gráficas incluyen herramientas como lectores de pantalla, ampliación de texto, o comandos por voz, facilitando el acceso a la información. 1.8 Tipos de interfaces gráficas de usuario Las interfaces gráficas de usuario (GUIs) han evolucionado significativamente a lo largo de los años, adaptándose a diferentes dispositivos y necesidades. En este apartado se describen los principales tipos de GUIs según el entorno en el que se implementan: escritorio, web, móvil, y multiplataforma. Cada una de estas categorías tiene sus propias características, ventajas y desafíos. Tipo de Ejemplos GUI Plataforma Características clave Herramientas de uso Escritorio Windows, Aplicaciones instaladas, acceso Qt, WPF, Swing, Photoshop, macOS, completo a hardware Tkinter VS Code Linux Web Navegador Sin instalación, accesible desde React, Angular, Gmail, web cualquier dispositivo Vue.js Google Docs Móvil iOS, Android Interfaces táctiles, acceso a Android Studio, WhatsApp, sensores del dispositivo Xcode, React Native Uber Luis José Molina Garzón 10 Tema 1. Introducción al desarrollo de interfaces gráficos de usuario Septiembre 2024 1.8.1 GUIs de Escritorio Las GUIs de escritorio son aquellas que se ejecutan directamente en sistemas operativos como Win‑ dows, macOS o Linux. Estas interfaces están diseñadas para interactuar con aplicaciones instaladas localmente en una computadora personal o laptop. Las GUIs de escritorio suelen ser más completas y potentes en cuanto a funcionalidad, ya que aprovechan plenamente los recursos del sistema ope‑ rativo. Figura 5: Imagen de Office 2021 en Windows 11. Fuente: Microsoft 1.8.1.1 Características: Acceso directo al hardware y al sistema operativo: Las aplicaciones de escritorio tienen un acceso más directo a los recursos del hardware, lo que les permite realizar operaciones más intensivas como edición de video, gráficos 3D, etc. Mayor personalización: Las GUIs de escritorio suelen permitir mayor personalización y confi‑ guración avanzada por parte del usuario, ofreciendo configuraciones locales para adaptarse a las necesidades específicas de cada usuario. Interacción rica: Uso de múltiples ventanas, menús contextuales, atajos de teclado y otros com‑ ponentes gráficos avanzados. 1.8.1.2 Tecnologías populares para GUIs de Escritorio: Tkinter (Python): Para la creación de GUIs simples y ligeras. Qt (C++, Python con PyQt o PySide): Usada para GUIs más avanzadas y multiplataforma. Luis José Molina Garzón 11 Tema 1. Introducción al desarrollo de interfaces gráficos de usuario Septiembre 2024 Swing (Java): Framework estándar de Java para GUIs. WPF (Windows Presentation Foundation) y Windows Forms (C#): Para el desarrollo de interfa‑ ces gráficas en aplicaciones.NET para Windows. 1.8.1.3 Ventajas: Mayor rendimiento al estar instaladas y ejecutadas localmente. Capacidad para realizar operaciones complejas y manejar grandes volúmenes de datos. Acceso sin conexión a internet, ya que no requieren un navegador web. 1.8.1.4 Desventajas: Limitada a la plataforma para la que fue desarrollada (a menos que se use una tecnología multiplataforma). Necesidad de instalar y actualizar manualmente las aplicaciones en cada dispositivo. 1.8.2 GUIs Web Las GUIs web son aquellas que se ejecutan dentro de un navegador web. Este tipo de interfaz gráfi‑ ca ha ganado popularidad debido a su capacidad de ser accesible desde cualquier dispositivo con conexión a internet, sin la necesidad de instalación de software adicional. Figura 6: Versión web de Office 365. Fuente: Microsoft Luis José Molina Garzón 12 Tema 1. Introducción al desarrollo de interfaces gráficos de usuario Septiembre 2024 1.8.2.1 Características: Accesibilidad multiplataforma: Las GUIs web pueden ejecutarse en cualquier dispositivo que tenga un navegador, ya sea un computador, una tablet o un teléfono móvil. Actualización automática: Las aplicaciones web se actualizan automáticamente sin necesidad de intervención del usuario. Menos intensivas en recursos locales: Aunque dependen del navegador, suelen ser más lige‑ ras en cuanto al consumo de recursos del dispositivo. 1.8.2.2 Tecnologías populares para GUIs Web: HTML, CSS y JavaScript: La base para cualquier interfaz web. Frameworks de JavaScript: – React: Un framework moderno para crear interfaces de usuario interactivas. – Vue.js: Un framework progresivo de JavaScript que es ligero y fácil de integrar. – Angular: Un framework robusto para la creación de aplicaciones web de una sola página (SPA). 1.8.2.3 Ventajas: Accesibilidad universal: Pueden ser utilizadas desde cualquier dispositivo con navegador web. Sin necesidad de instalación: El usuario solo necesita un navegador y una conexión a internet. Actualización centralizada: No requiere que los usuarios actualicen el software, ya que el ser‑ vidor puede manejar la actualización. 1.8.2.4 Desventajas: Rendimiento inferior: Las aplicaciones web suelen ser menos potentes que las de escritorio debido a limitaciones de los navegadores. Dependencia de la conexión a internet: Aunque algunas aplicaciones web pueden funcionar offline (mediante Progressive Web Apps ‑ PWA), muchas dependen completamente de la cone‑ xión a internet. Seguridad: Los datos viajan por la web, lo que requiere medidas de seguridad más robustas para proteger la información del usuario. Luis José Molina Garzón 13 Tema 1. Introducción al desarrollo de interfaces gráficos de usuario Septiembre 2024 Antes, las aplicaciones eran mayormente de escritorio, instaladas y ejecutadas en la » computadora del usuario, con dependencia del hardware local para su funcionamien‑ to. Hoy, gracias a internet y la computación en la nube, las aplicaciones web y móviles son más comunes, permitiendo mayor flexibilidad, acceso remoto y actualizaciones au‑ tomáticas. Además, la mejora de las tecnologías de desarrollo web, permiten diseñar aplicaciones web completas, con interfaces avanzadas y dinámicas. Por este motivo, en el módulo Desarrollo de interfaces nos centraremos en las interfaces gráficas de usuario para la web. 1.8.3 GUIs Móviles Las GUIs móviles son interfaces diseñadas para interactuar con aplicaciones que se ejecutan en dis‑ positivos móviles, como teléfonos inteligentes y tablets. Estas GUIs deben adaptarse a pantallas pe‑ queñas y aprovechar las capacidades táctiles y otros sensores de los dispositivos móviles, como el acelerómetro, la cámara, el GPS, etc. Figura 7: Diseño de una aplicación móvil. Fuente: Wikipedia 1.8.3.1 Características: Interacción táctil: Los usuarios interactúan principalmente con la interfaz a través de gestos como tocar, deslizar, hacer zoom, entre otros. Diseño minimalista: Debido a las limitaciones de espacio en las pantallas móviles, las GUIs deben ser simples y eficientes. Luis José Molina Garzón 14 Tema 1. Introducción al desarrollo de interfaces gráficos de usuario Septiembre 2024 Multitarea limitada: Las aplicaciones móviles generalmente se ejecutan una a la vez, aunque pueden tener procesos en segundo plano. 1.8.3.2 Frameworks para GUIs Móviles: Android Studio: Plataforma de desarrollo para crear aplicaciones nativas en Android. Xcode: Herramienta oficial para el desarrollo de aplicaciones nativas para iOS. React Native: Framework basado en JavaScript que permite crear aplicaciones nativas para iOS y Android utilizando una sola base de código. Flutter: Un framework de Google que permite crear aplicaciones nativas para Android, iOS y también para web y escritorio. 1.8.3.3 Ventajas: Acceso a características del dispositivo: Las aplicaciones móviles pueden acceder a sensores del dispositivo, como el GPS, la cámara y el acelerómetro. Portabilidad: Las GUIs móviles están diseñadas para su uso en cualquier lugar, permitiendo la movilidad total del usuario. Interactividad avanzada: Los dispositivos móviles permiten una mayor variedad de gestos y entradas del usuario. 1.8.3.4 Desventajas: Limitaciones de rendimiento: Los dispositivos móviles suelen tener menos capacidad de pro‑ cesamiento y memoria que las computadoras de escritorio. Dependencia de la plataforma: El desarrollo para iOS y Android requiere diferentes entornos, a menos que se utilicen herramientas multiplataforma. 1.9 Tecnologías nativas vs multiplataforma El desarrollo de aplicaciones con interfaces gráficas de usuario (GUI) puede llevarse a cabo utilizando diferentes tecnologías, cada una adaptada a distintos propósitos y plataformas. A continuación, se describen las principales tecnologías en estas cuatro categorías, sus características y casos de uso. 1.9.1 Tecnologías Nativas Las tecnologías nativas son aquellas diseñadas específicamente para una plataforma o sistema ope‑ rativo, aprovechando completamente las APIs, el hardware y las características del sistema. El desa‑ Luis José Molina Garzón 15 Tema 1. Introducción al desarrollo de interfaces gráficos de usuario Septiembre 2024 rrollo de aplicaciones nativas garantiza el mayor rendimiento y una experiencia de usuario fluida, a expensas de tener que crear y mantener una aplicación diferente para cada plataforma. 1.9.1.1 Tecnologías Nativas para Escritorio: Windows Presentation Foundation (WPF): Una plataforma de Microsoft para desarrollar apli‑ caciones de escritorio para Windows, utilizando el lenguaje de programación C# y el framework.NET. WPF permite el desarrollo de GUIs avanzadas con soporte para gráficos, animaciones y contenido multimedia. Cocoa (macOS): Un conjunto de APIs de Apple para el desarrollo de aplicaciones en macOS, uti‑ lizando el lenguaje Objective‑C o Swift. Cocoa es el núcleo de las aplicaciones nativas en macOS y permite un control total sobre la interfaz de usuario y el rendimiento de la aplicación. GTK+ y Qt (Linux y otros): Son dos frameworks populares para el desarrollo de aplicaciones na‑ tivas en entornos Linux. GTK+ es usado en el entorno GNOME, mientras que Qt es un framework multiplataforma que también se usa para desarrollar aplicaciones nativas. 1.9.1.2 Tecnologías Nativas para Móvil: Android (Java/Kotlin): Android Studio es la herramienta oficial para desarrollar aplicaciones nativas en Android. Utiliza lenguajes como Java y Kotlin, permitiendo un control completo so‑ bre la interfaz de usuario y las funciones del dispositivo móvil, como la cámara, el GPS y las notificaciones push. iOS (Swift/Objective‑C): Xcode es el entorno de desarrollo oficial para crear aplicaciones nati‑ vas para dispositivos iOS, como iPhones y iPads. Se utilizan los lenguajes Swift y Objective‑C, y las aplicaciones nativas de iOS ofrecen el mejor rendimiento y una integración perfecta con las características del sistema operativo. 1.9.1.3 Ventajas de las Tecnologías Nativas: Rendimiento óptimo: El acceso directo al hardware y las APIs del sistema operativo proporcio‑ na el mejor rendimiento posible. Experiencia de usuario fluida: Las aplicaciones nativas suelen ofrecer una experiencia más fluida y una interfaz que sigue las pautas de diseño específicas del sistema operativo. Acceso completo a las funciones del dispositivo: Las aplicaciones nativas pueden acceder a todas las características del hardware y software del dispositivo, como el GPS, la cámara, y los sensores. 1.9.1.4 Desventajas de las Tecnologías Nativas: Luis José Molina Garzón 16 Tema 1. Introducción al desarrollo de interfaces gráficos de usuario Septiembre 2024 Mayor costo de desarrollo: Es necesario desarrollar versiones separadas para cada plataforma. Mantenimiento complejo: Las actualizaciones y correcciones deben realizarse en múltiples versiones de la misma aplicación. 1.9.2 Tecnologías Multiplataforma Las tecnologías multiplataforma permiten desarrollar una única base de código que se ejecuta en múltiples plataformas, como Windows, macOS, Linux, Android e iOS. Estas tecnologías están diseña‑ das para reducir el tiempo y costo de desarrollo al crear una aplicación que funcione en diversos dispositivos sin necesidad de reescribirla para cada plataforma. 1.9.2.1 Ejemplos de Tecnologías Multiplataforma: Flutter: Un framework de código abierto desarrollado por Google que permite crear aplicacio‑ nes nativas para Android, iOS, escritorio y web utilizando el lenguaje Dart. Flutter es conocido por su alta capacidad de personalización y su motor gráfico rápido, que permite crear GUIs atrac‑ tivas y de alto rendimiento. React Native: Un framework de JavaScript desarrollado por Facebook que permite crear apli‑ caciones nativas para Android e iOS a partir de una base de código única. React Native es muy popular por su integración con el ecosistema web de React, permitiendo el uso compartido de componentes UI. Qt: Aunque es más conocido por su uso en aplicaciones de escritorio, Qt es un framework multi‑ plataforma que permite desarrollar aplicaciones nativas para Windows, macOS, Linux y dispo‑ sitivos móviles con una sola base de código, utilizando el lenguaje C++. Xamarin: Un framework multiplataforma de Microsoft que permite desarrollar aplicaciones mó‑ viles y de escritorio para iOS, Android y Windows utilizando C# y el ecosistema de.NET. Xamarin es una opción popular para los desarrolladores que desean compartir la mayor parte de su có‑ digo entre plataformas. 1.9.2.2 Ventajas de las Tecnologías Multiplataforma: Un solo código para múltiples plataformas: El desarrollo multiplataforma ahorra tiempo y recursos, ya que se puede mantener una única base de código para varias plataformas. Lanzamiento simultáneo: Las aplicaciones se pueden desplegar al mismo tiempo en diferen‑ tes sistemas operativos, lo que agiliza la comercialización del producto. Consistencia de la interfaz: Permite una experiencia de usuario coherente en todos los dispo‑ sitivos. Luis José Molina Garzón 17 Tema 1. Introducción al desarrollo de interfaces gráficos de usuario Septiembre 2024 1.9.2.3 Desventajas de las Tecnologías Multiplataforma: Rendimiento limitado: Las aplicaciones multiplataforma a menudo no alcanzan el mismo ni‑ vel de rendimiento que las aplicaciones nativas. Acceso parcial a funciones nativas: Aunque los frameworks multiplataforma ofrecen acceso a muchas APIs del dispositivo, algunas funcionalidades específicas pueden ser más difíciles de implementar o menos eficientes. 1.9.3 Tecnologías Híbridas Las tecnologías híbridas son aquellas que combinan tecnologías web (HTML, CSS y JavaScript) con un contenedor nativo que permite ejecutar la aplicación en dispositivos móviles. Estas tecnologías permiten desarrollar una aplicación web y empaquetarla para su uso en dispositivos móviles como una aplicación nativa. 1.9.3.1 Ejemplos de Tecnologías Híbridas: Ionic: Un framework basado en tecnologías web (HTML, CSS y JavaScript) que utiliza Angular, React o Vue.js para desarrollar aplicaciones híbridas. Las aplicaciones de Ionic pueden empa‑ quetarse como aplicaciones móviles utilizando Capacitor o Cordova, permitiendo su distribu‑ ción a través de tiendas de aplicaciones. Apache Cordova: Un framework de código abierto que permite empaquetar aplicaciones web como aplicaciones nativas para dispositivos móviles. Cordova ofrece acceso a las APIs del dis‑ positivo a través de plugins que conectan el código JavaScript con el hardware del dispositivo. Capacitor: Similar a Cordova, pero con características modernas y más rendimiento. Capacitor es utilizado principalmente por Ionic, pero puede integrarse en proyectos JavaScript indepen‑ dientes para crear aplicaciones híbridas. 1.9.3.2 Ventajas de las Tecnologías Híbridas: Rápido tiempo de desarrollo: Las aplicaciones híbridas pueden desarrollarse rápidamente uti‑ lizando tecnologías web familiares para los desarrolladores. Un solo código para web y móvil: Permiten que una única aplicación funcione tanto como sitio web como aplicación móvil. Acceso a tiendas de aplicaciones: A diferencia de las aplicaciones web, las híbridas se pueden distribuir a través de tiendas como Google Play y App Store. 1.9.3.3 Desventajas de las Tecnologías Híbridas: Luis José Molina Garzón 18 Tema 1. Introducción al desarrollo de interfaces gráficos de usuario Septiembre 2024 Rendimiento inferior: Las aplicaciones híbridas suelen tener un rendimiento inferior en com‑ paración con las aplicaciones nativas, especialmente cuando se trata de animaciones o tareas intensivas. Dependencia de plugins: Para acceder a funciones nativas del dispositivo, las aplicaciones hí‑ bridas dependen de plugins, lo que puede limitar su funcionalidad. 2 Componentes Un componente en una Interfaz Gráfica de Usuario (GUI) es un elemento visual interactivo que forma parte de la interfaz y permite la interacción entre el usuario y la aplicación. Cada componente tiene un propósito específico, como recibir entradas del usuario, mostrar información, o realizar una acción concreta. Estos componentes son los bloques fundamentales de la interfaz, y su combinación permite crear aplicaciones funcionales y fáciles de usar. Figura 8: Componentes de una GUI Por ejemplo, un botón es un componente que, al hacer clic, puede desencadenar una acción, como enviar un formulario. Del mismo modo, una lista desplegable permite al usuario seleccionar una op‑ ción de un conjunto predefinido. En react el concepto de componente es fundamental. La interfaz gráfica de usuario se ¾ forma mediante un árbol jerárquico de componentes, desde el componente raíz que es el contenedor de la aplicación, hasta los componentes más pequeños como botones, cuadros de texto, etc. A continuación, se presentan los principales componentes de una GUI y sus funciones. Luis José Molina Garzón 19 Tema 1. Introducción al desarrollo de interfaces gráficos de usuario Septiembre 2024 2.1 Ventanas Las ventanas son la base de la mayoría de las interfaces gráficas. Son áreas rectangulares donde se presenta la información o se muestran las aplicaciones, y permiten al usuario interactuar con los con‑ tenidos y funcionalidades del programa. Figura 9: Ventana de una GUI Características: – Contienen otros componentes gráficos como botones, cuadros de texto y menús. – Las ventanas pueden ser maximizadas, minimizadas, o redimensionadas por el usuario. – Normalmente incluyen un título y botones de control (cerrar, minimizar, maximizar). 2.2 Botones Los botones son componentes interactivos que permiten a los usuarios realizar acciones específicas al hacer clic en ellos. Son uno de los elementos más comunes en las interfaces gráficas y suelen des‑ encadenar algún evento o proceso en la aplicación. Figura 10: Componente Botón de una GUI Tipos de botones: – Botón de acción: Ejecuta una función o acción específica (por ejemplo, “Enviar”, “Aceptar”, “Cancelar”). – Botón de opción: Permite seleccionar una opción dentro de un grupo de opciones (por ejemplo, los radio buttons). – Botón de alternancia (toggle button): Activa o desactiva una función (por ejemplo, encen‑ der o apagar una opción). Luis José Molina Garzón 20 Tema 1. Introducción al desarrollo de interfaces gráficos de usuario Septiembre 2024 Propiedades: – Texto o icono descriptivo. – Interacción con eventos, como hacer clic o tocar en pantallas táctiles. 2.3 Cuadros de Texto Los cuadros de texto permiten a los usuarios introducir y editar texto en una interfaz gráfica. Se utilizan en formularios y en cualquier lugar donde se requiera entrada de datos por parte del usuario. Figura 11: Componente Cuadro de Texto de una GUI Tipos de cuadros de texto: – Cuadro de texto de una sola línea: Usado para campos de texto simples como nombres o direcciones de correo electrónico. – Cuadro de texto multilínea: Permite al usuario escribir párrafos o bloques más grandes de texto. Propiedades: – Placeholder: Texto que aparece dentro del cuadro de texto antes de que el usuario escriba algo. – Validación de entrada, como límites en la cantidad de caracteres o tipos específicos de datos (números, texto, etc.). 2.4 Menús Los menús son listas desplegables de opciones o comandos que permiten a los usuarios navegar y ejecutar diferentes funcionalidades dentro de una aplicación. Luis José Molina Garzón 21 Tema 1. Introducción al desarrollo de interfaces gráficos de usuario Septiembre 2024 Figura 12: Componente Menú desplegable de una GUI Tipos de menús: – Menús desplegables (drop‑down): Aparecen cuando se hace clic en un botón o área espe‑ cífica y muestran una lista de opciones. – Menús contextuales: Aparecen cuando el usuario realiza una acción como hacer clic con el botón derecho del ratón, mostrando opciones relacionadas con el contexto actual. – Menús de navegación: Se encuentran en la parte superior o lateral de las interfaces y per‑ miten al usuario navegar entre diferentes secciones de la aplicación. Propiedades: – Jerarquías de opciones, con submenús que pueden desplegarse. – Atajos de teclado asociados para facilitar el acceso. 2.5 Barras de Desplazamiento (Scrollbars) Las barras de desplazamiento permiten a los usuarios navegar a través de contenidos que no caben en el área visible de la pantalla. Pueden ser verticales u horizontales, dependiendo de la orientación del contenido. Figura 13: Componente Barra de Desplazamiento de una GUI Características: – Permiten desplazarse hacia arriba, abajo, izquierda o derecha en un documento o interfaz. – Suelen tener flechas en ambos extremos y una barra de desplazamiento que se puede arrastrar. Luis José Molina Garzón 22 Tema 1. Introducción al desarrollo de interfaces gráficos de usuario Septiembre 2024 2.6 Etiquetas (Labels) Las etiquetas son elementos de texto que proporcionan descripciones o información relacionada con otros componentes de la interfaz. Las etiquetas no son interactivas, pero son esenciales para guiar al usuario. Figura 14: Componente Etiqueta de una GUI Usos comunes: – Describir campos de entrada (por ejemplo, “Nombre”, “Correo electrónico”). – Mostrar mensajes de estado o información adicional. Propiedades: – Asociadas a otros elementos, como cuadros de texto o botones, para describir su funcio‑ nalidad. – Tipografía y color ajustables según la jerarquía de información. 2.7 Cuadros de Diálogo (Modales) Los cuadros de diálogo son ventanas emergentes que requieren la atención del usuario. Se utilizan para confirmar acciones, solicitar información adicional o mostrar mensajes importantes. Figura 15: Componente Cuadro de Diálogo de una GUI Tipos de cuadros de diálogo: – Modal: Bloquea la interacción con la interfaz principal hasta que se resuelva el cuadro de diálogo (por ejemplo, un mensaje de confirmación). – No modal: Permite al usuario interactuar con la aplicación principal incluso mientras el cuadro de diálogo está abierto. Luis José Molina Garzón 23 Tema 1. Introducción al desarrollo de interfaces gráficos de usuario Septiembre 2024 Ejemplos: – Mensajes de confirmación (por ejemplo, “¿Está seguro de que desea eliminar este archi‑ vo?”). – Cuadros de advertencia o error. 2.8 Iconos Los iconos son representaciones gráficas pequeñas que se utilizan para representar acciones, progra‑ mas o archivos dentro de una GUI. Son elementos visuales que permiten a los usuarios identificar rápidamente la función de un componente o acceder a un recurso. Usos: – Representar aplicaciones (por ejemplo, el icono de una carpeta o un archivo). – Agilizar el acceso a funciones comunes como copiar, pegar o imprimir. Características: – Pueden ser interactivos, permitiendo al usuario hacer clic para ejecutar una acción. – Utilizan un lenguaje visual familiar para el usuario, facilitando la navegación. 2.9 Listas y Tablas Las listas y tablas permiten al usuario visualizar y seleccionar entre varios elementos o conjuntos de datos. Figura 16: Componente Lista o Tabla de una GUI Listas: – Pueden ser de selección simple o múltiple. – Se utilizan para mostrar elementos que el usuario puede seleccionar o navegar, como una lista de nombres o archivos. Tablas: – Presentan datos estructurados en filas y columnas. – Son útiles para mostrar grandes volúmenes de datos de manera ordenada. Luis José Molina Garzón 24 Tema 1. Introducción al desarrollo de interfaces gráficos de usuario Septiembre 2024 2.10 Barras de Progreso y Carga Las barras de progreso y barras de carga son componentes visuales que indican el avance de una tarea en curso, como la descarga de un archivo o la instalación de un programa. Figura 17: Componente Barra de Progreso de una GUI Barras de progreso: Muestran cuánto se ha completado de una tarea (por ejemplo, “50% com‑ pletado”). Indicadores de carga (spinners): Se utilizan cuando el progreso no puede ser cuantificado con exactitud, pero indica que una tarea está en curso. 2.11 Controles de Formularios Los controles de formularios son componentes de entrada que permiten a los usuarios interactuar con formularios y enviar datos. Checkboxes: Permiten seleccionar una o más opciones en una lista. Radio buttons: Permiten seleccionar solo una opción en un grupo. Select dropdowns: Menús desplegables que permiten seleccionar una opción de una lista. Botones de envío: Finalizan la entrada de datos y envían la información. La librería core de react no proporciona componentes predefinidos, los tiene que ¾ crear el desarrollador. No obstante, existen librerías de terceros que proporcionan com‑ ponentes listos para usar, como Material UI (MUI), Ant Design, Chakra UI, React Bootstrap, entre otras. 2.12 Layout El término layout se refiere a la disposición o estructura de los elementos visuales dentro de una interfaz gráfica, tanto en aplicaciones de escritorio como en sitios web. Un buen layout organiza de manera efectiva los componentes de una interfaz (como textos, imágenes, botones, formularios, etc.) para facilitar la interacción del usuario, mejorar la accesibilidad y crear una experiencia visual cohe‑ rente. Luis José Molina Garzón 25 Tema 1. Introducción al desarrollo de interfaces gráficos de usuario Septiembre 2024 2.12.1 Layout en Aplicaciones de Escritorio En las aplicaciones de escritorio, el layout describe cómo se organizan y distribuyen los componentes dentro de la ventana de la aplicación. Esto puede incluir botones, menús, cuadros de texto, formula‑ rios, y cualquier otro elemento de interacción. 2.12.1.1 Tipos Comunes de Layouts en Escritorio: 1. Layouts Fijos: Los elementos tienen un tamaño y una posición definidos, que no cambian si se redimen‑ siona la ventana. Son más simples de implementar, pero pueden no ser flexibles cuando se cambia el tama‑ ño de la ventana o se utiliza en pantallas de diferentes resoluciones. Figura 18: Layout absoluto o fijo 2. Layouts Responsivos: Adaptan su contenido según el tamaño de la ventana. Los elementos pueden cambiar de posición o tamaño para ajustarse a pantallas más gran‑ des o pequeñas, asegurando que la interfaz sea funcional en cualquier resolución. Las aplicaciones modernas suelen utilizar layouts flexibles que permiten a los usuarios redimensionar ventanas sin comprometer la experiencia de uso. 2.12.1.2 Contenedores y Gestores de Layout: Grid Layouts: Utilizan un sistema de cuadrícula donde los elementos están organizados en filas y columnas, proporcionando una disposición clara y simétrica. Flow Layouts: Los elementos se colocan secuencialmente de izquierda a derecha y de arriba abajo, como si se estuvieran escribiendo líneas de texto. Luis José Molina Garzón 26 Tema 1. Introducción al desarrollo de interfaces gráficos de usuario Septiembre 2024 Border Layouts: Dividen la ventana en áreas, como norte, sur, este, oeste y centro, donde los elementos se colocan en posiciones fijas. 2.12.2 Layout en Diseño Web En el diseño web, el layout se refiere a cómo se organizan los elementos dentro de una página web. El diseño web debe ser responsivo, lo que significa que el layout debe ajustarse automáticamente a diferentes tamaños de pantalla y dispositivos (escritorio, tabletas, móviles). 2.12.2.1 Tipos Comunes de Layouts en Web: 1. Layout Fijo: Las dimensiones del diseño están definidas en píxeles, y el contenido no cambia de tama‑ ño a medida que cambia el tamaño de la pantalla. Este tipo de diseño puede funcionar bien en dispositivos con tamaños de pantalla simila‑ res, pero no es ideal para dispositivos móviles o pantallas de diferentes tamaños. 2. Layout Fluido (Fluid Layout): Las dimensiones se definen en porcentajes en lugar de píxeles, lo que permite que el con‑ tenido se ajuste dinámicamente al tamaño del navegador o dispositivo. Es útil para lograr una mayor adaptabilidad sin un rediseño completo. 3. Layout Responsivo (Responsive Layout): Utiliza media queries para ajustar el diseño en función del tamaño de la pantalla o dispo‑ sitivo. Esto asegura que el contenido se vea bien en escritorio, móviles, y tabletas. Un diseño responsivo puede cambiar la posición, el tamaño o incluso ocultar ciertos ele‑ mentos dependiendo del ancho de la pantalla. 4. Layout Basado en Cuadrícula (Grid Layout): Utiliza una cuadrícula para organizar el contenido en filas y columnas, lo que proporciona una estructura clara y coherente. Popularizado por frameworks como Bootstrap y CSS Grid, este sistema permite crear dise‑ ños complejos que se adaptan a diferentes pantallas de manera eficaz. Luis José Molina Garzón 27 Tema 1. Introducción al desarrollo de interfaces gráficos de usuario Septiembre 2024 Figura 19: Layouts en web 2.12.2.2 Tecnologías Utilizadas para Layouts en Web: 1. CSS Flexbox: Flexbox es un modelo de diseño que organiza los elementos en una sola dimen‑ sión (fila o columna), permitiendo flexibilidad en cómo se alinean y distribuyen los componen‑ tes dentro de un contenedor. 2. CSS Grid: Es un sistema de diseño bidimensional que permite organizar los elementos en filas y columnas. Es más poderoso que Flexbox cuando se trata de crear layouts más complejos. 3. Frameworks CSS: Herramientas como Bootstrap o Foundation proporcionan sistemas predefi‑ nidos de cuadrículas y componentes que facilitan la creación de layouts responsivos. 2.12.2.3 Comparación de Layouts en Escritorio y Web Aspecto Layout en Escritorio Layout en Web Flexibilidad Más estático, pero puede ser adaptativo Altamente dinámico y mediante redimensionado de ventanas. responsivo, ajustándose a múltiples dispositivos y resoluciones. Adaptación Redimensionable para diferentes pantallas, Usa técnicas como media pero no tan versátil como los diseños web. queries y unidades relativas para adaptarse a cualquier dispositivo. Luis José Molina Garzón 28 Tema 1. Introducción al desarrollo de interfaces gráficos de usuario Septiembre 2024 Aspecto Layout en Escritorio Layout en Web Tecnologías Frameworks como WPF, Qt o GTK+ para la HTML, CSS, Flexbox, Grid, y disposición de ventanas y componentes. frameworks como Bootstrap para layouts web. Responsividad Puede redimensionarse, pero Diseño responsivo mediante tradicionalmente más rígido. CSS, adaptándose a múltiples resoluciones y dispositivos. 2.13 Flexbox Flexbox (Flexible Box Layout) es un sistema de diseño en CSS que permite organizar y distribuir los elementos dentro de un contenedor de manera eficiente, incluso si sus tamaños son dinámicos o desconocidos. Flexbox es especialmente útil para crear layouts responsivos y manejar la alineación de elementos. ::caution Más adelante, se usará la herramienta Webflow para diseñar aplicaciones web de forma visual. Esta y otras aplicaciones utilizan Flexbox para organizar los elementos de la interfaz de usuario. Práctica en Webflow las distintas propiedades de Flexbox, te resultará más intuitivo entender como se comportan los elementos en los layouts. :: Puedes consultar una guía más detallada en CSS Flexbox Layout Guide. A continuación, se explica cómo funciona Flexbox y sus propiedades principales mediante un tutorial básico. 2.13.1 Configuración Inicial: El Contenedor Flex Para empezar a utilizar Flexbox, necesitas aplicar la propiedad display: flex al contenedor que contie‑ ne los elementos que quieres alinear. HTML Básico: 1 2 Item 1 3 Item 2 4 Item 3 5 CSS para Activar Flexbox: css Luis José Molina Garzón 29 Tema 1. Introducción al desarrollo de interfaces gráficos de usuario Septiembre 2024 1.flex-container { 2 display: flex; 3 } Con solo esta configuración, los elementos hijos (.item) se alinearán en una fila por defecto, uno al lado del otro. Figura 20: Layout con flexbox 2.13.2 Propiedades Principales del Contenedor Flex El contenedor en Flexbox tiene varias propiedades que controlan la distribución y alineación de los elementos hijos: a. flex‑direction: Dirección del Contenido Define la dirección en la que se colocarán los elementos hijos dentro del contenedor. Valores: – row (predeterminado): Los elementos se alinean en fila, de izquierda a derecha. – row‑reverse: Los elementos se alinean en fila, de derecha a izquierda. – column: Los elementos se alinean en columna, de arriba hacia abajo. – column‑reverse: Los elementos se alinean en columna, de abajo hacia arriba. Ejemplo: 1.flex-container { 2 display: flex; 3 flex-direction: column; 4 } Figura 21: Propiedad flex‑direction de flexbox b. justify‑content: Alineación Horizontal Luis José Molina Garzón 30 Tema 1. Introducción al desarrollo de interfaces gráficos de usuario Septiembre 2024 Esta propiedad controla cómo los elementos hijos se distribuyen a lo largo del eje principal del con‑ tenedor (horizontalmente si flex‑direction es row). Valores: – flex‑start: Alinea los elementos al inicio del contenedor. – flex‑end: Alinea los elementos al final del contenedor. – center: Alinea los elementos en el centro del contenedor. – space‑between: Distribuye los elementos con el máximo espacio posible entre ellos. – space‑around: Agrega un espacio igual alrededor de cada elemento. Ejemplo: 1.flex-container { 2 display: flex; 3 justify-content: center; 4 } Figura 22: Propiedad justify‑content de flexbox c. align‑items: Alineación Vertical Esta propiedad controla cómo se alinean los elementos a lo largo del eje transversal (verticalmente si flex‑direction es row). Valores: – stretch (predeterminado): Los elementos se estiran para llenar el contenedor. Luis José Molina Garzón 31 Tema 1. Introducción al desarrollo de interfaces gráficos de usuario Septiembre 2024 – flex‑start: Alinea los elementos al inicio del contenedor (arriba). – flex‑end: Alinea los elementos al final del contenedor (abajo). – center: Alinea los elementos en el centro, verticalmente. – baseline: Alinea los elementos según su línea base de texto. Ejemplo: 1.flex-container { 2 display: flex; 3 align-items: center; 4 } Figura 23: Propiedad align‑items de flexbox d. flex‑wrap: Salto de línea Controla si los elementos hijos pueden saltar a la siguiente línea si no hay suficiente espacio en el contenedor. Valores: – nowrap (predeterminado): Los elementos no saltan a la siguiente línea. – wrap: Los elementos saltan a la siguiente línea si no hay suficiente espacio. – wrap‑reverse: Los elementos saltan a la siguiente línea en dirección opuesta. Ejemplo: 1.flex-container { 2 display: flex; 3 flex-wrap: wrap; 4 } e. align‑content: Alineación de Contenido Luis José Molina Garzón 32 Tema 1. Introducción al desarrollo de interfaces gráficos de usuario Septiembre 2024 Controla cómo se distribuyen los elementos hijos a lo largo del eje transversal cuando hay espacio extra. Solo tiene efecto si hay más de una línea de elementos, es decir, si flex‑wrap es wrap o wrap‑ reverse. Valores: – flex‑start: Alinea las líneas al inicio del contenedor. – flex‑end: Alinea las líneas al final del contenedor. – center: Alinea las líneas en el centro del contenedor. – space‑between: Distribuye las líneas con espacio igual entre ellas. – space‑around: Distribuye las líneas con espacio igual alrededor de ellas. – stretch: Alinea las líneas estirando los elementos para llenar el espacio disponible. Ejemplo: 1.flex-container { 2 display: flex; 3 flex-wrap: wrap; 4 align-content: center; 5 } Figura 24: Propiedad align‑content de flexbox 2.13.3 Propiedades de los Elementos Hijos (Items Flex) Cada elemento dentro del contenedor Flex también puede tener propiedades que controlen su tama‑ ño y comportamiento. a. flex‑grow: Crecimiento Luis José Molina Garzón 33 Tema 1. Introducción al desarrollo de interfaces gráficos de usuario Septiembre 2024 Determina cómo un elemento puede crecer si hay espacio disponible. El valor predeterminado es 0, lo que significa que no crece. Ejemplo: 1.item { 2 flex-grow: 1; 3 } Con este valor, todos los elementos crecen para ocupar todo el espacio disponible de manera equita‑ tiva. Figura 25: Propiedad flex‑grow de flexbox b. flex‑shrink: Encogimiento Controla cómo un elemento puede encogerse si hay menos espacio disponible. El valor predetermi‑ nado es 1, lo que significa que los elementos pueden encogerse si es necesario. 1 Ejemplo: 1.item { 2 flex-shrink: 0; 3 } Con este valor, los elementos no se encogen si hay menos espacio. c. flex‑basis: Tamaño Base Define el tamaño inicial de un elemento antes de que se aplique el flex‑grow o el flex‑shrink. 1 Ejemplo: 1.item { 2 flex-basis: 100px; 3 } d. align‑self: Alineación Individual Permite que un elemento hijo sobreescriba el valor de align‑items del contenedor. Valores: – auto: Hereda el valor de align‑items. Luis José Molina Garzón 34 Tema 1. Introducción al desarrollo de interfaces gráficos de usuario Septiembre 2024 – flex‑start, flex‑end, center, baseline, stretch. Ejemplo: 1.item { 2 align-self: flex-end; 3 } Figura 26: Propiedad align‑self de flexbox Esta no es una lista exhaustiva de las propiedades de Flexbox, pero te proporciona una ¾ visión general de las más importantes. 2.14 Flexbox Grid CSS Grid es un sistema de diseño en CSS que permite organizar y distribuir elementos en filas y co‑ lumnas, ofreciendo una estructura bidimensional más potente y flexible que Flexbox. Con Grid, es posible crear layouts complejos y responsivos de manera sencilla, ideal para distribuir contenido de manera uniforme y controlada. Puedes consultar una guía más detallada en CSS Grid Layout Guide. A continuación, se explica cómo utilizar CSS Grid y sus propiedades básicas en un tutorial paso a pa‑ so. 2.14.1 Configuración Inicial: El Contenedor Grid Para empezar a utilizar CSS Grid, es necesario aplicar la propiedad display: grid al contenedor que contiene los elementos que quieres distribuir. HTML Básico: 1 2 Item 1 3 Item 2 4 Item 3 5 Item 4 6 Item 5 7 Item 6 8 Luis José Molina Garzón 35 Tema 1. Introducción al desarrollo de interfaces gráficos de usuario Septiembre 2024 CSS para Activar CSS Grid: 1.grid-container { 2 display: grid; 3 } Con solo esta configuración, los elementos dentro del contenedor (.item) no se distribuirán aún en una cuadrícula. Ahora vamos a especificar cómo se organizan las filas y columnas. 2.14.2 Definir las Filas y Columnas de la Cuadrícula CSS Grid utiliza las propiedades grid‑template‑columns y grid‑template‑rows para definir cuántas co‑ lumnas y filas tendrá la cuadrícula y su tamaño. grid‑template‑columns y grid‑template‑rows: – grid‑template‑columns: Define cuántas columnas habrá y su tamaño. – grid‑template‑rows: Define cuántas filas habrá y su tamaño. Valores: : Un tamaño fijo o un porcentaje. fr: Una fracción del espacio disponible. auto: El tamaño se ajusta automáticamente al contenido. minmax: Un tamaño mínimo y máximo para la columna o fila. repeat: Repite un patrón de tamaño. min‑content: El tamaño mínimo necesario para mostrar el contenido. max‑content: El tamaño máximo necesario para mostrar el contenido. fit‑content: Un tamaño que ajusta el contenido al espacio disponible. : Un nombre para la línea de la cuadrícula. Ejemplo: 1.grid-container { 2 display: grid; 3 grid-template-columns: 100px 100px 100px; 4 grid-template-rows: 150px 150px; 5 } Esto crea una cuadrícula con tres columnas de igual tamaño (100px) y dos filas de igual tamaño (150px). Ejemplo: 1.container { 2 grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end]; Luis José Molina Garzón 36 Tema 1. Introducción al desarrollo de interfaces gráficos de usuario Septiembre 2024 3 grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line]; 4 } Figura 27: Grid Usar la Función repeat() En lugar de escribir manualmente el tamaño de cada columna o fila, puedes usar la función repeat() para hacer el código más conciso. 1.grid-container { 2 display: grid; 3 grid-template-columns: repeat(3, 100px); 4 grid-template-rows: repeat(2, 150px); 5 } 2.14.3 Controlar el Espaciado y el Tamaño Automático CSS Grid permite ajustar automáticamente el tamaño de las columnas y filas según el contenido o el espacio disponible. Usar auto Con auto, el tamaño de la columna o fila se ajustará automáticamente al contenido más grande. 1.grid-container { 2 display: grid; 3 grid-template-columns: 100px auto 100px; 4 } Usar fr (fracción de espacio disponible) El valor fr representa una fracción del espacio disponible en la cuadrícula. Es muy útil para crear dise‑ ños responsivos. 1.grid-container { 2 display: grid; Luis José Molina Garzón 37 Tema 1. Introducción al desarrollo de interfaces gráficos de usuario Septiembre 2024 3 grid-template-columns: 1fr 2fr 1fr; 4 } En este ejemplo, la primera y tercera columnas ocuparán una fracción cada una, y la columna del medio ocupará dos fracciones. 2.14.4 Controlar el Espaciado entre Filas y Columnas CSS Grid permite definir la separación entre columnas y filas con las propiedades grid‑gap, column‑ gap y row‑gap. Ejemplo de Espaciado entre Columnas y Filas: 1.grid-container { 2 display: grid; 3 grid-template-columns: repeat(3, 1fr); 4 grid-gap: 20px; 5 } O puedes especificar los espacios por separado: 1.grid-container { 2 display: grid; 3 grid-template-columns: repeat(3, 1fr); 4 column-gap: 20px; 5 row-gap: 30px; 6 } O 1.grid-container { 2 grid-template-columns: 100px 50px 100px; 3 grid-template-rows: 80px auto 80px; 4 column-gap: 10px; 5 row-gap: 15px; 6 } Figura 28: Grid gap Luis José Molina Garzón 38 Tema 1. Introducción al desarrollo de interfaces gráficos de usuario Septiembre 2024 2.14.5 Colocar Elementos dentro de la Cuadrícula Con CSS Grid, puedes posicionar elementos específicos en celdas específicas de la cuadrícula usando las propiedades grid‑column y grid‑row. grid‑column y grid‑row Estas propiedades permiten definir dónde empieza y termina un elemento en la cuadrícula. 1.item { 2 grid-column: 2 / 4; 3 grid-row: 1 / 3; 4 } O 1.item-c { 2 grid-column: 3 / span 2; 3 grid-row: third-line / 4; 4 } Figura 29: Grid grid‑column y grid‑row Esto hará que el elemento abarque varias columnas y filas. 2.14.6 Alineación en CSS Grid Puedes alinear los elementos dentro de sus celdas utilizando las propiedades de alineación específi‑ cas de CSS Grid. Alinear Contenido en el Eje Principal y Transversal – justify‑items: Alinea el contenido de los elementos a lo largo del eje horizontal (de izquier‑ da a derecha). – align‑items: Alinea el contenido a lo largo del eje vertical (de arriba hacia abajo). Ejemplo: Luis José Molina Garzón 39 Tema 1. Introducción al desarrollo de interfaces gráficos de usuario Septiembre 2024 1.grid-container { 2 display: grid; 3 justify-items: center; 4 align-items: center; 5 } Figura 30: Grid justify‑items center Figura 31: Grid align‑items start Alinear el Contenedor Completo – justify‑content: Alinea la cuadrícula completa dentro del contenedor principal. – align‑content: Alinea la cuadrícula completa verticalmente dentro del contenedor princi‑ pal. Ejemplo: 1.grid-container { 2 display: grid; 3 justify-content: center; 4 align-content: center; 5 } 2.14.7 Ejemplo Completo 1 2 Item 1 3 Item 2 4 Item 3 5 Item 4 6 Item 5 7 Item 6 8 1.grid-container { 2 display: grid; Luis José Molina Garzón 40 Tema 1. Introducción al desarrollo de interfaces gráficos de usuario Septiembre 2024 3 grid-template-columns: repeat(3, 1fr); 4 grid-gap: 20px; 5 justify-items: center; 6 align-items: center; 7 height: 400px; 8 } 9 10.item { 11 background-color: steelblue; 12 color: white; 13 padding: 20px; 14 text-align: center; 15 } Esta no es una lista completa de las propiedades de Grid, pero te proporciona una visión ¾ general de las más importantes. 2.15 Eventos En el contexto de una Interfaz Gráfica de Usuario (GUI), los eventos son acciones o sucesos que ocu‑ rren en el sistema o la interfaz con los que el usuario o el sistema puede interactuar. Los eventos desencadenan respuestas o acciones dentro de la aplicación, lo que permite la interactividad entre el usuario y el software. Figura 32: Eventos en una GUI Los eventos pueden ser disparados por el usuario, como un clic en un botón, o disparados por el sistema, como la carga de una página o la finalización de un proceso en segundo plano. 2.15.1 Tipos de Eventos Comunes 1. Eventos de Entrada del Usuario Luis José Molina Garzón 41 Tema 1. Introducción al desarrollo de interfaces gráficos de usuario Septiembre 2024 Estos eventos son disparados por las acciones directas del usuario con la interfaz de la aplicación o el sistema. Clic de Ratón (Mouse Click): – Descripción: Ocurre cuando el usuario hace clic en un botón, imagen, enlace, u otro com‑ ponente interactivo. – Ejemplo: Al hacer clic en un botón “Enviar”, se ejecuta una acción para enviar un formula‑ rio. Eventos de Teclado (Keyboard Events): – Descripción: Son los eventos que se generan cuando el usuario interactúa con el teclado. – Tipos: * KeyDown: Ocurre cuando una tecla es presionada. * KeyUp: Ocurre cuando una tecla es liberada. * KeyPress: Ocurre mientras la tecla está siendo presionada. – Ejemplo: Mientras el usuario escribe en un campo de texto, se puede detectar qué tecla está siendo presionada para autocompletar el campo. Eventos de Movimiento del Ratón (Mouse Movement): – Descripción: Se activan cuando el usuario mueve el ratón sobre un área o un componente de la interfaz. – Ejemplo: Mostrar un menú o una información adicional cuando el puntero del ratón pasa sobre un icono (evento de “hover”). Eventos de Toque (Touch Events): – Descripción: Son los eventos que se activan en dispositivos con pantallas táctiles cuando el usuario toca la pantalla. – Tipos: * TouchStart: Cuando el usuario coloca el dedo en la pantalla. * TouchMove: Cuando el usuario arrastra el dedo por la pantalla. * TouchEnd: Cuando el usuario retira el dedo de la pantalla. – Ejemplo: Un usuario puede deslizar el dedo hacia la izquierda para cambiar de página en una aplicación móvil. 2. Eventos de la Interfaz de Usuario Estos eventos ocurren cuando hay un cambio o acción en la interfaz de la aplicación. Evento de Carga de Página (Load Event): Luis José Molina Garzón 42 Tema 1. Introducción al desarrollo de interfaces gráficos de usuario Septiembre 2024 – Descripción: Ocurre cuando una página o ventana ha sido completamente cargada. – Ejemplo: Ejecutar una función de inicialización cuando una página web se carga comple‑ tamente. Evento de Cambio de Valor (Change Event): – Descripción: Se activa cuando el valor de un elemento, como un campo de texto o un menú desplegable, cambia. – Ejemplo: Al seleccionar una nueva opción en un menú desplegable, el sistema puede ac‑ tualizar otra sección del formulario en función de la selección. Evento de Redimensionamiento (Resize Event): – Descripción: Ocurre cuando el tamaño de la ventana o el área visible de la aplicación cam‑ bia. – Ejemplo: Redimensionar automáticamente los componentes de la interfaz para adaptarse al nuevo tamaño de la ventana. 3. Eventos del Sistema Estos eventos son disparados por el sistema operativo o el software y no dependen de la interacción directa del usuario. Evento de Temporizador (Timer Event): – Descripción: Se activa después de un período de tiempo predefinido o de manera periódi‑ ca. – Ejemplo: Un temporizador que actualiza el contenido de una aplicación web cada 5 minu‑ tos para mostrar datos en tiempo real. Evento de Carga de Recursos (Resource Load Event): – Descripción: Ocurre cuando un recurso externo, como una imagen o un archivo, ha termi‑ nado de cargarse. – Ejemplo: Mostrar una imagen cuando ha sido completamente descargada de un servidor. Eventos de Errores (Error Events): – Descripción: Se activan cuando ocurre un error en la ejecución del código o en la carga de un recurso. – Ejemplo: Mostrar un mensaje de error si no se puede cargar un archivo. Luis José Molina Garzón 43 Tema 1. Introducción al desarrollo de interfaces gráficos de usuario Septiembre 2024 2.15.2 Ciclo de Vida de un Evento Cuando ocurre un evento en una interfaz gráfica de usuario, sigue un ciclo de vida para ser manejado por el sistema o la aplicación: 1. Generación del Evento: El evento se genera por una acción del usuario (como un clic) o por el sistema (como la carga de una página). 2. Captura del Evento: El sistema de eventos o el motor de la aplicación detecta que se ha produ‑ cido un evento y lo captura. 3. Propagación del Evento: En aplicaciones web o de escritorio modernas, los eventos pueden propagarse a través de varios elementos, desde el origen hasta sus contenedores, en un proceso llamado “bubbling” o “capturing”. 4. Manejo del Evento: La aplicación ejecuta el código correspondiente para gestionar el evento (por ejemplo, enviar un formulario al hacer clic en un botón). 5. Terminación del Evento: El evento ha sido gestionado y no se realizan más acciones relaciona‑ das. 2.15.3 Propagación de Eventos En interfaces modernas, los eventos pueden propagarse de diferentes maneras: Event Bubbling: El evento se genera en el elemento que recibe la acción y luego se propaga hacia los elementos padres. Por ejemplo, si un usuario hace clic en un botón dentro de un for‑ mulario, el evento se propaga del botón al formulario. Event Capturing: El evento es capturado primero por el elemento más externo y luego se pro‑ paga hacia el elemento interno. 3 Editores visuales Los editores visuales de interfaces gráficas de usuario (GUI) son herramientas que permiten a los diseñadores y desarrolladores crear aplicaciones y sitios web mediante la manipulación de compo‑ nentes visuales en lugar de escribir código manualmente. Estos editores proporcionan una interfaz amigable para arrastrar y soltar elementos de interfaz, facilitando el diseño rápido de aplicaciones, a menudo con previsualización en tiempo real de cómo se verá la GUI. Luis José Molina Garzón 44 Tema 1. Introducción al desarrollo de interfaces gráficos de usuario Septiembre 2024 3.1 Editores Visuales para Aplicaciones de Escritorio 3.1.1 Microsoft Visual Studio (Windows) Visual Studio, distinto a visual studio code, es un entorno de desarrollo integrado (IDE) que ofrece un editor visual para crear aplicaciones de escritorio en plataformas Windows utilizando lenguajes como C# y.NET. El editor visual de Windows Forms y WPF (Windows Presentation Foundation) permite a los desarrolladores diseñar interfaces de usuario con facilidad, arrastrando y soltando controles como botones, etiquetas, cuadros de texto y otros elementos. Características: – Soporte completo para.NET. – Diseño de Windows Forms y WPF. – Potente editor de código integrado. – Soporte para pruebas y depuración integradas. 3.1.2 Qt Designer (Multiplataforma) Qt Designer es una herramienta que forma parte del framework Qt y permite crear aplicaciones gráfi‑ cas para Windows, macOS y Linux. Qt Designer ofrece un entorno visual para crear interfaces con C++ y Python (PyQt o PySide), permitiendo la edición visual de widgets y elementos gráficos. Características: – Editor visual intuitivo para aplicaciones multiplataforma. – Gran biblioteca de widgets nativos. – Soporte para crear interfaces dinámicas y personalizadas. – Integración con Qt Creator para depuración y compilación de código. 3.1.3 SceneBuilder (JavaFX) SceneBuilder es un editor visual para crear interfaces gráficas para aplicaciones JavaFX. Permite a los desarrolladores diseñar interfaces de usuario visuales sin necesidad de escribir código en JavaFX. Sce‑ neBuilder exporta el diseño a código JavaFX, facilitando la integración en aplicaciones existentes. Características: – Editor visual para diseñar interfaces gráficas de aplicaciones JavaFX. – Exportación de diseños a código JavaFX para integración en aplicaciones. – Soporte para animaciones y transiciones. Luis José Molina Garzón 45 Tema 1. Introducción al desarrollo de interfaces gráficos de usuario Septiembre 2024 3.2 Editores Visuales para Aplicaciones Móviles 3.2.1 Android Studio (Android) Android Studio es el IDE oficial para el desarrollo de aplicaciones Android. Incluye un editor visual para diseñar las interfaces gráficas de las aplicaciones móviles de Android, conocido como el Layout Editor. Este editor permite arrastrar y soltar elementos de interfaz como botones, cuadros de texto y otros componentes, y personalizarlos sin necesidad de escribir XML directamente. Características: – Editor visual de layouts con soporte para dispositivos múltiples y vista previa en tiempo real. – Compatibilidad con Kotlin y Java. – Soporte para Material Design. – Integración con herramientas de depuración, simuladores y emuladores. 3.2.2 Xcode Interface Builder (iOS) Xcode es el IDE oficial de Apple para desarrollar aplicaciones en iOS y macOS. Su editor visual, cono‑ cido como Interface Builder, permite diseñar interfaces de usuario para aplicaciones de iPhone, iPad y macOS sin escribir código en Swift o Objective‑C. Los desarrolladores pueden arrastrar y configurar elementos de interfaz, como botones, tablas y vistas de colección. Características: Soporte para Swift y Objective‑C. – Herramientas integradas de simulación y previsualización en tiempo real. – Fácil integración con Auto Layout para crear interfaces responsivas. – Soporte nativo para las pautas de diseño de iOS y macOS. 3.2.3 FlutterFlow (Multiplataforma) FlutterFlow es una herramienta de diseño visual para crear aplicaciones móviles multiplataforma utilizando Flutter. Permite a los desarrolladores diseñar interfaces de usuario visuales sin necesidad de escribir código en Dart. FlutterFlow ofrece una interfaz de arrastrar y soltar para crear pantallas, navegación y animaciones. Características: – Diseño visual para aplicaciones móviles multiplataforma. Luis José Molina Garzón 46 Tema 1. Introducción al desarrollo de interfaces gráficos de usuario Septiembre 2024 – Soporte para integración con Flutter. – Exportación de código Dart para integración en aplicaciones existentes. 3.3 Editores Visuales para Aplicaciones Web 3.3.1 Webflow Webflow es una herramienta de diseño web que permite a los usuarios crear páginas web completa‑ mente visuales, sin necesidad de escribir código HTML, CSS o JavaScript. Webflow facilita el diseño de sitios web responsivos mediante una interfaz de arrastrar y soltar, y genera código limpio que puede ser exportado o publicado directamente. Características: – Editor visual para crear interfaces web y componentes responsivos. – Soporte para CMS y animaciones interactivas. – Exportación de código HTML, CSS y JavaScript. – Previsualización de diseños en tiempo real. 3.3.2 WordPress con Elementor Elementor es uno de los constructores visuales más populares para WordPress. Permite diseñar pá‑ ginas web personalizadas sin necesidad de escribir código, gracias a su interfaz de arrastrar y soltar. Elementor ofrece una gran cantidad de widgets preconstruidos y personalizables para crear páginas web dinámicas y atractivas. Características: – Constructor visual en tiempo real. – Amplia galería de widgets y plantillas. – Compatibilidad con la mayoría de los temas de WordPress. – Soporte para e‑commerce, animaciones y diseño responsivo. 3.3.3 Adobe Dreamweaver Adobe Dreamweaver es un editor visual y de código que permite crear sitios web y aplicaciones. Dreamweaver tiene una interfaz gráfica que permite diseñar y ver las páginas web en tiempo real, pe‑ ro también ofrece un editor de código para aquellos que prefieren escribir directamente HTML, CSS y JavaScript. Luis José Molina Garzón 47 Tema 1. Introducción al desarrollo de interfaces gráficos de usuario Septiembre 2024 Características: – Previsualización en tiempo real del sitio web. – Edición visual y de código integrada. – Soporte para sitios web responsivos y frameworks como Bootstrap. – Integración con otros productos de Adobe. 3.3.4 Editores Visuales para Aplicaciones Multiplataforma 3.3.4.1 Unity UI Builder (Videojuegos y Aplicaciones) Unity es un motor de videojuegos amplia‑ mente utilizado que también ofrece herramientas para crear aplicaciones con interfaces gráficas. Su herramienta UI Builder permite diseñar interfaces de usuario visuales para videojuegos y aplicaciones con soporte para multiplataforma, utilizando un sistema basado en nodos y propiedades visuales. Características: – Herramienta visual para crear interfaces gráficas en videojuegos y aplicaciones. – Soporte para animaciones y transiciones. – Compatible con dispositivos móviles, escritorio y consolas. – Integración completa con el editor de Unity y soporte para scripting C#. A pesar del crecimiento en el uso de herramientas visuales para el desarrollo de interfaces gráficas de usuario, una gran parte del desarrollo sigue realizándose con herramientas manuales. Existen varias razones por las que muchos desarrolladores y equipos de trabajo prefieren el enfoque tradicional basado en código. En este curso nos vamos a centrar en herramientas de diseño web, es decir, herramientas que permi‑ ten diseñar sitios web y aplicaciones web. 3.4 Webflow Webflow es una plataforma de desarrollo web que permite crear aplicaciones web de forma visual y colaborativa. Se centra en la creación de sitios web modernos y responsivos, ofreciendo una combi‑ nación de diseño visual, desarrollo de código y gestión de contenido. Luis José Molina Garzón 48 Tema 1. Introducción al desarrollo de interfaces gráficos de usuario Septiembre 2024 Figura 33: Editor visual de Webflow 3.4.1 Características principales: Diseño visual sin código: Webflow proporciona una interfaz visual donde puedes diseñar pá‑ ginas web arrastrando y soltando elementos. Esto incluye tanto la estructura como el estilo. Control total del diseño: A diferencia de otros constructores web, Webflow ofrece un control granular sobre el diseño, similar a lo que un desarrollador experimentado puede hacer con CSS y HTML. Interacción y animaciones: Permite agregar interacciones y animaciones a los sitios web sin necesidad de conocimientos avanzados de JavaScript. CMS integrado: Webflow incluye un CMS que facilita la gestión de contenido dinámico como blogs o portfolios. Responsividad automática: Webflow facilita la creación de sitios web responsivos, adaptables a diferentes tamaños de pantalla (móviles, tabletas, escritorio). Exportación de código: Los usuarios pueden exportar el código HTML, CSS y JavaScript para usarlo fuera de la plataforma. 3.4.2 Secciones de la página web de Webflow Dashboard: El dashboard es la página principal de Webflow, es donde se pueden ver los pro‑ yectos que se están trabajando. Luis José Molina Garzón 49 Tema 1. Introducción al desarrollo de interfaces gráficos de usuario Septiembre 2024 Marketplace: Es una sección de Webflow donde se pueden encontrar plantillas de diseño de sitios web. Learn: Contiene una gran cantidad de recursos para aprender a usar Webflow, desde tutoriales hasta cursos. Las características más avanzadas de Webflow, como los componentes reutilizables, ¾ la edición e importaciónde código, la integración con bases de datos, la publicación en dominios personalizados, etc. no están disponibles en la versión gratuita. Si deseas usar estas características, necesitarás una suscripción. 3.4.3 Tutorial Guiado: Crear una Página Web Básica en Webflow En este tutorial, se creará una landing page básica para una empresa de venta de productos de infor‑ mática. Paso 1: Registrarse en Webflow 1. Visita el sitio web oficial de Webflow. 2. Haz clic en el botón Get Started o Sign Up. 3. Completa el formulario de registro con tus datos o utiliza Google para registrarte más rápida‑ mente. 4. Una vez registrado, serás redirigido al panel de control (Dashboard). Paso 2: Crear un Nuevo Proyecto 1. En el panel de control de Webflow, haz clic en el botón New site. Figura 34: Crear un nuevo proyecto en Webflow 2. Webflow te dará la opción de seleccionar una plantilla prediseñada o comenzar con un Blank site. Para este tutorial, elige Blank site para comenzar desde cero. Luis José Molina Garzón 50 Tema 1. Introducción al desarrollo de interfaces gráficos de usuario Septiembre 2024 Figura 35: Seleccionar plantilla 3. Otra alternativa que no usaremos ahora es usar una plantilla prediseñada seleccionando la op‑ ción Template. En este caso aparece un buscador de plantillas. Figura 36: Seleccionar plantilla 3. Asigna un nombre a tu proyecto, como “Mi Primera Página Web”, y haz clic en Create Project. Luis José Molina Garzón 51 Tema 1. Introducción al desarrollo de interfaces gráficos de usuario Septiembre 2024 Figura 37: Nombre del sitio Paso 3: Explorar la Interfaz de Webflow Figura 38: Ventana de diseño de Webflow Antes de comenzar a diseñar, es útil familiarizarse con la interfaz de Webflow. Aquí te explico los ele‑ mentos más importantes: Menú y paneles laterales (a la izquierda): Contiene el menú principal que da acceso al Dash‑ board, configuración del sitio, Editor, búsqueda, etc. En los iconos verticales se encuentran los distintos paneles laterales como añadir elementos, páginas, el navegador, etc. Luis José Molina Garzón 52 Tema 1. Introducción al desarrollo de interfaces gráficos de usuario Septiembre 2024 Figura 39: Menú y paneles laterales Panel de elementos Añadir (a la izquierda): Uno de los paneles laterales más importantes que permite añadir elementos como encabezados, párrafos, imágenes, botones y formularios. Panel de páginas (a la izquierda): Aquí se encuentran las páginas que se han creado en el proyecto. Panel de navegación (a la izquierda): Aquí se encuentran los enlaces a las páginas que se han creado en el proyecto. Área de diseño (centro): Es donde construirás y verás tu sitio web en tiempo real. Panel de estilos (a la derecha): Aquí puedes ajustar propiedades CSS como el color, tamaño de fuente, márgenes, paddings y más. Vista previa en diferentes dispositivos (arriba): Permite ver y editar el sitio web en diferentes dispositivos como escritorio, tablet, móvil horizontal y vertical. En la parte derecha se encuen‑ tran el botón para exportar el código fuente, previsualizar el sitio o publicarlo. Figura 40: Panel superior Paso 4: Añadir elementos al diseño (layouts) 1. Abre el panel lateral para añadir elementos (icono de +). En la parte superior haz clic en el botón Layouts. Los layouts son bloques prediseñados que ya contienen elementos comunes en una disposición (layout) determinada. Luis José Molina Garzón 53 Tema 1. Introducción al desarrollo de interfaces gráficos de usuario Septiembre 2024 Figura 41: Panel Layouts 2. Debajo aparece la Starter library, que es una colección de layouts comunes prediseñados que se pueden usar como base para tu diseño. En la parte inferior, en azul, se encuentra el botón Browse more libraries que te permite acceder a más librerías de layouts. 3. Selecciona Starter library y arrastra el bloque Navbar Logo Left a la zona de diseño. 4. El bloque recien añadido se encuentra seleccionado y se muestran los estilos, configuraciones e interacciones en el panel derecho. A la izquierda verás el panel de navegación que muestra las distintas capas que forman la página. 5. Continúa añadiendo, en orden, los siguientes bloques de layout: Team Slider Gallery Slider Footer Dark 6. Prueba a cambiar el dispositivo en la parte superior para observar como se adapta el diseño. Continúa la edición en modo Escritorio (Desktop) Figura 42: Vista previa en dispositivo móvil Paso 5: Modificar el bloque Navbar Logo Left Luis José Molina Garzón 54 Tema 1. Introducción al desarrollo de interfaces gráficos de usuario Septiembre 2024 Figura 43: Cabecera de la página 1. Selecciona el bloque Navbar Logo Left, en el panel derecho cambia el color de fondo a #aec670 2. Cambia la imagen del logo. Abre el panel lateral izquierdo Assets y arrastra la imagen del logo. Figura 44: Añadir Assets al sitio web 3. Haz doble clic sobre el logo y usa el botón Replace Image para cambiarlo. Figura 45: Cambiar imagen del logo 4. Cambia los textos del menú de navegación para que sean similares a los de la imagen de ejem‑ plo. 5. Añade un bloque Form Block debajo del bloque Nav Menu Two. Elimina todo excepto el Text Luis José Molina Garzón 55 Tema 1. Introducción al desarrollo de interfaces gráficos de usuario Septiembre 2024 Field. En la pestaña lateral derecha, Settings, cambia el Name a Search y el Placeholder a “Bus‑ car…”. Activa el checkbox Autocofus. En la pestaña Styles y sección Border, establece a 10px el Border Radius del Text Field. Figura 46: Formulario de búsqueda 6. Para añadir el icono del carrito, vamos a instalar las fuentes. Descarga el archivo “MaterialIcons‑ Regular.ttf” desde Material Icons. Abre el menú principal en la esquina superior izquierda y haz clic en Site Settings. En la pestaña Fonts, haz clic en el botón Upload. Selecciona el archivo “MaterialIcons‑Regular.ttf” y haz clic en Add Font. Regresa al diseño pulsando el botón superior derecho Designer. Luis José Molina Garzón 56 Tema 1. Introducción al desarrollo de interfaces gráficos de usuario Septiembre 2024 Figura 47: Añadir fuentes 7. En el buscador de iconos de Google Fonts https://fonts.google.com/icons, busca cart. Seleccio‑ na el primer icono y copia el nombre situado en la parte inferior del panel derecho, en la sección “Icon name”. En este caso, el nombre es shopping_cart. 8. Añade un elemento Div Block en el último List Item dentro de Nav Menu Two. Mueve el elemen‑ to Nav Link Accent dentro del Div. Añade un elemento Text Block dentro del Div Block. Borra el texto de la caja de texto y pega el nombre del icono. A continuación, en el panel derecho, pes‑ taña Styles, sección Typography, en Font selecciona Material Icons, se encuentra al principio de la lista con el texto M. Cambia la propiedad Size a 20px. Figura 48: Icono del carrito Paso 6: Modificar el bloque Team Slider. Categorias Destacadas Luis José Molina Garzón 57 Tema 1. Introducción al desarrollo de interfaces gráficos de usuario Septiembre 2024 Figura 49: Categorias destacadas 1. Modifica el texto del bloque Heading 2 a Categorías destacadas. 2. Arrastra las imágenes de las categorías destacadas al panel Assets. 3. Selecciona el bloque “Team Slide Wrapper” y en el panel derecho, pestaña Styles, sección Size, cambia el Width a 20%. Como el margen derecho en Spacing es de un 5%, cada bloque ocupará un 25% del ancho, mostrando 4 bloques en horizontal. 4. Cambia la imagen de cada bloque “Team Member Image Two” por las imágenes de las catego‑ rías destacadas. 5. Como no hay bloques suficientes, selecciona desde el Navigator el último bloque “Team Slide Wrapper”, pulsa el botón derecho del ratón y elige la opción Duplicate para duplicar el bloque. 6. Elimina los bloques de texto inferiores de cada bloque “Team Slide Wrapper”. Paso 7: Modificar el bloque Gallery Slider. Productos Más Vendidos Figura 50: Aspecto inicial del bloque Gallery Slider Luis José Molina Garzón 58 Tema 1. Introducción al desarrollo de interfaces gráficos de usuario Septiembre 2024 Figura 51: Aspecto final del bloque Gallery Slider 1. Cambia el texto del bloque Heading 3 a Productos más vendidos. 2. Cambia el texto del bloque Paragraph. 3. Añade un botón para ver más productos dentro del bloque Gallery Block. Cambia el color de fondo del botón en la pestaña Styles, sección Backgrounds, propiedad Color a #63a91f. In‑ crementa el tamaño de la fuente en la pestaña Styles, sección Typography, propiedad Size a 16px. 4. Añade un bloque Div Block dentro del bloque Gallery Block y mueve todos los hijos dentro de este nuevo bloque. Selecciona el nuevo bloque y en el panel derecho, pestaña Styles, sección Layout, cambia a Flex. Modifica la dirección a Vertical y el valor de X a Center. Figura 52: Navigator Gallery Block Luis José Molina Garzón 59 Tema 1. Introducción al desarrollo de interfaces gráficos de usuario Septiembre 2024 Figura 53: Bloque Flexbox 5. Incrementa el margin inferior de cada bloque a 15px para separar los bloques. 6. Selecciona el primer bloque “Gallery Slide Wrapper” y en el panel derecho, pestaña Styles, sec‑ ción Size, cambia el Max W a 29% para que se muestren 3 bloques de productos en horizontal. 7. Añade un nuevo bloque Div Block dentro del bloque Gallery Slide Image y debajo de Gallery Image. Añade un elemento párrafo y debajo uno de texto. Figura 54: Bloque inferior detalles del producto 8. Selecciona el bloque de párrafo y en el panel derecho establece la propiedad Min H a 50px para que todos los bloques tengan la misma altura. Cambia el tamaño de la fuente en la pestaña Styles, sección Typography, propiedad Size a 12px y el Height a 16px. En la pestaña Styles, arriba del todo, establece el nombre de la clase CSS a Product Name. Luis José Molina Garzón 60 Tema 1. Introducción al desarrollo de interfaces gráficos de usuario Septiembre 2024 Figura 55: Crear clase CSS 9. Selecciona el bloque de texto y ajusta el color a #63a91f, el grosor Weight a 700 y el Align a Center. En la pestaña Styles, arriba del todo, establece el nombre de la clase CSS a Product Price. 10. Duplica el bloque “Gallery Slide Wrapper” y elimina los bloques con el formato anterior. Cam‑ bia los textos y las imágenes de cada producto. Si tienes problemas para editar los bloques ocultos por el scroll, puedes ocultar los que ya están terminados pulsando el botón Hidden en la pestaña Settings, sección Visibility & user access. 11. Observa que se han creado clases CSS, si ahora cambias algún estilo en el panel derecho, se aplicará a todos los productos. Paso 8: Footer Dark. Pie de página Figura 56: Pie de página 1. Edita los textos y duplica los enlaces que sean necesarios. 2. Selecciona el bloque “Footer Dark” y en el panel derecho, pestaña Styles, sección Backgrounds, cambia el color de fondo a #b0d3bf. 3. Selecciona el bloque Footer Content y cambia en la pestaña Style, sección Layout, el valor Gap de las columnas a 150px para que estén más separadas. Paso 9: Previsualizar y Exportar el código fuente 1. Comprueba la vista en una Tablet pulsando en el icono de la parte superior. El bloque Produc‑ tos Más Vendidos está alineado a la izquierda, selecciona el bloque Div Block 3 y en el panel Luis José Molina Garzón 61 Tema 1. Introducción al desarrollo de interfaces gráficos de usuario Septiembre 2024 derecho, pestaña Styles, sección Flex Child, pulsa en Alignment and order y cambia el valor de alineado a centrado. Figura 57: Vista en Tablet Figura 58: Vista en Tablet Luis José Molina Garzón

Tema 1 - Introducción al desarrollo de interfaces gráficas de usuario PDF

Document Details

Tags

Related

Summary

Full Transcript

Upgrade to continue