1
00:00:00,240 --> 00:00:00,780
Continuemos.

2
00:00:00,830 --> 00:00:03,450
Demos poco de diseño del Lucan Phil al formulario.

3
00:00:03,510 --> 00:00:04,980
Para eso nos vamos a ir a Google.

4
00:00:05,070 --> 00:00:10,380
Vamos a buscar por vuestra app un framework de hojas de estilo HTML5 para todo lo que es el front end.

5
00:00:10,500 --> 00:00:15,660
También maneja JavaScript para cosas, pero solamente le vamos a dar diseño a nuestro formulario.

6
00:00:15,750 --> 00:00:17,130
Entonces nos vamos a la página.

7
00:00:17,220 --> 00:00:18,060
Nos vamos a ir.

8
00:00:18,180 --> 00:00:22,290
Hay que Started Automata está la versión 5.0 Beta 3.

9
00:00:22,500 --> 00:00:24,510
No es la versión todavía oficial, pero no importa.

10
00:00:24,660 --> 00:00:26,340
Get started y acá.

11
00:00:26,430 --> 00:00:30,450
Bueno, vamos a copiar esta hoja de estilo que es remota.

12
00:00:30,570 --> 00:00:35,550
Por lo tanto, hace referencia a un repositorio en la nube donde se guarda el título.

13
00:00:35,580 --> 00:00:40,560
También lo podemos descargar y guardar en nuestro proyecto, pero por ahora vamos a utilizar la forma

14
00:00:40,560 --> 00:00:41,010
remota.

15
00:00:41,220 --> 00:00:41,850
Copiamos.

16
00:00:42,120 --> 00:00:46,710
Es un HTML link con una referencia a la hoja de estilo.

17
00:00:46,930 --> 00:00:48,210
Bien, volvemos al proyecto.

18
00:00:48,900 --> 00:00:53,730
Nos vamos a la lista JSP y arriba en el HTML dentro del Giada.

19
00:00:53,880 --> 00:00:57,390
Acá debajo del título, simplemente lo pegamos.

20
00:00:57,450 --> 00:00:57,960
Nada más.

21
00:00:58,200 --> 00:00:58,440
Listo.

22
00:00:58,440 --> 00:01:01,410
Ya tenemos vostra configurado instalado en el proyecto.

23
00:01:01,500 --> 00:01:04,630
Entonces ahora tenemos que configurar los estilos de formulario.

24
00:01:04,860 --> 00:01:05,440
Lo primero.

25
00:01:05,640 --> 00:01:11,790
Recuerden que cada grupo de campo con el label dentro de un div se fijan para el Yussef N tenemos otro

26
00:01:11,880 --> 00:01:14,460
para el email, para el password, para el país.

27
00:01:14,520 --> 00:01:18,690
En fin, cada uno tiene su propio div principal y acá le vamos a dar un estilo.

28
00:01:18,780 --> 00:01:20,580
Entonces por acá.

29
00:01:21,150 --> 00:01:26,100
Entonces voy a seleccionar con Alt Cheff presionado y voy apretando click en cada día.

30
00:01:26,190 --> 00:01:30,540
Cuando se abre entonces en el Yussef NIMH, acá otro en password se fijan.

31
00:01:30,540 --> 00:01:31,530
Tenemos dos cursores.

32
00:01:32,280 --> 00:01:39,420
Voy a soltar en email tenemos tres cursores, se fijan tres cursores, otro acá en país.

33
00:01:39,990 --> 00:01:44,760
Otro lenguaje de programación, otro roles.

34
00:01:45,770 --> 00:01:53,420
Y en cada dí principal, después, un poco más abajo en idiomas se fijan multi cursor y en habilitar

35
00:01:54,080 --> 00:01:58,400
entonces en cada grupo de campo habilitar idiomas.

36
00:01:58,520 --> 00:01:59,750
Luego tenemos roles.

37
00:01:59,840 --> 00:02:01,550
Luego tenemos lenguaje.

38
00:02:01,640 --> 00:02:03,230
Luego tenemos país.

39
00:02:03,260 --> 00:02:06,700
Luego tenemos el email password y el usuario o Usenet.

40
00:02:06,950 --> 00:02:10,730
Como estamos con multi cursor un espacio y se abrirá espacio en cada uno.

