1
00:00:03,260 --> 00:00:09,800
Benvenuti in framework e strumenti dell'interfaccia utente Web front-end: Bootstrap 4.

2
00:00:09,800 --> 00:00:13,565
Sono contento che tu abbia deciso di partecipare a questo corso per

3
00:00:13,565 --> 00:00:18,265
conoscere il framework dell'interfaccia utente Web front-end più popolare: Bootstrap.

4
00:00:18,265 --> 00:00:20,995
Vedremo vari aspetti di Bootstrap.

5
00:00:20,995 --> 00:00:29,520
Attraverso diversi esempi, imparerai facendo esercizi come parte di questo corso.

6
00:00:29,520 --> 00:00:32,900
Diamo un'occhiata ad alcuni dettagli dopo.

7
00:00:32,970 --> 00:00:35,890
Prima di iniziare questo corso,

8
00:00:35,890 --> 00:00:38,760
assicurarsi di disporre di conoscenze sufficienti

9
00:00:38,760 --> 00:00:41,625
per avere successo in questo corso.

10
00:00:41,625 --> 00:00:44,455
Dovresti avere una buona conoscenza di HTML

11
00:00:44,455 --> 00:00:48,920
, CSS e JavaScript prima di iniziare il corso.

12
00:00:48,920 --> 00:00:54,225
Dal mio punto di vista, il web design e lo sviluppo si compongono

13
00:00:54,225 --> 00:00:58,320
di due aspetti: uno è il design del sito web e

14
00:00:58,320 --> 00:01:04,610
della pagina web, il secondo è l'effettiva costruzione e distribuzione della pagina web stessa.

15
00:01:04,610 --> 00:01:06,845
Dal punto di vista del design,

16
00:01:06,845 --> 00:01:13,625
quello che intendo è il design dell'interfaccia utente e l'esperienza utente,

17
00:01:13,625 --> 00:01:16,815
il visual design, la prototipazione,

18
00:01:16,815 --> 00:01:20,164
gli elementi di colori,

19
00:01:20,164 --> 00:01:23,815
grafica e animazione che potrebbero essere di interesse.

20
00:01:23,815 --> 00:01:29,645
In questa Specializzazione, non stiamo esaminando questo aspetto dello sviluppo web.

21
00:01:29,645 --> 00:01:32,650
Invece, stiamo guardando a quel secondo aspetto,

22
00:01:32,650 --> 00:01:34,680
che è lo sviluppo, la costruzione

23
00:01:34,680 --> 00:01:40,825
e la distribuzione di siti web e pagine web, utilizzando tecnologie

24
00:01:40,825 --> 00:01:45,190
come i framework dell'interfaccia utente web front-end come Bootstrap,

25
00:01:45,190 --> 00:01:52,030
forse framework JavaScript come Angular o una libreria come React

26
00:01:52,030 --> 00:01:55,700
e mobile ibrido per progettare

27
00:01:55,700 --> 00:02:00,950
applicazioni mobili e anche lo sviluppo lato server utilizzando Node,

28
00:02:00,950 --> 00:02:06,670
Express, MongoDB, lo stack principale in modo più dettagliato.

29
00:02:06,670 --> 00:02:09,530
Se stai guardando la Specializzazione,

30
00:02:09,530 --> 00:02:13,035
pensando all'aspetto del design del sito web,

31
00:02:13,035 --> 00:02:16,260
allora potresti voler ripensarci.

32
00:02:16,260 --> 00:02:19,360
Questa specializzazione si concentra

33
00:02:19,360 --> 00:02:25,115
sullo sviluppo e la distribuzione di siti web e pagine web,

34
00:02:25,115 --> 00:02:31,065
una conoscenza puramente tecnica sull'utilizzo delle

35
00:02:31,065 --> 00:02:37,310
competenze HTML, CSS e basate su JavaScript per lo sviluppo effettivo del sito web.

36
00:02:37,310 --> 00:02:43,080
Probabilmente ti stai anche chiedendo cosa si intende per sviluppo web full stack.

37
00:02:43,080 --> 00:02:48,385
Vedremo ulteriori dettagli sullo sviluppo web dello stack completo nella prossima lezione.

38
00:02:48,385 --> 00:02:52,835
In particolare, se stai guardando come questo corso è

39
00:02:52,835 --> 00:02:57,665
posizionato nel contesto generale dello sviluppo web full stack,

40
00:02:57,665 --> 00:03:02,790
in questo corso, abbiamo a che fare con lo sviluppo di interfaccia utente web front-end.

41
00:03:02,790 --> 00:03:07,565
In particolare, l'interfaccia utente Framework Bootstrap 4.

42
00:03:07,565 --> 00:03:10,245
Saremo esaminati gli aspetti rimanenti dello

43
00:03:10,245 --> 00:03:15,845
sviluppo web full stack nel resto di questa specializzazione.

44
00:03:15,845 --> 00:03:19,640
Questo corso esamina Bootstrap in dettaglio.

45
00:03:19,640 --> 00:03:23,640
Vedremo anche il responsive web design e come Bootstrap supporta il

46
00:03:23,640 --> 00:03:27,750
web design reattivo attraverso il sistema Bootstrap Grid.

47
00:03:27,750 --> 00:03:33,050
Vedremo i componenti CSS e basati su JavaScript in Bootstrap e come è

48
00:03:33,050 --> 00:03:38,660
possibile utilizzarli nella costruzione del tuo sito web e delle tue pagine web.

