PDF de programación - Unidad II - Interfaz Gráfica - Programación para dispositivos móviles

Clase:03

1

Unidad II



Interfaz Grafica



Basado en
https://developer.apple.com/library/ios/referencelibrary/GettingStarted/RoadMapiO
S/index.html#//apple_ref/doc/uid/TP40011343-CH2-SW1
Otros materiales publicados años anteriores en el sitio de desarrolladores de apple


2

Agenda

• Desarrollo de Apps para IOS.

• Pasos para el desarrollo de aplicaciones para

IOS.

• Introducción.
• Estructuración.
• Implementación.

• Diseño de interfaz humana.
• Lenguaje de desarrollo para IOS.
• Lineas

Guia

para

un

buen

diseño

de interfaz humana.

• Antes de iniciar el desarrollo de Apps para IOS
• Demo Xcode

3

Desarrollo de Apps para IOS

Pasos para el desarrollo de aplicaciones para IOS son los
siguientes:

1 Inscribirse en el iOS Dev Center y descarga del SDK.
2 Registrarse como desarrollador de Apple (este paso es
necesario
solo para desarrolladores que quieran
comercializar la aplicación desarrollada).
3 Elegir el tipo de aplicación a desarrollar.
4 Utilizar las herramientas de desarrollo para el diseño y
puesta a punto de la aplicación.
5 Probar la aplicación, utilizando el simulador de iOS y
luego sobre el dispositivo de Apple.
6 Distribuir la aplicación a través del App Store (una vez
obtenida la firma de Apple).

4

Desarrollo de Apps para IOS

1) Introducción



todo

Al desarrollar aplicaciones, se utiliza el kit
de desarrollo de software iOS (SDK) y Xcode, el
entorno de desarrollo integrado de Apple (IDE). Xcode
ofrece
lo necesario para crear grandes
aplicaciones para el iPhone, iPod touch y iPad. Incluye
un editor de código fuente, un editor de interfaz
gráfica de usuario, y muchas otras características.
Xcode utiliza una sola ventana, llamada ventana de
trabajo, que presenta la mayoría de las herramientas
que necesita para desarrollar aplicaciones.

5

Desarrollo de Apps para IOS

2.Estructuración.
2.1) Definiendo el concepto
Quién es tu audiencia?
Cuál es el propósito de tu aplicación?
Cuál es el problema que tu aplicación trata de resolver?
Que tipo de contenido podrá tu aplicación incorporar?

6

Desarrollo de Apps para IOS

2.2) Diseñando la Interfaz de Usuario
Un usuario tiene que interactuar con una interfaz de aplicación en
la forma más sencilla posible. Para diseñar la interfaz hay que
tener al usuario en mente, y desarrollarla de forma eficiente, clara
y sencilla.

7

Desarrollo de Apps para IOS

2.3) Definiendo la interacción
Las aplicaciones de iOS se basan en la programación orientada a
eventos. Es decir, el flujo de la aplicación se determina por eventos:
eventos del sistema y las acciones del usuario. El usuario realiza acciones
en la interfaz, que desencadenan los acontecimientos en la aplicación.
Estos acontecimientos dan lugar a la ejecución de la lógica y la
manipulación de los datos de la aplicación. La respuesta de la aplicación
para la acción del usuario se refleja luego de vuelta en la interfaz.
Debido a que el usuario, en lugar del desarrollador, tiene el control de
cuándo ciertas partes del código de la aplicación se ejecutan, se debe
identificar exactamente qué acciones puede realizar un usuario y lo que
ocurre en respuesta a esas acciones.

8

Desarrollo de Apps para IOS

2.3) Definiendo la interacción
El programador define gran parte de la lógica de control de eventos en
los controladores de vista. Los controladores son objetos que apoyan
sus puntos de vista al responder a las acciones del usuario y llenar las
opiniones con contenido. Objetos del controlador son un conducto a
través del cual las vistas interactúan con el modelo de datos. Las vistas
son notificadas de los cambios en los datos del modelo a través de los
controladores de la aplicación, y los controladores comunican los
cambios para iniciarlos por el usuario.

9

Desarrollo de Apps para IOS

2.3) Definiendo la interacción(ViewController)
Después de construir una jerarquía básica de vistas, el siguiente paso es el
control de los elementos visuales y responder a la entradas del usuario. En
una aplicación para iOS, se utiliza un controlador de vistas (UIViewController)
para gestionar una vista de contenido con su jerarquía de subvistas

10

Desarrollo de Apps para IOS

3) Implementación de una App(Patrones de Diseño)
Un patrón de diseño resuelve problemas comunes de ingeniería de software.
Los patrones son diseños abstractos, no código. Se utilizan para ayudar a
definir la estructura de modelos de datos y su interacción con el resto de la
aplicación. Cuando se adopta un patrón de diseño, es para adaptar un
modelo general a las necesidades específicas. No importa qué tipo de
aplicación que está creando, es bueno conocer los patrones de diseño
fundamentales utilizados en los frameworks. La comprensión de los patrones
de diseño le ayuda a utilizar los frameworks de manera más eficaz y permite
escribir aplicaciones que son más reutilizables, más extensible, y más fácil de
cambiar.