41
00:02:10,910 --> 00:02:19,510
Vamos a colocar class igual y vamos a colocar la clase row espacio y también le vamos a dar un margen,

42
00:02:19,580 --> 00:02:25,300
pero button hacia abajo para tener una separación entre los campos entre los grupos.

43
00:02:25,540 --> 00:02:31,120
12 MB de margen button guión o signo menos le damos un margen de tres.

44
00:02:31,310 --> 00:02:31,570
Listo.

45
00:02:31,610 --> 00:02:38,090
Ese primer estilo que para dar al conjunto a la agrupación de los input y así lo tenemos automáticamente

46
00:02:38,120 --> 00:02:38,780
para cada uno.

47
00:02:39,050 --> 00:02:39,860
Vamos a subir.

48
00:02:40,430 --> 00:02:42,110
Luego vamos a hacer exactamente lo mismo.

49
00:02:42,140 --> 00:02:46,280
Pero en cada input del tipo text, turalmente, el tipo text.

50
00:02:46,760 --> 00:02:53,000
Entonces vamos a seleccionar acá en Yussef n un clic acá un cursor, otro en password lo mismo.

51
00:02:53,010 --> 00:02:55,640
Recuerden con shift alt y clic.

52
00:02:56,630 --> 00:02:57,860
Le tenemos 12 fija.

53
00:02:59,010 --> 00:03:07,950
Podemos soltar y en e-mail lo mismo al chef y el clic del mouse país no, porque país es una lista y

54
00:03:07,950 --> 00:03:11,790
creo que no tenemos más, no solamente esos dos, esos tres.

55
00:03:12,450 --> 00:03:21,630
Entonces le vamos a dar el estilo con class igual form control form guión, control.

56
00:03:21,960 --> 00:03:22,340
Listo.

57
00:03:22,620 --> 00:03:24,960
Lo mismo a cada etiqueta, cada label.

58
00:03:24,990 --> 00:03:29,910
Pero eso es para todo, no solamente para el Yussef en Password Element, sino para todos.

59
00:03:30,150 --> 00:03:35,670
Entonces en el label después del for lo mismo con href un clic.

60
00:03:36,090 --> 00:03:38,040
Después acá también para el password.

61
00:03:38,040 --> 00:03:39,020
Solamente lo label.

62
00:03:39,870 --> 00:03:41,150
Después para el email.

63
00:03:41,970 --> 00:03:43,920
Después para el país.

64
00:03:44,580 --> 00:03:47,100
Después para lenguajes.

65
00:03:47,310 --> 00:03:49,380
Después para los roles.

66
00:03:49,500 --> 00:03:50,460
Lo tenemos acá.

67
00:03:51,390 --> 00:03:54,810
Después para idiomas lo mismo.

68
00:03:55,740 --> 00:04:00,590
Y por último, para habilitar entonces en el label independiente.

69
00:04:00,600 --> 00:04:11,190
Si tienes for o no tiene espacio, lo mismo class y le damos el estilo siguiente Cool for label, que

70
00:04:11,520 --> 00:04:18,120
es solamente para la etiqueta cool for leave separado por Gion un espacio y le damos otro estilo, otra

71
00:04:18,120 --> 00:04:20,620
clase que es como una separación cool.

72
00:04:20,760 --> 00:04:24,630
SM Dos guión, dos cool.

73
00:04:24,720 --> 00:04:25,740
SM juntos.

74
00:04:25,860 --> 00:04:31,560
Es decir, es un tamaño, es una unidad de medida o de tamaño para la columna, porque el label va a

75
00:04:31,560 --> 00:04:35,790
ser una columna y el input va a ser otra columna, el div que contiene el input.

76
00:04:35,880 --> 00:04:41,970
Entonces qué le vamos a dar una medida de dos y el div del input le vamos a dar una medida de cuatro.

77
00:04:42,060 --> 00:04:43,410
El doble es un proporcioné.

78
00:04:43,530 --> 00:04:49,380
Es una medida que maneja vostra para poder realizar un layout en la columna y una fila tiene varias

79
00:04:49,380 --> 00:04:49,710
columnas.

80
00:04:49,740 --> 00:04:51,110
Por eso pusimos acá Row.

