1
00:00:06,210 --> 00:00:08,470
Allacciati gli stivali e iniziamo con Bootstrap.

2
00:00:08,470 --> 00:00:13,045
Sono sicuro che le tue dita abbiano voglia di mettere le mani intorno a Bootstrap.

3
00:00:13,045 --> 00:00:18,250
Quindi, primo passo, vai

4
00:00:18,250 --> 00:00:22,280
alle istruzioni di esercizio che seguono questo video

5
00:00:22,280 --> 00:00:27,805
nella pagina del tuo corso Bootstrap su Coursera.

6
00:00:27,805 --> 00:00:29,840
E poi nelle istruzioni,

7
00:00:29,840 --> 00:00:35,520
vedrai un link a questo file Bootstrap4-starter.zip.

8
00:00:35,520 --> 00:00:39,695
Scarica il file zip sul tuo computer.

9
00:00:39,695 --> 00:00:46,610
Inoltre, le istruzioni dettagliate illustrate in questo video

10
00:00:46,610 --> 00:00:52,995
verranno fornite anche nelle istruzioni di esercizio che seguono questo video.

11
00:00:52,995 --> 00:01:00,595
Lì, avrai accesso a tutti gli snippet di codice necessari per questo esercizio.

12
00:01:00,595 --> 00:01:04,920
Questo sarebbe il caso anche per tutti gli esercizi in futuro.

13
00:01:04,920 --> 00:01:08,125
Quindi, se hai bisogno di entrare in possesso degli snippet di codice,

14
00:01:08,125 --> 00:01:10,145
ecco dove li troverai.

15
00:01:10,145 --> 00:01:12,180
Dopo aver scaricato il file zip,

16
00:01:12,180 --> 00:01:16,230
spostare il file zip in una posizione comoda sul computer.

17
00:01:16,230 --> 00:01:23,375
Quindi, qui, l'ho spostato in una cartella chiamata Coursera sul mio computer,

18
00:01:23,375 --> 00:01:27,145
e poi ho il file zip con questo nome lungo lì.

19
00:01:27,145 --> 00:01:28,765
Basta decomprimere il file.

20
00:01:28,765 --> 00:01:30,445
Una volta decompresso il file,

21
00:01:30,445 --> 00:01:36,715
troverai una cartella denominata Bootstrap4 creata nel tuo computer.

22
00:01:36,715 --> 00:01:38,965
All' interno della cartella Bootstrap4,

23
00:01:38,965 --> 00:01:42,450
vedrai un'altra cartella denominata Confusione, lì.

24
00:01:42,450 --> 00:01:46,260
Vai nella cartella Confusione e vedrai due file lì,

25
00:01:46,260 --> 00:01:49,600
index.html e il file package.json.

26
00:01:49,600 --> 00:01:53,795
Ora, aprire una finestra di comando o

27
00:01:53,795 --> 00:02:00,290
un terminale e quindi passare a questa cartella nella finestra di comando o terminale.

28
00:02:00,290 --> 00:02:05,125
Al prompt dei comandi, digitare npm install.

29
00:02:05,125 --> 00:02:09,150
Si noti che ho già il file package.json lì dentro.

30
00:02:09,150 --> 00:02:12,745
Quindi il file package.json è configurato in modo che

31
00:02:12,745 --> 00:02:19,200
la dipendenza di sviluppo lite-server venga installata se digito npm install.

32
00:02:19,200 --> 00:02:21,150
Quindi, una volta digitato npm install,

33
00:02:21,150 --> 00:02:27,160
vedrai che il lite-server verrà installato nella tua cartella node_modules ciascuno.

34
00:02:27,160 --> 00:02:30,415
Una volta completata questa operazione,

35
00:02:30,415 --> 00:02:35,930
apri questa cartella nel tuo editor preferito.

36
00:02:35,930 --> 00:02:39,060
Una volta aperta la cartella nel tuo editor,

37
00:02:39,060 --> 00:02:45,170
crea un file.gitignore e

38
00:02:45,170 --> 00:02:50,530
poi metti node_modules nel file gitignore e salva.

39
00:02:50,530 --> 00:02:54,940
Quindi questo è per garantire che quando si esegue un gitcommit,

