1
00:00:00,000 --> 00:00:04,717
[MUSIK]

2
00:00:04,717 --> 00:00:09,290
Heutzutage in der Web-Entwicklungswelt hören wir oft Leute,

3
00:00:09,290 --> 00:00:14,721
die die Begriffe responsive Design und mobilen ersten Ansatz erwähnen.

4
00:00:14,721 --> 00:00:18,558
Lassen Sie uns versuchen zu verstehen, was mit diesen Begriffen gemeint ist und

5
00:00:18,558 --> 00:00:23,480
wie sie sich auf die Art und Weise auswirken, wie Sie Ihre Websites und Webanwendungen entwerfen.

6
00:00:25,490 --> 00:00:30,745
Ihre offensichtliche Frage wird sein, warum Responsive Design in Betracht ziehen?

7
00:00:30,745 --> 00:00:38,040
Um uns zu helfen, dies zu verstehen, lassen Sie uns überlegen, wie Menschen heutzutage auf Websites zugreifen?

8
00:00:38,040 --> 00:00:42,980
Traditionell, wenn Websites zum ersten Mal entworfen wurden, könnten Sie so ziemlich davon ausgehen

9
00:00:42,980 --> 00:00:47,100
, dass Menschen Ihre Websites von einem Computer aus durchsuchen werden.

10
00:00:48,170 --> 00:00:55,694
Heutzutage könnten Ihre Websites von einem Smartphone, einem Tablet oder

11
00:00:55,694 --> 00:01:02,250
einem Computer mit unterschiedlichen Bildschirmgrößen und Bildschirmauflösungen besucht werden.

12
00:01:02,250 --> 00:01:09,350
Wie rendern wir unsere Websites konsistent auf Geräten unterschiedlicher Bildschirmgröße?

13
00:01:10,530 --> 00:01:14,570
Die Einheitsgröße passt allen Ansatz, dass traditionelle

14
00:01:14,570 --> 00:01:19,020
Website-Designer haben nicht mehr feste Rechnung genommen.

15
00:01:19,020 --> 00:01:24,338
Wir brauchen einen besseren Ansatz, einen Ansatz, der

16
00:01:24,338 --> 00:01:30,940
Ihre Website automatisch an die Größe des Bildschirms anpasst, auf dem sie angezeigt wird.

17
00:01:30,940 --> 00:01:38,190
Hier müssen wir einen Ansatz verfolgen, um sich an den View-Port des Benutzers anzupassen.

18
00:01:38,190 --> 00:01:42,890
Dies muss in Ihr Website-Design und Entwicklung integriert werden

19
00:01:42,890 --> 00:01:49,000
, damit es sich automatisch an das Darstellungsfenster des Gerätes des Benutzers anpasst.

20
00:01:50,260 --> 00:01:53,437
Um Ihnen zu helfen, die Notwendigkeit,

21
00:01:53,437 --> 00:01:57,170
Geräte unterschiedlicher Bildschirmgrößen anzusprechen, besser zu schätzen.

22
00:01:57,170 --> 00:02:03,273
Ich nehme die Hilfe der Entwickler-Optionen, die Safari-Browser

23
00:02:03,273 --> 00:02:10,110
bietet, die mir ermöglicht, die Website mit Bildschirmen unterschiedlicher Größe anzuzeigen.

24
00:02:10,110 --> 00:02:15,470
Das wird hoffentlich von Ihnen überzeugen, warum wir Responsive Web-Design gemacht haben.

25
00:02:15,470 --> 00:02:19,622
Hier sehen Sie also, dass Coursera Website

26
00:02:19,622 --> 00:02:24,476
auf einem 1920 mal 1080 Bildschirmseiten gerendert wird.

27
00:02:24,476 --> 00:02:32,088
Dies wäre ein typischer großer Desktop oder ein hochauflösender Laptop-Bildschirm.

28
00:02:32,088 --> 00:02:38,810
Dann lassen Sie uns die gleiche Website betrachten, die mit einem kleineren Bildschirm wie angesehen wird.

29
00:02:38,810 --> 00:02:44,126
So sehen Sie automatisch, dass sich Ihr Bildschirmlayout leicht

30
00:02:44,126 --> 00:02:49,214
an die Größe des Ansichtsfensters Ihres Geräts anpasst,

31
00:02:49,214 --> 00:02:52,281
das Gleiche bei 800 mal 600.

32
00:02:52,281 --> 00:02:59,708
Also lassen Sie uns in Bildschirmgrößen nach unten gehen, dies ist ein iPad schließen Ansicht der gleichen Website.

33
00:02:59,708 --> 00:03:05,826
Dies ist ein iPad Air 2 Größe, dies ist ein iPad Mini 4 Größe,

