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

2
00:00:04,879 --> 00:00:11,307
Front-end Web UI Framework становятся их подход к

3
00:00:11,307 --> 00:00:16,320
разработке и реализации своих последних веб-сайтов.

4
00:00:16,320 --> 00:00:20,220
Давайте спросим себя, что именно представляют собой интерфейсные веб-фреймворки,

5
00:00:20,220 --> 00:00:24,150
и узнайте немного больше о них.

6
00:00:24,150 --> 00:00:27,700
Далее, так очевидно,

7
00:00:27,700 --> 00:00:33,090
в этом уроке мы собираемся спросить себя, что такое интерфейсные фреймворки?

8
00:00:33,090 --> 00:00:34,050
Что они содержат?

9
00:00:35,130 --> 00:00:38,780
Каковы некоторые из популярных интерфейсных фреймворков?

10
00:00:38,780 --> 00:00:44,130
И почему мы должны использовать интерфейсные фреймворки пользовательского интерфейса при проектировании

11
00:00:44,130 --> 00:00:46,460
наших веб-сайтов?

12
00:00:46,460 --> 00:00:50,410
Итак, что такое интерфейсные веб-интерфейсные фреймворки?

13
00:00:50,410 --> 00:00:52,800
Давайте сделаем шаг назад и

14
00:00:52,800 --> 00:00:57,580
представим, что вы знаете только HTML, CSS и JavaScript.

15
00:00:57,580 --> 00:01:03,540
Если бы вас попросили создать новый веб-сайт, вы бы, очевидно, пошли на создание

16
00:01:03,540 --> 00:01:08,510
и внедрение всего веб-сайта. Используя технические навыки, которые

17
00:01:08,510 --> 00:01:13,490
вы основали на ваших знаниях HTML, CSS и JavaScript.

18
00:01:13,490 --> 00:01:16,880
Вы часто поймете, что есть много

19
00:01:16,880 --> 00:01:21,580
повторяющихся компонентов, которые вы бы использовали на вашем сайте.

20
00:01:21,580 --> 00:01:27,590
И вы в конечном итоге создадите свой собственный набор классов CSS.

21
00:01:27,590 --> 00:01:30,730
Вы будете разрабатывать компонент на основе JavaScript.

22
00:01:30,730 --> 00:01:34,940
И затем, как только вы получите группу из них вместе,

23
00:01:36,180 --> 00:01:40,770
каждый раз, когда вам нужно создать новый веб-сайт, вы будете использовать эти

24
00:01:40,770 --> 00:01:45,670
предопределенные наборы классов CSS и

25
00:01:45,670 --> 00:01:49,549
компонентов на основе JavaScript для быстрой реализации нового веб-сайта.

26
00:01:50,740 --> 00:01:53,480
Почему бы не довести это до логического завершения?

27
00:01:54,750 --> 00:02:00,610
Как насчет того, если мы разрабатываем всю структуру, которая состоит из

28
00:02:00,610 --> 00:02:07,522
готовых к использованию HTML, CSS и JavaScript размещенных компонентов веб-интерфейса.

29
00:02:07,522 --> 00:02:12,930
Таким образом, здесь интерфейс веб-интерфейса

30
00:02:12,930 --> 00:02:17,850
может определить кучу классов CSS, которые

31
00:02:17,850 --> 00:02:22,905
позволят нам включать компоненты, такие как кнопки,

32
00:02:22,905 --> 00:02:27,985
таблицы, панели навигации, выпадающие окна, оповещения,

33
00:02:27,985 --> 00:02:32,615
модалы, вкладки, аккордеоны и многое другое.

34
00:02:33,687 --> 00:02:39,027
И быстро дать нам возможность разработать и внедрить сайт.

35
00:02:39,027 --> 00:02:43,887
Таким образом, это то, что выполняет интерфейс веб-интерфейса.

36
00:02:43,887 --> 00:02:47,693
Это коллекция всех этих компонентов.

37
00:02:47,693 --> 00:02:51,903
Мало того, что он дает вам метод определения

38
00:02:52,903 --> 00:02:58,443
последовательной типографии, которую вы можете использовать для всего вашего дизайна веб-сайта.

39
00:02:59,611 --> 00:03:05,702
И позволяет быстро

40
00:03:05,702 --> 00:03:09,501
выводить эшафот сайта или поля.

41
00:03:10,651 --> 00:03:15,191
Если вы ищете интерфейсные веб-фреймворки,

42
00:03:15,191 --> 00:03:20,341
вы найдете их множество в Интернете.

43
00:03:21,750 --> 00:03:26,387
Теперь несколько человек сделали свой собственный сервис

44
00:03:26,387 --> 00:03:30,573
всех этих различных фреймворков веб-интерфейса и

45
00:03:30,573 --> 00:03:37,170
опубликовали свои десять лучших списков интерфейсных интерфейсов.

46
00:03:37,170 --> 00:03:40,290
Это один из таких, что вы

47
00:03:40,290 --> 00:03:45,707
можете или не согласны с этим рейтингом, но

48
00:03:45,707 --> 00:03:53,920
Bootstrap оказывается самым популярным среди всех интерфейсных веб-фреймворков.

49
00:03:53,920 --> 00:03:57,140
Bootstrap последовательно занимает первое место

50
00:03:57,140 --> 00:04:01,380
во многих списках интерфейсных веб-интерфейсных фреймворков.

51
00:04:01,380 --> 00:04:06,879
Остальные из этого списка могут различаться, но вы часто найдете Semantic-UI,

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