40
00:02:54,940 --> 00:02:57,615
la cartella node_modules non verrà impegnata.

41
00:02:57,615 --> 00:03:05,475
Dopodiché, è ora di andare a prendere Bootstrap per l'uso nel nostro progetto.

42
00:03:05,475 --> 00:03:08,050
Prima di recuperare Bootstrap,

43
00:03:08,050 --> 00:03:11,810
facciamo un commit dello stato corrente del file.

44
00:03:11,810 --> 00:03:18,535
Quindi, fai git init e inizializza il tuo repository git.

45
00:03:18,535 --> 00:03:21,600
Quindi puoi controllare lo stato git,

46
00:03:21,600 --> 00:03:25,290
e vedresti che questi file devono essere impegnati,

47
00:03:25,290 --> 00:03:29,315
aggiungi tutti i file,

48
00:03:29,315 --> 00:03:38,885
gitcommit -m «Configurazione iniziale».

49
00:03:38,885 --> 00:03:43,745
Quindi questo è il punto di partenza della tua cartella in questo momento.

50
00:03:43,745 --> 00:03:52,785
Quindi, con questo, il tuo punto di partenza del tuo progetto web è stato ora impegnato a git.

51
00:03:52,785 --> 00:03:57,770
Ora puoi configurare questo git per sincronizzarlo con un repository online,

52
00:03:57,770 --> 00:04:00,800
proprio come abbiamo parlato negli esercizi git.

53
00:04:00,800 --> 00:04:05,690
Quindi puoi impostare un repository su Bitbucket o su Github e quindi

54
00:04:05,690 --> 00:04:11,430
sincronizzare questo progetto con quel repository git.

55
00:04:11,430 --> 00:04:15,265
Il nostro prossimo passo è andare a prendere Bootstrap.

56
00:04:15,265 --> 00:04:25,260
Per fare ciò, aggiungi il tipo di prompt npm install bootstrap @4 .0.0 e anche —save,

57
00:04:25,260 --> 00:04:29,470
e lascia che Bootstrap sia installato.

58
00:04:29,470 --> 00:04:31,880
Una volta installato Bootstrap,

59
00:04:31,880 --> 00:04:35,535
ci rendiamo conto che abbiamo anche bisogno di installare il suo peer,

60
00:04:35,535 --> 00:04:38,975
che è jQuery e Popper.js.

61
00:04:38,975 --> 00:04:46,350
Quindi andiamo avanti e installiamo sia jQuery che Popper.js in questa cartella del progetto.

62
00:04:46,350 --> 00:04:50,905
Quindi, per fare ciò, aggiungi il tipo di prompt npm install

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

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

65
00:05:03,185 --> 00:05:06,385
Ora, ogni volta che installo uno qualsiasi dei pacchetti npm,

66
00:05:06,385 --> 00:05:11,620
sto specificando esplicitamente la versione del pacchetto che dovresti installare.

67
00:05:11,620 --> 00:05:17,580
La ragione di ciò è che voglio assicurarmi che mentre esegui questo esercizio,

68
00:05:17,580 --> 00:05:19,500
tutti i passaggi funzioneranno correttamente.

69
00:05:19,500 --> 00:05:25,380
Quindi sto specificando la versione esatta dei moduli npm da installare.

70
00:05:25,380 --> 00:05:33,235
Quindi, qui, stiamo installando la versione jQuery 3.3.1 e Popper.js versione 1.12.9.

71
00:05:33,235 --> 00:05:40,895
Successivamente, inoltre, specificherò le versioni esatte dei moduli da installare.

72
00:05:40,895 --> 00:05:44,130
Quindi andiamo avanti e installate questi.

73
00:05:46,530 --> 00:05:49,030
E una volta installati,

74
00:05:49,030 --> 00:05:51,055
possiamo andare al passo successivo.

75
00:05:51,055 --> 00:05:55,615
Tornando alla nostra cartella di progetto,

76
00:05:55,615 --> 00:05:58,070
vedresti che se vai in node_modules,

77
00:05:58,070 --> 00:06:02,675
vedrai una cartella lì chiamata Bootstrap.

78
00:06:02,675 --> 00:06:04,865
E all'interno della cartella denominata Bootstrap,

