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!

Splash/Bienvenida/Repeat Grid

Cuando abrimos una aplicación en nuestro celulares, notamos que antes de comenzar a interactuar con ella vemos lo que se conoce como el “splash” o sea esa primera página que se carga y muestra el logo de la aplicación yo compañia. Si seleccionamos el nombre de la página “Password” y presionamos la tecla de “Option” y arrastramos hacia la izquierda la página o a tu preferencia; estamos duplicando todo el contenido y creando una copia. Esta copia cambiale el nombre de la misma forma que ya sabes hacer. Llamemosla “Splash“.

Screen Shot 2018-04-12 at 12.53.54 PM

Vamos a eliminarle el teclado iOS, los símbolos y el recuadro difuminado y hasta la foto de fondo. Luego usa la herramienta de rectángulo y dibuja uno en toda la primera página. Dale el color de tu preferencia. Si tienes Adobe Illustrator o Adobe Photoshop y tienes tu logo en vectores; guárdalo en formato .svg o en .png y colócalo en el centro de la página. Listo!, diseñaste la página de “spalsh” de tu maqueta.

Screen Shot 2018-04-12 at 1.13.34 PM

Acto seguido, usualmente luego de unos tres o cinco segundos, se muestra lo que sería el “Home” de la aplicación. ¿Estas listo? Ahora diseña, con lo que sabes hasta ahora, la primera página de tu aplicación. ¿Qué deseas que se vea en ella?

Screen Shot 2018-04-12 at 1.24.45 PM

Muy bien! Vamos a ver si hiciste lo mismo que yo! Duplicaste la página “Splash” y borraste el cuadrado azul de fondo. Seleccionaste la foto de la página de “Password” la copiaste y la pegaste en la nueva página “Home“. Diseñaste un botón y lo agrupaste con la palabra “Welcome” y lo colocaste en la parte inferior de la página. Como resultado tienes hasta ahora tres páginas que corren de izquierda a derecha; primero el “Splash“; luego el “Home” y cuando se presione el botón de “Welcome” pasamos a la página de “Password“. ¡Hasta ahora to va de show! Recuerda que el tanto el estilo del texto como el logo y el botón de bienvenida, los puedes guardar en el panel de símbolos para poder usarlos en páginas adicionales y así tu diseño mantiene un mismo estilo a lo largo de toda la maqueta.

Screen Shot 2018-04-12 at 2.31.04 PM

¡Ahora es que viene lo bueno! Vamos a crear una página la cual mostremos los servicios que tiene la compañía JRVstudio. Vamos a crear una página de “Servicios” y en ella vamos a usar la herramienta más poderosa de Adobe XD; el “Repeat Grid“.

Screen Shot 2018-04-12 at 3.04.28 PMEste botoncito es el que hace la magia de repetir patrones. El “Repeat Grid” se encuentra en el panel de propiedades; se mantiene inactivo hasta que tocas un objeto. La mejor manera de utilizarlo es una vez diseñas un grupo de objetos que vas a repetir más de dos veces en tu diseño. En este caso una vez está listo el grupo, solamente lo seleccionas y presionas el botón. Verás que se forma un rectángulo verde al rededor de tu objeto y el mismo contiene unos manipuladores, tanto a la derecha como a en la parte inferior del objeto. Estas pestañas te permiten tirar del objeto y como por arte de magia se repite la imagen cuantas veces desees.

Screen Shot 2018-04-12 at 3.04.07 PM

Screen Shot 2018-04-12 at 3.04.42 PM

“repeat Grid” activado.

Si arrastras hasta el final de la página obtendrás un patrón de cinco objetos con el diseño deseado. En mi caso diseñe un grupo con una esfera; un título grande y un subtítulo más pequeño.

Screen Shot 2018-04-12 at 3.05.27 PM

Ahora; busca 5 imágenes que se relacionen con las secciones diseñadas en el “Repeat Grid“. Para que el truco funcione debes de enumerar del 1 al 5 para que mantengan un orden al momento de ser colocadas dentro del “Repeat Grid“. Mantén abierta ambas ventanas; la del “finder” y al lado la de Adobe XD; selecciona todas las imágenes y arrástralas hasta la primera esfera. Cuando la esfera se torne de color azul, puedes soltar las imágenes y notarás que todas las demás esferas se rellenan con cada foto seleccionada.

Screen Shot 2018-04-12 at 3.03.46 PM