11

Desarrollo de Apps para IOS

3.1) Patrón MVC
El Modelo-Vista-Controlador (MVC) es fundamental para un buen diseño
para cualquier aplicación de iOS. MVC asigna los objetos en una aplicación
para uno de los tres roles: modelo, vista o controlador. En este modelo, los
modelos de seguimiento de los datos de su aplicación, las vistas muestran la
interfaz de usuario y constituyen el contenido de una aplicación, y los
controladores gestionan las vistas.

12

Desarrollo de Apps para IOS

3.2) Patrón Target Action
Target-action es un diseño conceptualmente simple en el que un objeto envía
un mensaje a otro objeto cuando se produce un evento específico. El
mensaje action es un selector que se define en el código fuente, y el
target(objetivo) en el objeto que recibe el mensaje, es un objeto capaz de
llevar a cabo la acción, por lo general un View Controller. El objeto que envía
el mensaje de acción es por lo general un control como un botón, control
deslizante, o cambiar, que puede desencadenar un evento en respuesta a la
interacción del usuario, como tocar, arrastrar, o cambiar de valor.

13

Desarrollo de Apps para IOS

3.3) Patrón Delegation
El Delegation es un patrón simple y de gran alcance en el que un objeto en
una aplicación actúa en nombre de, o en coordinación con otro objeto. El
objeto delegar mantiene una referencia a otro objeto delegado y en el
momento apropiado, el objeto delegar envía un mensaje al delegado. El
mensaje informa al delegado de un evento que el objeto delegar está a punto
de manejar o simplemente ha manejado. El delegado puede responder al
mensaje mediante la actualización de la aparición (o estado) de sí mismo o
de otros objetos en la aplicación, y en algunos casos se devolverá un valor
que afecta a cómo se maneja un evento inminente.

14

Desarrollo de Apps para IOS

El SDK de iOS amplía el conjunto de herramientas de Xcode
para incluir las herramientas, los compiladores, y los marcos
necesarios específicamente para iOS.

15

Diseño de Interfaz Grafica (UI)

Hacer una aplicación de un concepto simple de la App Store
no es una tarea fácil, el proceso y las buenas practicas son lo
fundamental.

16

Diseño de Interfaz Grafica (UI)

1) Diseño para IOS

La deferencia. La interfaz de usuario ayuda a la gente a entender e
interactuar con el contenido, pero nunca compite con él.
Claridad. El texto es legible en todos los tamaños, los iconos son
precisos y lúcidos, los adornos son sutiles y apropiados, y con un
enfoque más preciso en la funcionalidad que motiva al diseño.
Profundidad. Capas visuales y movimiento realista
vitalidad y aumentan el placer y comprensión de la gente.

imparten

17

Diseño de Interfaz Grafica (UI)

2) Anatomía para las Apps IOS

Casi todas las aplicaciones de iOS utilizan al menos algunos de los
componentes de interfaz de usuario definidas por el marco UIKit.
Conocer
funciones y capacidades de estos
componentes básicos ayuda a tomar decisiones informadas al
diseñar la interfaz de usuario de su aplicación.

los nombres,

18

Diseño de Interfaz Grafica (UI)

2) Anatomía para las Apps IOS…

19

Diseño de Interfaz Grafica (UI)

3) Adaptabilidad y Diseño
La gente en general quieren utilizar sus aplicaciones favoritas en
todos sus dispositivos y en cualquier orientación. En iOS 8 y
versiones posteriores, utiliza clases de tamaño y Auto Layouts para
ayudarle a cumplir con esta expectativa por la definición de cómo
el diseño de pantallas, los ViewControllers y los View deben
adaptarse al modificarse el entorno de visualización.


20

Diseño de Interfaz Grafica (UI)

4) Inicio y detención
Iniciar de forma instantánea
A menudo se dice que la gente pasa no más de un minuto o dos
evaluar una nueva aplicación. Cuando usted hace la mayor parte
de este breve período, presentando un contenido útil de
inmediato, esto hace despertar el interés de los nuevos usuarios y
dar a todos los usuarios una experiencia superior.

21

Diseño de Interfaz Grafica (UI)

5) Navegabilidad
La gente tiende a ignorar la experiencia de navegación en una
aplicación a menos que no cumple con sus expectativas. Su trabajo
es poner en práctica la navegación de manera que soporta la
estructura y el propósito de su aplicación sin necesidad de llamar la
atención sobre sí mismo.

22

Diseño de Interfaz Grafica (UI)

5) Navegabilidad

23

Diseño de Interfaz Grafic