79
00:06:04,865 --> 00:06:07,845
troverai una cartella denominata dist.

80
00:06:07,845 --> 00:06:09,910
Quindi, all'interno della cartella dist,

81
00:06:09,910 --> 00:06:13,705
troverai due sottocartelle denominate CSS e js.

82
00:06:13,705 --> 00:06:15,775
Se vai nella cartella CSS,

83
00:06:15,775 --> 00:06:20,820
troverai un sacco di file CSS precompilati qui.

84
00:06:20,820 --> 00:06:27,630
Quello che ci interessa all'inizio è Bootstrap min.css.

85
00:06:27,630 --> 00:06:31,620
Questo è il file che stiamo per includere nel nostro

86
00:06:31,620 --> 00:06:36,020
file index.html per fare uso di Bootstrap nel nostro progetto.

87
00:06:36,020 --> 00:06:38,820
Allo stesso modo, andando alla cartella js,

88
00:06:38,820 --> 00:06:42,165
vedresti che c'è un file Bootstrap min.js. Lo

89
00:06:42,165 --> 00:06:45,680
includeremo anche nel nostro index.htm.

90
00:06:45,680 --> 00:06:48,790
Quindi questo sarà il prossimo passo che mi vedrai fare.

91
00:06:48,790 --> 00:06:51,215
Prima di andare al passo successivo,

92
00:06:51,215 --> 00:06:55,550
iniziamo il nostro lite-server in modo da poter vedere le modifiche che apportiamo al

93
00:06:55,550 --> 00:07:01,860
index.html immediatamente riflesse nella nostra pagina web in tempo reale.

94
00:07:01,860 --> 00:07:03,630
Quindi avviamo lite-server.

95
00:07:03,630 --> 00:07:07,240
Quindi, digita il prompt tipo npm start,

96
00:07:07,240 --> 00:07:09,915
e quindi che dovrebbe avviare il tuo lite-server.

97
00:07:09,915 --> 00:07:13,485
Ora puoi vedere, sullo schermo, il

98
00:07:13,485 --> 00:07:21,785
mio editor a sinistra e la versione corrente della pagina index.html a destra.

99
00:07:21,785 --> 00:07:23,215
Quindi, come puoi vedere,

100
00:07:23,215 --> 00:07:27,615
ho già configurato la pagina index.html con alcuni contenuti.

101
00:07:27,615 --> 00:07:33,820
Questa pagina web sembra la tipica pagina web di un professore di informatica.

102
00:07:33,820 --> 00:07:41,170
Apriamo ora la pagina index.html nel nostro editor.

103
00:07:41,170 --> 00:07:45,645
E poi nella parte principale della pagina index.html,

104
00:07:45,645 --> 00:07:47,360
subito prima del titolo,

105
00:07:47,360 --> 00:07:49,935
ho intenzione di incollare un po 'di codice.

106
00:07:49,935 --> 00:07:53,730
Questo frammento di codice ti viene fornito nelle istruzioni.

107
00:07:53,730 --> 00:07:56,740
Quindi puoi semplicemente copiare e incollare questo frammento di codice

108
00:07:56,740 --> 00:08:00,765
e ti guiderò attraverso ciò che questo frammento di codice sta cercando di fare.

109
00:08:00,765 --> 00:08:05,585
Noterai che ho tre meta tag qui.

110
00:08:05,585 --> 00:08:09,130
Il primo dice charset = «utf-8".

111
00:08:09,130 --> 00:08:11,860
Quindi questo è l'unicode che verrà utilizzato.

112
00:08:11,860 --> 00:08:17,675
La seconda riga che dice meta name = «viewport»,

113
00:08:17,675 --> 00:08:21,100
tornerò e

114
00:08:21,100 --> 00:08:25,745
ti spiegherò questa particolare riga nella prossima lezione quando vedremo il web design reattivo.

115
00:08:25,745 --> 00:08:30,100
Ora, permettetemi di attirare la vostra attenzione su questa particolare linea che

116
00:08:30,100 --> 00:08:34,840
dice link rel= «foglio di stile», e poi href.

117
00:08:34,840 --> 00:08:43,495
Nota che sto specificando href come «node_modules/bootstrap/dist/css/bootstrap.min.css».

