1
00:00:03,910 --> 00:00:06,210
Ponte las botas,

2
00:00:06,210 --> 00:00:08,470
y comencemos con Bootstrap.

3
00:00:08,470 --> 00:00:13,045
Estoy seguro de que tus dedos están picando por poner tus manos alrededor de Bootstrap.

4
00:00:13,045 --> 00:00:18,250
Por lo tanto, primer paso, vaya a

5
00:00:18,250 --> 00:00:22,280
las instrucciones de ejercicio que siguen a este video

6
00:00:22,280 --> 00:00:27,805
en la página del curso Bootstrap en Coursera.

7
00:00:27,805 --> 00:00:29,840
Y luego en las instrucciones,

8
00:00:29,840 --> 00:00:35,520
verá un enlace a este archivo Bootstrap4-starter.zip.

9
00:00:35,520 --> 00:00:39,695
Descargue el archivo zip en su computadora.

10
00:00:39,695 --> 00:00:46,610
Además, las instrucciones paso a paso que se ilustran en este video

11
00:00:46,610 --> 00:00:52,995
también se darán en las instrucciones de ejercicio que siguen a este video.

12
00:00:52,995 --> 00:01:00,595
Allí, tendrá acceso a cualquiera de los fragmentos de código que necesite para este ejercicio.

13
00:01:00,595 --> 00:01:04,920
Este sería el caso de todos los ejercicios en el futuro, también.

14
00:01:04,920 --> 00:01:08,125
Por lo tanto, si necesita hacerse con los fragmentos de código,

15
00:01:08,125 --> 00:01:10,145
ahí es donde los encontrará.

16
00:01:10,145 --> 00:01:12,180
Una vez que descargue el archivo zip,

17
00:01:12,180 --> 00:01:16,230
mueva ese archivo zip a una ubicación conveniente en su computadora.

18
00:01:16,230 --> 00:01:23,375
Entonces, aquí, lo he movido a una carpeta llamada Coursera en mi computadora,

19
00:01:23,375 --> 00:01:27,145
y luego tengo el archivo zip con este nombre largo allí.

20
00:01:27,145 --> 00:01:28,765
Simplemente descomprima el archivo.

21
00:01:28,765 --> 00:01:30,445
Una vez descomprimido el archivo,

22
00:01:30,445 --> 00:01:36,715
encontrará una carpeta llamada Bootstrap4 creada en su computadora.

23
00:01:36,715 --> 00:01:38,965
Dentro de la carpeta Bootstrap4,

24
00:01:38,965 --> 00:01:42,450
verá otra carpeta llamada ConFusion, allí.

25
00:01:42,450 --> 00:01:46,260
Vaya a la carpeta Confusion y verá dos archivos allí,

26
00:01:46,260 --> 00:01:49,600
index.html y el archivo package.json.

27
00:01:49,600 --> 00:01:53,795
Ahora, abra una ventana de comandos o

28
00:01:53,795 --> 00:02:00,290
una terminal y, a continuación, vaya a esta carpeta en su ventana de comandos o terminal.

29
00:02:00,290 --> 00:02:05,125
En el símbolo del sistema, escriba npm install.

30
00:02:05,125 --> 00:02:09,150
Tenga en cuenta que ya tengo el archivo package.json allí.

31
00:02:09,150 --> 00:02:12,745
Entonces, el archivo package.json está configurado para que

32
00:02:12,745 --> 00:02:19,200
la dependencia de desarrollo del servidor lite-se instale si escribo npm install.

33
00:02:19,200 --> 00:02:21,150
Por lo tanto, una vez que escriba npm install,

34
00:02:21,150 --> 00:02:27,160
verá que el servidor lite-se instalará en su carpeta node_modules cada uno.

35
00:02:27,160 --> 00:02:30,415
Una vez que se haya completado,

36
00:02:30,415 --> 00:02:35,930
abra esta carpeta en su editor favorito.

37
00:02:35,930 --> 00:02:39,060
Una vez que tenga la carpeta abierta en su editor,

38
00:02:39,060 --> 00:02:45,170
cree un archivo.gitignore y

39
00:02:45,170 --> 00:02:50,530
luego ponga node_modules en el archivo gitignore y guarde.

