1
00:00:00,000 --> 00:00:04,879
[MUSIC]

2
00:00:04,879 --> 00:00:11,307
I framework di interfaccia utente Web front-end stanno diventando il loro approccio preferito per la

3
00:00:11,307 --> 00:00:16,320
progettazione e l'implementazione dei loro siti Web recenti.

4
00:00:16,320 --> 00:00:20,220
Chiediamoci cosa sono esattamente front-end Web UI Frameworks

5
00:00:20,220 --> 00:00:24,150
e impariamo un po 'più dettagli su di loro.

6
00:00:24,150 --> 00:00:27,700
Successivamente, quindi ovviamente

7
00:00:27,700 --> 00:00:33,090
in questa lezione ci chiederemo, quali sono i framework front-end?

8
00:00:33,090 --> 00:00:34,050
Cosa contengono?

9
00:00:35,130 --> 00:00:38,780
Quali sono alcuni dei più popolari framework dell'interfaccia utente front-end?

10
00:00:38,780 --> 00:00:44,130
E perché abbiamo bisogno di fare uso di framework interfaccia utente front-end quando progettiamo

11
00:00:44,130 --> 00:00:46,460
i nostri siti web?

12
00:00:46,460 --> 00:00:50,410
Quindi quali sono i framework dell'interfaccia utente web front-end?

13
00:00:50,410 --> 00:00:52,800
Facciamo un passo indietro e

14
00:00:52,800 --> 00:00:57,580
immagina di conoscere solo HTML, CSS e JavaScript.

15
00:00:57,580 --> 00:01:03,540
Se vi è stato chiesto di progettare un nuovo sito web, si dovrebbe ovviamente andare a costruire

16
00:01:03,540 --> 00:01:08,510
e implementare l'intero sito web utilizzando le competenze tecniche che

17
00:01:08,510 --> 00:01:13,490
avete in base alla vostra conoscenza di HTML, CSS, e JavaScript.

18
00:01:13,490 --> 00:01:16,880
Spesso ti rendi conto che ci sono molti

19
00:01:16,880 --> 00:01:21,580
componenti ripetuti che useresti sul tuo sito web.

20
00:01:21,580 --> 00:01:27,590
E finiresti per progettare il tuo set di classi CSS.

21
00:01:27,590 --> 00:01:30,730
Si progetterà un componente basato su JavaScript.

22
00:01:30,730 --> 00:01:34,940
E poi una volta che si ottiene un gruppo di questi insieme,

23
00:01:36,180 --> 00:01:40,770
ogni volta che è necessario progettare un nuovo sito web si sarebbe facendo uso di questi

24
00:01:40,770 --> 00:01:45,670
set predefiniti di classi CSS e

25
00:01:45,670 --> 00:01:49,549
componenti basati su JavaScript per implementare rapidamente un nuovo sito web.

26
00:01:50,740 --> 00:01:53,480
Perché non portarlo alla sua logica conclusione?

27
00:01:54,750 --> 00:02:00,610
Che ne dici, se progettiamo un intero framework che consiste di

28
00:02:00,610 --> 00:02:07,522
componenti dell'interfaccia utente web pronti all'uso HTML, CSS e JavaScript.

29
00:02:07,522 --> 00:02:12,930
Quindi, qui, un framework interfaccia utente web front-end

30
00:02:12,930 --> 00:02:17,850
può definire un sacco di classi CSS che

31
00:02:17,850 --> 00:02:22,905
ci permetterà di includere componenti come pulsanti,

32
00:02:22,905 --> 00:02:27,985
tabelle, barre di navigazione, menu a discesa, avvisi,

33
00:02:27,985 --> 00:02:32,615
modali, schede, fisarmoniche e molti altri.

34
00:02:33,687 --> 00:02:39,027
E ci permettono rapidamente di progettare e implementare un sito web.

35
00:02:39,027 --> 00:02:43,887
Quindi questo è ciò che realizza un framework interfaccia utente web front-end.

36
00:02:43,887 --> 00:02:47,693
Si tratta di una raccolta di tutti questi componenti.

37
00:02:47,693 --> 00:02:51,903
Non solo, ti offre un metodo per definire una

38
00:02:52,903 --> 00:02:58,443
tipografia coerente che puoi utilizzare per l'intero design del tuo sito web.

39
00:02:59,611 --> 00:03:05,702
E ti permette di

40
00:03:05,702 --> 00:03:09,501
impalcare rapidamente un sito web o il pitch.

41
00:03:10,651 --> 00:03:15,191
Se cerchi framework web front-end,

42
00:03:15,191 --> 00:03:20,341
troverai una pletora di loro là fuori in Internet.

43
00:03:21,750 --> 00:03:26,387
Ora diverse persone hanno fatto il proprio servizio di

44
00:03:26,387 --> 00:03:30,573
tutti questi diversi framework dell'interfaccia utente web e

45
00:03:30,573 --> 00:03:37,170
hanno pubblicato i loro primi dieci elenchi di framework interfaccia utente front-end.

46
00:03:37,170 --> 00:03:40,290
Questo è uno di questi che puoi o

47
00:03:40,290 --> 00:03:45,707
non potresti essere d'accordo con questa classifica, ma

48
00:03:45,707 --> 00:03:53,920
Bootstrap sembra essere il più popolare tra tutti i framework dell'interfaccia utente web front-end.

49
00:03:53,920 --> 00:03:57,140
Bootstrap si posiziona costantemente come il numero uno

50
00:03:57,140 --> 00:04:01,380
in molti degli elenchi di framework interfaccia utente web front-end.

