1 00:00:05,580 --> 00:00:10,490 Comencemos a diseñar esta aplicación lo primero que veamos acá es una imagen. 2 00:00:10,710 --> 00:00:13,230 Esa imagen no tiene nada de complicado. 3 00:00:13,260 --> 00:00:19,110 Hagamos el Visual Studio nuevamente y dentro de nuestro escafoides yo perfectamente puedo colocar una 4 00:00:19,110 --> 00:00:24,690 imagen pero obviamente voy a ocupar más widgets que en forma de columna. 5 00:00:24,690 --> 00:00:29,480 Entonces lo ideal o lo que me pareciera a mí que tiene sentido porque al final no lo vamos a ver como 6 00:00:29,520 --> 00:00:35,380 columnas pero pareciera que puede ser una columna una columna Enter the Children. 7 00:00:35,750 --> 00:00:39,270 Y aquí vienen todos chillo en posición vertical. 8 00:00:39,270 --> 00:00:45,220 Lo primero sería una imagen entonces y Mazz ustedes pueden usar un Mac perfectamente. 9 00:00:45,330 --> 00:00:51,610 Yo voy a seleccionar aquí una imagen y Mazz from Network o mejor imagen. 10 00:00:52,010 --> 00:00:59,460 Y bien el Werfel el R.L que yo voy a utilizar yo tengo acá en el material adjunto tengo esas búsquedas. 11 00:00:59,460 --> 00:01:01,860 Yo simplemente busqué Lansky y Mazz en Google. 12 00:01:01,890 --> 00:01:04,340 Voy a agarrar la primera que tengo acá está me parece bonita. 13 00:01:04,350 --> 00:01:06,750 No es muy grande pero podríamos ser cualquiera. 14 00:01:06,750 --> 00:01:09,190 Click derecho copiar y madres. 15 00:01:09,210 --> 00:01:11,510 Asegúrese de que ustedes pueden ver esa imagen. 16 00:01:11,520 --> 00:01:13,190 O sea que no los lleva a otra dirección. 17 00:01:13,560 --> 00:01:15,170 Asegúrese que la puedan ver. 18 00:01:15,300 --> 00:01:21,600 Y con esta imagen yo la voy a pegar en el R.L de la misma así como viene grabo los cambios y la imagen 19 00:01:21,600 --> 00:01:24,530 debería de parecer acá vamos bien. 20 00:01:24,750 --> 00:01:25,770 Sigamos. 21 00:01:25,770 --> 00:01:31,010 Ahora lo que sigue es este contenedor de acá como lo habíamos mencionado en la otra pantalla. 22 00:01:31,020 --> 00:01:38,970 Esto tiene pinta de ser un Rou que dentro del rock aquí adentro tenemos como esté este contenedor rojo. 23 00:01:38,980 --> 00:01:46,650 Es otra columna Dios mío no sé qué pasó acá tiene otra columna y dentro de esa columna hay dos textos. 24 00:01:46,650 --> 00:01:52,770 Luego hay otro Willett que es una estrella y otro Willett que es el texto un ícono con el ícono de estrella. 25 00:01:52,770 --> 00:01:54,460 Entonces vamos a implementar esto. 26 00:01:54,460 --> 00:02:00,990 Aquí también regresamos al piso al estudio Coupet justo abajo de la imagen yo pensionar una coma y ahora 27 00:02:00,990 --> 00:02:02,790 definamos ese widget. 28 00:02:02,790 --> 00:02:07,950 Ustedes se acuerdan que yo a lo largo del curso he estado generando nuevos métodos como por ejemplo 29 00:02:07,950 --> 00:02:14,590 construir Rou algo así le podría poner pero este lo voy a dejar directamente en el Chile. 30 00:02:14,640 --> 00:02:15,030 Por qué. 31 00:02:15,030 --> 00:02:18,960 Porque quiero que ustedes noten qué pasaría si yo no lo hago de esa manera. 32 00:02:19,080 --> 00:02:20,570 Entonces comencemos. 33 00:02:20,700 --> 00:02:23,920 Sería un paréntesis Enter. 34 00:02:23,960 --> 00:02:30,550 El robot tiene su Children y acuérdense que los robots sirven para ordenar elementos en forma horizontal. 35 00:02:30,560 --> 00:02:37,490 Ok entonces comenzaríamos con el primer elemento que sería una columna en la cual contiene dos textos. 36 00:02:37,510 --> 00:02:42,090 Ok espero que me sigan acá si no fuera una columna y sólo fueron texto. 37 00:02:42,090 --> 00:02:50,130 No haría falta la columna pero necesito un Colm para poder alineã elementos Children para poder alinear 38 00:02:50,130 --> 00:02:55,020 los elementos de forma uno abajo del otro en forma vertical siempre dentro del robot. 39 00:02:55,320 --> 00:03:06,980 Entonces podríamos tener aquí un texto que diga lago lago con un puente ok lago con un puente Koma se 40 00:03:07,040 --> 00:03:11,000 crean otro y aquí abajo a escribir lo que ustedes quieran. 41 00:03:11,630 --> 00:03:18,020 Un lago que se encuentra en Alemania o ustedes pueden lo que sea y graban los cambios. 42 00:03:18,030 --> 00:03:21,770 Vamos a ver qué tal se ve que lo tenemos bastante pegado aquí al borde. 43 00:03:21,800 --> 00:03:25,520 Y ambos textos son exactamente iguales no tienen diferencia de estilos. 44 00:03:25,610 --> 00:03:28,950 Lo vamos a aplicar pero ahí va tomando forma. 45 00:03:28,950 --> 00:03:35,250 Justo después del widget de columnas justo después de columnas van a poner una coma y recuerden que 46 00:03:35,250 --> 00:03:37,100 aquí estoy dentro del BROU. 47 00:03:37,140 --> 00:03:43,910 Lo ideal aquí hubiera sido separar este widget separarlo en su función independiente para poder controlarlos 48 00:03:43,910 --> 00:03:47,520 de una manera más fácil porque si ustedes notan esto está muy pegado. 49 00:03:47,550 --> 00:03:53,010 Lo que me indicaría que tengo que poner algún PADI algún container algo para separarlo y eso va a ir 50 00:03:53,070 --> 00:03:57,480 añadiéndole lógica y cosas que van a hacer este Whittier un poco más complicado. 51 00:03:57,480 --> 00:04:02,010 Y no es bueno que todos se encuentren directamente en el body a menos que sea bastante simple dicho 52 00:04:02,020 --> 00:04:02,360 body. 53 00:04:02,580 --> 00:04:05,030 Pero nuestro Body empieza a crecer en complejidad. 54 00:04:05,070 --> 00:04:10,470 Y bueno ustedes saben mejor que nadie qué tan difícil será para ustedes darle mantenimiento a este código 55 00:04:10,470 --> 00:04:11,490 que estamos escribiendo. 56 00:04:12,030 --> 00:04:12,360 Ok. 57 00:04:12,420 --> 00:04:16,590 Justo después de la columna vendría nuestro ícono de la estrella. 58 00:04:16,590 --> 00:04:22,990 Entonces aquí lo voy a poner con paréntesis de icons punto. 59 00:04:23,010 --> 00:04:31,680 Está ahí está la estrella goma de su color su color de color X.Org ese color rojo. 60 00:04:31,680 --> 00:04:33,970 Voy a grabar los cambios si la estrella aparece al lado. 61 00:04:33,990 --> 00:04:37,170 Perfecto para eso parece que está un poquito pequeña. 62 00:04:37,170 --> 00:04:43,710 Podríamos ponerle también el mismo propiedad del iPod puedo poner el 6 y lo dejamos de 30 puntos cero 63 00:04:43,730 --> 00:04:45,690 píxeles y grabo los cambios. 64 00:04:45,690 --> 00:04:48,710 La estrella de Aries es un poco más grande y perfecto la voy a dejar ahí. 65 00:04:49,260 --> 00:04:54,120 Si miramos la documentación que les pasé luego viene otro texto con el número 41. 66 00:04:54,420 --> 00:04:58,890 Entonces aquí vendría una coma porque estamos dentro de la lista que hace referencia al robot. 67 00:04:58,890 --> 00:05:02,010 Estamos acá por eso no es un punto y coma Enter. 68 00:05:02,080 --> 00:05:10,640 Aquí vendría un texto que con el valor de 41 41 tenga su estilo y podríamos hacer la fuente un poquito 69 00:05:10,640 --> 00:05:20,550 más grande aquí sería con un Textile podremos poner Gil Fosis de unos 20 .0 píxeles y grabo los cambios. 70 00:05:20,660 --> 00:05:24,260 Ok ya tenemos hoy aquí pasan varias cosas. 71 00:05:24,260 --> 00:05:30,920 1 El texto no está alineado a la derecha porque si nosotros lo vemos como parece acá hay una separación. 72 00:05:30,980 --> 00:05:34,860 Ambos textos están alineados a la izquierda perdón y luego que otra separación. 73 00:05:34,850 --> 00:05:38,450 Esto está al final entonces tenemos que hacer trabajo acá. 74 00:05:38,630 --> 00:05:39,960 Regresemos a la aplicación. 75 00:05:40,040 --> 00:05:42,250 Cómo podemos arreglar esto. 76 00:05:42,470 --> 00:05:43,700 Todo el rollo. 77 00:05:44,130 --> 00:05:46,180 Bueno empecemos con los textos en los textos. 78 00:05:46,190 --> 00:05:49,950 Vamos a cambiarlos aquí arriba del video. 79 00:05:49,970 --> 00:05:54,680 O mejor dicho aquí en el Stiles Willett voy a crear dos propiedades para manejar los estilos de esas 80 00:05:54,680 --> 00:05:58,340 dos cajas de texto por ejemplo final final. 81 00:05:58,490 --> 00:05:59,960 Estilo título. 82 00:05:59,960 --> 00:06:00,780 Va a ser igual. 83 00:06:00,900 --> 00:06:05,120 Tex está en paréntesis que tiene su iPhone 6. 84 00:06:05,150 --> 00:06:09,040 Pongámoslo de unos 20.6 píxeles como un iPhone. 85 00:06:09,060 --> 00:06:13,810 O sea aún el ancho de la Fuente y búsquense Font guais puntos Bolt. 86 00:06:13,880 --> 00:06:17,070 O sea un texto bastante ancho y pone punto y coma. 87 00:06:17,210 --> 00:06:22,680 Clona en la línea o sea una copia de la misma y aquí abajo van a poner estilo. 88 00:06:22,890 --> 00:06:29,330 Subtitulo vamos despacio saca el subtítulo va a ser un poco más pequeño va a ser de unos 18 píxeles 89 00:06:29,960 --> 00:06:31,950 el fondo lo vamos a borrar. 90 00:06:31,950 --> 00:06:36,420 Quiero que sea normal pero voy a ponerle el color de Colors. 91 00:06:36,410 --> 00:06:37,220 Punto. 92 00:06:37,240 --> 00:06:40,740 Gray este que está acá y grabemos los cambios. 93 00:06:40,820 --> 00:06:46,560 Ahora tengo un estilo título y un estilo subtitulo esos estilos se los voy a aplicar a esos dos textos. 94 00:06:46,580 --> 00:06:54,590 Entonces Joma estáel Stein y aquí sería el título Star o el estilo título. 95 00:06:54,590 --> 00:07:00,620 No hace falta desacomoda para finalizar esto lo voy a copiar no voy a pegar aquí abajo y aquí sería 96 00:07:00,710 --> 00:07:07,970 estilo subtitulo espacio grabo los cambios y ya deberían de verse de esa manera o que todavía no se 97 00:07:07,970 --> 00:07:08,540 ve. 98 00:07:08,760 --> 00:07:12,080 Se ve parecido a esto pero todavía hay cosas que no. 99 00:07:12,450 --> 00:07:20,270 Ok entonces vamos a ver ok entonces comencemos alineando el contenido de esta columna todo hacia la 100 00:07:20,270 --> 00:07:22,340 izquierda dentro de la columna. 101 00:07:22,340 --> 00:07:28,870 Recuerden que tenemos el main acceso a la Hemming y el cross Axis alignment en una columna donde todo 102 00:07:28,880 --> 00:07:31,250 se ordena de forma vertical. 103 00:07:31,250 --> 00:07:37,120 Si nosotros queremos alinear sus ítems hacia la izquierda recuerden que esto ya es la posición. 104 00:07:37,520 --> 00:07:45,440 Entonces esto sería el cross Axis al Haymon en una columna el cross es como decir el alignment secundario 105 00:07:45,440 --> 00:07:47,740 que tienen el roll o las columnas. 106 00:07:47,810 --> 00:07:56,210 Recuerden que en un Rou el main Axis es horizontal por lo cual el cross Axis A la Emen sería vertical. 107 00:07:56,210 --> 00:08:02,870 En mi caso sería un Crosa Axis alignment de un cross Axis Hemen Start y grabo los cambios. 108 00:08:02,870 --> 00:08:08,480 Ambos textos deberían expresar alineados de esa manera perfecto va tomando cierta forma. 109 00:08:08,480 --> 00:08:09,000 Sigamos. 110 00:08:08,990 --> 00:08:14,690 Podríamos hacer el texto un poquito más chiquito para que no quede así luego podríamos agregarle el 111 00:08:14,720 --> 00:08:17,060 elipses ustedes ya saben por qué lo hemos utilizado. 112 00:08:17,300 --> 00:08:25,070 Un lago un lago en Alemania podríamos dejarlo así para que se mire mejor que ahí tenemos ya errores 113 00:08:25,130 --> 00:08:27,380 visuales más claros. 114 00:08:27,740 --> 00:08:28,380 Sigamos. 115 00:08:28,400 --> 00:08:31,700 Ahora cómo hago para hacer una separación entre estos dos textos. 116 00:08:31,700 --> 00:08:36,520 Porque si nos fijamos en la imagen había un margen más grande acá hay muchas maneras de hacerlo. 117 00:08:36,530 --> 00:08:42,330 Uno de ellos es agregar un six Box que es bastante utilizado para hacer este tipo de separaciones. 118 00:08:42,350 --> 00:08:45,000 Voy a poner un Jaitt de 7.0. 119 00:08:45,950 --> 00:08:51,260 Si se preguntan cómo es que sé todo esto o sea todos las dimensiones que estoy colocando es porque yo 120 00:08:51,260 --> 00:08:52,700 hice el ejercicio previamente. 121 00:08:52,700 --> 00:08:57,170 Entonces ya lo probé para que ustedes no tengan que batear pero si ustedes no les gusta digamos que 122 00:08:57,170 --> 00:09:01,390 fuera muy poco digamos que empezaron con uno y dicen No todavía queda muy pegado. 123 00:09:01,410 --> 00:09:03,010 Bueno pongamos 5. 124 00:09:03,050 --> 00:09:09,670 Todavía queda muy pegado pongamos 50 o no hay mucha separación entonces pareciera que lo ideal es 7. 125 00:09:09,770 --> 00:09:14,090 La ventaja del otro lado es que lo hace tan rápido que ustedes pueden usarlo para hacer este tipo de 126 00:09:14,090 --> 00:09:14,810 pruebas. 127 00:09:15,320 --> 00:09:15,780 OK. 128 00:09:15,860 --> 00:09:22,070 Lo demás pareciera estar bien pero tenemos un problema con la alineación tenemos varios cosaca empezando 129 00:09:22,070 --> 00:09:24,050 con que todo queda muy pegado. 130 00:09:24,260 --> 00:09:29,720 Entonces este Rog que es el que contiene todos los elementos que están acá lo voy a envolver en una 131 00:09:29,720 --> 00:09:30,590 columna. 132 00:09:30,590 --> 00:09:36,570 Entonces dejo el cursor sobre la palabra ROP control punto o como un punto y lo voy a volver en un container. 133 00:09:36,830 --> 00:09:40,820 Si ustedes no tuvieran ese container entonces sería lo mismo que no volvieran en un widget pero yo voy 134 00:09:40,820 --> 00:09:46,490 a seleccionar un container entonces al agregarlos dentro del container y grabar los cambios van a notar 135 00:09:46,490 --> 00:09:52,010 que no pasa absolutamente nada pero el container está ahí container está envolviendo todos esos elementos 136 00:09:52,400 --> 00:09:56,720 dentro del container puedo poner un Padín para hacer una separación interna. 137 00:09:56,950 --> 00:10:00,620 El padre recibe un eje Insect aquí un geómetra Insect. 138 00:10:00,650 --> 00:10:09,060 Entonces voy a colocar aquí un eje insert será simétrico porque quiero cambiar la posición horizontal 139 00:10:09,060 --> 00:10:12,390 y vertical de maneras iguales entonces horizontal. 140 00:10:12,390 --> 00:10:15,830 Voy a poner una separación de 30 puntos cero píxeles. 141 00:10:15,960 --> 00:10:20,890 Perfecto y en la parte vertical voy a colocar una separación de 20 puntos cero. 142 00:10:20,910 --> 00:10:26,940 Recuerden que ustedes pueden cambiar estos valores como mejor les plazca o como ustedes crean que el 143 00:10:26,940 --> 00:10:27,860 ojo les da. 144 00:10:27,870 --> 00:10:31,110 Aquí sería bastante prueba y error hasta que quede bien. 145 00:10:31,200 --> 00:10:38,490 Ahora yo quiero que el texto esta columna que tengo acá que mis textos abarquen el ancho completo disponible 146 00:10:38,490 --> 00:10:41,150 que tiene este contenedor. 147 00:10:41,340 --> 00:10:48,660 Para eso pueden volver esta columna en otro Willett lo van a buscar y se llama envolver con un widget 148 00:10:48,890 --> 00:10:50,670 y el widget se llama expanded. 149 00:10:50,700 --> 00:10:58,890 Ya lo hemos usado antes expanden guardan cambios este widget expande lo que hace es que dice Ok este 150 00:10:58,950 --> 00:11:04,320 icono y este texto tienen cierta cantidad de pixeles que lo dejan así pero el expandiã dice que tome 151 00:11:04,320 --> 00:11:10,950 todo el espacio que queda todo el espacio posible sin robarle sus dimensiones al texto y al icono. 152 00:11:10,950 --> 00:11:15,720 Si ustedes tuvieran otro Wille de acá entonces el expanded sería un poquito más pequeño pero si ustedes 153 00:11:15,720 --> 00:11:19,390 se fijan esto ya pareciera que pareciera bastante bien. 154 00:11:19,650 --> 00:11:24,600 Recuerden que el contenedor mantiene el Padín y tendremos esta separación así lo voy a dejar de esta 155 00:11:24,600 --> 00:11:29,100 manera y vamos a continuar en la siguiente clase trabajando con nuestro diseño pero hemos hecho varios 156 00:11:29,100 --> 00:11:30,540 avances lo dejamos así. 157 00:11:30,540 --> 00:11:31,440 Continuamos con las siguientes.