40
00:02:50,530 --> 00:02:54,940
Así que esto es para asegurarse de que cuando haces un gitcommit,

41
00:02:54,940 --> 00:02:57,615
la carpeta node_modules no se confirmará.

42
00:02:57,615 --> 00:03:05,475
Después de eso, es hora de ir a buscar Bootstrap para usarlo en nuestro proyecto.

43
00:03:05,475 --> 00:03:08,050
Antes de buscar Bootstrap,

44
00:03:08,050 --> 00:03:11,810
vamos a hacer una confirmación del estado actual del archivo.

45
00:03:11,810 --> 00:03:18,535
Entonces, haga git init e inicialice su repositorio git.

46
00:03:18,535 --> 00:03:21,600
Luego puede verificar el estado de git,

47
00:03:21,600 --> 00:03:25,290
y vería que estos archivos necesitan ser confirmados,

48
00:03:25,290 --> 00:03:29,315
agregar todos los archivos,

49
00:03:29,315 --> 00:03:38,885
gitcommit -m «Configuración inicial».

50
00:03:38,885 --> 00:03:43,745
Así que este es el punto de partida de su carpeta en este momento.

51
00:03:43,745 --> 00:03:52,785
Entonces, con esto, su punto de partida de su proyecto web ahora se ha comprometido a git.

52
00:03:52,785 --> 00:03:57,770
Ahora puede configurar este git para que se sincronice con un repositorio en línea,

53
00:03:57,770 --> 00:04:00,800
tal como hablamos en los ejercicios de git.

54
00:04:00,800 --> 00:04:05,690
Por lo tanto, puede configurar un repositorio en Bitbucket o en Github y luego

55
00:04:05,690 --> 00:04:11,430
sincronizar este proyecto con ese repositorio git.

56
00:04:11,430 --> 00:04:15,265
Nuestro siguiente paso es ir a buscar Bootstrap.

57
00:04:15,265 --> 00:04:25,260
Para ello, agregue el símbolo npm install bootstrap @4 .0.0 y también —save,

58
00:04:25,260 --> 00:04:29,470
y deje que se instale el Bootstrap.

59
00:04:29,470 --> 00:04:31,880
Una vez instalado Bootstrap,

60
00:04:31,880 --> 00:04:35,535
nos damos cuenta de que también necesitamos instalar su peer,

61
00:04:35,535 --> 00:04:38,975
que es jQuery así como Popper.js.

62
00:04:38,975 --> 00:04:46,350
Así que sigamos adelante e instalemos tanto jQuery como Popper.js en esta carpeta del proyecto.

63
00:04:46,350 --> 00:04:50,905
Entonces, para hacer eso, agregue el mensaje de tipo npm install

64
00:04:50,905 --> 00:04:55,115
jquery @3 .3.1

65
00:04:55,115 --> 00:05:03,185
y Popper.js @1 .12.9 —save.

66
00:05:03,185 --> 00:05:06,385
Ahora, cada vez que instalo cualquiera de los paquetes npm,

67
00:05:06,385 --> 00:05:11,620
estoy especificando explícitamente la versión del paquete que debe instalar.

68
00:05:11,620 --> 00:05:17,580
La razón de esto es que quiero asegurarme de que a medida que pase por este ejercicio,

69
00:05:17,580 --> 00:05:19,500
todos los pasos funcionen correctamente.

70
00:05:19,500 --> 00:05:25,380
Así que estoy especificando la versión exacta de los módulos npm que se instalarán.

71
00:05:25,380 --> 00:05:33,235
Entonces, aquí, estamos instalando la versión 3.3.1 de jQuery y Popper.js versión 1.12.9.

72
00:05:33,235 --> 00:05:40,895
Posteriormente, también, especificaré las versiones exactas de los módulos que se instalarán.

73
00:05:40,895 --> 00:05:44,130
Así que vamos a seguir adelante e instalar estos.

74
00:05:46,530 --> 00:05:49,030
Y una vez instalados,

75
00:05:49,030 --> 00:05:51,055
podemos ir al siguiente paso.

76
00:05:51,055 --> 00:05:55,615
Volviendo a nuestra carpeta de proyecto,

77
00:05:55,615 --> 00:05:58,070
verá que si entra en node_modules,

78
00:05:58,070 --> 00:06:02,675
verá una carpeta allí llamada Bootstrap.