81
00:04:51,270 --> 00:04:56,640
Esta es una fila que está formada por dos columna habilitar y este input.

82
00:04:56,760 --> 00:05:03,810
Y así cada grupo de elemento formulario es una fila con columnas de vostra y acá le damos el tamaño

83
00:05:04,050 --> 00:05:07,350
que faltaría faltaría el tamaño de las columnas, pero del imputó.

84
00:05:07,830 --> 00:05:08,760
Entonces vamos a subir.

85
00:05:11,010 --> 00:05:13,140
Nos vamos a ir a iusted de por acá.

86
00:05:13,470 --> 00:05:17,570
El efecto entonces en el DIF este de acá, que contiene el input.

87
00:05:17,730 --> 00:05:18,900
Entonces hacemos click acá.

88
00:05:18,990 --> 00:05:22,680
Lo mismo que contiene el input en password.

89
00:05:23,430 --> 00:05:24,010
Bajamos.

90
00:05:24,030 --> 00:05:27,540
Que contiene el input y main también para páis.

91
00:05:30,910 --> 00:05:37,000
Y también para lenguajes, pero para los roles como son checkbox y radio Button.

92
00:05:37,120 --> 00:05:41,360
Lo manejamos separado porque cada checkbox, cada radio Button tiene su propio div.

93
00:05:41,500 --> 00:05:45,730
Y eso después lo vamos a manejar con un estilo que son propio de vostra.

94
00:05:45,760 --> 00:05:47,710
Pero paraste en boxes y para radio puto.

95
00:05:47,830 --> 00:05:48,400
Después vamos a ver.

96
00:05:48,670 --> 00:05:55,480
Entonces era solamente para lenguajes, para país, para email, password y el Yussef.

97
00:05:55,840 --> 00:05:57,100
Entonces lo mismo Klauss,

98
00:05:59,830 --> 00:06:01,270
SM y la medida.

99
00:06:01,390 --> 00:06:02,290
Le vamos a dar cuatro.

100
00:06:02,470 --> 00:06:06,700
Entonces recuerden Label dos el campo 4 independiente.

101
00:06:06,700 --> 00:06:10,090
Si es un select o un input más arriba, entonces de 4.

102
00:06:10,300 --> 00:06:14,690
Ahora le vamos a dar estilo al select porque se lo dimos acá al input.

103
00:06:14,800 --> 00:06:15,790
Se fijan más arriba.

104
00:06:15,790 --> 00:06:22,290
Tenemos en el input el form control para cada input, para el email, el password, el iusted net.

105
00:06:22,390 --> 00:06:24,490
Pero para ser ex sería form select.

106
00:06:24,670 --> 00:06:31,240
Entonces vamos a bajar y tenemos dos extremos este de acá, hacemos un clic, bajamos y hacemos un Chief

107
00:06:31,330 --> 00:06:34,900
Ast y un clic también para acá porque los dos son select.

108
00:06:35,050 --> 00:06:45,220
Van a tener el mismo estilo class for crdito, entonces form select y en los input del tipo text form

109
00:06:45,280 --> 00:06:49,000
contra yo me faltaría folletería de estilos a los check boxes.

110
00:06:49,270 --> 00:06:53,650
Entonces vamos a bajar en boxes y también radio button porque comparten los mismos estilo.

111
00:06:54,280 --> 00:06:54,940
En roles.

112
00:06:55,120 --> 00:07:00,520
Acá vamos a hacer clic en cada div, en cada input del tipo checkpoint, pero en el TIFF acá.

113
00:07:00,880 --> 00:07:04,600
Entonces lo mismo a cheff clic en cada uno.

114
00:07:05,070 --> 00:07:09,130
Normalmente cuando se abren las clases estilos se aplican sobre las etiquetas.

115
00:07:09,490 --> 00:07:12,220
Luego tenemos acá también en el radio.

116
00:07:16,230 --> 00:07:19,760
En los div llega también en él habilitar.

117
00:07:19,920 --> 00:07:22,800
Hay uno solo en este espacio.

118
00:07:22,830 --> 00:07:28,560
Class for check haciendo más for check.

119
00:07:28,830 --> 00:07:34,260
Ahora le vamos a dar estilos a los input, a los tiempos del tipo check box o radio.

