Vicerrectorado de Docencia

Unidad de Apoyo a la Formación Académica

Programación avanzada

Tema n.°3

Desarrollo de componentes visuales para web y móvil

 Vicerrectorado de Docencia
Unidad de Apoyo a la Formación Académica

Índice
Pág.
1.1. Métodos de desarrollo de componentes visuales, definición
de interfaces, lenguajes de descripción de interfaces,
reutilización de componentes visuales, técnicas de
ensamblado para el desarrollo de componentes visuales. 3
1.1.1. Métodos de Desarrollo de Componentes Visuales 3
1.1.2. Definición de Interfaces 4
1.1.3. Lenguajes de Descripción de Interfaces 4
1.1.4. Reutilización de Componentes Visuales 5
1.1.5. Técnicas de Ensamblado para el Desarrollo de
Componentes Visuales 5
1.2. Entornos integrados de desarrollo de componentes visuales,
instalación y configuración de herramientas de uso común 6
1.2.1. Entornos Integrados de Desarrollo de Componentes
Visuales 7
1.2.2. Configuración de Herramientas Comunes 8
Recursos complementarios 10
Referencias 10
Autoevaluación 11

Tema n.° 3 Desarrollo de componentes visuales para web y movil 2

 Vicerrectorado de Docencia
Unidad de Apoyo a la Formación Académica

Introducción

El desarrollo de componentes visuales es un aspecto fundamental en la

creación de interfaces de usuario (UI) modulares, reutilizables e interactivas. En este
contexto, se exploran diversos métodos y técnicas para desarrollar, definir
interfaces, reutilizar y ensamblar componentes visuales de manera eficiente. A
través de este proceso, se busca acelerar el desarrollo, fomentar la reutilización de
código y promover prácticas de diseño sólidas. Además, se analizan los entornos
integrados de desarrollo (IDEs) y se detallan las herramientas comunes utilizadas en
la instalación y configuración para facilitar el desarrollo de componentes visuales.
Estas prácticas y herramientas son esenciales para crear interfaces de usuario
atractivas, coherentes y adaptables en la ingeniería de software moderna.

1.1. Métodos de desarrollo de componentes visuales, definición de interfaces,

lenguajes de descripción de interfaces, reutilización de componentes
visuales, técnicas de ensamblado para el desarrollo de componentes
visuales

El desarrollo de componentes visuales implica la creación de elementos de la

interfaz de usuario (UI) que son modulares, reutilizables y a menudo interactivos.
Vamos a desglosar los aspectos clave de este proceso:

1.1.1. Métodos de Desarrollo de Componentes Visuales

Los frameworks son herramientas versátiles en el desarrollo de software,

usadas en diversos ámbitos más allá de las aplicaciones web, como en aplicaciones
médicas, visión por computador y desarrollo de juegos. Funcionan como
aplicaciones genéricas configurables, permitiendo añadir componentes específicos
para crear aplicaciones concretas. Ofrecen ventajas estratégicas para los
arquitectos de software, incluyendo la aceleración del desarrollo, reutilización de

Tema n.° 3 Desarrollo de componentes visuales para web y movil 3

 Vicerrectorado de Docencia
Unidad de Apoyo a la Formación Académica

código y fomento de buenas prácticas mediante el uso de patrones (Sánchez,

Tuesta, & Mejía, 2015).

La reutilización de componentes de software se inspira en las prácticas de

ensamblaje de la ingeniería de sistemas físicos, aplicándose al desarrollo de
software desde los años setenta con el uso de librerías de subrutinas. Este enfoque
abarca más que el mero uso de piezas de software, incluyendo algoritmos, diseños,
arquitecturas, documentación y especificaciones de requerimientos. Constituye un
proceso clave en la Ingeniería de Software, permitiendo el uso recurrente de activos
de software en todas las fases del desarrollo de aplicaciones o sistemas, desde la
especificación hasta las pruebas (Montilva, Arapé, & Colmenares, 2003).

Los diseños interactivos se centran en cómo el usuario interactúa con las

