1
00:00:00,000 --> 00:00:04,717
[MUSIC] В

2
00:00:04,717 --> 00:00:09,290
наши дни в мире веб-разработки мы часто слышим, как люди

3
00:00:09,290 --> 00:00:14,721
упоминают термины отзывчивый дизайн и мобильный первый подход.

4
00:00:14,721 --> 00:00:18,558
Давайте попробуем понять, что подразумевается под этими терминами и

5
00:00:18,558 --> 00:00:23,480
как они влияют на то, как вы создаете свои веб-сайты и веб-приложения.

6
00:00:25,490 --> 00:00:30,745
Ваш очевидный вопрос будет заключаться в том, почему рассматривать адаптивный дизайн?

7
00:00:30,745 --> 00:00:38,040
Чтобы помочь нам понять это, давайте рассмотрим, как люди обращаются к веб-сайтам в эти дни?

8
00:00:38,040 --> 00:00:42,980
Традиционно, когда веб-сайты были впервые разработаны, вы могли бы в значительной степени предположить

9
00:00:42,980 --> 00:00:47,100
, что люди будут просматривать ваши веб-сайты с компьютера.

10
00:00:48,170 --> 00:00:55,694
В эти дни ваши сайты можно было посещать со смартфона,

11
00:00:55,694 --> 00:01:02,250
планшета или компьютера с разными размерами экрана и разрешением экрана.

12
00:01:02,250 --> 00:01:09,350
Как мы можем последовательно отображать наши веб-сайты на устройствах разного размера экрана?

13
00:01:10,530 --> 00:01:14,570
Один размер соответствует всем подходам, что традиционные

14
00:01:14,570 --> 00:01:19,020
дизайнеры веб-сайтов взяли больше не фиксированный счет.

15
00:01:19,020 --> 00:01:24,338
Нам нужен лучший подход, подход, который автоматически

16
00:01:24,338 --> 00:01:30,940
адаптирует ваш сайт к размеру экрана, на котором он просматривается.

17
00:01:30,940 --> 00:01:38,190
Здесь мы должны принять подход, чтобы адаптироваться к порту представления пользователя.

18
00:01:38,190 --> 00:01:42,890
Это должно быть встроено в дизайн и разработку вашего сайта

19
00:01:42,890 --> 00:01:49,000
, чтобы он автоматически адаптировался к просмотру устройства пользователя.

20
00:01:50,260 --> 00:01:53,437
Чтобы помочь вам лучше оценить необходимость

21
00:01:53,437 --> 00:01:57,170
адресации устройств разного размера экрана.

22
00:01:57,170 --> 00:02:03,273
Я пользуюсь помощью опций разработчика, которые могут предоставить браузер Safari

23
00:02:03,273 --> 00:02:10,110
, который позволяет мне просматривать веб-сайт с экранами разных размеров.

24
00:02:10,110 --> 00:02:15,470
Так что, надеюсь, убедит вас в том, почему мы сделали адаптивный веб-дизайн.

25
00:02:15,470 --> 00:02:19,622
Итак, здесь вы видите, что сайт Coursera

26
00:02:19,622 --> 00:02:24,476
отображается на экранах 1920 по 1080.

27
00:02:24,476 --> 00:02:32,088
Это будет типичный большой рабочий стол или экран ноутбука высокого разрешения.

28
00:02:32,088 --> 00:02:38,810
Тогда давайте рассмотрим тот же сайт просматривается с помощью меньшего экрана, такого.

29
00:02:38,810 --> 00:02:44,126
Таким образом, вы автоматически видите, что макет экрана немного

30
00:02:44,126 --> 00:02:49,214
подстраивается под размер видового экрана вашего устройства,

31
00:02:49,214 --> 00:02:52,281
то же самое на 800 на 600.

32
00:02:52,281 --> 00:02:59,708
Так что давайте спустимся в размерах экрана, это IPad закрыть вид того же сайта.

33
00:02:59,708 --> 00:03:05,826
Это размер iPad Air 2, это iPad Mini 4 размер,

34
00:03:05,826 --> 00:03:10,125
обратите внимание на переход от IPad Mini 4

