Desarrollo de Interfaces.: Gráficos y diseño web

Por Juan Ferrer Martínez

La presente obra está dirigida a los estudiantes del Ciclo Formativo de Desarrollo de Aplicaciones Multiplataforma de Grado Superior, en concreto para el Módulo Profesional Desarrollo de Interfaces. Los contenidos incluidos en este libro abarcan los conceptos básicos sobre confección de interfaces de usuario, generación de interfaces a partir de do

• Idioma: Español
• Editorial: RA-MA Editorial
• Fecha de lanzamiento: 3 ene 2025
• ISBN: 9788499644820

Vista previa del libro

1 Confección de interfaces de usuario

OBJETIVOS DEL CAPÍTULO

Generar interfaces gráficas de usuario mediante editores visuales utilizando la funcionalidad del editor y adaptando el código generado.

Crear una interfaz gráfica utilizando los asistentes de un editor visual.

Utilizar las funciones del editor para localizar los componentes de la interfaz.

Modificar las propiedades de los componentes para adecuar a las necesidades de la aplicación.

Analizar y modificar el código generado por el editor visual.

Asociar a los eventos las acciones correspondientes.

1.1 LENGUAJES DE PROGRAMACIÓN. TIPOS. PARADIGMAS DE PROGRAMACIÓN

Un lenguaje de programación es un lenguaje formal diseñado para expresar procesos que pueden ser llevados a cabo por máquinas como las computadoras.

Pueden usarse para crear programas que controlen el comportamiento físico y lógico de una máquina, para expresar algoritmos con precisión, o como modo de comunicación humana.

Está formado por un conjunto de símbolos y reglas sintácticas y semánticas que definen su estructura y el significado de sus elementos y expresiones. Al proceso por el cual se escribe, se prueba, se depura, se compila (de ser necesario) y se mantiene el código fuente de un programa informático se le llama programación.

Existe un error común que trata por sinónimos los términos ‘lenguaje de programación’ y ‘lenguaje informático’. Los lenguajes informáticos engloban a los lenguajes de programación y a otros más como, por ejemplo, HTML (lenguaje para el marcado de páginas web que no es propiamente un lenguaje de programación, sino un conjunto de instrucciones que permiten estructurar el contenido de los documentos).

Permite especificar de manera precisa sobre qué datos debe operar una computadora, cómo deben ser almacenados o transmitidos y qué acciones debe tomar bajo una variada gama de circunstancias. Todo esto, a través de un lenguaje que intenta estar relativamente próximo al lenguaje humano o natural. Una característica relevante de los lenguajes de programación es precisamente que más de un programador pueda usar un conjunto común de instrucciones que sean comprendidas entre ellos para realizar la construcción de un programa de forma colaborativa.

images/img-19-1.jpg

Figura 1.1. Lenguajes de programación

1.1.1 TIPOS DE LENGUAJES DE PROGRAMACIÓN

Existen dos tipos de lenguajes claramente diferenciados; los lenguajes de bajo nivel y los de alto nivel.

El ordenador solo entiende un lenguaje conocido como código binario o código máquina, consistente en ceros y unos. Es decir, solo utiliza 0 y 1 para codificar cualquier acción.

Los lenguajes más próximos a la arquitectura hardware se denominan lenguajes de bajo nivel y los que se encuentran más cercanos a los programadores y usuarios se denominan lenguajes de alto nivel.

1.1.1.1 Lenguajes de bajo nivel

Son lenguajes totalmente dependientes de la máquina, es decir, que el programa que se realiza con este tipo de lenguajes no se pueden migrar o utilizar en otras máquinas.

Al estar prácticamente diseñados a medida del hardware, aprovechan al máximo las características del mismo.

Dentro de este grupo se encuentran:

El lenguaje máquina: este lenguaje ordena a la máquina las operaciones fundamentales para su funcionamiento. Consiste en la combinación de ceros y unos para formar las órdenes entendibles por el hardware de la máquina.

Este lenguaje es mucho más rápido que los lenguajes de alto nivel.

La desventaja es que son bastantes difíciles de manejar y usar, además de tener códigos fuente enormes, donde encontrar un fallo es casi imposible.