distintas partes de un diseño, enfocándose en los variados usos del diseño
multitáctil. Es crucial incluir guías o señales (signifiers) que orienten al usuario sobre
cómo interactuar con el diseño, guiándolo hacia un aprendizaje más efectivo y una
experiencia de uso intencionada. (Norman, 2013).

1.1.2. Definición de Interfaces

Se debe definir UIs mediante lenguajes o sintaxis declarativas, como JSX en

React, que permiten describir la UI y su estado de una manera más intuitiva, para
mantener una clara separación entre la lógica de negocio, la gestión de estados y la
interfaz de usuario para facilitar el mantenimiento y la reutilización.

1.1.3. Lenguajes de Descripción de Interfaces

HTML/CSS: En desarrollo web, HTML define la estructura y CSS el estilo de

los componentes visuales.

Tema n.° 3 Desarrollo de componentes visuales para web y movil 4

 Vicerrectorado de Docencia
Unidad de Apoyo a la Formación Académica

XML y XAML: Usados en plataformas como Android (XML) y WPF de .NET

(XAML) para describir la estructura y apariencia de las interfaces de usuario.

SwiftUI y DSLs: Lenguajes específicos del dominio, como SwiftUI, que

proporcionan una sintaxis específica para la creación de interfaces de usuario en
plataformas Apple.

1.1.4. Reutilización de Componentes Visuales

Para la reutilización de deben implementar componentes Genéricos y

Parametrizables que permitan su adaptación a diferentes contextos y necesidades.
Estos generalmente utilizan sistemas de diseño como Material Design o Human
Interface Guidelines para asegurar la consistencia visual y funcional en los
componentes. Es necesario mantener bibliotecas de componentes estandarizados
que pueden ser reutilizados en diferentes proyectos o partes de una aplicación.

1.1.5. Técnicas de Ensamblado para el Desarrollo de Componentes Visuales

Un componente en desarrollo de software es una unidad de composición que

tiene interfaces específicas y requisitos, permitiendo ser desarrollado, adquirido, e
integrado de manera independiente con otros componentes. Las interfaces de un
componente definen las operaciones que implementa y las que necesita de otros
componentes. Estas interfaces incluyen atributos, métodos públicos y eventos, que
notifican cambios externos o internos sin especificar el consumidor del evento ni
cómo se debe manejar. La interacción entre componentes suele basarse en
llamadas a procedimiento remoto (RPC) para invocaciones de métodos y en el
modelo de publicar-suscribir para eventos, permitiendo comunicación directa o
indirecta. En la comunicación directa, los receptores se registran en el emisor,
mientras que en la indirecta pueden intervenir distribuidores que usan estrategias de
difusión para enviar eventos a los receptores registrados o potenciales (Fuentes,
Troya, & Vallecillo, 2017).

Tema n.° 3 Desarrollo de componentes visuales para web y movil 5

 Vicerrectorado de Docencia
Unidad de Apoyo a la Formación Académica

Composición sobre Herencia: Favorecer la composición de componentes

para construir interfaces de usuario complejas, en lugar de la herencia, para mejorar
la reutilización y la flexibilidad.

Inyección de Dependencias: Utilizar la inyección de dependencias para

integrar diferentes componentes, lo que facilita su intercambio y prueba.

Patrones de Diseño: Aplicar patrones de diseño como MVC (Modelo-Vista-

Controlador), MVP (Modelo-Vista-Presentador) y MVVM (Modelo-Vista-ViewModel)
para organizar la interacción entre la lógica de negocio y la UI.

Contenedores y Componentes de Alto Orden: En frameworks como React,

usar componentes de alto orden y contenedores para encapsular lógicas comunes y
facilitar el ensamblaje de componentes.

Estas prácticas y técnicas son fundamentales para el desarrollo eficiente y

efectivo de componentes visuales en la ingeniería de software moderna. Al adoptar
estos métodos, los desarrolladores pueden crear interfaces de usuario que no solo
son visualmente atractivas y coherentes, sino también mantenibles, escalables y
fáciles de adaptar a medida que evolucionan las necesidades del proyecto.

1.2. Entornos integrados de desarrollo de componentes visuales, instalación

y configuración de herramientas de uso común.

