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

2
00:00:04,879 --> 00:00:11,307
Framework Web UI Front-end devient leur approche incontournable pour

3
00:00:11,307 --> 00:00:16,320
la conception et la mise en œuvre de leurs sites Web récents.

4
00:00:16,320 --> 00:00:20,220
Demandons-nous quels sont exactement les Framework d'interface utilisateur Web front-end,

5
00:00:20,220 --> 00:00:24,150
et apprenons un peu plus de détails à leur sujet.

6
00:00:24,150 --> 00:00:27,700
Ensuite, donc évidemment,

7
00:00:27,700 --> 00:00:33,090
dans cette leçon, nous allons nous demander, quels sont les frameworks front-end ?

8
00:00:33,090 --> 00:00:34,050
Qu' est-ce qu'ils contiennent ?

9
00:00:35,130 --> 00:00:38,780
Quels sont certains des frameworks d'interface utilisateur front-end populaires ?

10
00:00:38,780 --> 00:00:44,130
Et pourquoi devons-nous utiliser les frameworks d'interface utilisateur front-end lorsque nous concevons

11
00:00:44,130 --> 00:00:46,460
nos sites Web ?

12
00:00:46,460 --> 00:00:50,410
Alors, que sont les frameworks d'interface utilisateur Web front-end ?

13
00:00:50,410 --> 00:00:52,800
Prenons un pas en arrière, et

14
00:00:52,800 --> 00:00:57,580
imaginons que vous ne connaissez que HTML, CSS et JavaScript.

15
00:00:57,580 --> 00:01:03,540
Si on vous demandait de concevoir un nouveau site Web, vous feriez évidemment construire

16
00:01:03,540 --> 00:01:08,510
et mettre en œuvre l'ensemble du site Web en utilisant les compétences techniques que

17
00:01:08,510 --> 00:01:13,490
vous possédez en fonction de vos connaissances en HTML, CSS et JavaScript.

18
00:01:13,490 --> 00:01:16,880
Vous vous rendriez souvent compte qu'il existe de nombreux

19
00:01:16,880 --> 00:01:21,580
composants répétés que vous utiliseriez sur votre site Web.

20
00:01:21,580 --> 00:01:27,590
Et vous finiriez par concevoir votre propre ensemble de classes CSS.

21
00:01:27,590 --> 00:01:30,730
Vous allez concevoir un composant basé sur JavaScript.

22
00:01:30,730 --> 00:01:34,940
Et puis une fois que vous obtenez un groupe de ceux-ci ensemble,

23
00:01:36,180 --> 00:01:40,770
chaque fois que vous avez besoin de concevoir un nouveau site Web, vous utiliseriez ces

24
00:01:40,770 --> 00:01:45,670
ensembles prédéfinis de classes CSS et de

25
00:01:45,670 --> 00:01:49,549
composants basés sur JavaScript pour implémenter rapidement un nouveau site Web.

26
00:01:50,740 --> 00:01:53,480
Pourquoi ne pas prendre cela à sa conclusion logique ?

27
00:01:54,750 --> 00:02:00,610
Que diriez-vous, si nous concevons un framework entier qui se compose de

28
00:02:00,610 --> 00:02:07,522
composants d'interface utilisateur Web prêts à utiliser HTML, CSS et JavaScript placés.

29
00:02:07,522 --> 00:02:12,930
Donc, ici, un framework d'interface utilisateur Web front-end

30
00:02:12,930 --> 00:02:17,850
peut définir un tas de classes CSS qui

31
00:02:17,850 --> 00:02:22,905
nous permettront d'inclure des composants comme les boutons, les

32
00:02:22,905 --> 00:02:27,985
tables, les barres de navigation, les listes déroulantes, les alertes,

33
00:02:27,985 --> 00:02:32,615
les modaux, les onglets, les accordéons et bien d'autres.

34
00:02:33,687 --> 00:02:39,027
Et nous permettent rapidement de concevoir et de mettre en œuvre un site web.

35
00:02:39,027 --> 00:02:43,887
C' est donc ce qu'un framework d'interface utilisateur Web front-end accomplit.

36
00:02:43,887 --> 00:02:47,693
C' est une collection de tous ces composants.

37
00:02:47,693 --> 00:02:51,903
Non seulement cela, il vous donne une méthode pour définir une

38
00:02:52,903 --> 00:02:58,443
typographie cohérente que vous pouvez utiliser pour l'ensemble de la conception de votre site Web.

39
00:02:59,611 --> 00:03:05,702
Et vous permet d'

40
00:03:05,702 --> 00:03:09,501
échafauder rapidement un site web ou le terrain.

41
00:03:10,651 --> 00:03:15,191
Si vous recherchez des frameworks Web front-end,

42
00:03:15,191 --> 00:03:20,341
vous en trouverez une pléthore sur Internet.

43
00:03:21,750 --> 00:03:26,387
Maintenant, plusieurs personnes ont fait leur propre service de

44
00:03:26,387 --> 00:03:30,573
tous ces différents frameworks d'interface utilisateur Web, et

45
00:03:30,573 --> 00:03:37,170
ont publié leurs dix premières listes de frameworks d'interface utilisateur front-end.

46
00:03:37,170 --> 00:03:40,290
C' est un tel que vous

47
00:03:40,290 --> 00:03:45,707
pouvez ou non être d'accord avec ce classement, mais

48
00:03:45,707 --> 00:03:53,920
Bootstrap se trouve être le plus populaire parmi tous les frameworks d'interface utilisateur Web front-end.

49
00:03:53,920 --> 00:03:57,140
Bootstrap se classe toujours comme le numéro un

50
00:03:57,140 --> 00:04:01,380
dans la plupart des listes des frameworks d'interface utilisateur Web frontale.