49
00:03:38,660 --> 00:03:45,200
Lungo la strada, impareremo a conoscere lo sviluppo web usando la riga di comando.

50
00:03:45,200 --> 00:03:48,570
Quindi impareremo molti strumenti web

51
00:03:48,570 --> 00:03:52,635
basati sulla riga di comando e sull'ecosistema Node.js.

52
00:03:52,635 --> 00:03:54,630
Esamineremo brevemente Git,

53
00:03:54,630 --> 00:04:03,355
aggiungiamo Node.js e guarderemo gli strumenti basati su Noje.js inclusi i task runner come Grunt e Gulp.

54
00:04:03,355 --> 00:04:08,235
Questo corso, di per sé, è strutturato in moduli completi.

55
00:04:08,235 --> 00:04:12,195
Ogni modulo corrisponde approssimativamente a una settimana di lavoro.

56
00:04:12,195 --> 00:04:13,830
Nel primo modulo,

57
00:04:13,830 --> 00:04:17,795
otterremo la visione d'insieme dello sviluppo web full stack,

58
00:04:17,795 --> 00:04:22,895
quindi otterrai una rapida introduzione a Git e Node.js.

59
00:04:22,895 --> 00:04:29,450
Quindi ti presenteremo il Bootstrap e quindi rivedremo il sistema Bootstrap Grid.

60
00:04:29,450 --> 00:04:34,180
Questo ti condurrà al primo incarico di questo corso.

61
00:04:34,180 --> 00:04:38,520
Il secondo modulo si occupa di componenti CSS Bootstrap.

62
00:04:38,520 --> 00:04:42,445
Vedremo il design della barra di navigazione Bootstrap

63
00:04:42,445 --> 00:04:46,875
e come possiamo utilizzarlo per supportare la navigazione.

64
00:04:46,875 --> 00:04:51,565
Vedremo l'input dell'utente attraverso

65
00:04:51,565 --> 00:04:58,649
pulsanti e moduli poi vedremo come possiamo visualizzare il contenuto utilizzando tabelle e schede.

66
00:04:58,649 --> 00:05:06,340
Poi vedremo come possiamo includere immagini e supporti nella nostra pagina Web utilizzando immagini

67
00:05:06,340 --> 00:05:08,590
, miniature e oggetti multimediali.

68
00:05:08,590 --> 00:05:13,095
E poi, infine, guardiamo al modo in cui avvisiamo gli utenti utilizzando tag,

69
00:05:13,095 --> 00:05:14,680
avvisi e barre di avanzamento.

70
00:05:14,680 --> 00:05:19,615
Questo dovrebbe portarti al tuo secondo incarico.

71
00:05:19,615 --> 00:05:25,425
Il terzo modulo si occupa di componenti JavaScript Bootstrap.

72
00:05:25,425 --> 00:05:27,980
Vedremo la visione d'insieme di

73
00:05:27,980 --> 00:05:32,930
come funzionano i componenti JavaScript Bootstrap, esamineremo le schede, le

74
00:05:32,930 --> 00:05:34,635
pillole e la navigazione

75
00:05:34,635 --> 00:05:40,874
a schede, quindi vedremo come il collasso e la fisarmonica possono essere utilizzati per mostrare e nascondere il contenuto.

76
00:05:40,874 --> 00:05:43,730
E poi esamineremo l'uso di tooltip,

77
00:05:43,730 --> 00:05:48,610
popover e modals per rivelare i contenuti da visualizzare nella tua pagina.

78
00:05:48,610 --> 00:05:52,230
E poi vedremo il componente carosello,

79
00:05:52,230 --> 00:05:58,235
che ti consente di visualizzare informazioni scorrevoli sulla tua pagina web.

80
00:05:58,235 --> 00:06:02,670
Questo dovrebbe portarti al terzo incarico di questo corso.

81
00:06:02,670 --> 00:06:11,625
L' ultimo modulo si occupa di Bootstrap e jQuery e vari strumenti di sviluppo.

82
00:06:11,625 --> 00:06:17,070
Vedremo, in particolare, come Bootstrap e jQuery interagiscono e come puoi

83
00:06:17,070 --> 00:06:23,535
scrivere codice jQuery e JavaScript per controllare il tuo componente JavaScript Bootstrap.

84
00:06:23,535 --> 00:06:28,230
Esaminiamo i vari metodi supportati dai componenti JavaScript Bootstrap,

85
00:06:28,230 --> 00:06:31,510
che possono essere sfruttati per scrivere

86
00:06:31,510 --> 00:06:35,735
codice JavaScript per controllare il comportamento di questi componenti.

87
00:06:35,735 --> 00:06:44,509
Quindi esamineremo il linguaggio di pre-elaborazione CSS è come MENO e Sass.

88
00:06:44,509 --> 00:06:49,675
Poi, infine, vedremo come possiamo costruire e distribuire il nostro sito web

89
00:06:49,675 --> 00:06:57,345
utilizzando script NPM o task runner come Grunt e Gulp.

90
00:06:57,345 --> 00:07:03,485
Questo dovrebbe portarti fino all'assegnazione finale di questo corso.

91
00:07:03,485 --> 00:07:06,990
Spero che ti divertirai molto a fare

92
00:07:06,990 --> 00:07:12,920
le varie parti di questo corso e goderti anche gli esercizi che

93
00:07:12,920 --> 00:07:16,850
incontrerai in ogni fase che ti consentiranno di

94
00:07:16,850 --> 00:07:23,430
comprendere meglio i vari aspetti del framework dell'interfaccia utente web di Bootstrap.