Los Entornos Integrados de Desarrollo (IDEs) para componentes visuales son

plataformas que ofrecen herramientas y funcionalidades para facilitar la creación,
edición, prueba y depuración de componentes de interfaces de usuario. Estos IDEs
suelen incluir diseñadores visuales, editores de código, herramientas de depuración
y gestores de paquetes. Aquí se expone algunos de los IDEs más comunes:

Tema n.° 3 Desarrollo de componentes visuales para web y movil 6

 Vicerrectorado de Docencia
Unidad de Apoyo a la Formación Académica

1.2.1. Entornos Integrados de Desarrollo de Componentes Visuales

Visual Studio: Desarrollo en .NET, C#, y Visual Basic. Ofrece herramientas

para construir componentes visuales en Windows Forms, WPF, y ASP.NET.
Instalación: Descargar desde el sitio web oficial de Microsoft. La instalación es
bastante guiada y permite seleccionar componentes específicos para el desarrollo
de UI.

Visual Studio Code: Popular para el desarrollo web (JavaScript, TypeScript,

HTML, CSS), y admite una amplia gama de extensiones para frameworks como
React, Angular, y Vue.js. Instalación: Descargable desde su sitio web oficial. Se
pueden agregar extensiones desde el marketplace integrado en el IDE.

IntelliJ IDEA: Utilizado en el desarrollo de Java, incluido el desarrollo de

componentes visuales con Swing. La versión Ultimate también admite tecnologías
web y de empresa. Ofrece una instalación guiada donde puedes seleccionar
componentes específicos.

Android Studio: Desarrollo de aplicaciones Android. Proporciona un editor

visual para la creación de layouts en XML y herramientas para el desarrollo de
componentes visuales de Android. Instalación: Disponible en el sitio web de Android
Developer. Incluye todo lo necesario para empezar el desarrollo de Android, incluido
el SDK.

Xcode: Desarrollo de aplicaciones para iOS y MacOS. Ofrece un diseñador

de interfaces para la creación de componentes visuales para aplicaciones Apple.
Instalación: Descargable desde la Mac App Store. Requiere MacOS para ejecutarse
y proporciona un entorno integrado para el desarrollo de software Apple.

Tema n.° 3 Desarrollo de componentes visuales para web y movil 7

 Vicerrectorado de Docencia
Unidad de Apoyo a la Formación Académica

Eclipse con WindowBuilder: Desarrollo en Java, particularmente para

aplicaciones con interfaces de usuario basadas en Swing y SWT. Eclipse se puede
descargar desde su sitio web oficial.

1.2.2. Configuración de Herramientas Comunes

Gestores de Paquetes: Un paquete es un conjunto organizado de código

fuente, recursos y metadatos destinados a una funcionalidad específica, facilitando
la construcción de programas y aplicaciones al agrupar herramientas y utilidades de
manera eficiente. Los paquetes contienen bibliotecas y metadatos importantes como
título, autor, versión e información sobre dependencias, simplificando la gestión del
versionado y evitando complicaciones. Los gestores de paquetes automatizan la
instalación, actualización, configuración y eliminación de paquetes, incluyendo la
resolución de dependencias para asegurar que todas las necesidades de un
paquete sean satisfechas automáticamente. Con repositorios en línea, añadir
bibliotecas se vuelve aún más fácil. Los paquetes y gestores de paquetes,
específicos para cada lenguaje de programación, son esenciales para una gestión
eficiente del software (LLamas, 2023).

Herramientas como npm para Node.js o NuGet para .NET son esenciales
para gestionar bibliotecas y dependencias. Estas herramientas suelen venir
integradas en los IDEs correspondientes o pueden ser instaladas y configuradas
fácilmente.

Extensiones y Plugins: Un plugin, también llamado complemento o módulo,

es un software diseñado para añadir funcionalidades adicionales a una aplicación
existente, permitiendo su extensión o personalización. Estos componentes, que
pueden variar en forma y tamaño, son desarrollados tanto por los creadores del
software principal como por terceros. La característica distintiva de los plugins es
que son unidades de software independientes y separadas, que se integran en el