El lenguaje ensamblador es un derivado del lenguaje máquina y está formado por abreviaturas de letras y números llamadas nemotécnicos.

Con la aparición de este lenguaje se crearon los programas traductores para poder pasar los programas escritos en lenguaje ensamblador a lenguaje máquina. Como ventaja con respecto al código máquina es que los códigos fuente eran más cortos y los programas creados ocupaban menos memoria. Las desventajas de este lenguaje siguen siendo prácticamente las mismas que las del lenguaje ensamblador, añadiendo la dificultad de tener que aprender un nuevo lenguaje difícil de probar y mantener.

1.1.1.2 Lenguajes de alto nivel

Son aquellos que se encuentran más cercanos al lenguaje natural que al lenguaje máquina.

Están dirigidos a solucionar problemas mediante el uso de EDD. EDD es la abreviatura de Estructuras Dinámicas de Datos, algo muy utilizado en todos los lenguajes de programación. Son estructuras que pueden cambiar de tamaño durante la ejecución del programa. Nos permiten crear estructuras de datos que se adapten a las necesidades reales de un programa.

Se tratan de lenguajes independientes de la arquitectura del ordenador. Por lo que, en principio, un programa escrito en un lenguaje de alto nivel, lo puedes migrar de una máquina a otra sin ningún tipo de problema.

Estos lenguajes permiten al programador olvidarse por completo del funcionamiento interno de la/s maquina/s para la/s que está/n diseñando el programa. Tan solo necesitan un traductor que entienda el código fuente como las características de la máquina.

Suelen usar tipos de datos para la programación y hay lenguajes de propósito general (cualquier tipo de aplicación) y de propósito específico (como FORTRAN para trabajos científicos).

1.1.1.3 Generaciones

La evolución de los lenguajes de programación se puede dividir en 5 etapas o generaciones.

Primera generación: lenguaje máquina.

Segunda generación: se crearon los primeros lenguajes ensambladores.

Tercera generación: se crean los primeros lenguajes de alto nivel. Ej.: C, Pascal, Cobol…

Cuarta generación: son los lenguajes capaces de generar código por sí solos. Son los llamados RAD, con lo cuales se pueden realizar aplicaciones sin ser un experto en el lenguaje. Aquí también se encuentran los lenguajes orientados a objetos, haciendo posible la reutilización de partes del código para otros programas. Ej.: Visual Basic, Natural Adabes…

Quinta generación: aquí se encuentran los lenguajes orientados a la inteligencia artificial. Estos lenguajes todavía están poco desarrollados. Ej.: LISP.

Tabla 1.1 Generaciones de los lenguajes de programación

images/img-21-1.jpg

Figura 1.2. Evolución de los lenguajes de programación

1.1.2 PARADIGMAS DE PROGRAMACIÓN

Un paradigma de programación es una propuesta tecnológica que es adoptada por una comunidad de programadores cuyo núcleo central es incuestionable en cuanto a que únicamente trata de resolver uno o varios problemas claramente delimitados. Es un estilo de programación empleado. La resolución de estos problemas debe suponer consecuentemente un avance significativo en al menos un parámetro que afecte a la ingeniería de software. Tiene una estrecha relación con la formalización de determinados lenguajes en su momento de definición. Un paradigma de programación está delimitado en el tiempo en cuanto a aceptación y uso, ya que nuevos paradigmas aportan nuevas o mejores soluciones que la sustituyen parcial o totalmente.

El paradigma de programación que actualmente es el más usado es la orientación a objetos. El núcleo central de este paradigma es la unión de datos y procesamiento en una entidad llamada objeto, relacionable a su vez con otras entidades objeto.

Tradicionalmente, datos y procesamiento se han separado en áreas diferentes del diseño y la implementación de software. Esto provocó que grandes desarrollos tuvieran problemas de fiabilidad, mantenimiento, adaptación a los cambios y escalabilidad. Con la orientación a objetos y características, como el encapsulado, polimorfismo o la herencia, se permitió un avance significativo en el desarrollo de software a cualquier escala de producción.

La orientación a objeto parece estar ligada en sus orígenes con lenguajes como Lisp y Simula, aunque el primero que acuñó el título de programación orientada a objetos fue Smalltalk.