35
00:03:10,125 --> 00:03:15,610
размера к iPhone 6S Plus в портретном режиме.

36
00:03:15,610 --> 00:03:23,090
Теперь вы заметите, что навигационный бот теперь свернул в кнопку,

37
00:03:23,090 --> 00:03:28,850
которая при нажатии отобразит параметры из вашего навигационного баша.

38
00:03:28,850 --> 00:03:35,027
И давайте посмотрим на то же самое в нашем iPhone 6S

39
00:03:35,027 --> 00:03:40,990
в ландшафтном режиме, обратите внимание, как экран принимает себя.

40
00:03:40,990 --> 00:03:46,578
Аналогично для iPhone 6S в ландшафтном режиме и

41
00:03:46,578 --> 00:03:52,300
перейти к iPhone SE, и вы видите, как веб-сайт

42
00:03:52,300 --> 00:03:56,941
изменил способ его визуализации.

43
00:03:56,941 --> 00:04:03,395
Надеюсь, этот пример продемонстрировал вам, как и

44
00:04:03,395 --> 00:04:07,357
почему нам нужен отзывчивый веб-дизайн.

45
00:04:07,357 --> 00:04:12,240
Вторая связанная концепция, которую вы услышите, является мобильным первым.

46
00:04:12,240 --> 00:04:17,749
Мобильный первый подход вместо этого ориентируется на проектирование веб-сайта

47
00:04:17,749 --> 00:04:19,725
для мобильного устройства.

48
00:04:19,725 --> 00:04:27,465
Так что подумайте о том, как вы будете удовлетворять ограничения экрана вашего мобильного устройства.

49
00:04:27,465 --> 00:04:32,472
А затем, по мере увеличения размера экрана, вы автоматически

50
00:04:32,472 --> 00:04:38,162
запускаете приложение на свой сайт для большего и большего размера экрана.

51
00:04:38,162 --> 00:04:41,548
Возможно, вы готовы все больше и больше контента.

52
00:04:41,548 --> 00:04:47,050
Так что, чтобы воспользоваться увеличением экрана недвижимости.

53
00:04:47,050 --> 00:04:51,974
Таким образом, один и тот же сайт при просмотре на мобильном устройстве может иметь только

54
00:04:51,974 --> 00:04:56,091
части информации, раскрываемой пользователю.

55
00:04:56,091 --> 00:05:00,754
Но тогда, когда он отображается на полном рабочем столе

56
00:05:00,754 --> 00:05:05,960
опера, он может показать гораздо более подробную версию веб-сайта.

57
00:05:05,960 --> 00:05:11,020
Теперь это должно быть автоматически адаптировано на основе информации

58
00:05:11,020 --> 00:05:16,180
, которую вы получаете с устройства, с которого просматривается ваш сайт.

59
00:05:16,180 --> 00:05:18,519
Так как мы получим эту информацию?

60
00:05:18,519 --> 00:05:23,610
К счастью, адаптивный веб-дизайн поддерживается

61
00:05:23,610 --> 00:05:29,950
многими современными интерфейсными фреймворками веб-интерфейса, включая Bootstrap.

62
00:05:29,950 --> 00:05:37,230
Поэтому, когда мы смотрим на определение Bootstrap на его веб-странице, он говорит, что

63
00:05:37,230 --> 00:05:41,128
реагирующий мобильный первый подход.

64
00:05:41,128 --> 00:05:43,985
Да, как нам делать адаптивный веб-дизайн?

65
00:05:43,985 --> 00:05:49,858
Таким образом, есть несколько концепций, которые встроены в ваши

66
00:05:49,858 --> 00:05:57,170
фреймворки веб-интерфейса, которые приходят на помощь, когда вам нужно сделать адаптивный веб-дизайн.

67
00:05:57,170 --> 00:06:00,819
В первую очередь это то, что называется Grid система?

68
00:06:00,819 --> 00:06:05,624
Мы рассмотрим систему Grid Bootstrap более подробно в следующей

69
00:06:05,624 --> 00:06:06,319
лекции.

70
00:06:06,319 --> 00:06:11,201
Таким образом, мы поймем, как мы можем использовать это, чтобы иметь возможность делать