Tema n.° 3 Desarrollo de componentes visuales para web y movil 8

 Vicerrectorado de Docencia
Unidad de Apoyo a la Formación Académica

software principal sin afectar su rendimiento, ofreciendo funcionalidades extras

(Ferreira, 2023).

Los IDEs como Visual Code y IntelliJ IDEA permiten instalar extensiones y
plugins para mejorar el desarrollo de componentes visuales. Para su configuración
se pueden buscar y gestionar a través de menús integrados en el IDE, permitiendo
personalizar el entorno de desarrollo según las necesidades del proyecto.

Herramientas de Diseño y Prototipado: Un Prototyping Software, o

herramienta de prototipado, es una plataforma que facilita la creación rápida de
prototipos realistas para demostrar la viabilidad de una idea de diseño, permitiendo
su prueba en fases experimentales antes de su lanzamiento comercial. Estas
herramientas son cruciales en el diseño de la experiencia de usuario (UX), ya que
permiten crear prototipos interactivos que ayudan a los clientes a visualizar el
producto final. Ofrecen funcionalidades como programación de flujos de trabajo,
importación de recursos, conversión de archivos, gestión de progreso de diseño y
creación de animaciones. El uso de Prototyping Tools es esencial para diseñadores
y creativos, facilitando el proceso desde la concepción de la UX hasta el desarrollo
del prototipo inicial, preparándolo para su implementación.

La importancia de estas herramientas radica en su capacidad para ajustar el

diseño de productos a las expectativas de los usuarios finales, especialmente en
términos de usabilidad. Permiten no solo presentar un prototipo completo para
pruebas, sino también explorar y evaluar múltiples versiones para determinar cuál
es más adecuada para el mercado objetivo, simplificando y en algunos casos
automatizando, el trabajo de diseño, intercambio de recursos, recepción de
feedback y evaluación de prototipos (Garden, 2023).

Cada uno de estos entornos y herramientas ofrece características únicas que

facilitan el desarrollo de componentes visuales, y la elección entre ellos depende de
las necesidades específicas del proyecto, el lenguaje de programación utilizado y

Tema n.° 3 Desarrollo de componentes visuales para web y movil 9

 Vicerrectorado de Docencia
Unidad de Apoyo a la Formación Académica

las preferencias personales del desarrollador. La configuración inicial puede tomar

algo de tiempo, pero una vez configurado correctamente, estos entornos pueden
aumentar significativamente la eficiencia y calidad del desarrollo de software.

Recursos complementarios

• Video acerca Cómo mejorar en diseño web en poco tiempo

https://www.youtube.com/watch?v=j--scstaxrg

• Video acerca 19 diseños para la web

https://www.youtube.com/watch?v=kDscxqJCJIo

Referencias
Ferreira, A. C. (27 de 09 de 2023). Qué es un plugin, para qué sirve y cómo
instalarlo. Obtenido de https://www.inboundcycle.com/blog-de-inbound-
marketing/que-es-un-plugin-y-para-que-sirve

Fuentes, L., Troya, J., & Vallecillo, A. (2017). Desarrollo de Software Basado en
Componentes. Dept. Lenguajes y Ciencias de la Computaci´on, 1-22.

Garden, T. (09 de 08 de 2023). Prototyping Tools: las mejores herramientas de

creación de prototipos para UX Designer. Obtenido de
https://blog.talentgarden.com/es/blog/design/las-mejores-herramientas-de-
prototipos-ux-designer

LLamas, L. (23 de 08 de 2023). Qué son los paquetes y los gestores de paquetes.
Obtenido de https://www.luisllamas.es/programacion-gestores-paquetes/

Montilva, J., Arapé, N., & Colmenares, J. (2003). Desarrollo de Software Basado en
Componentes. IV Congreso de automatización y control, 1-9.

Norman, D. (2013). The design of everyday things. MIT Press, 60-60.

Sánchez, C., Tuesta, V., & Mejía, I. (2015). Análisis comparativo de framework para
el desarrollo de aplicaciones web en java. Ingeniería: Ciencia, Tecnología e
Innovación, 1-13.

Tema n.° 3 Desarrollo de componentes visuales para web y movil 10