Imágenes enumeradas.

Screen Shot 2018-04-12 at 3.29.43 PM

¡Nítido!

Screen Shot 2018-04-12 at 3.29.37 PM

Cuando comencemos a cambiar el título de cada sección, nos vamos a encontrar con problemas debido a lo largo de los títulos. ¡No problem! Puedes cambiar lo que dice cada sección, pero al momento que cambias el estilo de letra; la fuente o familia; todos los demás cambian simultáneamente. Selecciona el título más largo y cambiarle el tamaño de la fuente.

Screen Shot 2018-04-12 at 3.39.36 PM

Si recuerdas bien, teníamos guardadas cinco imágenes y arrastraste cinco, pero en la página hay 4; ¿Dónde está la quinta? Para finalizar selecciona la página en la palabra “Services” al tope de ella y cuando aparezcan los tiradores en sus cuatro esquinas y medio, arrastra para alargar la página. Notarás un nuevo elemento en tu página…

Screen Shot 2018-04-12 at 3.56.23 PM

… este elemento  o pestaña azul indica el final de la página en tu celular y todo lo que se encuentre hacia de babajo de ella lo podrás acceder deslizando tu dedo en el celular para subir la página. Ahora desliza el restante del “Repeat Grid” y encontrarás la quinta foto.

Screen Shot 2018-04-12 at 3.59.26 PM

¿Qué te pareció el taller de hoy? Si te agrada lo que lees a diario, déjamelo saber en un comentario y comparte lo aprendido con tus amistades y tus diseños. Por hoy dejemos hasta aquí lo aprendido. Continúa tu práctica en el Diseño de Interfaces de Usuarios “UI Design“. En el próximo post, le daremos cariño a esta página con elementos iOS.

Screen Shot 2018-04-12 at 4.08.44 PM

¡Hasta el próximo post!

¡Tesoros escondidos!

Screen Shot 2018-03-21 at 2.46.19 PM

Tan pronto inicias Adobe XD te encuentras con una ventana de bienvenida que te muestra, en la parte superior, plantillas o “Templates” de los tamaños más comunes hoy día si vas a diseñar para iPhone, iPad o página web. Adicional a eso puedes encontrar un ícono para crear tamaños libre o “custom“. Hoy día muchos programas de Adobe traen una pequeña sección la cual te enseña cómo usar la aplicación. Adobe XD contiene en su ventana de bienvenida, en la parte inferior izquierda, una sección en la cual cuando seleccionas, se abre un proyecto, con instrucciones detalladas básicas de cómo usar la aplicación.

Screen Shot 2018-03-21 at 2.53.55 PM

Una vez realizas lo que te pide hacer cada paso, al final tienes un entendimiento básico del programa. Es en este momento que haces el siguiente comentario: Ahhhhhhhhhh!, Ohhhhhhhh! que gufia’o!

Luego en la parte central inferior de la ventana de bienvenida o el “welcome screen“, encuentras vínculos o “links” que te llevan a una página web en Adobe.com donde puedes bajar, gratis!, a tu computadora, todos los elementos que se usan hoy día en las interfaces para el usuario o mejor conocido como UI (User interface).

Screen Shot 2018-03-21 at 3.01.10 PM

Si ves tu celular, sea Androide, sea Apple, sea lo que sea vas a notar iconos de wifi, señal, volumen, bocinas, botones, etc etc. Pues todos esos iconos los puedes usar en tus maquetas, pero mucho ojo, recuerda que puedes usar estos iconos de guía para tus maquetas pero siempre, siempre, siempre debes de crear tus propios iconos, no te quieras encontrar con una sorpresa al final del camino; que no te aprueben la aplicación y tengas que regresar a la mesa de dibujo. Siempre lee las letras chiquitas!

Screen Shot 2018-03-21 at 3.28.34 PM

Justo al lado de los “UI Kits” puedes encontrar una sección que te brinda más información de ayuda, como por ejemplo: ¿Qué hay de nuevo en la más reciente versión de Adobe XD?, Tutoriales directos desde Adobe.com, etc etc.

Screen Shot 2018-03-21 at 3.40.48 PM

Un ejemplo de algo nuevo que trae esta versión de Adobe XD es que si te gusta diseñar en Photoshop y tus modelos ya están creados como .PSD; con Adobe XD ahora puedes abrir tus documentos de Photoshop y continuar trabajando en XD.