79
00:06:02,675 --> 00:06:04,865
Y dentro de la carpeta llamada Bootstrap,

80
00:06:04,865 --> 00:06:07,845
encontrará una carpeta llamada dist.

81
00:06:07,845 --> 00:06:09,910
Entonces, dentro de la carpeta dist,

82
00:06:09,910 --> 00:06:13,705
encontrará dos subcarpetas llamadas CSS y js.

83
00:06:13,705 --> 00:06:15,775
Si vas a la carpeta CSS,

84
00:06:15,775 --> 00:06:20,820
encontrarás un montón de archivos CSS precompilados aquí.

85
00:06:20,820 --> 00:06:27,630
El que nos interesa al principio es Bootstrap min.css.

86
00:06:27,630 --> 00:06:31,620
Ese es el archivo que vamos a incluir en nuestro

87
00:06:31,620 --> 00:06:36,020
archivo index.html para hacer uso de Bootstrap en nuestro proyecto.

88
00:06:36,020 --> 00:06:38,820
Del mismo modo, yendo a la carpeta js,

89
00:06:38,820 --> 00:06:42,165
vería que hay un archivo min.js de Bootstrap.

90
00:06:42,165 --> 00:06:45,680
Vamos a incluir eso también en nuestro index.htm.

91
00:06:45,680 --> 00:06:48,790
Así que ese será el siguiente paso que me verás haciendo.

92
00:06:48,790 --> 00:06:51,215
Antes de pasar al siguiente paso,

93
00:06:51,215 --> 00:06:55,550
iniciemos nuestro servidor lite-para que podamos ver los cambios que hacemos en el

94
00:06:55,550 --> 00:07:01,860
index.html inmediatamente reflejados en nuestra página web en tiempo real.

95
00:07:01,860 --> 00:07:03,630
Así que vamos a poner en marcha los servidores lite-.

96
00:07:03,630 --> 00:07:07,240
Por lo tanto, escriba el indicador de inicio npm,

97
00:07:07,240 --> 00:07:09,915
y luego eso debería iniciar su servidor lite-.

98
00:07:09,915 --> 00:07:13,485
Ahora puede ver, en la pantalla,

99
00:07:13,485 --> 00:07:21,785
mi editor a la izquierda y la versión actual de la página index.html a la derecha.

100
00:07:21,785 --> 00:07:23,215
Entonces, como puede ver,

101
00:07:23,215 --> 00:07:27,615
ya he configurado la página index.html con algo de contenido.

102
00:07:27,615 --> 00:07:33,820
Esta página web se parece a la típica página web de un profesor de ciencias de la computación.

103
00:07:33,820 --> 00:07:41,170
Ahora vamos a abrir la página index.html en nuestro editor.

104
00:07:41,170 --> 00:07:45,645
Y luego en la parte principal de la página index.html,

105
00:07:45,645 --> 00:07:47,360
justo antes del título,

106
00:07:47,360 --> 00:07:49,935
voy a pegar un poco de código.

107
00:07:49,935 --> 00:07:53,730
Este fragmento de código se le da en las instrucciones.

108
00:07:53,730 --> 00:07:56,740
Así que simplemente puede copiar y pegar este fragmento de código,

109
00:07:56,740 --> 00:08:00,765
y le guiaré a través de lo que este fragmento de código está tratando de hacer.

110
00:08:00,765 --> 00:08:05,585
Te darás cuenta de que tengo tres metaetiquetas aquí.

111
00:08:05,585 --> 00:08:09,130
El primero dice charset="utf-8".

112
00:08:09,130 --> 00:08:11,860
Entonces, este es el unicode que se va a usar.

113
00:08:11,860 --> 00:08:17,675
La segunda línea que dice meta name="viewport»,

114
00:08:17,675 --> 00:08:21,100
voy a volver y explicar esta línea en particular a

115
00:08:21,100 --> 00:08:25,745
usted en la siguiente lección cuando vamos a ver el diseño web sensible.

116
00:08:25,745 --> 00:08:30,100
Ahora, permítanme llamar su atención sobre esta línea en particular que

117
00:08:30,100 --> 00:08:34,840
dice link rel="stylesheet», y luego href.

