1
00:00:00,120 --> 00:00:06,360
Bienvenidos en esta clase vamos a ver un poco más sobre el layout, el diseño más robusto y también

2
00:00:06,420 --> 00:00:07,500
más ordenado.

3
00:00:07,590 --> 00:00:13,230
Vamos a usar los paneles de Vostra que se llaman los Carth en Bootstrap 4 en Vostra 3.

4
00:00:13,290 --> 00:00:15,030
Se les conocía como panel.

5
00:00:15,120 --> 00:00:17,220
Vamos a comenzar con el listado.

6
00:00:18,390 --> 00:00:19,830
Nos vamos al listado.

7
00:00:19,950 --> 00:00:24,390
Entonces la idea es el contenido, dejarlo dentro del panel.

8
00:00:24,450 --> 00:00:27,000
Primero vamos a crear el panel con undir

9
00:00:29,760 --> 00:00:32,230
con una clase CART.

10
00:00:32,430 --> 00:00:38,010
Este sería nuestro panel principal que va a contener todo el contenido del listado.

11
00:00:38,400 --> 00:00:41,880
Luego vamos a tener dos partes el GER y el body.

12
00:00:41,970 --> 00:00:58,080
El jeeter va a contener el título, entonces Class Car Geddes y vamos a tener también un body y el body

13
00:00:58,170 --> 00:00:59,430
va a contener la tabla.

14
00:01:01,080 --> 00:01:07,230
Vamos a ordenar que el título va a contener el título de la página.

15
00:01:07,260 --> 00:01:13,950
Entonces vamos a cortar acá título, vamos a eliminar el H1, ya que el título va a estar dentro del

16
00:01:13,950 --> 00:01:14,490
getter.

17
00:01:14,610 --> 00:01:22,350
Acá vamos a tener un body dentro del vey vamos a tener una CH4 para el link para que sea un poco más

18
00:01:22,410 --> 00:01:22,950
vistoso.

19
00:01:23,670 --> 00:01:32,760
Le vamos a dar una clase car título card title en vez de success le vamos a colocar primary.

20
00:01:35,550 --> 00:01:38,820
Y vamos a guardar, vamos a ejecutar.

21
00:01:46,850 --> 00:01:54,530
Vamos a levantar el navegador, listar y ahí tenemos el panel de fijan listado cliente y dentro del

22
00:01:54,530 --> 00:01:56,210
panel contiene la tabla.

23
00:01:56,360 --> 00:02:00,060
Queda bastante mejor, incluso se le podría dar un margen o un padding.

24
00:02:00,710 --> 00:02:08,510
Entonces acá en el container vamos a agregar un estilo de Bootstrap y 4 lo que hace el PP y 4 es un

25
00:02:08,510 --> 00:02:12,110
PADI en el eje vertical y con una medida de 4.

26
00:02:12,470 --> 00:02:16,510
Vamos a actualizar y ahí va un padre de queda mejor.

27
00:02:17,030 --> 00:02:23,480
Pero al Carth le podríamos dar un background, un fondo con pege light.

28
00:02:25,900 --> 00:02:27,880
Actualizamos y queda un poco mejor.

29
00:02:27,930 --> 00:02:32,560
Yetta nuestra tabla, vamos al formulario, vamos a tener algo parecido.

30
00:02:33,580 --> 00:02:42,580
Por lo tanto vamos a copiar el car, GD y Car body que vamos a tener el car car GD que tener el título.

31
00:02:42,640 --> 00:02:49,750
Por lo tanto, este título ya se puede quitar y tenemos que cerrar dos etiqueta la del body y la principal

32
00:02:55,510 --> 00:02:56,230
ordenamos.

33
00:02:58,900 --> 00:03:03,310
Ya tenemos vamos al formulario y tenemos el formulario.

34
00:03:03,490 --> 00:03:09,100
Ya mucho mejor vamos al container y le damos también un P y 4 para el padding.

35
00:03:12,100 --> 00:03:12,640
Excelente.

36
00:03:12,710 --> 00:03:13,360
Queda mucho mejor.

37
00:03:13,450 --> 00:03:18,540
Incluso le pudieron cambiar el fondo en vez del Light Dark Dark.

38
00:03:23,420 --> 00:03:29,330
Y dejar el texto en blanco con texto y el color white blanco

39
00:03:32,150 --> 00:03:40,180
y el botón podría quedar de color en vez de primary, podría ser un secondary que es un gris.

40
00:03:43,620 --> 00:03:44,330
Un poco más claro.

41
00:03:44,930 --> 00:03:45,930
Te crea cliente.

42
00:03:46,010 --> 00:03:49,710
No se quedó perfecto la tabla y quedó perfecto.

43
00:03:49,830 --> 00:03:50,520
El formulario