Tipos de paradigmas de programación más comunes:

Imperativo o por procedimientos: es considerado el más común y está representado, por ejemplo, por C, BASIC o Pascal.

Funcional: está representado por Scheme o Haskell. Este es un caso del paradigma declarativo.

Lógico: está representado por Prolog. Este es otro caso del paradigma declarativo.

Declarativo: por ejemplo, la programación funcional, la programación lógica, o la combinación lógico-funcional.

Orientado a objetos: está representado por Smalltalk, un lenguaje completamente orientado a objetos.

Programación dinámica: está definida como el proceso de romper problemas en partes pequeñas para analizarlos.

Si bien puede seleccionarse la forma pura de estos paradigmas al momento de programar, en la práctica es habitual que se mezclen, dando lugar a la programación multiparadigma.

Actualmente, el paradigma de programación más usado es el de la programación orientada a objetos.

1.2 PROGRAMACIÓN ORIENTADA A OBJETOS, PROGRAMACIÓN DIRIGIDA POR EVENTOS Y PROGRAMACIÓN BASADA EN COMPONENTES

1.2.1 PROGRAMACIÓN ORIENTADA A OBJETOS

La programación orientada a objetos o POO (OOP según sus siglas en inglés) es un paradigma de programación que usa los objetos en sus interacciones, para diseñar aplicaciones y programas informáticos. Está basado en varias técnicas, incluyendo herencia, cohesión, abstracción, polimorfismo, acoplamiento y encapsulamiento. Su uso se popularizó a principios de la década de los años 1990. En la actualidad, existe una gran variedad de lenguajes de programación que soportan la orientación a objetos.

Los objetos son entidades que tienen un determinado estado, comportamiento (método) e identidad:

El estado está compuesto de datos o informaciones; serán uno o varios atributos a los que se habrán asignado unos valores concretos (datos).

El comportamiento está definido por los métodos o mensajes a los que sabe responder dicho objeto, es decir, qué operaciones se pueden realizar con él.

La identidad es una propiedad de un objeto que lo diferencia del resto; dicho con otras palabras, es su identificador (concepto análogo al de identificador de una variable o una constante).

images/img-23-1.jpg

Figura 1.3. Características de la programación orientada a objetos

Un objeto contiene toda la información que permite definirlo e identificarlo frente a otros objetos pertenecientes a otras clases e incluso frente a objetos de una misma clase, al poder tener valores bien diferenciados en sus atributos. A su vez, los objetos disponen de mecanismos de interacción llamados métodos, que favorecen la comunicación entre ellos. Esta comunicación favorece a su vez el cambio de estado en los propios objetos. Esta característica lleva a tratarlos como unidades indivisibles, en las que no se separa el estado y el comportamiento.

Los métodos (comportamiento) y atributos (estado) están estrechamente relacionados por la propiedad de conjunto. Esta propiedad destaca que una clase requiere de métodos para poder tratar los atributos con los que cuenta. El programador debe pensar indistintamente en ambos conceptos, sin separar ni darle mayor importancia a alguno de ellos. Hacerlo podría producir el hábito erróneo de crear clases contenedoras de información, por un lado, y clases con métodos que manejen a las primeras, por el otro. De esta manera se estaría realizando una programación estructurada camuflada en un lenguaje de programación orientado a objetos.

La POO difiere de la programación estructurada tradicional, en la que los datos y los procedimientos están separados y sin relación, ya que lo único que se busca es el procesamiento de unos datos de entrada para obtener otros de salida. La programación estructurada anima al programador a pensar sobre todo en términos de procedimientos o funciones y, en segundo lugar, en las estructuras de datos que esos procedimientos manejan. En la programación estructurada solo se escriben funciones que procesan datos. Los programadores que emplean Programación Orientada a Objetos, en cambio, primero definen objetos para luego enviarles mensajes solicitándoles que realicen sus métodos por sí mismos.

1.2.2 PROGRAMACIÓN DIRIGIDA POR EVENTOS

La programación dirigida por eventos es un paradigma de programación en el que tanto la estructura como la ejecución de los programas van determinados por los sucesos que ocurran en el sistema, definidos por el usuario o que ellos mismos provoquen.