118
00:08:43,495 --> 00:08:49,150
Quindi quello che sto specificando è che il file bootstrap.min.css,

119
00:08:49,150 --> 00:08:52,970
che contiene le classi CSS corrispondenti a Bootstrap che abbiamo

120
00:08:52,970 --> 00:08:57,995
scaricato usando NPM nella nostra cartella node_modules,

121
00:08:57,995 --> 00:09:05,350
lo includerò nella testa della mia pagina index.html.

122
00:09:05,350 --> 00:09:09,370
Quindi è necessario includere le classi CSS fornite da Bootstrap.

123
00:09:09,370 --> 00:09:15,150
È inoltre necessario includere le classi JavaScript fornite da Bootstrap,

124
00:09:15,150 --> 00:09:19,445
che stiamo andando a fare in fondo a questa pagina.

125
00:09:19,445 --> 00:09:23,465
Andando in fondo a questa pagina, nota,

126
00:09:23,465 --> 00:09:27,400
poco prima del tag body di chiusura,

127
00:09:27,400 --> 00:09:32,820
ho intenzione di incollare il codice per includere tutti gli script lì.

128
00:09:32,820 --> 00:09:35,105
Quindi, per fare ciò,

129
00:09:35,105 --> 00:09:41,300
incolla le tre righe per lo script per includere jQuery

130
00:09:41,300 --> 00:09:45,085
, Popper.js e anche Bootstrap min.js.

131
00:09:45,085 --> 00:09:48,635
E nota l'ordine in cui ho incluso questo.

132
00:09:48,635 --> 00:09:50,895
Quindi il Bootstrap è in basso.

133
00:09:50,895 --> 00:09:57,340
Quindi, poiché Bootstrap dipende sia da jQuery che da Popper in quell'ordine,

134
00:09:57,340 --> 00:09:59,945
quindi inserirò prima jQuery.

135
00:09:59,945 --> 00:10:03,835
E poi, dopo, inseriamo Popper, e infine,

136
00:10:03,835 --> 00:10:09,585
Bootstrap min.js nella parte inferiore del file index.html.

137
00:10:09,585 --> 00:10:13,400
Ora, questo è incluso nella parte inferiore della pagina.

138
00:10:13,400 --> 00:10:18,665
Perché quando si carica la pagina da un server web,

139
00:10:18,665 --> 00:10:24,360
si desidera che le classi CSS vengano caricate immediatamente in modo che quando la pagina inizia

140
00:10:24,360 --> 00:10:26,430
il rendering, quando

141
00:10:26,430 --> 00:10:29,810
il JavaScript viene recuperato, il JavaScript deve essere eseguito per apportare modifiche

142
00:10:29,810 --> 00:10:33,395
alla pagina con il codice JavaScript

143
00:10:33,395 --> 00:10:34,970
e che ci vorrà un po 'di tempo.

144
00:10:34,970 --> 00:10:38,060
Quindi non vuoi che l'utente stia aspettando che

145
00:10:38,060 --> 00:10:43,805
l'intera pagina venga caricata prima che veda qualcosa nella finestra del browser.

146
00:10:43,805 --> 00:10:48,720
Ecco perché normalmente carichiamo le classi JavaScript

147
00:10:48,720 --> 00:10:55,325
verso la fine della nostra pagina html poco prima del body tech.

148
00:10:55,325 --> 00:10:58,270
Dopo aver apportato queste modifiche,

149
00:10:58,270 --> 00:11:00,065
salviamo il file.

150
00:11:00,065 --> 00:11:04,420
Ora, il motivo per cui sto mostrando il

151
00:11:04,420 --> 00:11:09,385
file index.html nel mio editor e anche il browser accanto ad esso è,

152
00:11:09,385 --> 00:11:13,630
nel momento in cui salvi le modifiche apportate al file index.html,

153
00:11:13,630 --> 00:11:18,920
nota come il rendering del browser di quel file si

154
00:11:18,920 --> 00:11:26,525
aggiorna immediatamente e vedi Bootstrap già in azione su la pagina.

155
00:11:26,525 --> 00:11:33,150
In questo momento, vedrai che la tua pagina sta usando Times New Roman per visualizzare tutti i contenuti.