44
00:03:53,470 --> 00:04:00,000
ahí pudrirán y jugando con los colores en vez de dar Olid puede ser primary.

45
00:04:06,400 --> 00:04:13,570
Que de color azul o secondary de un color gris más claro que el dark.

46
00:04:16,580 --> 00:04:17,860
Que puede ir variando.

47
00:04:17,950 --> 00:04:19,030
Hay diferentes combinaciones.

48
00:04:19,840 --> 00:04:20,650
Me gusta el Dark.

49
00:04:21,400 --> 00:04:22,600
El hace juego con el botón.

50
00:04:24,040 --> 00:04:24,880
Actualizamos.

51
00:04:25,060 --> 00:04:25,480
Perfecto.

52
00:04:25,660 --> 00:04:32,710
Para finalizar, si vamos al layout tenemos los estilos de forma remota.

53
00:04:32,840 --> 00:04:37,540
Un servidor va a buscar la hoja de estilo y la carga, lo que pudiera tener que sea un tiempo de respuesta

54
00:04:37,540 --> 00:04:38,290
un poco más lenta.

55
00:04:38,380 --> 00:04:44,260
Pero por otro lado, no estamos cargando nuestro servidor con peticiones o request en los estilos,

56
00:04:44,350 --> 00:04:48,310
pero sí sería una buena idea dejar los estilos en forma local.

57
00:04:48,370 --> 00:04:54,220
Por ejemplo, en Static podrían crear dos directorios 1 CSS.

58
00:04:58,050 --> 00:05:03,070
Y otro JS para lo ya escrito entonces de una forma bien simple.

59
00:05:03,300 --> 00:05:08,370
Por ejemplo, copien la ruta o también se pueden ir a la página de vostra y lo descargan ahí.

60
00:05:08,580 --> 00:05:12,060
Por ejemplo, pueden ir a Download y lo descargan.

61
00:05:13,830 --> 00:05:14,460
O bien.

62
00:05:16,520 --> 00:05:18,700
Acá tenemos el butrãn min.

63
00:05:19,460 --> 00:05:25,700
Simplemente lo guardan con click derecho y lo dejan en algún lugar del equipo y después lo incluyen,

64
00:05:25,790 --> 00:05:29,720
lo copian y lo dejan en las rutas, en el directorio que corresponda.

65
00:05:30,290 --> 00:05:35,270
Por ejemplo, voy a copiar el bus tran min y voy a copiar.

66
00:05:35,390 --> 00:05:37,520
Lo lleva clip de vostra y de requerí.

67
00:05:37,610 --> 00:05:41,630
Por ejemplo, bajamos, copiamos la VL de Querí.

68
00:05:41,720 --> 00:05:44,900
Acá tenemos la versión LIM que no incluye AJAX.

69
00:05:44,960 --> 00:05:49,430
Por lo tanto, hay que descargar la versión completa con Ajax, que sin él es líM.

70
00:05:49,460 --> 00:05:51,500
Por ejemplo, nos vamos al navegador.

71
00:05:51,560 --> 00:05:53,120
Copiamos laureles.

72
00:05:54,720 --> 00:06:01,890
Y le quitamos el punto Slim y dejamos solamente Vickery, la versión punto min, punto 10.

73
00:06:02,100 --> 00:06:08,730
Y ahí tenemos la librería completa de Yeguada Descarga la versión completa sin él Slim Click Derecho

74
00:06:08,820 --> 00:06:13,650
guardar como y lo guardan en alguna carpeta, algún directorio, por ejemplo en descargar.

75
00:06:13,830 --> 00:06:18,210
Luego se van a descargar, lo copian y lo pegan en el proyecto en jotes.

76
00:06:18,300 --> 00:06:19,050
Ahí lo tenemos.

77
00:06:19,080 --> 00:06:20,460
Entonces Vickery min.

78
00:06:20,550 --> 00:06:25,020
JS y luego hacen lo mismo con vostra mi 10.

79
00:06:25,110 --> 00:06:25,710
Lo copian?

80
00:06:25,830 --> 00:06:27,090
Se van al navegador.

81
00:06:28,110 --> 00:06:28,800
Lo pegan.

82
00:06:30,600 --> 00:06:31,740
Y otra viene completo.

83
00:06:31,830 --> 00:06:39,100
Simplemente lo descargan, lo guardan en descargar y también lo copian y lo pegan en la carpeta Jotes

84
00:06:39,360 --> 00:06:42,040
y que butrãn minipunto y iez y querí.

85
00:06:42,090 --> 00:06:42,390
Punto.

86
00:06:42,390 --> 00:06:45,090
Mi punto es la versión actual del momento.

87
00:06:45,240 --> 00:06:48,600
Otra forma de descargar la librería y directamente la página.