51
00:04:01,380 --> 00:04:06,879
Il rimanente tra questo elenco può variare, ma spesso si trovano Semantic-UI,

52
00:04:06,879 --> 00:04:12,450
Foundation by Zerp, Materialize, Material UI e

53
00:04:12,450 --> 00:04:17,249
alcuni di questi altri che appaiono in molti di questi elenchi top-end.

54
00:04:18,330 --> 00:04:20,060
La prossima domanda ovvia è,

55
00:04:20,060 --> 00:04:24,230
perché dovresti usare i framework dell'interfaccia utente web front-end?

56
00:04:24,230 --> 00:04:30,830
Innanzitutto, forniscono un modo coerente di progettare siti web.

57
00:04:30,830 --> 00:04:34,010
E, la maggior parte di questi framework front-end

58
00:04:34,010 --> 00:04:36,730
supporta ciò che viene chiamato come responsive web design.

59
00:04:38,040 --> 00:04:43,299
Esamineremo di più su responsive web design nella prossima lezione, ma

60
00:04:43,299 --> 00:04:50,610
riassumendolo rapidamente, non ti rendi conto che il tuo sito web può essere accessibile da

61
00:04:51,780 --> 00:04:56,320
vari tipi di dispositivi di diversi screen saver che vanno

62
00:04:56,320 --> 00:05:01,850
da piccoli telefoni cellulari fino a un desktop completo.

63
00:05:01,850 --> 00:05:07,070
Vuoi essere in grado di progettare il tuo sito web in modo che si adatti automaticamente

64
00:05:07,070 --> 00:05:12,260
per soddisfare i vincoli di dimensione di ciascuno di questi

65
00:05:12,260 --> 00:05:16,490
diversi dispositivi, da cui si accede al tuo sito web.

66
00:05:16,490 --> 00:05:21,870
Quindi il web design reattivo è preoccupato per questo aspetto.

67
00:05:21,870 --> 00:05:26,310
Il secondo problema che la maggior parte di questi framework Franken tenta di

68
00:05:26,310 --> 00:05:30,740
affrontare è la compatibilità tra browser.

69
00:05:30,740 --> 00:05:35,790
Se hai giocato con i browser tanto quanto ho fatto

70
00:05:35,790 --> 00:05:38,930
io, sono abbastanza sicuro che ti sei reso conto che

71
00:05:38,930 --> 00:05:43,090
non ci sono due browser che rendono lo stesso sito esattamente allo stesso modo.

72
00:05:43,090 --> 00:05:46,710
Quindi, quando si progetta un sito web per il rendering coerente su

73
00:05:46,710 --> 00:05:51,466
molti browser diversi, si sta andando ad affrontare una battaglia in salita.

74
00:05:51,466 --> 00:05:56,980
Ora questi framework front-end sono riusciti ad affrontare la maggior parte di queste

75
00:05:56,980 --> 00:06:02,930
idiosincrasie dei diversi browser in modo tale che è possibile fornire un

76
00:06:02,930 --> 00:06:09,740
rendering coerente del vostro sito web su diversi browser.

77
00:06:09,740 --> 00:06:13,290
Quindi questo è il secondo motivo per cui potresti voler ricorrere all'

78
00:06:13,290 --> 00:06:17,000
utilizzo di un framework interfaccia utente Web front-end.

79
00:06:17,000 --> 00:06:22,930
E il terzo aspetto, ovviamente, è che quando hai bisogno di progettare un sito web,

80
00:06:22,930 --> 00:06:27,050
sarai sempre sotto una terribile pressione temporale.

81
00:06:27,050 --> 00:06:29,680
Aumentando così la produttività in

82
00:06:29,680 --> 00:06:35,450
modo da non sprecare energia e tempo per

83
00:06:35,450 --> 00:06:40,600
problemi di configurazione dispendiosi di quei singoli componenti del tuo sito web.

84
00:06:40,600 --> 00:06:43,470
Invece, lascia che sia curato

85
00:06:43,470 --> 00:06:47,430
da un framework interfaccia utente web front-end progettato in modo coerente.

86
00:06:47,430 --> 00:06:53,400
In questo modo ti fa risparmiare un sacco di tempo in termini di implementazione del tuo sito web.

87
00:06:53,400 --> 00:06:54,850
Hanno licenziato.

88
00:06:54,850 --> 00:06:56,450
E infine, naturalmente, la

89
00:06:56,450 --> 00:07:03,010
maggior parte di questi framework interfaccia utente front-end che sono tutti lì hanno la propria comunità.

90
00:07:03,010 --> 00:07:08,900
Sono utenti che utilizzano questi framework per implementare siti web.

91
00:07:08,900 --> 00:07:14,700
Quindi questa comunità di utenti ti fornirà un

92
00:07:14,700 --> 00:07:19,560
modo molto efficiente di essere in grado di risolvere i problemi che potresti

93
00:07:19,560 --> 00:07:25,050
incontrare quando stai applicando qualcuno di questi framework per il design del tuo sito web.

94
00:07:25,050 --> 00:07:30,610
Quindi, dati questi diversi vantaggi,

95
00:07:30,610 --> 00:07:36,080
perché non dovresti ricorrere all'utilizzo di un framework interfaccia utente web front-end?

96
00:07:36,080 --> 00:07:40,697
Con questa comprensione dei framework interfaccia utente web front-end,

97
00:07:40,697 --> 00:07:45,315
andiamo ora avanti per saperne di più su Bootstrap,

98
00:07:45,315 --> 00:07:48,840
il framework interfaccia utente web front-end più popolare.

99
00:07:48,840 --> 00:07:51,809
[ MUSIC]