Xcode & Swift de Apple

Siempre me ha interesado el poder aprender a crear una aplicación para iPhone. Comienzo a leer sobre el tema y a estudiarlo y me desvio del tema por x o y razón. No sé cuántas veces comenzaré y cuántas veces me desviaré del tema; así que ahora que tengo una idea para un App, un norte a seguir, quiero volver a entrar de lleno. Así que vamos a ver como me vá esta vez.

Como diria C3PO; “Here we go again”. 😇

Dición!

Uniendo cables en Adobe XD

Screen Shot 2018-04-17 at 8.41.24 AM

Cuando comenzamos a darle vida al prototipo; utilizaremos unos cables o “wires” que le dicen al programa de dónde a dónde corre la navegación entre las páginas diseñadas.

Screen Shot 2018-04-17 at 8.39.24 AM

Cuando seleccionamos la primera página vamos a ver una pestaña azul con una flecha blanca. Al seleccionar esta flecha blanca y arrastramos el ratón de la computadora vamos a notar que arrastramos un cable azul, el cual podemos conectar en cualquier otra página u objeto.

Screen Shot 2018-04-17 at 8.40.00 AM

Cuando el cable está conectado al próximo punto vamos a ver una ventana flotante en la cual básicamente podemos programar el destino; la transición; el movimiento; y la duración de la transición. Más adelante durante el proceso de programación, si deseas volver a una página a re programar algo que no te agradó; puedes seleccionar el destino o la salida del cable y cambiar estos parámetros de igual forma en que los programaste en un principio.

Screen Shot 2018-04-17 at 8.40.13 AM

Notarás también que aunque tus páginas se compongan de objetos agrupados puedes utilizar la tecla de “Command” o seleccionar más de una vez con el ratón de la computadora hasta entrar al objeto deseado. En mi opinión es más fácil usar la tecla “Command” + “click“.

Screen Shot 2018-04-17 at 8.55.24 AM

En la siguiente imagen acomodé la primera página un poco hacia abajo para que puedan apreciar el cable que también sale desde el logo JRVstudio y el destino de ambos cables es la siguiente página llamada “Home“. Si deseamos eliminar o cortar un cable para que no se ejecute; sencillamente lo seleccionamos y lo sacamos hacia afuera; como si desenchufaras un cable de la electricidad de la pared de tu casa.

Screen Shot 2018-04-17 at 8.59.22 AM

Ahora lo que debes de realizar es jugar con interconectar el prototipo y analizar los movimientos y tiempos entre cada ventana. Como notarás, en mi diseño tuve que duplicar la página de “Password” por que para que salga el teclado debo primero seleccionar el lugar donde voy a escribir. Por tal motivo conecté un cable desde el botón de “Welcome” a una página sin teclado y luego al tocar el espacio para escribir el “Username” y “Password“; aparece por disolvencia la página de el teclado; dándonos la sensación de que solo apareció el teclado. Recuerda jugar con los parámetros del tiempo.

 Screen Shot 2018-04-17 at 9.10.57 AM