Para entender la programación dirigida por eventos, podemos oponerla a lo que no es: mientras en la programación secuencial (o estructurada) es el programador el que define cuál va a ser el flujo del programa, en la programación dirigida por eventos será el propio usuario (o lo que sea que esté accionando el programa) el que dirija el flujo del programa. Aunque en la programación secuencial puede haber intervención de un agente externo al programa, estas intervenciones ocurrirán cuando el programador lo haya determinado, y no en cualquier momento como puede ser en el caso de la programación dirigida por eventos.

El creador de un programa dirigido por eventos debe definir los eventos que manejarán su programa y las acciones que se realizarán al producirse cada uno de ellos, lo que se conoce como el administrador de evento. Los eventos soportados estarán determinados por el lenguaje de programación utilizado, por el sistema operativo e incluso por eventos creados por el mismo programador.

En la programación dirigida por eventos, al comenzar la ejecución del programa se llevarán a cabo las inicializaciones y demás código inicial y, a continuación, el programa quedará bloqueado hasta que se produzca algún evento. Cuando alguno de los eventos esperados por el programa tenga lugar, el programa pasará a ejecutar el código del correspondiente administrador de evento. Por ejemplo, si el evento consiste en que el usuario ha hecho clic en el botón Play de un reproductor de películas, se ejecutará el código del administrador de evento, que será el que haga que la película se muestre por pantalla.

images/img-25-1.jpg

Figura 1.4. Programación orientada a eventos

Un ejemplo claro lo tenemos en los sistemas de programación Léxico 3 y Visual Basic, en los que a cada elemento del programa (objetos, controles, etcétera) se le asignan una serie de eventos que generará dicho elemento, como la pulsación de un botón del ratón sobre él o el redibujado del control.

images/img-25-2.jpg

Figura 1.5. Léxico 3

images/img-25-3.jpg

Figura 1.6. Visual Basic

La programación dirigida por eventos es la base de lo que llamamos interfaz de usuario, aunque puede emplearse también para desarrollar interfaces entre componentes de Software o módulos del núcleo.

En los primeros tiempos de la computación, los programas eran secuenciales, también llamados Batch. Un programa secuencial arranca, lee parámetros de entrada, procesa estos parámetros y produce un resultado, todo de manera lineal y sin intervención del usuario mientras se ejecuta.

Con la aparición y popularización de los PC, el software empezó a ser demandado para usos alejados de los clásicos académicos y empresariales, para los cuales era necesitado hasta entonces, y quedó patente que el paradigma clásico de programación no podía responder a las nuevas necesidades de interacción con el usuario que surgieron a raíz de este hecho.

1.2.3 PROGRAMACIÓN BASADA EN COMPONENTES

La programación orientada a componentes (que también es llamada basada en componentes) es una rama de la ingeniería del software, con énfasis en la descomposición de sistemas ya conformados, en componentes funcionales o lógicos, con interfaces bien definidas usadas para la comunicación entre componentes.

Se considera que el nivel de abstracción de los componentes es más alto que el de los objetos y, por tanto, no comparten un estado y se comunican intercambiando mensajes que contienen datos.

Un componente de software es un elemento de un sistema que ofrece un servicio predefinido, y es capaz de comunicarse con otros componentes.

Una definición más simple puede ser: un componente es un objeto escrito de acuerdo a unas especificaciones. No importa qué especificación sea esta, siempre y cuando el objeto se adhiera a la especificación. Solo cumpliendo correctamente con esa especificación es que el objeto se convierte en componente y adquiere características, como reusabilidad.

Cuando se necesita el acceso a un componente, o cuando este debe ser compartido entre distintas redes, se recurre a procesos como la serialización para entregar el componente a su destino.

La capacidad de ser reutilizado (reusability), es una característica importante de los componentes de software de alta calidad. Un componente debe ser diseñado e implementado, de tal forma que pueda ser reutilizado en muchos programas diferentes.

Requiere gran esfuerzo y atención escribir un componente que es realmente reutilizable. Para esto, el componente debe estar:

Completamente documentado.

Probado intensivamente:

Diseñado pensando en que será usado de maneras imprevistas.