Screen Shot 2018-03-21 at 3.42.21 PM

Abre documentos de Photoshop y Sketch directamente en Adobe XD.

Finalmente la ventana de bienvenida en la parte derecha te muestra un listado de los documentos más recientes con los que has trabajado. “Notaste todos los tesoros escondidos que trae una simple ventana al comienzo de una aplicación“. La próxima vez que abras una aplicación, detente y observa que cosas te ofrece, antes de comenzar a trabajar en ella. En el próximo “post” hablarmos de los “artboard“.

¡Pendientes!

Nuevo gusano

img_5845

Imagine capturada en pantalla.

Un nuevo gusano fue encontrado hoy en iOS 11, el cual le permite a los usuarios maliciosos, enviarte en un mensaje de texto un carácter específico, el cual te rompe o te “hanguea” el iPhone y bloquea el acceso a la aplicación de iMessage, WhatsApp, Facebook Messenger, Outlook para iOS y Gmail. No solo te bloquea esas aplicaciones en tu celular si no que el mismo fue probado en la versión Messages de la Mac y Safari. El gusano es un texto en un lenguaje desconocido y si lo recibes el mismo cierra la aplicación. iMessages no volverá abrir por más que lo intentes. Muchos usuarios dicen poder desbloquear la aplicación si otro amigo te envía un texto, recibes el texto y tratas de borrar la conversación desconocida del gusano. Otros usuarios dicen que el gusano no afecta a Skype y Telegram. En la cuenta de Twitter de Tom Warren se explica el gusano y se dice que Apple sabía de este gusano hace tres días atrás y están trabajando fuerte para remediarlo. Este tipo de gusano ha afectado a la aplicación de iMessage en el pasado, primera ves en el 2015 y luego en el 2016. Ahora Apple trabaja para resolver este nuevo gusano. En lo que se resuelve este problema, si reciben un texto como este, no lo abran, háganle un “forcé quite” a la aplicación y borren el mensaje. De recibir el mensaje, pidanle a un amigo que les envíe un nuevo mensaje a ver si logran tener acceso y borren el gusano. Si intentas borrar la aplicación, a mi entender, no lo hagas por que iMessage es una de las aplicaciones básicas que no puedes borra de tu celular. A mi entender el gusano puede afectar hasta los celulares Androides, debido a que la aplicación WhatsApp, FB Messenger y Gmail son universales en esos artefactos también.

Screen Shot 2018-02-15 at 1.45.56 PM

Esperamos tener contestación de Apple pronto y un nuevo update o parcho al iOS en los próximos días y quien sabe si horas.

img_5846

Pantalla capturada iPhone 6.

Papa caliente!

Ayer como a eso de las 6:30p.m. comencé a recibir unas notificaciones, en mi celular, de parte de CNN. Las mismas comenzaron a ser constantes, una detras de la otra! 🤔 Por más que las apagaba o les daba ignore, seguían apareciendo. Pensé “será mi celular?”

Lo apagué a ver que pasaba y seguían entrando las notificaciones. Entonces me di cuenta de que no era normal y algo raro estaba pasando. Le pregunte a mi hijo si el estaba recibiendo las mismas notificaciones y me dijo: “Yo no uso la aplicación de News”, 🤔 entonces claramente es un “bug” de Apple en su aplicación News. Lo cómico del caso era que la notificación empujada o “pushed notification” era el seguimiento a una noticia que sucedió hace una semana atrás cuando en Hawaii hubo una alerta por error de un ataque con misiles nucleares!😳 Luego de ver qué pasó?, resultó ser que la persona que empujó la alerta se equivocó y pues dijo “mala mia“! Pero ayer CNN reportó que la persona que hizo por error la notificación de ataque, fue despedido de su puesto.

Que ironías, suspendido por un error involuntario! 🤔A ver quién botan ahora en Apple o en CNN por las notificaciones sin cesar a nuestros celulares? Debemos recordar algo importante, las computadoras también cometen errores, por qué? por que son los humanos los que las programan! Espero no boten a nadie; simplemente encuentren el error y lo reparen! Nadie es perfecto!

Si deseas saber más sobre la noticia de Hawaii, visita el siguiente link en CNN News “¡Dición!

Aplicaciones del día