118
00:08:34,840 --> 00:08:43,495
Tenga en cuenta que estoy especificando href como «node_modules/bootstrap/dist/css/bootstrap.min.css».

119
00:08:43,495 --> 00:08:49,150
Entonces, lo que estoy especificando es que el archivo bootstrap.min.css,

120
00:08:49,150 --> 00:08:52,970
que contiene las clases CSS correspondientes a Bootstrap que hemos

121
00:08:52,970 --> 00:08:57,995
descargado usando NPM a nuestra carpeta node_modules,

122
00:08:57,995 --> 00:09:05,350
voy a incluir eso en el encabezado de mi página index.html.

123
00:09:05,350 --> 00:09:09,370
Por lo tanto, debe incluir las clases CSS proporcionadas por Bootstrap.

124
00:09:09,370 --> 00:09:15,150
También necesita incluir las clases de JavaScript proporcionadas por Bootstrap,

125
00:09:15,150 --> 00:09:19,445
que vamos a hacer en la parte inferior de esta página.

126
00:09:19,445 --> 00:09:23,465
Ir a la parte inferior de esta página, tenga en cuenta,

127
00:09:23,465 --> 00:09:27,400
justo antes de la etiqueta del cuerpo de cierre,

128
00:09:27,400 --> 00:09:32,820
voy a pegar en el código para incluir todos los scripts allí.

129
00:09:32,820 --> 00:09:35,105
Entonces, para hacer eso,

130
00:09:35,105 --> 00:09:41,300
solo pego en las tres líneas para que el script incluya jQuery

131
00:09:41,300 --> 00:09:45,085
, Popper.js y también el Bootstrap min.js.

132
00:09:45,085 --> 00:09:48,635
Y tenga en cuenta el orden en el que he incluido esto.

133
00:09:48,635 --> 00:09:50,895
Así que el Bootstrap está en la parte inferior.

134
00:09:50,895 --> 00:09:57,340
Luego, dado que Bootstrap depende tanto de jQuery como Popper en ese orden,

135
00:09:57,340 --> 00:09:59,945
entonces primero ingresaré jQuery.

136
00:09:59,945 --> 00:10:03,835
Y luego, después de eso, ingresamos Popper, y luego, finalmente,

137
00:10:03,835 --> 00:10:09,585
Bootstrap min.js en la parte inferior del archivo index.html.

138
00:10:09,585 --> 00:10:13,400
Ahora, esto se incluye en la parte inferior de la página.

139
00:10:13,400 --> 00:10:18,665
Porque cuando está cargando la página desde un servidor web,

140
00:10:18,665 --> 00:10:24,360
desea que las clases CSS se carguen inmediatamente para que a medida que la página comience a renderizarse,

141
00:10:24,360 --> 00:10:26,430
cuando se obtiene JavaScript,

142
00:10:26,430 --> 00:10:29,810
el JavaScript necesita ejecutarse para realizar cambios en

143
00:10:29,810 --> 00:10:33,395
su página con el código JavaScript,

144
00:10:33,395 --> 00:10:34,970
y que tomará un poco de tiempo.

145
00:10:34,970 --> 00:10:38,060
Por lo tanto, no desea que el usuario esté esperando a que

146
00:10:38,060 --> 00:10:43,805
se cargue toda la página antes de que vea algo en la ventana de su navegador.

147
00:10:43,805 --> 00:10:48,720
Así que es por eso que normalmente cargamos las clases de JavaScript

148
00:10:48,720 --> 00:10:55,325
hacia el final de nuestra página html justo antes de la tecnología del cuerpo.

149
00:10:55,325 --> 00:10:58,270
Después de realizar estos cambios,

150
00:10:58,270 --> 00:11:00,065
vamos a guardar el archivo.

151
00:11:00,065 --> 00:11:04,420
Ahora, la razón por la que estoy mostrando el

152
00:11:04,420 --> 00:11:09,385
archivo index.html en mi editor y también el navegador justo al lado es, en

153
00:11:09,385 --> 00:11:13,630
el momento en que guarde los cambios que ha hecho en el archivo index.html,

154
00:11:13,630 --> 00:11:18,920
tenga en cuenta cómo la representación del navegador de ese archivo se

155
00:11:18,920 --> 00:11:26,525
actualiza inmediatamente y vea Bootstrap ya en acción en la página.