1.3 HERRAMIENTAS PROPIETARIAS Y LIBRES DE EDICIÓN DE INTERFACES

1.3.1 HERRAMIENTAS LIBRES

Software libre, con acceso a su código, generalmente gratuito:

1.3.1.1 Ventajas

Existen aplicaciones para todas las plataformas (Linux, Windows, MacOs).

El precio de las aplicaciones es mucho menor, la mayoría de las veces son gratuitas.

Libertad de copia.

Libertad de modificación y mejora.

Libertad de uso con cualquier fin.

Libertad de redistribución.

Facilidad a la hora de traducir una aplicacion en varios idiomas

Mayor seguridad y fiabilidad.

El usuario no depende del autor del software

1.3.1.2 Inconvenientes

Algunas aplicaciones (bajo Linux) pueden llegar a ser algo complicadas de instalar.

Inexistencia de garantía por parte del autor.

Interfaces gráficas menos amigables.

Menor compatibilidad con el hardware.

1.3.2 HERRAMIENTAS PROPIETARIAS

Se trata de software privativo, es decir, no se permite el acceso al código. Hay software que aun siendo gratuito es de este tipo.

1.3.2.1 Ventajas

Facilidad de adquisición e instalación.

Existencia de programas diseñados específicamente para desarrollar una tarea.

Las empresas que desarrollan este tipo de software son, por lo general, grandes y pueden dedicar muchos recursos en el desarrollo e investigación.

Interfaces gráficas mejor diseñadas.

Mayor compatibilidad con el hardware.

1.3.2.2 Inconvenientes

No existen aplicaciones para todas las plataformas, estas versiones generalmente son para Windows y MacOS.

No pueden ser copiadas a otros equipos (sin infringir la ley).

No pueden ser modificadas ni adaptadas por el usuario final.

Restricciones en el uso (marcadas por la licencia).

Imposibilidad de redistribución.

Por lo general, suelen ser menos seguras.

El coste de las aplicaciones es mayor.

El soporte de la aplicación es exclusivo del propietario.

El usuario que adquiere software propietario depende al 100% de la empresa propietaria.

1.3.3 IDE

Para desarrollar software por su alta productividad se utilizan entornos de desarrollo o IDE. Un entorno de desarrollo (IDE) suele tener los siguientes componentes, aunque no necesariamente todos:

Un editor de texto.

Un compilador.

Un intérprete.

Un depurador.

Un cliente.

Posibilidad de ofrecer un sistema de control de versiones.

Facilidad para ayuda en la construcción de interfaces gráficas de usuario.

Algunos de los entornos de desarrollo de interfaces gráficas:

1.3.3.1 Microsoft Visual Studio

Es un entorno de desarrollo integrado para sistemas operativos Windows. Soporta varios lenguajes de programación. tales como Visual C++, Visual C#, Visual J# y Visual Basic .NET, al igual que entornos de desarrollo web como ASP. NET. Aunque actualmente se han desarrollado las extensiones necesarias para muchos otros.

Es un producto comercial, aunque Microsoft tiene versiones Express Edition gratuitas pero no libres con ciertas limitaciones en la explotación de las aplicaciones a desarrollar.

Adicionalmente, Microsoft ha puesto gratuitamente a disposición de todo el mundo una versión reducida de SQL Server, o Express Edition, cuyas principales limitaciones son que no soporta bases de datos superiores a 4 GB de tamaño. Únicamente se ejecuta en un procesador y emplea 1 GB de RAM como máximo, y no cuenta con el Agente de SQL Server.

