[AUDIO_EN_BLANCO] [AUDIO_EN_BLANCO] Estamos en nuestro último módulo de este curso de fundamentos de Android. Hemos aprendido realmente todos los fundamentos que necesitas tener para poder desarrollar aplicaciones móviles. El último fundamento, que es muy importante es respecto a la maquetación de tus apps. Aquà vamos a aprender desde cómo maquetar una app a papel y lápiz y posteriormente pasar esto a un sistema, a un software en la computadora. Lo primero para el login pues, tendremos una pantalla, únicamente tendremos dos pantallas, okey, solo maquetaremos dos pantallas. Tendremos una pantalla donde el fondo pues puede ser una imagen, de hecho vamos a meter una imagen de fondo y por aquà vamos a colocar otra imagen que esta imagen será nuestro logotipo okey. Entonces esta será la pantalla 1, la pantalla 1, la cual inmediatamente que se abre la aplicación, esto es lo que ve el usuario, ve la pantalla de la app y ve el logotipo y además verá un botón que diga acceso, okey. Acceso es lo que nos gustarÃa que vieran. Bien, ese botón de acceso lo que hará será activar precisamente la pantalla de login. Tú podrÃas tener pues varios colores si es que asà lo quieres, de hecho es muy recomendable trabajar con varios colores en la maquetación y bueno pasando de la pantalla 1 a la pantalla 2. En esta pantalla 2 es en donde precisamente se requerirá el acceso. Pues, lo primero que vamos a visualizar es que tendrá una pequeña, que será un poquito transparente, un app bar que es muy común hoy en dÃa en material design, un app bar que es como transparente, coloco esta lÃnea punteada únicamente para indicar que eso es un app bar, y bueno si estoy yendo del acceso a esta pantalla que es de login, esto serÃa como la pantalla de bienvenida, de bienvenida a la aplicación. Si estoy yendo a login pues tendrÃa, deberÃa tener una flechita, como una flecha que me permita regresar a la pantalla de bienvenida, okey. Esta flecha hará el flujo hacia acá. Lo que vamos a mostrar aquÃ, pues continuando con este flujo es que vamos a mostrar nuestro logotipo, una imagen, logotipo, okey. Por supuesto en el fondo, en este fondo que tenemos por acá, tanto en azul todo esto que tenemos acá, esto será una imagen y también el fondo que vamos a tener por acá que involucra incluso el app bar, también todo esto será una imagen. Entonces después del logotipo en nuestra pantalla vamos a solicitar el usuario y la contraseña, okey. Un input en material design simplemente se va a denotar por una lÃnea, una rayita y podemos colocar, podemos solicitarle el email, email o usuario. Okey. Y también podemos solicitar más abajo la contraseña. Sabemos que en material design cuando damos touch en cualquiera de estos elementos, el texto aparece flotando y entonces nos deja el espacio para escribir, okey. Entonces eso es muy bueno. En la parte inferior vamos a colocar un botón, toda esta zona que va a estar aquÃ, toda esta zona que podrÃa denotarse como el footer, de el footer de la app, todo esto va a ser un botón que va a tener la indicación de logearnos, de ejecutar el login, okey. Este botón pues va a tener otro color, vamos a colocarlo con un color distinto a lo que estamos manejando para que se note que estamos, que esto es un botón de acción, okey, es un botón de acción. Perfecto. you tenemos ahà nuestro botón. Adicional, serÃa bueno que de acuerdo al flujo de la aplicación, si no tienes un usuario y si tampoco tienes una contraseña pues serÃa bueno que pudieras registrarte, okey. Vamos a dejar nada más hasta aquà y vamos a colocar un enlace que se llame sign up o también podrÃamos llamarlo en español registro, registro y aquà a lo mejor ponemos lo vamos a dejar asÃ, okey, registro o sign up dependiendo de cómo estes manejando tu aplicación. AquÃ, ¿qué pasarÃa si no, podremos tener un caso, qué pasarÃa si no tengo mi contraseña o si no la recuerdo? Al mismo tiempo puedo definir un enlace que no serÃa un botón en este caso, para tener como seguir en el flujo y que el único botón de acción sea el login, podrÃa decir que esto de aquà sea un enlace que se llame olvidé mi contraseña. Okey. Entonces esto va a ser un enlace que lo voy a subrayar tantito con el color azul, okey, esto será un enlace que me dirá olvidé mi contraseña. Y listo, hasta el momento tengo 2 pantallas que me van a dar como resultado una ventana de login, una aplicación simplemente para logearme. Okey. Vamos a pasar esto que tenemos en papel a un software, para que esto quede mejor documentado. Bien, you hemos construido nuestra interfaz gráfica en una hoja de papel con un par de plumones, ahora lo siguiente es llevar esto a la computadora para tenerlo pues en una mejor presentación. Hay infinidad de herramientas online que puedes utilizar, de hecho, pues yo te voy a recomendar este dÃa 3. En internet puedes encontrar muchÃsimas que son gratuitas y otras que son parcialmente gratuitas. La primera es Balsamic, Balsamic es parcialmente gratuita y es un sistema que pues es compatible con cualquier sistema operativo, Windows, Linux o Mac, el que tú quieras. Y además es muy sencilla de utilizar, simplemente arrastras y sueltas elementos y voilá. Tienes you tu interfaz construida, tu maqueta construida. La segunda es una plataforma online, una plataforma que además es completamente gratuita, la dirección es ninjamock.com. Ninjamock.com es un sitio donde puedes construir literal tus, puedes maquetar cualquier tipo de aplicación, puede ser web, puede ser móvil, puede ser para Android, para iOS, para lo que quieras y lo mejor, es gratuita. Y la última la cual es la que vamos a utilizar a continuación, es una plataforma que para mi es mi favorita, su nombre es just in mind, y es mi favorita porque just in mind ha adaptado o ha incluido recientemente todos los elementos de material design y de la misma forma que Balsamic, es muy sencillo de utilizar, simplemente arrastras y sueltas y además pues los elementos you vienen construidos, muchos vienen you coloreados, vienen incluso puedes generar simulaciones, puedes generar animaciones y realmente just in mind te acerca mucho a la realidad a cómo se puede ver tu aplicación móvil. Vamos a construir esto con just in mind. Okey, you tengo abierto just in mind en mi computadora. Lo primero que voy a hacer es crear un nuevo prototipo, le voy a dar aquà en create a new prototype, y inmediatamente ahora me dice qué tipo de prototipo o qué tipo de maquetación quiero crear. Bien, puedo seleccionar uno web, o puedo seleccionar uno para iPhone, para iPhone plus, para iPad y la que nosotros estamos buscando es para Android, al mismo tiempo puedo seleccionar para una tablet, también una tablet para Android o algo que sea customizado o personalizado para ti. Vamos a seleccionar Android, un dispositivo Android un smartphone, le voy a dar next. Lo siguiente que nos pide es la resolución predeterminada. La resolución predeterminada o lo que considera Android como normal, una resolución normal o medium es 360 pixeles por 640, asà que vamos a basarnos en ella para construir esto. Bien, vamos a darle finish. you tenemos listo aquà nuestro prototipo. Como observamos nos ha colocado un pequeño marco donde nos indica que, pues es el dispositivo, es el smartphone y toda esta área blanca podemos dibujar. En la parte izquierda tenemos todos los elementos para un, que podemos incluir en una interfaz Android, y como ves you vienen incluidos los elementos de material design. Vienen barras, vienen botones, barras de progreso, calendarios, diálogos, etcétera, etcétera. Lo primero que tenemos en nuestra maquetación que acabamos de hacer es una ventana de login y tenemos la bienvenida, la pantalla de bienvenida. Bien, lo primero que observamos en nuestra maquetación es que tenemos como fondo una imagen, okey, esa imagen yo you he seleccionado una y le he llamado back city. Es simplemente una imagen que you está recortada en la resolución que necesito y tiene un paisaje, un fondo muy bonito sobre una ciudad que está en el océano. Bien, voy a acomodar esto para que encuadre perfectamente bien aquÃ. AsÃ. Listo. Ahora si yo coloco esto a full a lo mejor mis elementos van a perderse un poco. Voy a colocarle un poco, voy a quitarle más bien un poco de opacidad y del lado derecho vamos a tener nuestra ventana de propiedades. En la parte superior estarán todas nuestras pantallas, todas nuestras screens que creemos. Y en la parte de hasta abajo donde dice outline ahà estarán, si pudiéramos asimilar esto con Photoshop pues serÃa como tu diagrama o serÃa más bien como tus capas, las capas que vas manejando cuando diseñas imágenes. Aquà se van a estar registrando todos los elementos que vamos sobreponiendo, y en ese orden de capas. Entonces selecciono la imagen y vamos a las propiedades en background y la transparencia vamos a agregarle un poquito de transparencia para que esto se vea como con este efecto. Okey. Este efecto que la verdad es muy común you encontrarnos con él y la idea es como quitar la intensidad a la imagen, bajárselo para que se vea asÃ. Perfecto. Lo siguiente es colocar nuestro logotipo. Yo you tengo un logotipo por aquà creado control C, control V. Bien. Voy a acomodar nada más mi logotipo por aquÃ, de acuerdo al mock up debe estar centrado y como por aquÃ. Bien. Es un logotipo muy sencillo, puede decir por ahà el nombre de tu negocio o de lo que quieras manejar. Perfecto. Lo siguiente que tenemos en nuestro mock up que hicimos en papel es un botón de acceso. Aquà podrÃamos coger incluso un botón animado. Yo aquà tengo uno simplemente lo arrastro y lo suelto. Perfecto. Vamos a acomodar esto un poquito por aquÃ. Este botón es un botón, un botón dark animado, voy a escoger otro, este que está aquà que también es animado, es un botón light, este color me gusta más. Lo, nada más lo acomodamos, lo alineamos bien para que esto se vea bien, y podemos colocar acá está el botón. Vamos a cambiarle el nombre a ese botón o el contenido, damos doble clic en el botón, y vamos a acomodar y podemos colocar que diga acceso. Acceso [AUDIO_EN_BLANCO] [AUDIO_EN_BLANCO] okey. Seguramente esto te vas a topar en algún momento, listo, y es que es un poco complicado determinar exactamente en dónde es el texto, entonces vamos a quitar eso que dice botón y vamos a poner acceso. Acceso, listo, acceso. Tal vez sea bueno colocarlo con mayúsculas. [AUDIO_EN_BLANCO] Con mayúsculas, acceso. Listo. Asà se ve mejor. Voy a colocarle nada más el tÃtulo de aplicación, puedo aquà en basic buscar un texto, un texto que diga mi aplicación, mi aplicación móvil. Mi aplicación móvil, lo centramos por aquÃ, lo acomodamos, y también a ese texto le puedo cambiar la transparencia, el background, puedo definir cómo está el texto, que esté centrado, además puedo decir que sea un texto regular por ejemplo. vamos a ponerle un color blanco, y además vamos a aumentar el tamaño de ese texto. Que como observas puedo manipular todas las propiedades de estos, de los textos, los vamos a dejar asÃ. Perfecto. you se va viendo mejor esto. Mi aplicación móvil. Bien, esta será nuestra pantalla de bienvenida. Vamos a guardar nuestro proyecto. Okey. Aquà en maquetación podemos guardar maqueta android. Listo. Bien, si queremos añadir una nueva pantalla, vamos a darle al botón de más y vamos a añadir el nombre de la pantalla. Esta pantalla se va a llamar login. Listo. you tenemos esta y esta. La idea es que el botón de acceso vaya inmediatamente al login, okey. Entonces lo que haremos será linkear precisamente eso, entonces estamos diseñando nuestro login, nuestro login debe permanecer también con estos elementos, mi aplicación. los voy a, ahora los voy a recorrer un poco más hacia arriba, [AUDIO_EN_BLANCO] y ahora vamos a colocar nuestros 2 inputs, nuestros 2 inputs serán unos inputs de material design, okey. Entonces voy a colocar este por aquÃ, [AUDIO_EN_BLANCO] este que también es un poco complicado poder seleccionar el texto que queremos editar. La idea es que esa floating label no aparezca, okey, aquà está. Y vamos a ponerle email o usuario. Bien, email o usuario. Email o usuario. Listo. Bien y ahora vamos a colocar otro que este va a ser la contraseña. Este debe decir contraseña. Bien, la contraseña. Y por último, bueno, aún no hemos terminado, vamos a colocar nuestro botón nuestro botón un botón animado en la parte inferior que es el footer, asÃ, y este botón debe decir login. Okey, login. Perfecto. Nos falta olvidé mi contraseña, nos falta la flechita de atrás y por último el texto de sign up. Vamos a colocar la flechita de atrás. Casi en la última parte tenemos android icons. Vamos a ponerlo por aquÃ. Android icons. Y también podemos cambiarle el color a esas letritas, le vamos a poner en color blanco. Vamos a poner el texto de registro, lo vamos a poner por aquÃ, registro que recuerda esto es un link, no será un botón como tal, se comportará como un botón pero no es un botón es un enlace, lo podemos poner en el 12. Debe ser un poquito más pequeño, registro y a lo mejor más intenso, okey, podemos bajar esto. Y por último en el mismo tono por acá [AUDIO_EN_BLANCO] ol. Y con esto hemos terminado you nuestra maqueta. Se ve muy bien. Podemos simular esto. Estoy en la pantalla de bienvenida y puedo darle clic en el botón de simulate Y lo que nos abre es algo asÃ. Como observas el botón se ve muy bien, tiene los efectos necesarios, tiene por aquà nuestro tÃtulo, nuestro logotipo, la imagen, creo que se ve muy bien esto. Ahora vamos con el login, podemos simular el login y también aquà está nuestro botón, nuestro registro, nuestros campos, input, puedo poner Anahà Salgado, y mi contraseña, y por último el botón de login, que también tiene un efecto. Bien, con esto hemos terminado de maquetar nuestro sitio. Espero que te haya gustado este módulo y espero mucho que te haya gustado todo este curso. Hemos aprendido mucho a través de estos 7 módulos. Desarrollamos este curso para que tengas todos los fundamentos que todo desarrollador de aplicaciones necesita. Es muy importante que hayas seguido al pie de la letra todos nuestros cursos. Es muy importante que hayas seguido secuencialmente todos nuestros videos, no te nos adelantes demasiado. Viene el siguiente curso en donde desarrollaremos nuestro proyecto de Android. TodavÃa tenemos un curso más para ti donde aprenderemos mucho más sobre Android. Mi nombre es Anahà Salgado y me encuentras en Twitter como Anncode. Nos vemos luego. [AUDIO EN BLANCO] [AUDIO EN BLANCO]