51
00:04:01,380 --> 00:04:06,879
Le reste de cette liste peut varier, mais vous trouverez souvent Semantic-UI,

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

53
00:04:12,450 --> 00:04:17,249
certains de ces autres apparaissent dans beaucoup de ces listes haut de gamme.

54
00:04:18,330 --> 00:04:20,060
La question suivante évidente est,

55
00:04:20,060 --> 00:04:24,230
pourquoi voudriez-vous utiliser des frameworks d'interface utilisateur Web front-end ?

56
00:04:24,230 --> 00:04:30,830
Tout d'abord, ils vous fournissent une manière cohérente de concevoir des sites Web.

57
00:04:30,830 --> 00:04:34,010
Et, la plupart de ces frameworks front-end

58
00:04:34,010 --> 00:04:36,730
prennent en charge ce qu'on appelle la conception web réactive.

59
00:04:38,040 --> 00:04:43,299
Nous allons examiner plus sur la conception web responsive dans la prochaine leçon, mais en

60
00:04:43,299 --> 00:04:50,610
résumant rapidement, vous ne réalisez pas que votre site Web peut être consulté à partir

61
00:04:51,780 --> 00:04:56,320
de différents types d'appareils de différents économiseurs d'écran

62
00:04:56,320 --> 00:05:01,850
allant de petits téléphones mobiles jusqu'à un bureau à part entière.

63
00:05:01,850 --> 00:05:07,070
Vous souhaitez être en mesure de concevoir votre site Web pour s'adapter automatiquement afin de

64
00:05:07,070 --> 00:05:12,260
répondre aux contraintes de taille de chacun de ces

65
00:05:12,260 --> 00:05:16,490
différents appareils, à partir desquels votre site Web est accessible.

66
00:05:16,490 --> 00:05:21,870
La conception web réactive est donc préoccupée par cet aspect.

67
00:05:21,870 --> 00:05:26,310
Le deuxième problème que la plupart de ces frameworks Franken tentent de

68
00:05:26,310 --> 00:05:30,740
résoudre est la compatibilité entre les navigateurs.

69
00:05:30,740 --> 00:05:35,790
Si vous avez joué avec les navigateurs autant que je l'ai fait,

70
00:05:35,790 --> 00:05:38,930
je suis à peu près sûr que vous êtes venu à réaliser

71
00:05:38,930 --> 00:05:43,090
que deux navigateurs rendent le même site Web exactement de la même manière.

72
00:05:43,090 --> 00:05:46,710
Donc, lorsque vous concevez un site Web pour afficher de manière cohérente sur de

73
00:05:46,710 --> 00:05:51,466
nombreux navigateurs différents, vous allez faire face à une bataille difficile.

74
00:05:51,466 --> 00:05:56,980
Maintenant, ces frameworks front-end ont réussi à traiter la plupart de ces

75
00:05:56,980 --> 00:06:02,930
idiosyncrasies des différents navigateurs de telle sorte que vous pouvez fournir un

76
00:06:02,930 --> 00:06:09,740
rendu cohérent de votre site Web sur différents navigateurs.

77
00:06:09,740 --> 00:06:13,290
C' est donc la deuxième raison pour laquelle vous pouvez recourir à

78
00:06:13,290 --> 00:06:17,000
l'utilisation d'un framework d'interface utilisateur Web front-end.

79
00:06:17,000 --> 00:06:22,930
Et le troisième aspect, bien sûr, c'est que lorsque vous avez besoin de concevoir un site Web,

80
00:06:22,930 --> 00:06:27,050
vous serez toujours sous une pression de temps terrible.

81
00:06:27,050 --> 00:06:29,680
Augmentez donc votre productivité afin

82
00:06:29,680 --> 00:06:35,450
que vous ne perdiez pas votre énergie et votre temps sur les

83
00:06:35,450 --> 00:06:40,600
problèmes de configuration inutiles de ces composants individuels de votre site Web.

84
00:06:40,600 --> 00:06:43,470
Au lieu de cela, laissez cela être pris en charge

85
00:06:43,470 --> 00:06:47,430
par un framework d'interface utilisateur web front-end conçu de manière cohérente.

86
00:06:47,430 --> 00:06:53,400
Cela vous fait gagner beaucoup de temps en termes de mise en œuvre de votre site Web.

87
00:06:53,400 --> 00:06:54,850
Ils ont saccagé.

88
00:06:54,850 --> 00:06:56,450
Et enfin, bien sûr,

89
00:06:56,450 --> 00:07:03,010
la plupart de ces cadres d'interface utilisateur front-end qui sont tous là ont leur propre communauté.

90
00:07:03,010 --> 00:07:08,900
Ce sont des utilisateurs qui utilisent ces frameworks pour implémenter des sites Web.

91
00:07:08,900 --> 00:07:14,700
Donc, cette communauté d'utilisateurs vous fournira un

92
00:07:14,700 --> 00:07:19,560
moyen très efficace de résoudre les problèmes que vous pouvez

93
00:07:19,560 --> 00:07:25,050
rencontrer lorsque vous appliquez n'importe lequel de ces frameworks pour la conception de votre site Web.

94
00:07:25,050 --> 00:07:30,610
Donc, compte tenu de ces différents avantages,

95
00:07:30,610 --> 00:07:36,080
pourquoi ne voudriez-vous pas recourir à l'utilisation d'un framework d'interface utilisateur Web front-end ?

96
00:07:36,080 --> 00:07:40,697
Avec cette compréhension des frameworks d'interface utilisateur Web front-end,

97
00:07:40,697 --> 00:07:45,315
continuons maintenant pour en savoir plus sur Bootstrap,

98
00:07:45,315 --> 00:07:48,840
le framework d'interface utilisateur web front-end le plus populaire.

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