120
00:07:34,290 --> 00:07:40,950
Entonces vamos a seleccionar este текст box de acá, pero que al final un espacio o un espacio así nomás.

121
00:07:41,310 --> 00:07:46,760
Lo mismo para el input type radio es en común tanto para radio como para chek.

122
00:07:48,630 --> 00:07:49,440
Acá también.

123
00:07:49,680 --> 00:07:50,550
Acá también.

124
00:07:50,670 --> 00:07:51,650
Solamente los input.

125
00:07:52,860 --> 00:07:53,640
Después los label.

126
00:07:54,310 --> 00:07:55,860
Después acá también.

127
00:07:56,040 --> 00:07:56,970
Acá también.

128
00:07:57,120 --> 00:07:58,320
Y por acá también.

129
00:07:58,500 --> 00:07:59,950
En Almen y lo mismo.

130
00:07:59,970 --> 00:08:03,810
Class for check input.

131
00:08:05,400 --> 00:08:08,540
Check input.

132
00:08:08,760 --> 00:08:09,220
Tal cual.

133
00:08:09,510 --> 00:08:10,280
Ahora los label.

134
00:08:10,410 --> 00:08:11,160
Entonces lo mismo.

135
00:08:11,280 --> 00:08:14,670
Vamos a seleccionar solamente los label acá de cada uno.

136
00:08:14,760 --> 00:08:18,270
Para administrador, para usuario.

137
00:08:21,950 --> 00:08:26,510
Para español, para inglés, para francés.

138
00:08:27,350 --> 00:08:28,340
Y nada más.

139
00:08:28,370 --> 00:08:30,260
Por qué este acá no tiene label?

140
00:08:30,380 --> 00:08:34,280
El habilitará entonces es solamente solidari class.

141
00:08:34,730 --> 00:08:37,970
Acá faltó dar un espacio igual.

142
00:08:38,300 --> 00:08:46,490
Lo mismo form, check, label, label, form, thing, label ya, casilla, form, check input y ya

143
00:08:46,490 --> 00:08:48,740
casi diariamente from check en el conjunto.

144
00:08:48,800 --> 00:08:55,970
En el DIF se dice que es muy parecido a faltaría el botón más abajo tenemos el botón a cambiar.

145
00:08:56,300 --> 00:08:58,660
Acá no faltó este de acá, entonces lo voy a copiar.

146
00:08:58,970 --> 00:09:04,520
En este tip del botón espacio lo pegamos y en el botón le damos a dar su estilo propio.

147
00:09:05,390 --> 00:09:14,330
Las BTN de botón BTN primary estilo propio de Boters solamente lo estamos utilizando son estilos.

148
00:09:14,690 --> 00:09:22,130
El estilo o clase btn debutara indica que es un botón y btn primary para que sea de color azul primary

149
00:09:22,220 --> 00:09:25,650
en vostra es un color azul, entonces sería un botón de color azul.

150
00:09:25,910 --> 00:09:31,310
Si quieren profundizar Vostra, que es un framework bastante grande de Attila que da para un curso completo,

151
00:09:31,520 --> 00:09:37,160
lo pueden realizar por fuera este curso obviamente, ya que muy amplio, pero también pueden ver la

152
00:09:37,160 --> 00:09:37,850
documentación.

153
00:09:37,910 --> 00:09:42,830
Es decir, se pueden ir a la página y navegar acá, por ejemplo, si se van a formulario.

154
00:09:42,950 --> 00:09:44,180
Acá está todo lo que hemos visto.

155
00:09:44,630 --> 00:09:51,590
Overview tiene todo form control select lista desplegable con distintas configuraciones, distintas

156
00:09:51,590 --> 00:09:54,020
opciones, tamaños trepados en radio button.

157
00:09:54,320 --> 00:09:58,520
En fin, un montón de cosas que pueden analizar y estudiar y profundizar.

158
00:09:58,640 --> 00:10:05,630
Acá el input jía en secreto no da lo mismo, porque eso no se ve, no es parte de la interface gráfica.

159
00:10:06,080 --> 00:10:08,090
Creo que estamos listo, tenemos todo.

160
00:10:08,330 --> 00:10:14,630
Faltaría dar estilos a los mensajes de error acá que pudiera ser opcional y también podríamos dar un