156
00:11:26,525 --> 00:11:33,150
En este momento, verás que tu página está usando Times New Roman para representar todo el contenido.

157
00:11:33,150 --> 00:11:36,130
En el momento en que guardo la página web,

158
00:11:36,130 --> 00:11:42,670
usted nota que las fuentes que se utilizan en su página web han cambiado.

159
00:11:42,670 --> 00:11:48,425
Ahora, su página web está configurada para hacer uso de las clases de Bootstrap,

160
00:11:48,425 --> 00:11:53,850
y está usando la tipografía predeterminada de Bootstraps para representar todo el contenido.

161
00:11:53,850 --> 00:12:01,360
Bootstrap utiliza por defecto Helvetica Neue para la fuente.

162
00:12:01,360 --> 00:12:06,180
Puede cambiar la fuente predeterminada para bootstrap y así sucesivamente,

163
00:12:06,180 --> 00:12:09,905
pero eso estará más allá del alcance de nuestra discusión en este momento.

164
00:12:09,905 --> 00:12:15,120
Por lo tanto, una vez que configure su página index.html y la guarde,

165
00:12:15,120 --> 00:12:20,710
inmediatamente verá Bootstrap entrando en acción en nuestra página web.

166
00:12:20,710 --> 00:12:23,675
Así que así es como voy a seguir ilustrando, a

167
00:12:23,675 --> 00:12:27,385
medida que agregamos varios bootstraps, clases CSS

168
00:12:27,385 --> 00:12:30,435
y componentes a nuestra página web,

169
00:12:30,435 --> 00:12:35,720
cómo la representación de la misma en nuestro navegador seguirá cambiando.

170
00:12:35,720 --> 00:12:44,860
Ahora, obviamente, la representación de la página en nuestro navegador sigue siendo terrible.

171
00:12:44,860 --> 00:12:49,230
Es mejor que la típica página web de profesores de ciencias de la computación,

172
00:12:49,230 --> 00:12:51,715
pero definitivamente no legible.

173
00:12:51,715 --> 00:12:58,320
Ahora tenemos que poner en acción las diversas clases CSS y

174
00:12:58,320 --> 00:12:59,910
los componentes de JavaScript que

175
00:12:59,910 --> 00:13:06,960
nuestro marco de interfaz de usuario web de Bootstrap proporciona para diseñar nuestra página web.

176
00:13:06,960 --> 00:13:12,720
Por lo tanto, lo haremos paso a paso a medida que avancemos en este ejercicio.

177
00:13:12,720 --> 00:13:18,535
Este puede ser un momento conveniente para que realice una confirmación de git de

178
00:13:18,535 --> 00:13:24,355
los cambios que ha realizado para que al final de este ejercicio, el

179
00:13:24,355 --> 00:13:30,365
estado de su carpeta de proyecto se guarde en su repositorio git.

180
00:13:30,365 --> 00:13:36,610
Ir a mi carpeta Confusion en otra pestaña de mi ventana de terminal,

181
00:13:36,610 --> 00:13:38,990
si escribo estado de git,

182
00:13:38,990 --> 00:13:44,455
ahora veo que mi archivo index.html y el paquete del archivo JSON se han modificado.

183
00:13:44,455 --> 00:13:47,930
Así que voy a hacer un compromiso.

184
00:13:59,540 --> 00:14:04,635
Entonces, ahora, mi estado de

185
00:14:04,635 --> 00:14:10,610
la carpeta al final de este ejercicio se ha comprometido en mi repositorio git.

186
00:14:10,610 --> 00:14:13,920
Puede sincronizarlo con su repositorio en línea para que

187
00:14:13,920 --> 00:14:18,390
el estado de su proyecto se guarde en este punto.

188
00:14:18,390 --> 00:14:24,955
Con esto, completamos nuestro primer ejercicio de Bootstrap.

189
00:14:24,955 --> 00:14:33,210
Ya ha visto cómo podemos configurar Bootstrap para ser utilizado en nuestro proyecto web. A

190
00:14:33,210 --> 00:14:36,140
medida que procedamos a los próximos ejercicios,

191
00:14:36,140 --> 00:14:42,470
vamos a emplear las clases de Bootstrap para diseñar nuestras páginas web.