88
00:06:48,660 --> 00:06:55,800
Por ejemplo, si nos vamos a la página de Yukari y se van a descargar a Download y extraversión de Éri

89
00:06:55,890 --> 00:06:58,320
esta versión completa y también la versión es lím.

90
00:06:58,560 --> 00:07:00,270
Recuerden que tiene que ser la versión completa.

91
00:07:00,390 --> 00:07:02,700
Acá tenemos la versión Mint que comprimida llega.

92
00:07:02,700 --> 00:07:06,270
Tenemos la versión sin comprimir y por ejemplo hacen clic en Compres.

93
00:07:07,530 --> 00:07:09,840
Y se descarga y querí min.

94
00:07:09,960 --> 00:07:17,900
Y lo mismo con vostra se van a descargar y descargan los compilados CSS y escota es download y descargan

95
00:07:17,910 --> 00:07:18,570
completo.

96
00:07:18,720 --> 00:07:24,540
Ahí los comprimen y copian el javascript en el directorio JS y el CSS ButrÃn min.

97
00:07:24,690 --> 00:07:27,540
Dentro del directorio static CSS.

98
00:07:28,110 --> 00:07:35,490
Bien, lo siguiente es cambiar acá y renombrar laureles para que apunte al local a nuestro directorio

99
00:07:35,580 --> 00:07:40,100
static css y estadi es local dentro de los recursos.

100
00:07:40,410 --> 00:07:50,040
Entonces sería contain lif con el new space th th 2 punto toda VL de nuestro proyecto, ya sea hacer

101
00:07:50,040 --> 00:07:56,460
controladores hacia los mapping o recursos estáticos, hoja de estilos CSS o JavaScript, teníamos que

102
00:07:56,460 --> 00:07:59,700
utilizar en las rutas el arroba importante.

103
00:07:59,700 --> 00:08:06,780
La година las llaves sería el path absoluto, por lo tanto debe comenzar con ese larch y cerramos la

104
00:08:06,780 --> 00:08:07,070
llave.

105
00:08:07,160 --> 00:08:15,480
Entonces el Arruà se abre la llave se cierra la llave CSS está dentro static y sería la ruta base el

106
00:08:15,480 --> 00:08:20,820
ruto donde se encuentran nuestros recursos estáticos tanto los CSS como imágenes y JavaScript.

107
00:08:21,150 --> 00:08:24,300
Por lo tanto, el Static como es la ruta principal no se incluye.

108
00:08:24,780 --> 00:08:30,900
Lo que sí se incluye sería lo subdirectorio donde tenemos los recursos, por ejemplo CSS para las hojas

109
00:08:30,900 --> 00:08:32,640
estilo en este caso ButrÃn min.

110
00:08:32,760 --> 00:08:35,100
Y hacemos lo mismo con JavaScript.

111
00:08:35,460 --> 00:08:38,010
Incluimos el en este pais de H.

112
00:08:39,740 --> 00:08:45,420
El atributo se rece y haga sería exactamente lo mismo con el arroba.

113
00:08:45,710 --> 00:08:48,080
Abrimos las llaves y cerramos ya.

114
00:08:48,680 --> 00:08:53,600
Y lo mismo con dígory el arroba se abre la llave.

115
00:08:54,080 --> 00:08:56,750
Acá agregamos diez J.V.

116
00:08:56,930 --> 00:08:57,740
Y Querí.

117
00:08:58,340 --> 00:09:03,260
Quitamos el punto slim importante y cerramos la llave.

118
00:09:04,190 --> 00:09:06,130
Acá incluimos el teat importante.

119
00:09:07,230 --> 00:09:13,300
Entonces, con la година JS el directorio dentro de static y el archivo o recurso.

120
00:09:13,410 --> 00:09:18,320
JS jQuery y acá butrãn Bill Gates guardamos.

121
00:09:18,920 --> 00:09:24,510
Vamos al ejemplo cliente click derecho ver código fuente.

122
00:09:24,810 --> 00:09:27,810
Y acá tenemos el href mil.

123
00:09:28,530 --> 00:09:32,170
Y acá tenemos también los script hacia los recursos estatico.

124
00:09:32,700 --> 00:09:37,170
Probamos con Krom click derecho ver página fuente.

125
00:09:37,260 --> 00:09:43,230
Hacemos clic en los estilos y lo carga perfecto ahí cargando el CSS en el proyecto.

126
00:09:43,980 --> 00:09:50,340
Vamos a lo clip y Vickery ahí está funcionando, lo carga bien y también nos vamos a debutarÃ.

127
00:09:51,870 --> 00:09:55,200
Llegamos hasta acá y cualquier duda que tengan los revisamos.

128
00:09:55,290 --> 00:09:57,210
Espero que le haya gustado esta clase.

129
00:09:57,300 --> 00:09:58,220
Hasta la próxima.