Hoy te tengo dos aplicaciones para usar en tu diario vivir. Una es solo para desahogo y la otra es para los que les gusta hacer cálculos manuales de matemática pero no son tan fuertes en la materia. La primera se llama “Send to Nowhere” y la segunda “MyScriptCalculator2“.

img_0938

Send to Nowhere lo que hace es que simplemente escribes lo que deseas expresar o como dicen por ahí, “sacártelo de adentro” y en ves de que alguien lea lo que escribiste, nadie lo leerá! Es una aplicación que no sirve pero que si sirve al mismo tiempo! Tan pronto abres la aplicación esto es lo que ves:

img_0941

Luego escribes lo que deseas escribir…

img_0939

Luego presionas send y ya!

img_0940

Ahora la otra aplicación es otra cosa, se llama “MyScriptCalculator2“. Con la misma puedes escribir en la pantalla de tu iPad o tu iPhone, usando tu dedo o tu Apple Pencil la ecuación que deseas calcular y la aplicación reconoce tu manuscrito y te hace el calculo como por arte de magia. Puedes calcular, editar, resolver, extender, mezclar en fin todo lo que necesites calcular para obtener el resultado correcto. Visita MyScript.com y te sorprenderás! La aplicación cuesta $2.99 en el Appstore y se ganó el AppyAwards en el 2016 y otros más en años anteriores. Si tienes un iPad y te gusta escribir y calcular, esta aplicación es para ti!

Screen Shot 2018-01-26 at 2.07.22 PM.png

 

iLupa

Hoy te tengo un truquito el cual puedes hacer con tu celular!

Si eres medio segatón, como yo, y se te hace difícil leer ciertas letras pequeñas de algunos productos o etiquetas, te tengo un pequeño y sencillo truco. Solamente usas tu celular con la aplicación de la cámara y listo! Puedes hacer zoom in y zoom out a tu gusto y magnificas lo que deseas leer. Observa el video para que te lleves este truquito en el weekend y lo compartas con tus amistades.

¡’Dición!

Tu iPhone sabe donde estabas!

Sabías que si en algún momento necesitas saber dónde estabas o estubo tu hijo, tu esposo(a) o llevar algún tipo de registro de los lugares que visitas o para tu defensa de alguna acusación, tu iPhone guarda un record de los lugares que has visitado. Le podemos decir “el chota”. Aunque puedes apagar esta cualidad para que no te chotee, si por ejemplo eres un guardia incubierto y no deseas que registre el cuartel de policia en el que trabajas, te recomiendo que no apagues esta función por que afectarías el funcionamiento de ciertas aplicaciones.

iStock-622989300

Para encontrar dónde se encuentra esta utilidad acude a los Settings > Privacy > Location Services > System Services > Significant Locations. Antes de entrar a esta última sección el celular te pide autentificación, se con un password, touch ID o Face ID, pero una vez dentro de Significant Locations puedes ver un listado de los lugares visitados y hasta el año. En este lugar puedes apagar el botón superior para que el iPhone deje de grabar en su registro los lugares que visitas. Tambien puedes entrar en cada visita y ver un mapa del lugar visitado y el nombre del lugar o área visitada. Tambien puedes seguir entrando en el listado y ver la fecha de la visita, el día, y si sigues entrando más profundo en el listado puedes ver la hora que llegaste al lugar y salida. Si hay un lugar específico que no deseas sea grabado puedes seleccionar el botón superior derecho que dice edit y eliminar la entrada.

Ahora bien para la defensa de muchos, hay lugares que se graban en el listado pero no es por que te bajaste en el lugar y entraste al comercio, también se graban lugares que meramente estas en un pequeño tapón frente, digamos a una funeraria, y el GPS del celular captó el nombre del lugar y pensó que estabas en la funeraria o simplemente pasas siempre frente a esa funeraria cada vez que vas a tu trabajo. Si no deseas que tu esposa o esposo crean que estabas en esa funeraria, ya sabes como borrar la entrada.

iStock-615731362

Aunque esta utilidad la puedes apagar y volverlo a encender, puedes alterar ciertas funciones importántes del celular, como por ejemplo las funciones de la aplicación de Maps  o Google Maps, las cuales te ayudan a correr por las calles para evitar transito pesado. De todas formas toda esta información te puede asustar o te puede ser útil para llevar algún registro. Todo depende de ti si deseas apagar o seguir usando el registro. Ve a tus settings y te sorprenderás o quién sabe si te asustas y borras ciertos lugares que te puedan delatar!

“Dición!