Si notas el menú de los segundos contiene unos parámetros pero con el teclado puedes escribir los segundos que le convenga más al movimiento. en este caso le escribí (punto-dos.2 segundos. También recuerda que desde la primera vez que programas estos parámetros, ellos se quedan igual para los próximos y si deseas tener distintos parámetros debes de cambiarlos con cada página a programar.

Screen Shot 2018-04-17 at 9.14.28 AM

Una vez programada la maqueta, presiona “Command” + “enter” para comenzar a probar el prototipo en la ventana del “Desktop Preview“. Aquí te muestro la grabación de este primer modelo. El círculo blanco transparente que notas en el video es el ratón de la computadora, comportándose como si tocaras la pantalla de tu celular con tu dedo.

En el video notarás los movimientos programados para el prototipo. Unos fueron movimientos disolventes y otros fueron movimientos de derecha o izquierda. También notarás que al momento que llegamos al final de las páginas diseñadas no tenemos un icono de retorno o no nos movemos a otras páginas debido a que no hemos continuado con el diseño de la maqueta. Nos hemos concentrado en estas primeras páginas. Una maqueta puede tener un sin número de páginas. Por el momento les deseo mostrar cómo funciona esta primera experiencia entrelazando páginas y cables. Jueguen con la programación, añadan más páginas a sus diseños y nos veremos en el próximo post donde probaremos nuestra maqueta en un iPhone.

¡Hasta luego!

 

 

Prototipo

¿Qué es un prototipo?

Si buscamos la definición de prototipo en el internet nos encontramos con esto:

Screen Shot 2018-04-16 at 9.59.06 AM

Basado en esa definición entonces un prototipo en Adobe XD es cuando tomamos nuestra maqueta, le añadimos interactividad y la compartimos con amistades y hasta el cliente para que tenga una visualización de cómo va a funcionar o moverse su aplicación entre página y página. De este modo obtenemos comentarios y correcciones del trabajo realizado hasta el momento.

Screen Shot 2018-04-16 at 9.55.43 AM

Modo de diseño.

Screen Shot 2018-04-16 at 9.55.30 AM

Modo de prototipo.

Durante el proceso de aprendizaje con Adobe XD, notamos que debajo de la barra del menú principal, vemos que la aplicación tiene en su parte superior derecha, dos secciones: una de “Diseño” y otra de “Prototipo“. Usamos la sección de diseño para crear nuestra maqueta y tenemos disponible todas las herramientas de diseño de Adobe XD. Cuando comenzamos a crear interactividad en nuestra maqueta, para visualizar su funcionamiento; la sección de prototipo reduce sus herramientas a dos: la flecha de selección y la lupa. Un atajo en el teclado, entre ambas secciones, es presionando la tecla de “Control” + “Tab” cada vez que deseemos diseñar y probar, diseñar y probar.

Screen Shot 2018-04-16 at 9.42.36 AM

Al momento de seleccionar la sección de prototipo en nuestra maqueta; Adobe XD nos muestra un primer mensaje en pantalla enseñándonos cómo vamos a darle interactividad a la maqueta. Este proceso se lleva acabo entrelazando “wires” o cables entre aquel objeto el cual deseemos que sea un activador y su destino.

Algo muy importante para recordar es que Adobe XD utiliza la posición de tus “artboards” para nombrar o seleccionar el “Home Screen” como la primera página o pantalla a mostrarse en tu maqueta. Recuerda que no es lo mismo que tu nombres tu propio “Home Screen” en tus “artboards“; a que Adobe XD nombre la pantalla que es el “Home Screen” de la aplicación. La formula que utiliza el programa es: “Top most” o “Left most” o sea la página más alta que acomodes en la parte superior de tu maqueta o la página más alta que acomodes a la izquierda del programa.

Screen Shot 2018-04-16 at 10.33.39 AM

En el ejemplo de arriba notarás que el “Artboard – 4“; Adobe XD lo seleccionará como el “Home Screen” de la aplicación debido a su posición en la maqueta. La misma se encuentra más a la izquierda y más sobre el “Artboard – 1“; aunque el mismo se haya diseñado último en todo el proceso. El “Home Screen” se identifica con una pestaña gris y dentro de ella una casita blanca. Cuando seleccionas la casita, el recuadro cambia de color gris a color azul. Este color te indica que se sleccionó y se activó el “Home Screen“.

Digamos que deseas mostrarle a tu cliente en Japón una sección del prototipo pero no deseas mostrarle toda la maqueta. Esto lo puedes lograr seleccionando la página deseada a ser mostrada como primera y luego activando la casita de “Home Screen”. Cuando el cliente abre la maqueta, la misma le abrirá en esa sección y podrá interactuar solo con esa seccción. Nota – “teniendo en cuenta de que no exista un botón que interactue con la página que no deseas que el cliente vea”.

Screen Shot 2018-04-16 at 10.47.22 AM

Página #1 es el “Home Screen” de la maqueta.

Screen Shot 2018-04-16 at 10.47.30 AM

Página #3 es ahora el nuevo “Home Screen” de la maqueta.

En las dos imágenes superiores notarás unas líneas azules entre página y página; esto son los “wires” o cables que entrelazan a cada página y crean la interactividad. En el próximo post hablaremos sobre ellos.

“¡Hasta luego!”.