161
00:10:14,810 --> 00:10:22,720
estilo acá arriba en él uele li por ejemplo acabarse, mostrar los mensajes en el uele una clase también

162
00:10:22,740 --> 00:10:30,830
texto opcional le vamos a colocar alert que es un mensaje de alerta espacio guión danger.

163
00:10:31,970 --> 00:10:39,380
Tienes como un mensaje de errores de alerta se coloca de color rojo alert espacio alert danger y acá

164
00:10:39,380 --> 00:10:39,890
hay varios.

165
00:10:40,010 --> 00:10:44,190
Está el danger, está su sés, el info enfín para cada tipo alerta.

166
00:10:45,380 --> 00:10:48,470
Y esto mismo también lo podemos replicar en cada mensaje de error.

167
00:10:48,560 --> 00:10:55,910
Acá en los Small, por ejemplo, por acá de hecho, lo mismo en cada small, en cada mensaje validacion.

168
00:10:57,650 --> 00:10:59,480
Multi cursor acá también.

169
00:11:05,680 --> 00:11:06,640
Donde se valida?

170
00:11:07,300 --> 00:11:09,700
Acá también y por acá también.

171
00:11:10,300 --> 00:11:11,150
Y más abajo no?

172
00:11:11,170 --> 00:11:13,660
Porque nada más, nada más se valida Klauss.

173
00:11:14,950 --> 00:11:19,750
Vamos a colocar comilla simple espacio y dentro comilla simple vamos a colocar lo mismo.

174
00:11:19,840 --> 00:11:21,520
Alert alert danger

175
00:11:24,460 --> 00:11:26,230
separà contien espacio.

176
00:11:26,230 --> 00:11:33,710
Le puedo dar un tamaño, por ejemplo col espacio SM 4 un tamaño, una medida en el layout.

177
00:11:33,910 --> 00:11:34,540
Estamos listo.

178
00:11:34,810 --> 00:11:40,600
Ya tengo levantado Tomcat 10, así que simplemente voy a realizar el pliegue con los cambios.

179
00:11:40,690 --> 00:11:41,560
Vamos a ver qué pasa.

180
00:11:52,030 --> 00:11:54,220
Ya voy a actualizar acá porque me los cambio.

181
00:11:54,970 --> 00:11:57,310
Vamos a ver código fuente, ver código fuente.

182
00:11:58,360 --> 00:12:00,400
Bueno, por alguna razón no me agregó CA.

183
00:12:00,610 --> 00:12:03,520
Quizás sea bien, vamos a actualizar.

184
00:12:03,610 --> 00:12:04,390
No pasa nada.

185
00:12:04,720 --> 00:12:07,870
Vamos a volver a revisar acá el Index, porque supuestamente ya tengo todo.

186
00:12:09,540 --> 00:12:11,370
Voy a volver acá a levantar.

187
00:12:12,360 --> 00:12:15,210
Por alguna razón no cambió, de hecho, para que lo tome.

188
00:12:15,330 --> 00:12:15,930
Sí o sí.

189
00:12:16,410 --> 00:12:21,810
Voy a limpiar el target acá, lo voy a seleccionar o limpiar o simplemente me voy a maven.

190
00:12:22,410 --> 00:12:25,630
Y acá en ciclo de vida clean.

191
00:12:25,950 --> 00:12:27,470
Entonces simplemente ejecutamos un plan.

192
00:12:30,110 --> 00:12:32,340
Le divierte a todo el target, se fijan.

193
00:12:32,720 --> 00:12:38,910
Entonces, ahora que está eliminado, vamos a volver a ejecutar, a levantar para que ejecute con todos

194
00:12:38,910 --> 00:12:39,470
los cambios.

195
00:12:44,060 --> 00:12:46,910
Generó nuevamente el war de Fijan.

196
00:12:48,490 --> 00:12:49,900
Y nos vamos a sacar.

197
00:12:51,430 --> 00:12:55,650
A s actualizamos y tomamos cambios en alguna parte acá.

198
00:12:55,810 --> 00:12:57,130
Algo pasó en el password.

199
00:12:57,250 --> 00:13:00,280
Lo vamos a revisar, pero está perfecto, está bastante bien.

200
00:13:00,550 --> 00:13:04,960
Entonces bueno, el país también el país que la lista L también le vamos a revisar.