53
00:04:12,450 --> 00:04:17,249
некоторые из этих других появляются во многих из этих верхних списков.

54
00:04:18,330 --> 00:04:20,060
Следующий очевидный вопрос заключается в том,

55
00:04:20,060 --> 00:04:24,230
почему вы хотите использовать интерфейсные веб-интерфейсные фреймворки?

56
00:04:24,230 --> 00:04:30,830
В первую очередь, они предоставляют вам последовательный способ проектирования веб-сайтов.

57
00:04:30,830 --> 00:04:34,010
И большинство этих интерфейсных фреймворков

58
00:04:34,010 --> 00:04:36,730
поддерживают то, что называется адаптивным веб-дизайном.

59
00:04:38,040 --> 00:04:43,299
Мы рассмотрим больше о адаптивном веб-дизайне в следующем уроке, но

60
00:04:43,299 --> 00:04:50,610
быстро обобщив его, вы не понимаете, что ваш сайт может быть доступен с

61
00:04:51,780 --> 00:04:56,320
различных видов устройств различных экранных заставки, начиная

62
00:04:56,320 --> 00:05:01,850
от небольших мобильных телефонов до полноценного рабочего стола.

63
00:05:01,850 --> 00:05:07,070
Вы хотите иметь возможность создать свой сайт, чтобы автоматически адаптироваться

64
00:05:07,070 --> 00:05:12,260
к ограничениям размера каждого

65
00:05:12,260 --> 00:05:16,490
из этих различных устройств, с которых осуществляется доступ к вашему веб-сайту.

66
00:05:16,490 --> 00:05:21,870
Поэтому отзывчивый веб-дизайн обеспокоен этим аспектом.

67
00:05:21,870 --> 00:05:26,310
Вторая проблема, которую большинство этих фреймворков Franken пытаются

68
00:05:26,310 --> 00:05:30,740
решить, - это кросс-браузерная совместимость.

69
00:05:30,740 --> 00:05:35,790
Если вы играли с браузерами так же, как и я,

70
00:05:35,790 --> 00:05:38,930
я уверен, что вы поняли, что

71
00:05:38,930 --> 00:05:43,090
ни один из двух браузеров не отображает один и тот же сайт точно таким же образом.

72
00:05:43,090 --> 00:05:46,710
Поэтому, когда вы разрабатываете веб-сайт, чтобы отображать последовательно

73
00:05:46,710 --> 00:05:51,466
во многих разных браузерах, вы будете сталкиваться с тяжелой битвой в гору.

74
00:05:51,466 --> 00:05:56,980
Теперь этим интерфейсным фреймворкам удалось решить большинство этих

75
00:05:56,980 --> 00:06:02,930
особенностей разных браузеров таким образом, что вы можете обеспечить

76
00:06:02,930 --> 00:06:09,740
последовательную рендеринг вашего сайта в разных браузерах.

77
00:06:09,740 --> 00:06:13,290
Так что это вторая причина, по которой вы можете прибегнуть к

78
00:06:13,290 --> 00:06:17,000
использованию фреймворка веб-интерфейса Front-End.

79
00:06:17,000 --> 00:06:22,930
И третий аспект, конечно, заключается в том, что когда вам нужно создать сайт,

80
00:06:22,930 --> 00:06:27,050
вы всегда будете находиться под ужасным давлением времени.

81
00:06:27,050 --> 00:06:29,680
Таким образом, увеличивайте производительность

82
00:06:29,680 --> 00:06:35,450
, чтобы вы не тратили свою энергию и время на

83
00:06:35,450 --> 00:06:40,600
расточительные проблемы конфигурации отдельных компонентов вашего сайта.

84
00:06:40,600 --> 00:06:43,470
Вместо этого пусть это позаботится

85
00:06:43,470 --> 00:06:47,430
последовательно разработанная фреймворка веб-интерфейса интерфейса.

86
00:06:47,430 --> 00:06:53,400
Таким образом, это экономит вам много времени с точки зрения реализации вашего сайта.

87
00:06:53,400 --> 00:06:54,850
Они уволили.

88
00:06:54,850 --> 00:06:56,450
И, наконец, конечно,

89
00:06:56,450 --> 00:07:03,010
большинство из этих интерфейсных фреймворков пользовательского интерфейса, которые все там имеют свое собственное сообщество.

90
00:07:03,010 --> 00:07:08,900
Это пользователи, которые используют эти фреймворки для реализации веб-сайтов.

91
00:07:08,900 --> 00:07:14,700
Таким образом, это сообщество пользователей предоставит вам очень

92
00:07:14,700 --> 00:07:19,560
эффективный способ решения проблем, с которыми вы можете

93
00:07:19,560 --> 00:07:25,050
столкнуться, когда вы применяете любой из этих фреймворков для вашего дизайна веб-сайта.

94
00:07:25,050 --> 00:07:30,610
Поэтому, учитывая эти различные преимущества,

95
00:07:30,610 --> 00:07:36,080
почему вы не хотите прибегать к использованию фреймворка веб-интерфейса интерфейса?

96
00:07:36,080 --> 00:07:40,697
С этим пониманием интерфейсных фреймворков веб-интерфейса,

97
00:07:40,697 --> 00:07:45,315
давайте теперь продолжим, чтобы узнать больше о Bootstrap,

98
00:07:45,315 --> 00:07:48,840
самой популярной фреймворке веб-интерфейса переднего плана.

99
00:07:48,840 --> 00:07:51,809
[ МУЗЫКА]