156
00:11:33,150 --> 00:11:36,130
Nel momento in cui salvo la pagina web,

157
00:11:36,130 --> 00:11:42,670
si nota che i font utilizzati sulla pagina web sono cambiati.

158
00:11:42,670 --> 00:11:48,425
Ora, la tua pagina web è impostata per fare uso delle classi Bootstrap,

159
00:11:48,425 --> 00:11:53,850
e sta usando la tipografia predefinita Bootstraps per rendere tutto il contenuto.

160
00:11:53,850 --> 00:12:01,360
Bootstrap per impostazione predefinita utilizza Helvetica Neue per il font.

161
00:12:01,360 --> 00:12:06,180
Puoi cambiare il font predefinito per bootstrap e così via,

162
00:12:06,180 --> 00:12:09,905
ma questo andrà oltre lo scopo della nostra discussione in questo momento.

163
00:12:09,905 --> 00:12:15,120
Quindi, una volta impostata la pagina index.html e salvarla,

164
00:12:15,120 --> 00:12:20,710
vedrai immediatamente Bootstrap entrare in azione nella nostra pagina web.

165
00:12:20,710 --> 00:12:23,675
Quindi questo è come ho intenzione di continuare a illustrare,

166
00:12:23,675 --> 00:12:27,385
come aggiungiamo vari bootstrap, classi CSS

167
00:12:27,385 --> 00:12:30,435
e componenti alla nostra pagina web,

168
00:12:30,435 --> 00:12:35,720
come il rendering di esso nel nostro browser continuerà a cambiare.

169
00:12:35,720 --> 00:12:44,860
Ora, ovviamente, il rendering della pagina nel nostro browser è ancora terribile.

170
00:12:44,860 --> 00:12:49,230
È meglio della tipica pagina web dei professori di informatica,

171
00:12:49,230 --> 00:12:51,715
ma sicuramente non leggibile.

172
00:12:51,715 --> 00:12:58,320
Dobbiamo ora mettere in azione le varie classi CSS e

173
00:12:58,320 --> 00:12:59,910
i componenti JavaScript che il

174
00:12:59,910 --> 00:13:06,960
nostro framework web UI Bootstrap fornisce al fine di progettare la nostra pagina web.

175
00:13:06,960 --> 00:13:12,720
Quindi faremo quel passo dopo passo mentre passiamo attraverso questo esercizio.

176
00:13:12,720 --> 00:13:18,535
Questo potrebbe essere un momento conveniente per fare un git commit

177
00:13:18,535 --> 00:13:24,355
delle modifiche che hai fatto in modo che alla fine di questo esercizio,

178
00:13:24,355 --> 00:13:30,365
il tuo stato della cartella del progetto venga salvato nel tuo repository git.

179
00:13:30,365 --> 00:13:36,610
Andando alla mia cartella Confusione in un'altra scheda della mia finestra del terminale,

180
00:13:36,610 --> 00:13:38,990
se digito git status,

181
00:13:38,990 --> 00:13:44,455
ora vedo che il mio file index.html e il pacchetto del file JSON sono stati modificati.

182
00:13:44,455 --> 00:13:47,930
Quindi ho intenzione di fare un commit.

183
00:13:59,540 --> 00:14:04,635
Quindi, ora, il mio stato

184
00:14:04,635 --> 00:14:10,610
della cartella alla fine di questo esercizio è stato impegnato nel mio repository git.

185
00:14:10,610 --> 00:14:13,920
Puoi sincronizzarlo con il tuo repository online in modo che

186
00:14:13,920 --> 00:14:18,390
lo stato del tuo progetto venga salvato a questo punto.

187
00:14:18,390 --> 00:14:24,955
Con questo, completiamo il nostro primo esercizio Bootstrap.

188
00:14:24,955 --> 00:14:33,210
Ora avete visto come possiamo configurare Bootstrap per essere utilizzato nel nostro progetto web.

189
00:14:33,210 --> 00:14:36,140
Mentre procediamo ai prossimi esercizi,

190
00:14:36,140 --> 00:14:42,470
andremo a dipendenti le classi Bootstrap per progettare le nostre pagine web.