34
00:03:05,826 --> 00:03:10,125
beachten Sie den Übergang von einem iPad Mini 4

35
00:03:10,125 --> 00:03:15,610
Größe zu einem iPhone 6S Plus im Hochformat.

36
00:03:15,610 --> 00:03:23,090
Sie werden nun feststellen, dass der Navigations-Bot jetzt in eine Schaltfläche eingeblendet ist,

37
00:03:23,090 --> 00:03:28,850
die beim Klicken die Optionen aus Ihrer Navigation Bash zeigt.

38
00:03:28,850 --> 00:03:35,027
Und schauen wir uns das Gleiche in unserem iPhone 6S

39
00:03:35,027 --> 00:03:40,990
im Querformat an, beachten Sie, wie sich der Bildschirm selbst annimmt.

40
00:03:40,990 --> 00:03:46,578
Ähnlich für ein iPhone 6S im Querformat und

41
00:03:46,578 --> 00:03:52,300
gehen Sie nach unten zu einem iPhone SE, und Sie sehen, wie die Website

42
00:03:52,300 --> 00:03:56,941
hat die Art, wie es gerendert wird ändern.

43
00:03:56,941 --> 00:04:03,395
Hoffentlich hat dieses Beispiel Ihnen gezeigt, wie und

44
00:04:03,395 --> 00:04:07,357
warum wir Responsive Webdesign brauchen.

45
00:04:07,357 --> 00:04:12,240
Das zweite verwandte Konzept, das Sie hören werden, ist zuerst mobil.

46
00:04:12,240 --> 00:04:17,749
Der mobile erste Ansatz betrachtet stattdessen zuerst eine Website für

47
00:04:17,749 --> 00:04:19,725
ein mobiles Gerät zu entwerfen.

48
00:04:19,725 --> 00:04:27,465
Überlegen Sie also, wie Sie die Bildschirmeinschränkungen Ihres Mobilgeräts erfüllen würden.

49
00:04:27,465 --> 00:04:32,472
Und dann, wenn sich Ihre Bildschirmgröße vergrößert, würden Sie automatisch

50
00:04:32,472 --> 00:04:38,162
eine App auf Ihrer Website zu den größeren und größeren Bildschirmgrößen starten.

51
00:04:38,162 --> 00:04:41,548
Vielleicht sind Sie bereit, mehr und mehr von den Inhalten.

52
00:04:41,548 --> 00:04:47,050
Um die Vorteile der zunehmenden Bildschirm Immobilien zu nehmen.

53
00:04:47,050 --> 00:04:51,974
So könnte die gleiche Website, wenn sie auf einem mobilen Gerät sehen, nur

54
00:04:51,974 --> 00:04:56,091
Teile der Informationen, die dem Benutzer offenbart werden.

55
00:04:56,091 --> 00:05:00,754
Aber dann, wenn es auf einem vollständigen Fledge-Desktop gerendert wird,

56
00:05:00,754 --> 00:05:05,960
könnte es eine viel detailliertere Version der Website anzeigen.

57
00:05:05,960 --> 00:05:11,020
Dies muss nun automatisch basierend auf den Informationen angepasst werden

58
00:05:11,020 --> 00:05:16,180
, die Sie von dem Gerät erhalten, von dem aus Ihre Website aufgerufen wird.

59
00:05:16,180 --> 00:05:18,519
Also, wie bekommen wir diese Informationen?

60
00:05:18,519 --> 00:05:23,610
Glücklicherweise wird das reaktionsschnelle Webdesign von

61
00:05:23,610 --> 00:05:29,950
vielen der modernen Front-End-Web-UI-Frameworks einschließlich Bootstrap unterstützt.

62
00:05:29,950 --> 00:05:37,230
Also, wenn wir uns Bootstrap-Definition auf seiner Webseite ansehen, heißt es,

63
00:05:37,230 --> 00:05:41,128
reaktionsschneller mobiler erster Ansatz.

64
00:05:41,128 --> 00:05:43,985
Ja, wie gehen wir, indem wir reaktionsfähiges Webdesign machen?

65
00:05:43,985 --> 00:05:49,858
Es gibt also mehrere Konzepte, die in Ihre

66
00:05:49,858 --> 00:05:57,170
Frame-Time-Web-UI-Frameworks integriert sind, die zur Hilfe kommen, wenn Sie Responsive Webdesign durchführen müssen.

67
00:05:57,170 --> 00:06:00,819
In erster Linie ist das, was man nennt, ein Grid-System?

68
00:06:00,819 --> 00:06:05,624
Im nächsten

69
00:06:05,624 --> 00:06:06,319
Vortrag werden wir uns das Grid-System des Bootstrap genauer ansehen.

70
00:06:06,319 --> 00:06:11,201
Damit wir genau verstehen, wie wir das nutzen können, um

