TactilApp Logo

Maquetación y depuración de apps en iOS

Jul 17, 2013 depuración, herramientas, iOS, storyboard, XCode No hay comentarios

En esta ocasión vamos a dar un breve repaso a dos de las herramientas que utilizamos en Tactilapp a la hora de desarrollar una aplicación: Storyboard y Reveal.
La primera viene incluida con el propio SDK de iOS y se utiliza directamente desde XCode, y la segunda es una aplicación que se puede descargar de forma gratuita, ya que se encuentra en fase beta aún.

Maquetación de una aplicación

Con el lanzamiento de iOS5 hace un par de años, Apple introdujo la posibilidad de utilizar storyboards como herramienta de ayuda visual a la hora de plantear la vista de una aplicación, así como todo el flujo de navegación entre las distintas pantallas. Todo de un golpe de vista como se puede apreciar en la imagen con un ejemplo del storyboard utilizado para la aplicación de TEDx Sant Antoni.

 

Storyboard de la app de TEDx Sant Antoni

 

La curva de aprendizaje para usar storyboard es bastante corta, a pesar de ello existen ciertos casos en los que es conveniente seguir utilizando la “manera antigua” de maquetar las pantallas (mediante archivos .xib). La principal problemática es el tratamiento del fichero .storyboard, ya que al tratarse de un único fichero, es incómodo trabajar con storyboard en equipos de varias personas, ya que un mínimo cambio como mover una pantalla para alinearla con otra hace que el fichero cambie, y posiblemente haya un conflicto en el sistema de control de versiones.

Depurando vistas

A pesar de que los smartphones cada día son más potentes, es primordial optimizar los recursos utilizados, y dado que unos de los que más consumen (tanto a nivel de memoria, como de CPU) son los gráficos, utilizar herramientas de depuración visual es algo imprescindible para enviar algo de calidad a la AppStore. En nuestro caso estamos encantados con Reveal, una aplicación para Mac OS X con la cual podemos revisar de una manera visual la composición de las vistas de nuestra aplicación, y de esta manera encontrar vistas repetidas o mal posicionadas. En la imagen se puede ver las distintas capas de nuestra aplicación de TEDx Sant Antoni.

Reveal App

Con Reveal también podemos realizar cambios en tiempo real para mover vistas de su posición, añadir padding a los elementos, y otra multitud de cambios, todo ello sin necesidad de recurrir al antiguo método de prueba-error con el consecuente ahorro de tiempo que ello supone. Utilizar Reveal en nuestra aplicación únicamente requiere que añadamos un framework a nuestro proyecto, que será el encargado de comunicarse con la aplicación. Tras esto, cuando arranquemos la aplicación (tanto en el simulador como en un dispositivo físico, siempre que estén en la misma red), nos permitirá “conectar” con Reveal y así poder juguetear con los distintos componentes.

Reveal Installation

Si estáis interesados en probarla, podéis ir a la web de Reveal y descargarla de manera totalmente gratuita, suponemos que en lo que esté en fase beta.

Sobre Jorge Maroto

ha escrito 5 artículos en este blog.