Actualmente está en su versión 2013, aunque ya está disponible de Preview de la versión 2015 (http://www.visualstudio.com/).

images/img-28-1.jpg

Figura 1.7. Visual Studio

ACTIVIDADES 1.1

Descargue Visual Studio de la web http://www.visualstudio.com/ e instálelo en su ordenador. Haga capturas de todo el proceso seguido.

1.3.3.2 Gambas

Es un lenguaje de programación libre derivado de BASIC (de ahí que Gambas quiere decir Gambas Almost Means Basic). Es distribuido con licencia GNU-GPL. Cabe destacar que presenta ciertas similitudes con Java ya que en la ejecución de cualquier aplicación, se requiere un conjunto de librerías interprete previamente instaladas (Gambas Runtime) que entiendan el bytecode de las aplicaciones desarrolladas y lo conviertan en código ejecutable por el computador. Por otro lado, es posible desarrollar grandes aplicaciones en poco tiempo.

Permite crear formularios con botones de comandos, cuadros de texto y muchos otros controles y enlazarlos a bases de datos como MySQL, Postgree o SQLite, además de facilitar la creación de aplicaciones muy diversas, como videojuegos (utilizando OpenGL), aplicaciones para dispositivos móviles (en desarrollo pero muy avanzado), aplicaciones de red (con manejo avanzado de protocolos HTTP, FTP, SMTP, DNS), entre otras.

images/img-29-1.jpg

Figura 1.8. Gambas

ACTIVIDADES 1.2

Descargue Gambas de la web http://gambas.sourceforge.net/es/main.html e instálelo en su ordenador. Haga capturas de todo el proceso seguido.

1.3.3.3 Glade

Es una herramienta de desarrollo visual de interfaces gráficas mediante GTK/GNOME. Es independiente del lenguaje de programación y no generando código fuente, sino un archivo XML. GtkBuilder es un formato XML que Glade usa para almacenar los elementos de las interfaces diseñadas. Estos archivos pueden emplearse para construirla en tiempo de ejecución mediante el objeto GtkBuilder de GTK+.

Su conexión con lenguajes como Phyton o el IDE Anjuta (compilador C/C++) permite el desarrollo de interfaces en el mundo GNOME. Su sinónimo para KDE es QTCreator.

images/img-29-2.jpg

Figura 1.9. Glade

ACTIVIDADES 1.3

Descargue Glade de la web https://glade.gnome.org e instálelo en su ordenador. Haga capturas de todo el proceso seguido.

1.3.3.4 Embarcadero Delphi

Antes conocido como CodeGear Delphi, Inprise Delphi y Borland Delphi, es un entorno de desarrollo de software diseñado para la programación de propósito general con énfasis en la programación visual. En Delphi se utiliza como lenguaje de programación una versión moderna de Pascal llamada Object Pascal.

images/img-30-1.jpg

Figura 1.10. Embarcadero Delphi

ACTIVIDADES 1.4

Descargue Embarcadero Delphi de la web https://www.embarcadero.com/es/products/delphi e instálelo en su ordenador. Haga capturas de todo el proceso seguido.

1.3.3.5 NetBeans y Eclipse

Ambos son IDES para JAVA. El primero es de código abierto y admite más de un lenguaje de programación, como PHP y Phyton. El segundo, aunque gratuito, no soporta licencia GNU-GPL.

images/img-30-2.jpg

Figura 1.11. NetBeans

images/img-30-3.jpg

Figura 1.12. Eclipse

ACTIVIDADES 1.5

Descargue Netbeans de la web https://netbeans.org/index_es.html e instálelo en su ordenador. Haga capturas de todo el proceso seguido.

ACTIVIDADES 1.6

Descargue Eclipse de la web https://eclipse.org/ide/ e instálelo en su ordenador. Haga capturas de todo el proceso seguido.

1.3.3.6 Oracle Database

Es un entorno que permite la creación de bases de datos, y con una herramienta Oracle Designer que permite crear las interfaces para acceder a ellas. Tiene una versión gratuita Lite.

images/img-31-1.jpg

Figura 1.13. Oracle Database

ACTIVIDADES 1.7

Descargue Oracle Database de la web https://www.oracle.com/database/index.html e instálelo en su ordenador. Haga capturas de todo el proceso seguido.

1.3.3.7 Anjuta

De gran influencia en el mundo Linux. Es un (IDE) para programas en los lenguajes C, C++, Java, Python y Vala, en sistemas GNU/Linux y BSD. Su principal objetivo es trabajar con GTK y en el Gnome. Además, ofrece un

Comentarios para Desarrollo de Interfaces.

[juan carlos · Calificación: 3 de 5 estrellas]

Todo libro es un gran esfuerzo de su autor. No obstante, este, en su tema, se queda en algo bastante general y conocido.