71
00:06:11,201 --> 00:06:13,720
Responsive Webdesign durchführen zu können.

72
00:06:13,720 --> 00:06:21,110
Der zweite Aspekt sind flüssige Bilder, so dass sich Ihre Bilder, die Sie in Ihre

73
00:06:21,110 --> 00:06:26,940
Website aufnehmen, automatisch an die Bildschirmgröße anpassen.

74
00:06:26,940 --> 00:06:34,890
Und der dritte Teil ist, was als CSS-Medienabfragen aus Ihrem CSS-Code bezeichnet wird.

75
00:06:34,890 --> 00:06:41,110
Sie können die Größe der Medien abfragen und dann Ihre CSS-Klassen entsprechend

76
00:06:41,110 --> 00:06:46,230
an die Größe des Bildschirms des Geräts anpassen.

77
00:06:46,230 --> 00:06:48,730
Wie funktionieren Medienabfragen jetzt?

78
00:06:48,730 --> 00:06:50,950
Sehen wir uns das als Nächstes an.

79
00:06:50,950 --> 00:06:55,080
Medienabfragen werden in CSS wie folgt unterstützt.

80
00:06:55,080 --> 00:07:00,930
Die Technologie ermöglicht es Ihnen, eine Medienabfrage durchzuführen, um die Mindestbreite

81
00:07:00,930 --> 00:07:07,730
des Bildschirms anzugeben, unter dem dieser bestimmte Satz von CSS-Klassen aktiv ist.

82
00:07:07,730 --> 00:07:12,267
Dies würde also in Ihrer CSS-Datei als @media angegeben werden, und

83
00:07:12,267 --> 00:07:17,187
dann innerhalb der Klammer geben Sie zum Beispiel min-width an.

84
00:07:17,187 --> 00:07:21,231
Es gibt viel mehr Optionen für die Medienabfragen als das, was ich hier zeige.

85
00:07:21,231 --> 00:07:28,750
Dies ist nur ein Beispiel dafür, wie Sie eine Medienabfrage in Ihrem CSS-Code erstellen würden. Werfen wir

86
00:07:30,060 --> 00:07:34,990
einen Blick auf den CSS-Code von Bootstrap selbst,

87
00:07:34,990 --> 00:07:40,910
lassen Sie uns hineingehen und sehen, wie Medienabfragen von Bootstrap verwendet werden.

88
00:07:40,910 --> 00:07:45,789
Hier sehen Sie ein Beispiel für eine Medienabfrage, wo es heißt, @media und

89
00:07:45,789 --> 00:07:47,854
min-width 576 Pixel.

90
00:07:47,854 --> 00:07:54,906
Und dann gibt es an, dass diese bestimmte CSS-Klasse Container aufrufen

91
00:07:54,906 --> 00:07:59,960
, über den wir in der nächsten Vorlesung

92
00:07:59,960 --> 00:08:04,150
und auch in der folgenden Übung mehr erfahren werden.

93
00:08:04,150 --> 00:08:12,640
Wir werden sehen, dass die Breite des Containers basierend auf der Breite des Bildschirms festgelegt wird.

94
00:08:12,640 --> 00:08:17,590
In ähnlicher Weise wird bei einem Bildschirm mit höherer Breite die Containerbreite automatisch angepasst.

95
00:08:17,590 --> 00:08:22,251
Dies ist also, was es Ihrem Web-UI-Framework ermöglicht,

96
00:08:22,251 --> 00:08:25,604
responsive Webdesign zu unterstützen.

97
00:08:25,604 --> 00:08:30,762
Durch Medienabfragen ist Ihr Web-UI-Framework in der Lage,

98
00:08:30,762 --> 00:08:36,928
festzustellen, auf welcher Art von Gerät Sie Ihre Website rendern.

99
00:08:36,928 --> 00:08:41,849
Und entsprechend passen Sie die CSS-Klassen an, um

100
00:08:41,849 --> 00:08:46,401
diese bestimmte Geräte-Bildschirmgröße anzupassen.

101
00:08:46,401 --> 00:08:50,821
Die nächste Frage, die Ihnen dann in den Sinn kommen wird, ist, wie wir

102
00:08:50,821 --> 00:08:52,870
das in der Praxis machen?

103
00:08:52,870 --> 00:08:56,540
Glücklicherweise, wenn Sie mit einem gut gestalteten

104
00:08:56,540 --> 00:09:01,700
Front-End-Web-UI-Framework wie Bootstrap beginnen, werden die Dinge sehr einfach.

105
00:09:01,700 --> 00:09:08,023
Wir werden mehr darüber in der nächsten Vorlesung und in der folgenden Übung erfahren.

106
00:09:08,023 --> 00:09:13,999
( MUSIK)