[MUSIC] Ok, 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 prototipe, e inmediatamente ahora me dice, qué tipo de prototipo, 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 ese dispositivo es el smartphone y toda esta área blanca podemos dibujar. En la parte izquierda tenemos todos los elementos 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. Lo primero que tenemos en nuestra maquetación que acabamos de hacer, es una ventana de login, y tenemos la pantalla de bienvenida. Bien, lo primero que observamos en nuestra maquetación es que tenemos como fondo una imagen. 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 color, 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 pantalla, todas nuestras screens que creemos. Y en la parte de hasta abajo, donde dice outline, ahà estarán, si pudiéramos asimilar ésto con Photoshop, pues 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 vamos a agregarle un poquito de transparencia para que esto se vea con este efecto. Este efecto que la verdad es muy común you encontrarnos con él, y la idea es como quitarle 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, crontol 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à podremos escoger, 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 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. Nada más lo acomodamos, lo alineamos bien para que esto se vea bien, y podemos colocar, you 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. Ok. Seguramente esto te lo vas a topar en algún momento, listo. Y es que es un poco complicado determinar exactamente dónde está el texto, entonces vamos a quitar ese. Eso que dice button, y vamos a poner acceso. Listo. Tal vez serÃa bueno colocarlo con mayúsculas. [SOUND] Con mayúsculas, acceso. Listo, asà se ve mejor. Voy a colocarle nada más el tÃtulo de la aplicación. Puedo aquà en basic buscar un texto, un texto que diga mi aplicación. Muy bien. Mi aplicación móvil, lo centramos por aquÃ, lo acomodamos, y también a este 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. Como observas puedo manipular todas las propiedades de los textos. [SOUND] Perfecto, you se va viendo mejor esto. Mi Aplicación Móvil. Bien, esta será nuestra pantalla de bienvenida. Vamos a guardar nuestro proyecto. En maquetación, podemos guardar, maqueta. 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 a login. 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. Ahora los voy a correr un poco más hacia arriba. Y ahora vamos a colocar nuestros dos inputs. Nuestros dos inputs serán unos inputs de Material Design. Entonces voy a colocar este por aquÃ, este, que también es un poco complicado poder seleccionar el texto que queremos editar. La idea es que ese floating-label no aparezca, aquà está. Y vamos a ponerle e-mail o usuario. E-mail o usuario. Y ahora vamos a colocar otro, que este va a ser la contraseña. Este debe decir Contraseña. Y por último, bueno aún no hemos terminado, vamos a colocar nuestro botón, un botón animado en la parte inferior, que es el footer, asÃ. Y este botón debe decir Log in. Perfecto. Nos falta Olvidé mi contraseña, nos falta la flechita de atrás y por último, el texto de Sing 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 esa flechita, le vamos a poner el 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, queda mejor más intenso, podemos bajar ésto. Y por último, en el mismo tono por acá. 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 me ve muy bien esto. Ahora, vamos con el login, vamos a simular el login. Y también. Aquà está nuestro botón, nuestro registro, nuestros campos, input, voy a poner Anahà Salgado y mi contraseña. Y por último, el botón de log in, 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 siete 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, 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 Ancode. Nos vemos luego. [MUSIC]