201
00:13:05,620 --> 00:13:06,910
Por alguna razón no tomó el estilo.

202
00:13:07,150 --> 00:13:08,530
Primero nos vamos a ir el password.

203
00:13:08,830 --> 00:13:09,760
Vamos a revisar.

204
00:13:11,590 --> 00:13:12,580
Bajamos.

205
00:13:15,740 --> 00:13:23,720
Claro, se fijan, puse mal acá el Klauss no es en el cierre, porque acá donde comienza el patrón se

206
00:13:23,720 --> 00:13:24,080
fijan.

207
00:13:24,230 --> 00:13:26,330
Micó Hay que hacer el click sin querer.

208
00:13:26,600 --> 00:13:34,880
Un detalle importante y en el Selleck país parece que no puse la clase Form Select donde puse el estilo.

209
00:13:35,210 --> 00:13:37,370
Me faltó el form select.

210
00:13:38,290 --> 00:13:42,520
Acá porque acá quizás me equivoqué, lo puse en otra parte, no sé.

211
00:13:42,580 --> 00:13:44,080
Bueno, me faltó acá.

212
00:13:44,650 --> 00:13:45,310
De todas forma.

213
00:13:48,270 --> 00:13:52,110
No sé dónde más lo habré puesto, pero bueno, hoy parece que está bien.

214
00:13:52,710 --> 00:13:55,110
Tengo que volver a desplegar la pública.

215
00:13:55,260 --> 00:14:00,950
Recuerden, si no toma cambio, elimina con In Clean eliminan el war y lo volvemos a publicar.

216
00:14:03,640 --> 00:14:04,870
Ya lo toma perfecto.

217
00:14:05,050 --> 00:14:09,760
Ahora faltaría centralizar un poco más esto está demasiado hace una esquina, pero eso es super simple.

218
00:14:10,060 --> 00:14:14,260
Lo podríamos anidar dentro de un div y darle un margen, un padding, por ejemplo.

219
00:14:14,320 --> 00:14:15,250
Algo por el estilo.

220
00:14:15,340 --> 00:14:17,200
Volvemos entonces.

221
00:14:17,260 --> 00:14:18,490
Bueno, voy a cerrar acá.

222
00:14:18,760 --> 00:14:20,470
Vamos a tener acá en el formulario.

223
00:14:20,680 --> 00:14:22,320
Lo vamos a anidar en un tipo.

224
00:14:23,620 --> 00:14:24,190
Ya entendí.

225
00:14:24,280 --> 00:14:29,590
Le vamos a dar una clase de vostra, un padding, por ejemplo.

226
00:14:29,620 --> 00:14:33,520
Vamos a colocar el eje X, en este caso horizontal.

227
00:14:33,640 --> 00:14:36,730
Vamos a colocar px de padding guión.

228
00:14:36,820 --> 00:14:39,070
Por ejemplo, un padding de lo que queramos.

229
00:14:39,160 --> 00:14:43,480
Por ejemplo, 5 px de padding x el eje x de 5.

230
00:14:43,570 --> 00:14:45,600
También podría ser un margen MX.

231
00:14:46,270 --> 00:14:48,790
Ya tenemos que cerrar el div al final del form.

232
00:14:49,180 --> 00:14:51,340
Entonces bajamos al final por acá.

233
00:14:53,030 --> 00:14:56,600
Acá y cerramos, volvemos a juntar.

234
00:15:03,850 --> 00:15:05,830
Está mejor y le damos el tamaño que queramos.

235
00:15:05,920 --> 00:15:12,460
La medida que queramos en el margen o el padding, en este caso yetta roles con los roles de idioma

236
00:15:12,670 --> 00:15:16,060
bien y se fijan con la separación de cada conjunto.

237
00:15:16,270 --> 00:15:18,370
Label y el input es un conjunto.

238
00:15:18,370 --> 00:15:22,150
Un grupo es una fila y cada fila tiene dos columnas.

239
00:15:22,300 --> 00:15:24,160
Este es de tamaño 2 y tamaño 4.

240
00:15:24,280 --> 00:15:28,660
Se fijan y así los roles y los idiomas se manejan de forma distinta.

241
00:15:28,900 --> 00:15:29,650
Según vimos.