71
00:06:11,201 --> 00:06:13,720
адаптивный веб-дизайн.

72
00:06:13,720 --> 00:06:21,110
Второй аспект - это жидкие изображения, так что ваши изображения, которые вы включаете в ваш

73
00:06:21,110 --> 00:06:26,940
сайт, автоматически адаптируются к размеру экрана.

74
00:06:26,940 --> 00:06:34,890
И третья часть - это то, что называется медиа-запросами CSS из вашего кода CSS.

75
00:06:34,890 --> 00:06:41,110
Вы можете запросить размер носителя, а затем соответствующим образом

76
00:06:41,110 --> 00:06:46,230
настроить классы CSS в соответствии с размером экрана устройства.

77
00:06:46,230 --> 00:06:48,730
Как теперь работают медиа-запросы?

78
00:06:48,730 --> 00:06:50,950
Посмотрим на это дальше.

79
00:06:50,950 --> 00:06:55,080
Медиа-запросы поддерживаются в CSS, как это.

80
00:06:55,080 --> 00:07:00,930
Таким образом, технология позволяет сделать медиа-запрос, чтобы указать минимальную ширину

81
00:07:00,930 --> 00:07:07,730
экрана, под которым будет активен этот конкретный набор классов CSS.

82
00:07:07,730 --> 00:07:12,267
Таким образом, это будет указано в вашем файле CSS как @media, а

83
00:07:12,267 --> 00:07:17,187
затем в скобке вы указываете, например, min-width.

84
00:07:17,187 --> 00:07:21,231
Существует гораздо больше вариантов медиа-запросов, чем то, что я показываю здесь.

85
00:07:21,231 --> 00:07:28,750
Это всего лишь один пример того, как вы построили медиа-запрос в вашем CSS коде.

86
00:07:30,060 --> 00:07:34,990
Взглянув на код CSS Bootstrap,

87
00:07:34,990 --> 00:07:40,910
давайте зайдем и посмотрим, как медиа-запросы используются Bootstrap.

88
00:07:40,910 --> 00:07:45,789
Итак, здесь вы видите пример медиа-запроса, где он говорит, @media и

89
00:07:45,789 --> 00:07:47,854
min-width 576 пикселей.

90
00:07:47,854 --> 00:07:54,906
И тогда он указывает, что те конкретные контейнеры вызова класса CSS,

91
00:07:54,906 --> 00:07:59,960
о которых мы узнаем больше в следующей лекции,

92
00:07:59,960 --> 00:08:04,150
а также в упражнении, которое следует.

93
00:08:04,150 --> 00:08:12,640
Мы увидим, что ширина контейнера устанавливается на основе ширины экрана.

94
00:08:12,640 --> 00:08:17,590
Аналогично, для экрана с более высокой шириной ширина контейнера автоматически настраивается.

95
00:08:17,590 --> 00:08:22,251
Таким образом, это то, что позволяет вашей веб-структуре пользовательского интерфейса

96
00:08:22,251 --> 00:08:25,604
поддерживать адаптивный веб-дизайн.

97
00:08:25,604 --> 00:08:30,762
Таким образом, делая медиа-запросы, ваша веб-инфраструктура пользовательского интерфейса может

98
00:08:30,762 --> 00:08:36,928
установить, на каком устройстве вы рендеринга свой сайт.

99
00:08:36,928 --> 00:08:41,849
И соответственно настройте классы CSS, чтобы

100
00:08:41,849 --> 00:08:46,401
соответствовать этому размеру экрана конкретных устройств.

101
00:08:46,401 --> 00:08:50,821
Итак, очевидно, следующий вопрос, который придет вам в голову, заключается в том, как мы

102
00:08:50,821 --> 00:08:52,870
это делаем на практике?

103
00:08:52,870 --> 00:08:56,540
К счастью, если вы начнете с хорошо спроектированной

104
00:08:56,540 --> 00:09:01,700
фреймворком веб-интерфейса интерфейса, такой как Bootstrap, все станет очень простым.

105
00:09:01,700 --> 00:09:08,023
Мы узнаем больше об этом в следующей лекции и упражнении, которое следует за этим.

106
00:09:08,023 --> 00:09:13,999
[ МУЗЫКА]