PDF. Desarrollo de Interfaces. Tema 15
PDF. Desarrollo de Interfaces. Tema 15
Desarrollo de
interfaces para iOS
15
/ 1. Introducción y contextualización práctica 3
/ 3. Xcode 5
3.1. Primeros pasos 5
3.2. Configuración de un nuevo proyecto 6
/ 10. Caso práctico 2: “Diseña una interfaz para una aplicación iOS” 14
/ 12. Bibliografía 15
© MEDAC 978-84-18983-19-1
Reservados todos los derechos. Queda rigurosamente prohibida, sin la autorización escrita de los titulares del copyright,
bajo las sanciones establecidas en las leyes, la reproducción, transmisión y distribución total o parcial de esta obra por
cualquier medio o procedimiento, incluidos la reprografía y el tratamiento informático.
Crear menús que se ajustan a los estándares.
En primer lugar, desde el siguiente enlace se accede a la web de desarrollo de Apple en la que se encuentra toda la
información oficial necesaria.
La herramienta esencial que se necesita para desarrollar en este sistema operativo es Xcode, el Entorno de Desarrollo
Integrado (IDE) que nos proporciona Apple. Desde este IDE es posible diseñar la interfaz gráfica, implementar la
aplicación, probarla de forma adecuada y, finalmente, publicarla en la App Store. Gracias a sus características, resulta
un entorno de desarrollo excelente, puesto que desde una única herramienta será posible abordar todo el ciclo de
vida de una aplicación.
Además de Xcode, también será necesario conocer el lenguaje de programación utilizado para el desarrollo de las
aplicaciones en iOS, Swift.
Por lo tanto, en primer lugar, nos dispondremos a realiza la descarga de Xcode desde la App Store. Es imprescindible
tener un equipo con macOS X para poder realizar el desarrollo de una aplicación para iOS.
TÉCNICO EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
/5 MEDAC · Instituto Oficial de Formación Profesional
/ 3. Xcode
3.1. Primeros pasos
Tras realizar la instalación de Xcode en nuestro equipo, iniciamos la aplicación y, en la pantalla de inicio, nos aparecen
varias opciones: abrir un proyecto anterior, crear un playground (permite el desarrollador implementar ciertos
bloques de código que no son aplicaciones como tal), crear un nuevo proyecto en Xcode (es decir, crear una
aplicación) y, finalmente, descargar un proyecto almacenado en un repositorio.
Para crear un nuevo proyecto desde cero, seleccionamos “Create a new Xcode project”.
A continuación, la herramienta permite configurar varios aspectos del desarrollo como el sistema operativo que se va a
utilizar (iOS, watchOS, tvOS, macOS) o la plantilla de diseño para la aplicación. Como se puede deducir, Xcode permite
el desarrollo de aplicaciones para todos los sistemas operativos de Apple, para cada uno de los dispositivos de la marca.
Tras la selección del sistema operativo (en nuestro caso iOS) para el desarrollo de aplicaciones móviles y una de las
plantillas (plantilla en blanco con una sola pantalla), se pulsa el botón Next.
TEMA 15. DESARROLLO DE INTERFACES PARA IOS
Desarrollo de interfaces /6
Otro de los datos clave que se indican en la ventana de configuración es Language, donde se seleccionará Swift, el
lenguaje más moderno y potente para el desarrollo en Apple. Objetive-C es el primer lenguaje que se utilizó.
Finalmente, será necesario definir la interfaz de usuario (User Interface), que puede tomar los siguientes valores en
función del tipo de aplicación desarrollada:
• SwitfUI: nueva librería que incluye mejoras para el desarrollo de las interfaces web, y es la más utilizada en la
actualidad para nuevos desarrollos.
Tras pulsar el botón Next, seleccionamos el directorio en el que va a estar ubicado el proyecto y, finalmente, se pulsa
Create. Por defecto, se creará un nuevo “Hola Mundo”.
En primer lugar, en la siguiente figura, se muestra la zona de la herramienta que permite ejecutar y detener la
aplicación, así como el nombre del proyecto y el tipo de simulador escogido para probar la aplicación que se
está desarrollando.
En este último menú, mediante una lista de valores, también es posible escoger un dispositivo físico para probar
la aplicación.
En la barra superior de la herramienta, se indica el estado actual de la aplicación, por ejemplo, Running HelloWorldCode
on iPhone 11, es decir, nos indica que se está ejecutando el proyecto de nombre HelloWorldCode en un simulador
de tipo iPhone 11.
Este menú es uno de los más importantes, puesto que será el que nos permita seleccionar nuevos componentes
para ser colocados sobre la interfaz de la aplicación. El acceso a la paleta de componentes se realiza a través del
botón con el símbolo “+”. Es el botón de librería. La ventana de selección de elementos queda distribuida en varios
tipos:
• Componentes gráficos
• Bloques de código
• Imágenes
El segundo botón nos permite comparar el código desarrollado con versiones previas que el desarrollador hubiese
subido a algún repositorio. Finalmente, el resto de opciones de este menú permiten personalizar la vista de la
interfaz, al igual que ocurría con Android Studio a través del botón Split.
TEMA 15. DESARROLLO DE INTERFACES PARA IOS
Desarrollo de interfaces /8
• Zona izquierda: en esta zona, encontramos un completo catálogo de funcionalidades, como son: el acceso a
los repositorios, un buscador, la zona en la que se muestran advertencias, análisis de rendimiento, breakpoints
o puntos de ruptura, entre otras.
Una de las funciones más importantes de esta zona es Navigator, accesible a través del icono de carpeta,
donde se muestran los ficheros y directorios de los que queda compuesto cada proyecto. Si pulsamos sobre
el archivo principal de nuestro proyecto (que aparece en primer lugar), se muestra la configuración principal
del proyecto donde aparecen algunos de los datos principales del mismo.
• Zona de desarrollo: es la zona central de la interfaz de la herramienta y nos muestra el código de implementación.
Cuando se selecciona un fichero de un proyecto en desarrollo, esta zona queda subdividida en dos partes:
una parte para el código y otra llamada Preview. En esta última, al pulsar el botón Resume, se muestra una
previsualización de la aplicación, tomando como referencia el simulador previamente seleccionado.
• Zona derecha: como ocurre en otros entornos de desarrollo, esta zona solo se activa cuando algún elemento
está seleccionado. En función del elemento del diseño escogido, se muestra un menú u otro, permitiendo
modificar las características de los atributos. Por ejemplo, si se selecciona una etiqueta de texto, será posible
modificar el String que se muestra, la fuente, o el tamaño.
import SwiftUI
2. La función ContentView define el contenido de la pantalla. En este caso, se incluye un componente de texto
con el contenido “Hola mundo”.
3. Finalmente, es necesario introducir el siguiente fragmento de código para que se genere la previsualización
que aparece a la derecha de la pantalla en el IDE.
Por último, para añadir alguno de los elementos y componentes del menú Librería, accesible a través del botón ‘+’
que aparece en el menú superior en la derecha, basta con seleccionar uno y colocarlo en la posición deseada en la
interfaz gráfica o en la zona de implementación.
Pero se debe tener presente que si en primer lugar se crea una variable con una cadena de texto y luego se modifica
su valor a un entero, el sistema nos devolverá un error, puesto que la variable será del tipo que se declaró la primera
vez, y ya no será posible cambiar el tipo de dato interno. Por tanto, será necesario crear una nueva variable.
Para crear variables se utiliza la palabra var y, a continuación, se indica el nombre el nombre de la misma. Para la
construcción del nombre, cada vez es más común observar ciertas convenciones sobre cómo deben ser definidos
los nombres. Uno de los más utilizados es CamelCast, este indica que se tiene que diferenciar cada una de las
palabras con una letra mayúscula, empezando siempre con una letra minúscula. Por ejemplo, un nombre válido sería
primeraVariable. A continuación, se indica el valor de dicha variable.
Ahora bien, la creación de las instancias en Swift se realiza a través de struct, que equivalente a una class de JavaScript.
Por ejemplo, si queremos definir un nuevo objeto que contiene una cadena de texto, quedaría de la forma:
struct nuevoDato {
var primeraVariable: String
}
Código 5. Creación de clases.
6.2. Comentarios
El uso de comentarios en programación no es un hecho trivial, es clave para construir programas que resulten más
fáciles de mantener en el futuro.
• /* */. Estos permiten insertar entre los valores de apertura y cierre todas las líneas de comentarios que sean
necesarias. Este tipo de delimitadores son útiles cuando existen varias líneas de comentarios o se quiere
comentar algún fragmento de código.
/*
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXX
*/
• //. Este tipo de delimitadores se utilizan, habitualmente, para comentar una línea completa.
//XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
TÉCNICO EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
/ 11 MEDAC · Instituto Oficial de Formación Profesional
6.3. Botones
Los botones son elementos muy importantes en el desarrollo de interfaces, ya que permiten al usuario tener una
interacción directa con la aplicación. Para añadir uno de estos elementos, basta con introducir el siguiente fragmento
de código o seleccionarlo de la paleta de componentes.
Button(action: signIn) {
Text(“Sign In”)
}
Como se puede ver en la siguiente imagen, también es posible desplegar la librería a través del botón ‘+’ y desde
componentes gráficos, seleccionar el elemento, en este caso, un Button. Si pulsamos sobre él y lo arrastramos hasta
la zona de desarrollo, se añade el código que aparece dentro del cuadro. En Action se indica qué va a hacer el botón
cuando este sea pulsado, y en Content, el texto que aparecerá en el botón.
El desarrollo de las interfaces para aplicaciones en iOS se caracteriza por presentar diseños limpios y minimalistas
que incluyen todo lo necesario, pero sin sobrecargar la interfaz. Las características de diseño que diferencia este
sistema de otras plataformas son:
• Claridad: implica que el texto contenido en la aplicación debe ser legible en todos los tamaños, los iconos
deben ser precisos, es decir, no utilizan imágenes recargadas. Además, la distribución en el espacio de los
componentes, la paleta de color seleccionada, las fuentes y los gráficos, entre otros, resaltan el contenido
importante de la aplicación y aportar interactividad al usuario.
• Adaptación al contenido: la navegación en la aplicación debe realizarse través de un movimiento fluido que
permite a los usuarios comprender e interactuar con el sistema con movimientos naturales. Por otro lado, el
contenido debe ocupar toda la pantalla del dispositivo.
TEMA 15. DESARROLLO DE INTERFACES PARA IOS
Desarrollo de interfaces / 12
• Profundidad: la aplicación se implementa a través de varias capas visuales cuya transición entre capas aporta
sensación de movimiento sobre la jerarquía de la aplicación, navegando “en profundidad” por el diseño.
En cuanto a los criterios de diseño establecidos por Apple para el diseño de las aplicaciones y garantizar de esta
forma el impacto de sus desarrollos en el mercado, son:
• Integridad estética.
• Consistencia.
• Manipulación directa.
• Retroalimentación.
• Metáforas.
• Control de usuario.
Audio 1. “Aspectos importantes de las
interfaces en iOS”
https://bit.ly/32V1xyN
El cuidado diseño en las interfaces de las aplicaciones de Apple que garantizan la usabilidad de la misma son una de sus
características de identidad. Por ello, desde el sitio oficial, indican los siguientes pilares clave para la elección del color:
• Usar el color con prudencia. Es aconsejable utilizarlo solo para resaltar determinados elementos sobre los que
queremos llamar la atención del usuario.
• Utilizar colores complementarios en el diseño completo de la aplicación. Es decir, los colores escogidos
deben funcionar bien de forma independiente y combinados.
• Seleccionar una paleta de colores concreta y limitada. Además, es aconsejable que esta selección vaya en
consonancia con el diseño del lago de la aplicación.
• Escoger un color característico para toda la aplicación. Aunque se seleccione más de un color para el diseño de
la aplicación, es conveniente que siempre exista uno principal que identifique a la aplicación. Por ejemplo, la app
del BBVA basa su paleta de color en el azul, o la aplicación general Notes, escoge el color amarillo como central.
• Proporcionar dos colores para garantizar que la aplicación se vea bien en el entorno oscuro y el claro, que
son los dos modos disponibles en iOS.
TÉCNICO EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA
/ 13 MEDAC · Instituto Oficial de Formación Profesional
Los dispositivos iOS permiten seleccionar dos tipos de interfaces: una oscura y otra clara, por lo tanto, en función de
cual se seleccione, será conveniente escoger unos colores u otros.
Por ejemplo, en la siguiente imagen, se muestran algunos colores en su versión clara y oscura.
Nudo: En primer lugar, se va a crear un proyecto nuevo desde File, New, Project.
Ahora se selecciona la opción deseada para crear una nueva aplicación. Recordamos
que sea en iOS, puesto que estamos desarrollando una aplicación móvil.
import SwiftUI
import SwiftUI
struct ContentView: View {
var body: some View {
Text(“Soy tu primera aplicación”)
.padding()
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Se pide diseñar la interfaz para una nueva aplicación iOS que cumpla los
criterios de diseño utilizando una herramienta de prototipado o diseño
gráfico. En este caso, se solicita el diseño de una aplicación para visualizar
una galería de imágenes.
La herramienta utilizada para el desarrollo de este tipo de aplicaciones es Xcode, el Entorno de Desarrollo Integrado
(IDE) que nos proporciona Apple. Desde este IDE, es posible diseñar la interfaz gráfica, implementar la aplicación,
probarla de forma adecuada y, finalmente, publicarla en la App Store. Gracias a sus características, resulta un entorno
de desarrollo excelente, puesto que desde una única herramienta será posible abordar todo el ciclo de vida de una
aplicación.
También, hemos aprendido que el desarrollo de las interfaces de las aplicaciones en iOS se caracteriza por presentar
diseños limpios y minimalistas que incluyen todo lo necesario, pero sin sobrecargar la interfaz. Las características
de diseño que diferencia este sistema de otras plataformas son: claridad, adaptación al contenido y profundidad.
En cuanto a los criterios de diseño establecidos por Apple para el diseño de las aplicaciones y garantizar el impacto
de sus desarrollos en el mercado son: integridad estética, consistencia, manipulación directa, retroalimentación,
metáforas y control de usuario.
Con los conocimientos adquiridos a lo largo del tema, podemos responder a las preguntas propuestas en el caso
práctico inicial. Para la selección del color de la interfaz en iOS, es recomendable tener en cuenta: el uso del color
con prudencia, utilizar colores complementarios, seleccionar una paleta concreta y limitada, así como escoger un
color característico para toda la aplicación. Por último, si se desea que la aplicación se vea bien tanto en entornos
con mucha claridad como muy oscuros, es recomendable proporcionar dos colores.
/ 12. Bibliografía
Fernández, A.; García-Miguel, B., y García-Miguel, D. (2020). Desarrollo de Interfaces (1.a ed.). Madrid, España: Síntesis.
12.1. Webgrafía
Swift Apple ES. Consultado en: https://www.apple.com/es/swift/
Swift Apple Developer. Consultado en: https://developer.apple.com/swift/