242
00:15:29,740 --> 00:15:30,430
Vamos a enviar.

243
00:15:30,460 --> 00:15:32,140
Acá tenemos el botón que tiene su estilo.

244
00:15:32,260 --> 00:15:32,920
Empezamos?

245
00:15:33,070 --> 00:15:33,700
Perfecto.

246
00:15:33,790 --> 00:15:35,590
Acá también le podríamos dar un margen.

247
00:15:35,830 --> 00:15:37,390
Y acá aparece el mensaje de error.

248
00:15:38,230 --> 00:15:39,010
Dejan al lado.

249
00:15:39,070 --> 00:15:42,280
También lo podemos colocar abajo si lo colocamos como otra fila.

250
00:15:42,400 --> 00:15:43,040
Otro row.

251
00:15:43,180 --> 00:15:43,630
Pero en fin.

252
00:15:43,750 --> 00:15:46,540
Ya con esto tenemos una base y puedo empezar a trabajar.

253
00:15:48,160 --> 00:15:53,060
Vamos a ir al uele arriba y le damos también un espacio.

254
00:15:53,060 --> 00:15:58,300
Entonces acá simplemente mx un margen completamente margen horizontal.

255
00:15:58,450 --> 00:16:02,900
Exactamente igual de 5 guión 5 igual que acá.

256
00:16:03,190 --> 00:16:04,510
Incluso podríamos ordenar.

257
00:16:05,230 --> 00:16:06,430
No me lo toma el ordenar.

258
00:16:06,550 --> 00:16:08,290
Claro, porque como no tiene soporte.

259
00:16:09,190 --> 00:16:10,170
No, no, el ordena.

260
00:16:10,300 --> 00:16:12,000
Pero lo podríamos tener de forma manual.

261
00:16:12,070 --> 00:16:12,850
Pero hoy lo tenemos.

262
00:16:14,070 --> 00:16:15,090
Volvemos a levantar.

263
00:16:21,420 --> 00:16:23,190
Volvemos atrás, actualizamos.

264
00:16:24,060 --> 00:16:26,410
Empezamos ya, ya, que mucho mejor ahora.

265
00:16:26,430 --> 00:16:31,770
Por ejemplo, si quieren colocar esto debajo, el cambio sería bien sencillo, solamente mueven esto,

266
00:16:31,860 --> 00:16:34,590
lo mueven, por ejemplo, lo cortan y lo mueven.

267
00:16:34,590 --> 00:16:42,120
Acá una que lo movamos si lo sacan fuera del conjunto del dir, sino que sea como otra fila.

268
00:16:42,270 --> 00:16:45,120
Le tengo que dar un estilo, pero en vez de Smoot tendría que hacer un.

269
00:16:45,600 --> 00:16:47,410
Al final tendré que entréguense como esto muy parecido.

270
00:16:47,580 --> 00:16:51,220
Entonces diff acá, de acá, por ejemplo.

271
00:16:51,750 --> 00:16:56,820
Y además en el estilo le tenemos que agregar un row acá.

272
00:16:57,300 --> 00:16:58,080
Y así por Kahuna.

273
00:16:58,170 --> 00:17:01,410
Yo solamente LoJack con uno solo, con el Yousef nada más.

274
00:17:02,480 --> 00:17:03,560
Volvemos a levantar.

275
00:17:04,750 --> 00:17:05,010
Entonces?

276
00:17:05,320 --> 00:17:08,470
Depende cómo lo quiera manejar, si es al lado o si está abajo, como quieran.

277
00:17:08,920 --> 00:17:09,790
Volvemos a enviar.

278
00:17:11,030 --> 00:17:15,490
Que abajo se diga que justo debajo incluso le pueden dar un tamaño más grande en vez de 6, que sea

279
00:17:15,490 --> 00:17:19,170
10 o 15 o como quieran, si lo han customizar customizado manejándolo.

280
00:17:19,270 --> 00:17:25,030
También se pueden apoyar de la documentación bien antes finalizar bimos ver codigo fuente bueno cantautoras

281
00:17:25,030 --> 00:17:30,640
html con todo los estilos que le dimos de bootstrap, pero agregamos de forma remota la hoja estilo.

282
00:17:30,670 --> 00:17:33,640
También le podremos agregar de forma local en el proyecto.

283
00:17:33,670 --> 00:17:38,770
Como bien descargamos esta hoja estilo, puedo hacer clic en ver código fuente.

284
00:17:38,890 --> 00:17:39,700
Pinchamos acá.

285
00:17:39,760 --> 00:17:43,330
Acá tenemos el estilo o bien nos vamos a la página de la documentación.

286
00:17:43,720 --> 00:17:47,740
Por ejemplo, nos vamos a home prestarte.

287
00:17:48,960 --> 00:17:53,370
Lo copiamos, pero copiamos esto acá y lo pegamos acá.

288
00:17:55,200 --> 00:17:56,520
Y lo guardan.

289
00:17:56,610 --> 00:17:58,140
Click derecho guardar página cómo?

290
00:17:58,290 --> 00:18:03,390
Y hacen clic y lo guardan en alguna ubicación, por ejemplo en Download o incluso en la carpeta del

291
00:18:03,390 --> 00:18:04,590
curso emputa.

292
00:18:04,830 --> 00:18:07,660
También lo guardamos en la carpeta ya perfecto.

293
00:18:08,040 --> 00:18:10,610
Lo copian y lo movemos al proyecto con copy paste.

294
00:18:10,800 --> 00:18:13,170
Se fijan acá, lo cortan o lo copian.

295
00:18:13,950 --> 00:18:16,640
Nos vamos al proyecto en web app.

296
00:18:16,890 --> 00:18:24,990
Vamos a crear una carpeta directorio C, S'S o style o como quieran y dentro lo pegamos perfecto.

297
00:18:26,210 --> 00:18:27,980
Ahora tenemos la estilo en el proyecto.

298
00:18:28,750 --> 00:18:31,990
Ahora simplemente modificamos el index por acá.

299
00:18:34,590 --> 00:18:39,420
Esta en la carpeta CSS se fija ButrÃn 10.6 s, el integrity y todo eso.

300
00:18:39,480 --> 00:18:40,020
Quitamos

301
00:18:42,720 --> 00:18:48,330
eso, le quitamos igual que el Kross, pero aca le damos el nombre proyecto de ese de forma manual.

302
00:18:48,450 --> 00:18:49,980
Saben que se llama web app form.

303
00:18:50,130 --> 00:18:54,420
O incluso como estamos dentro de una JSP podemos utilizar el objeto recuesto.

304
00:18:54,570 --> 00:18:57,720
Entonces con las etiquetas vamos a imprimir.

305
00:18:57,840 --> 00:19:06,870
Igual es una expresión request request punto get context path con texto y eso.

306
00:19:07,020 --> 00:19:09,210
Y eso queda concatenado a esto.

307
00:19:09,210 --> 00:19:10,740
Todo acá, a esta ruta y listo.

308
00:19:10,920 --> 00:19:11,430
Eso es todo.

309
00:19:12,090 --> 00:19:12,780
Levantamos.

310
00:19:17,420 --> 00:19:18,440
Vamos a cerrar acá.

311
00:19:18,770 --> 00:19:23,000
Cerramos, cerramos, cerramos y acabamos de actualizar.

312
00:19:26,550 --> 00:19:27,720
Ver código fuente.

313
00:19:27,810 --> 00:19:28,710
Vamos a revisar.

314
00:19:30,110 --> 00:19:36,890
WEP Ah, ah, acá me quedó una comilla, esa que al lado es decir la comilla la tengo que mover de acá

315
00:19:36,980 --> 00:19:37,310
acá.

316
00:19:37,580 --> 00:19:41,450
A ese entonces a mi me comilla esto y listo.

317
00:19:42,570 --> 00:19:43,320
Levantamos.

318
00:19:49,540 --> 00:19:52,030
Vamos a revisar a ese, está perfecto.

319
00:19:52,880 --> 00:19:55,010
Entonces acá actualizamos y está bien.

320
00:19:55,250 --> 00:19:57,800
Estas formas locar exactamente igual te está.

321
00:19:58,430 --> 00:19:58,570
Bien.

322
00:19:58,670 --> 00:19:59,330
Eso sería.

323
00:19:59,420 --> 00:20:02,600
Lo dejamos hasta acá y continuamos en la siguiente clase.