1
00:00:00,000 --> 00:00:00,127

2
00:00:00,127 --> 00:00:01,210
DAVID J. MALAN: Alles in Ordnung.

3
00:00:01,210 --> 00:00:02,160
Wir sind zurück.

4
00:00:02,160 --> 00:00:05,810
So ist das Ziel dieser letzten Sitzung
ist ein paar weitere Konzepte einzuführen

5
00:00:05,810 --> 00:00:09,290
sondern auch geben jedem eine Chance
zu Art dehnen von den Fingern

6
00:00:09,290 --> 00:00:11,270
und tatsächlich etwas tun,
ein wenig hands-on.

7
00:00:11,270 --> 00:00:13,897
Das Ziel ist nicht zu drehen
uns alle in Web-Entwickler

8
00:00:13,897 --> 00:00:16,230
mit irgendwelchen Mitteln, aber wirklich nur
um Ihnen einen Eindruck von einigen

9
00:00:16,230 --> 00:00:21,750
der Grundkonstrukte was
geht in Web-Programmierung und Web-heute

10
00:00:21,750 --> 00:00:23,980
Entwicklung, so das
statische Seite von things--

11
00:00:23,980 --> 00:00:26,660
keine Logik, keine Programmierung
Sprache, nur statische Inhalte.

12
00:00:26,660 --> 00:00:29,660
Und es wird uns Gelegenheit geben,
um tatsächlich sehen, was ein Web-Server ist,

13
00:00:29,660 --> 00:00:34,140
sehen, was eine HTML-Datei ist, was
es ist HTTP tatsächlich nach oben dient.

14
00:00:34,140 --> 00:00:38,600
Aber bevor wir tauchen in, jede Retrospektive
Fragen zu Cloud Computing

15
00:00:38,600 --> 00:00:43,922
oder Sicherheit oder irgendetwas dazwischen?

16
00:00:43,922 --> 00:00:44,890
>> Nein?

17
00:00:44,890 --> 00:00:47,181
Na gut, na ja, lassen Sie uns
tun dies nur für den Fall

18
00:00:47,181 --> 00:00:49,680
der Prozess der Anmeldung für
etwas dauert ein paar Minuten.

19
00:00:49,680 --> 00:00:51,221
Wir werden es im Hintergrund tun lassen.

20
00:00:51,221 --> 00:00:56,860
Gehen Sie weiter, wenn Sie könnten,
auf diese URL hier-- c9.io.

21
00:00:56,860 --> 00:01:02,810
Dies ist ein Drittanbieter service--
Plattform als Service, wenn Sie will--

22
00:01:02,810 --> 00:01:05,190
das wird Sie einladen
um sich für ein Konto,

23
00:01:05,190 --> 00:01:08,650
und es wird jeder von euch zu geben,
ein Konto in der sogenannten Wolke

24
00:01:08,650 --> 00:01:11,330
auf die Infrastruktur einer anderen Person,
eine Firma namens Cloud9.

25
00:01:11,330 --> 00:01:13,350
Aber was ist schön, über
ist, dass sie Ihnen

26
00:01:13,350 --> 00:01:15,990
eine Annäherung an ein
tatsächlichen realen Entwicklung

27
00:01:15,990 --> 00:01:18,530
Umwelt, wenn auch in der
Wolke und in einem Web-Browser,

28
00:01:18,530 --> 00:01:21,175
und wir werden dies nutzen, um tatsächlich
experimentieren heute ein wenig.

29
00:01:21,175 --> 00:01:27,116

30
00:01:27,116 --> 00:01:30,260
Und dann gehen Sie vor und einfach navigieren
Ihr Weg zum Anmeldeprozess

31
00:01:30,260 --> 00:01:32,630
wenn Sie könnten.

32
00:01:32,630 --> 00:01:36,080
So passieren wir dies in der Klasse zu verwenden,
Ich lehre für alle unsere Studenten,

33
00:01:36,080 --> 00:01:39,140
sowohl auf dem Campus und ab jetzt, und
es ersetzt, was historisch

34
00:01:39,140 --> 00:01:41,390
ansonsten war herunterladbare Software.

35
00:01:41,390 --> 00:01:44,620
Also, was Sie Zugang gewinnen zu
ist eine dieser virtuellen Maschinen,

36
00:01:44,620 --> 00:01:46,460
im Wesentlichen, dass ich bereits beschrieben.

37
00:01:46,460 --> 00:01:50,260
Also das Unternehmen Cloud9 wahrscheinlich
Mieten von einem dritten Party-- in der Tat

38
00:01:50,260 --> 00:01:52,760
in diesem Fall Google-- eine ganze
Bündel von virtuellen Maschinen

39
00:01:52,760 --> 00:01:56,500
dass sie irgendwie zerhacken in
die Illusion von einzelnen Servern

40
00:01:56,500 --> 00:01:58,610
dass jeder von uns hat die volle Kontrolle über.

41
00:01:58,610 --> 00:02:01,640
Es ist nicht ganz richtig zu sagen,
dass sie virtuelle Maschinen,

42
00:02:01,640 --> 00:02:04,550
obwohl, weil das, was
Cloud9 tatsächlich nutzt

43
00:02:04,550 --> 00:02:07,570
ist eine etwas neuere Technologie
genannt Containerisierung.

44
00:02:07,570 --> 00:02:13,150
Und lassen Sie mich dieses Bild packen
hier, um dieses Bild zu malen.

45
00:02:13,150 --> 00:02:16,540
>> Ein Container ist, wenn
Sie erinnern an das Bild

46
00:02:16,540 --> 00:02:19,900
von früher, ein wenig leichter
Gewicht als einer virtuellen Maschine.

47
00:02:19,900 --> 00:02:22,090
In der Tat, während letzte
Zeit sprachen wir über dort

48
00:02:22,090 --> 00:02:25,170
wobei ein Betriebs
System und ein Hypervisor

49
00:02:25,170 --> 00:02:28,260
und dann Gast-Betriebssystem, Gast
Betriebssystem, Gastbetriebs

50
00:02:28,260 --> 00:02:30,940
System, auf Ihre
physische Hardware,

51
00:02:30,940 --> 00:02:33,740
Der Unterschied dieser neueren
Technologie, Containerisierung,

52
00:02:33,740 --> 00:02:37,290
ist, dass sie alle irgendwie teilen
das gleiche Betriebssystem.

53
00:02:37,290 --> 00:02:39,970
Aber sie immer noch schaffen
die Illusion von jeder

54
00:02:39,970 --> 00:02:44,590
mit seinem eigenen exklusiven
Administratorrechte und Dateien

55
00:02:44,590 --> 00:02:45,400
auf dem Server.

56
00:02:45,400 --> 00:02:48,230
Aber es gibt weniger Software in
zwischen Ihnen und der Hardware.

57
00:02:48,230 --> 00:02:52,260
Das Ergebnis davon ist, in
Theorie, eine höhere Leistung,

58
00:02:52,260 --> 00:02:55,470
weil Sie verwenden oder
weniger Ressourcen zu verschwenden

59
00:02:55,470 --> 00:02:57,360
auf, dass so genannte Virtualisierungsschicht.

60
00:02:57,360 --> 00:02:59,420
So wird dies als
Containerisierung von der Natur

61
00:02:59,420 --> 00:03:02,920
durch eine Technologie namens Dockarbeiter,
die sehr viel kommt in seine eigene.

62
00:03:02,920 --> 00:03:05,086
Und das ist etwas,
Ingenieure in Ihrem Unternehmen

63
00:03:05,086 --> 00:03:08,610
könnte Art von Art zu sprechen beginnen
über bald, wenn sie nicht bereits,

64
00:03:08,610 --> 00:03:11,590
obwohl es sicherlich nicht
Grund auf irgendwelchen Festwagen zu springen.

65
00:03:11,590 --> 00:03:15,410
>> So mit dem sagte, was
Sie wahrscheinlich jetzt sehen,

66
00:03:15,410 --> 00:03:22,670
ist ein Bildschirm, ein bisschen wie folgt aussieht.

67
00:03:22,670 --> 00:03:23,170
OK.

68
00:03:23,170 --> 00:03:25,260
Und rufen Sie mich einfach über, wenn nicht.

69
00:03:25,260 --> 00:03:27,440
Und wenn SO- ich kommen werde, wenn nicht.

70
00:03:27,440 --> 00:03:30,244
Gehen Sie weiter und klicken Sie auf, dass große
sowie einen Arbeitsbereich zu erstellen,

71
00:03:30,244 --> 00:03:31,660
und Sie werden einen Bildschirm wie folgt zu sehen.

72
00:03:31,660 --> 00:03:35,020
Sie können den Arbeitsbereich aufrufen
nennen, was Sie jetzt wollen.

73
00:03:35,020 --> 00:03:38,660
Und tatsächlich für Einfachheit,
gehen und- gut, einige von euch

74
00:03:38,660 --> 00:03:39,660
haben bereits Workspaces.

75
00:03:39,660 --> 00:03:47,050
Nennen Sie es, was Sie want-- Geschäft,
Harvard, Donnerstag, was auch immer Sie möchten.

76
00:03:47,050 --> 00:03:48,800
Sie brauchen keine Beschreibung.

77
00:03:48,800 --> 00:03:52,380
Sie können es privat verlassen, es sei denn Sie
haben bereits eine Reihe von Workspaces.

78
00:03:52,380 --> 00:03:55,280
Wenn Sie gezwungen sind, es öffentlich zu machen,
das ist für die heutigen Zwecke gut.

79
00:03:55,280 --> 00:03:56,750
Auch hier ist eine der upsells.

80
00:03:56,750 --> 00:03:59,939
Sie erhalten einen privaten Arbeitsbereich von
Standard. Aber wenn Sie wollen mehr,

81
00:03:59,939 --> 00:04:00,980
Sie haben für mehr zu zahlen.

82
00:04:00,980 --> 00:04:02,870
Ansonsten werden sie zwingen,
um Ihre Arbeit zu veröffentlichen.

83
00:04:02,870 --> 00:04:05,600
Aber das ist in Ordnung, weil sie auch
Ziel dieses auf Open-Source-Communities

84
00:04:05,600 --> 00:04:07,700
zu Menschen zu ermutigen,
tatsächlich zusammenarbeiten.

85
00:04:07,700 --> 00:04:10,699
>> Und das letzte, was wichtig ist,
obwohl, ist, nachdem Sie einen Namen wählen

86
00:04:10,699 --> 00:04:17,140
und nachdem Sie privat oder öffentlich wählen,
klicken Sie auf HTML5, das große orangefarbene Symbol

87
00:04:17,140 --> 00:04:22,430
zweite von links, und
klicken Sie dann auf Arbeitsbereich erstellen.

88
00:04:22,430 --> 00:04:24,580
Und es wird wahrscheinlich
eine Minute dauern oder so,

89
00:04:24,580 --> 00:04:26,540
aber Sie werden dann ein
Umwelt, wenn Sie

90
00:04:26,540 --> 00:04:30,544
das tun, das erinnert sieht aus
was ich jetzt habe hier auf dem Bildschirm.

91
00:04:30,544 --> 00:04:33,210
Aber noch einmal, könnte es eine Minute dauern
oder mehr zu diesem Bildschirm zu bekommen

92
00:04:33,210 --> 00:04:34,770
wenn Sie erstellen Arbeitsbereich geklickt haben.

93
00:04:34,770 --> 00:04:37,936
Aber Flagge mich nur über, wenn Sie mich möchten
einen Blick auf irgendetwas oder beraten zu nehmen.

94
00:04:37,936 --> 00:04:40,191

95
00:04:40,191 --> 00:04:40,690
Gut.

96
00:04:40,690 --> 00:04:42,390
Also werde ich jetzt in den Hintergrund dieses.

97
00:04:42,390 --> 00:04:44,260
Rufen Sie mich an, wenn Sie über scheinen
haben technische Probleme.

98
00:04:44,260 --> 00:04:46,210
Aber noch einmal, vielleicht nehmen Sie es ein
wenig dafür zu öffnen.

99
00:04:46,210 --> 00:04:49,570
Und lassen Sie uns voran gehen und reden über das, was
es bedeutet tatsächlich eine Web-Seite zu machen,

100
00:04:49,570 --> 00:04:52,780
was HTML ist, und wie all dies
Jetzt verbindet wie wir beginnen,

101
00:04:52,780 --> 00:04:54,730
um tatsächlich etwas von der Technologie.

102
00:04:54,730 --> 00:04:58,310
So stellt sich heraus, dass ich kann,
gehen auf meinem kleinen Mac hier,

103
00:04:58,310 --> 00:05:01,650
Öffnen Sie ein einfaches Programm mit dem Namen
TextEdit, oder auf Windows ich konnte

104
00:05:01,650 --> 00:05:04,480
offen etwas namens Notepad.exe.

105
00:05:04,480 --> 00:05:08,260
Und ich konnte nur einfach etwas tun
wie this-- "Hallo, Welt."

106
00:05:08,260 --> 00:05:12,020
Und dann konnte ich spare dies als
hello.txt Also keine Magie gibt.

107
00:05:12,020 --> 00:05:15,200
Das hat nichts mit Web zu tun
Programmierung, nichts mit HTML zu tun.

108
00:05:15,200 --> 00:05:16,790
Nur die Schaffung einer einfachen Textdatei.

109
00:05:16,790 --> 00:05:20,600
Aber es stellt sich heraus, dass ein Web
Seite ist buchstäblich nur das.

110
00:05:20,600 --> 00:05:24,020
Es ist eine einfache Textdatei mit Text
dass Sie auf Ihrer Tastatur könnte,

111
00:05:24,020 --> 00:05:30,070
aber es typischerweise, aber nicht immer
endet in .txt aber .html oder .htm nicht.

112
00:05:30,070 --> 00:05:32,050
Und Sie tun nicht nur
Geben Sie Wörter in der Datei.

113
00:05:32,050 --> 00:05:35,280
Sie haben tatsächlich die Dinge zu verwenden, genannt
Tags oder, allgemeiner ausgedrückt, etwas

114
00:05:35,280 --> 00:05:37,190
Markup-Sprache genannt.

115
00:05:37,190 --> 00:05:40,510
>> Also werde ich sehr schnell eingeben
und dann die folgende Erklärung.

116
00:05:40,510 --> 00:05:42,290
Ich werde zuerst
Geben Sie diese, die sagt,

117
00:05:42,290 --> 00:05:45,730
hey, Browser, hier kommt ein
Web-Seite in HTML geschrieben.

118
00:05:45,730 --> 00:05:51,850
Und diese beiden Dinge zusammen sagen, hey,
Browser, die folgende ist in der Tat HTML.

119
00:05:51,850 --> 00:05:55,790
Hey, Browser, hier kommt die
Kopf oder die ganz oben auf meiner Seite.

120
00:05:55,790 --> 00:05:59,900
Hey, Browser, innerhalb des oberen Teils
meine Seite, setzen Sie einen Titel, das heißt, "hallo,

121
00:05:59,900 --> 00:06:01,610
Welt."

122
00:06:01,610 --> 00:06:08,370
Hey, Browser, nachdem der Kopf meines
Seite, hier kommt der Körper meiner Seite.

123
00:06:08,370 --> 00:06:12,170
Und, hey, Browser, der Körper meines
Seite sollte auch sagen, "Hallo Welt."

124
00:06:12,170 --> 00:06:15,500
Also, was sind die herausragenden Details hier?

125
00:06:15,500 --> 00:06:17,960
Dies ist, was ist in der Regel
eine doc-Typdeklaration genannt,

126
00:06:17,960 --> 00:06:20,190
und, ehrlich gesagt, ist es ein wenig
schwer zu merken dies auf den ersten.

127
00:06:20,190 --> 00:06:21,481
Sie nur eine Art von copy-paste es.

128
00:06:21,481 --> 00:06:23,760
Dies ist der formale Weg
zu sagen, hey, Browser,

129
00:06:23,760 --> 00:06:28,030
Ich verwende HTML-Version 5, die
kam in jüngster Zeit etwas aus.

130
00:06:28,030 --> 00:06:31,380
Es ist ein magischer Beschwörung, dass einige
Menschen mit einem schlechten Gefühl für Design

131
00:06:31,380 --> 00:06:33,640
habe daran gedacht, die zu setzen
Ganz oben auf der Datei.

132
00:06:33,640 --> 00:06:35,473
Auch wenn es ein
wenig obskur, das ist alles,

133
00:06:35,473 --> 00:06:38,250
es means-- hey, Browser, hier
kommt mit der Version 5 von HTML.

134
00:06:38,250 --> 00:06:41,741
>> Der Rest dieses hat bei uns
seit einiger Zeit, historisch,

135
00:06:41,741 --> 00:06:44,740
aber es ist schon weiterentwickelt, und es ist
wahrscheinlich wurde immer ein wenig einfacher.

136
00:06:44,740 --> 00:06:47,320
Beachten Sie einige Merkmale
von dem, was ich hervorgehoben habe.

137
00:06:47,320 --> 00:06:49,890
Es gibt diese Dinge mit abgewinkeltem
brackets-- die linke Halterung

138
00:06:49,890 --> 00:06:51,040
und die rechte Halterung.

139
00:06:51,040 --> 00:06:52,490
Und bemerken hier die Symmetrie.

140
00:06:52,490 --> 00:06:57,340
Und durch die Symmetrie, meine ich, so wie ich
haben diese Start-Tag hier oder einen offenen Tag

141
00:06:57,340 --> 00:07:01,560
wenn man so will, hier unten habe ich eine
close-Tag oder ein End-Tag, das ist

142
00:07:01,560 --> 00:07:06,460
unterscheiden sich nur insofern, als es dies hat
Slash am Anfang des Wortes

143
00:07:06,460 --> 00:07:07,360
HTML.

144
00:07:07,360 --> 00:07:09,360
Und Sie können denken
dies, wie ich war beiläufig

145
00:07:09,360 --> 00:07:12,280
schlägt vor, hey,
Browser, hier kommt etwas HTML.

146
00:07:12,280 --> 00:07:16,060
Und umgekehrt, hey, Browser, das ist
es für den HTML-- beginnen und enden.

147
00:07:16,060 --> 00:07:18,440
>> Inzwischen hey, Browser, hier
kommt der Kopf meiner Seite.

148
00:07:18,440 --> 00:07:20,140
Hey, Browser, das ist es für den Kopf.

149
00:07:20,140 --> 00:07:22,240
Hey, Browser, hier ist
der Körper meiner Seite.

150
00:07:22,240 --> 00:07:24,020
Hey, Browser, das ist es für den Körper.

151
00:07:24,020 --> 00:07:26,940
Und im Inneren davon ist, einige
beliebiger Text für den Moment.

152
00:07:26,940 --> 00:07:30,520
Und im Inneren des Kopfes, inzwischen
ist etwas willkürlich, sondern markiert,

153
00:07:30,520 --> 00:07:34,410
so zu sprechen, Text, der sagt, den Titel
meiner Seite soll "Hallo, Welt" sein.

154
00:07:34,410 --> 00:07:37,470
Nun, jetzt können Sie
davon ausgehen, dass Browser

155
00:07:37,470 --> 00:07:41,762
haben only-- oder, besser gesagt, Web-Seiten
nur zwei parts-- den Kopf und den Körper.

156
00:07:41,762 --> 00:07:44,220
Und der Kopf ist in der Regel nur
wie in der Menüleiste das Zeug

157
00:07:44,220 --> 00:07:45,510
wirklich nur an der Spitze.

158
00:07:45,510 --> 00:07:48,910
Und der Körper ist die Eingeweide von der Seite,
alles in diesem großen Rechteck

159
00:07:48,910 --> 00:07:50,239
dass füllt den Bildschirm.

160
00:07:50,239 --> 00:07:51,780
Also werde ich voran gehen und das tun.

161
00:07:51,780 --> 00:07:54,400
Ich werde weitermachen und
klicken Sie auf Speichern, Datei speichern.

162
00:07:54,400 --> 00:07:58,580
Und ich werde zu retten
dies als hello.html,

163
00:07:58,580 --> 00:08:00,870
und ich werde einfach
legte es auf meinem Desktop.

164
00:08:00,870 --> 00:08:03,520
Und ich werde gehen
vor und klicken Sie auf Speichern.

165
00:08:03,520 --> 00:08:05,806
Und notice-- meinem Mac an
dest bei mir schreit.

166
00:08:05,806 --> 00:08:07,180
Sind Sie sicher, dass Sie dies tun?

167
00:08:07,180 --> 00:08:08,710
Und ich werde zu sagen, ja, HTML verwenden.

168
00:08:08,710 --> 00:08:10,400
Ich weiß, dass in diesem Fall besser.

169
00:08:10,400 --> 00:08:14,686
Und jetzt werde ich auf meinem Desktop zu gehen
wo ich diese Datei auf einmal.

170
00:08:14,686 --> 00:08:16,060
Und ich werde es doppelklicken.

171
00:08:16,060 --> 00:08:18,268
Und Sie werden feststellen, dass durch
standardmäßig geöffnet Chrome auf.

172
00:08:18,268 --> 00:08:19,996
Das ist, weil das ist
Standardbrowser.

173
00:08:19,996 --> 00:08:21,370
Und er sagt nur: "Hallo, Welt."

174
00:08:21,370 --> 00:08:23,078
Aber es sagt "Hallo,
Welt "an zwei Stellen.

175
00:08:23,078 --> 00:08:23,979
Beachten Sie links oben.

176
00:08:23,979 --> 00:08:25,020
Ziemlich schwer, das zu verpassen.

177
00:08:25,020 --> 00:08:26,180
Es ist groß und fett.

178
00:08:26,180 --> 00:08:30,690
Und wo sonst scheint es,
zu sagen: "Hallo, Welt"?

179
00:08:30,690 --> 00:08:31,470
>> PUBLIKUM: Die Registerkarte.

180
00:08:31,470 --> 00:08:33,100
>> DAVID J. MALAN: Ja, das Register selbst.

181
00:08:33,100 --> 00:08:35,159
Also, wenn ich sagte den Kopf der
Seite ist alles bis top--

182
00:08:35,159 --> 00:08:36,367
und in der Tat ist dies der Titel.

183
00:08:36,367 --> 00:08:37,710
Es ist nur in der Registerkarte hier.

184
00:08:37,710 --> 00:08:40,320
Und ich kann dieses Register ziehen
aus, um nicht zu verwirren.

185
00:08:40,320 --> 00:08:43,360
Dies ist nur ein einziges Register jetzt,
und in der Tat sehen wir "Hallo, Welt"

186
00:08:43,360 --> 00:08:45,970
hier oben und "Hallo, Welt" hier unten.

187
00:08:45,970 --> 00:08:47,160
So ziemlich einfach.

188
00:08:47,160 --> 00:08:49,050
Aber es ist auch ziemlich einfach.

189
00:08:49,050 --> 00:08:50,440
Und tatsächlich, ich gezoomt.

190
00:08:50,440 --> 00:08:53,272
Ich kann die Schriftgröße ändern, nur
für die Zugänglichkeit zu vergrößern.

191
00:08:53,272 --> 00:08:56,830
Aber lassen Sie uns jetzt etwas tun
ein wenig interessanter.

192
00:08:56,830 --> 00:08:59,760
>> Ich werde hoppla zu go--, lassen
mich kennen meine Textdatei zurück.

193
00:08:59,760 --> 00:09:02,400
Ich gehe zurück zu meinem
Textdatei, und ich werde

194
00:09:02,400 --> 00:09:06,320
dies zu ändern und sagen
"Hallo, Disney World."

195
00:09:06,320 --> 00:09:07,970
Sparen.

196
00:09:07,970 --> 00:09:10,919
Und gehen Sie zurück zu meinem
Browser und klicken Sie auf Neu laden.

197
00:09:10,919 --> 00:09:12,710
Und nun es natürlich
sagt: "Disney World".

198
00:09:12,710 --> 00:09:15,500
Und ich werde künstlich zu vergrößern
in nur so ist es einfacher, zu sehen.

199
00:09:15,500 --> 00:09:19,012
So, jetzt leider ich irgendwie wollen
zu-- tatsächlich, das ist ein Feature Mac.

200
00:09:19,012 --> 00:09:21,720
Ich möchte auf Disney World zu klicken
und gehen irgendwo wie disney.com,

201
00:09:21,720 --> 00:09:23,290
aber das funktioniert nicht.

202
00:09:23,290 --> 00:09:26,850
So ein Grundprinzip der Bahn
Hyperlinks, Links, die an anderer Stelle gehen.

203
00:09:26,850 --> 00:09:28,390
Wie mache ich das?

204
00:09:28,390 --> 00:09:34,690
Nun, ich könnte einfach sagen,
"Hallo, http://www.disney.com."

205
00:09:34,690 --> 00:09:36,110
Speicher das.

206
00:09:36,110 --> 00:09:37,620
Neu laden.

207
00:09:37,620 --> 00:09:39,400
Aber auch dies nicht anklickbar.

208
00:09:39,400 --> 00:09:42,930
Und was ist schön hier, auch wenn
dies ist noch nicht funktionsfähig,

209
00:09:42,930 --> 00:09:45,930
ist, dass es scheint, dass die
Browser buchstäblich nur tut

210
00:09:45,930 --> 00:09:46,950
was ich es zu tun erzählen.

211
00:09:46,950 --> 00:09:50,110
Also, wenn ich geben Sie einfach die URL wie diese,
es geht mir nur um die URL zu zeigen.

212
00:09:50,110 --> 00:09:54,270
Ich brauche Tags oder Markup verwenden
Sprache sagen, tatsächlich

213
00:09:54,270 --> 00:09:55,621
der Browser noch mehr zu tun.

214
00:09:55,621 --> 00:09:57,870
Also werde ich voran gehen und
löschen dies für einen Moment.

215
00:09:57,870 --> 00:10:00,980
Und ich werde sagen, hey,
Browser, starten Sie einen Anker hier,

216
00:10:00,980 --> 00:10:02,650
ein Link sozusagen.

217
00:10:02,650 --> 00:10:07,500
Und die hyper-Referenz, das Ziel
dieser Anker, sollte diese URL sein.

218
00:10:07,500 --> 00:10:08,750
Und meine Zitate bemerken.

219
00:10:08,750 --> 00:10:11,590
Ich konnte in einfache Anführungszeichen zu verwenden,
aber Sie müssen konsequent sein,

220
00:10:11,590 --> 00:10:14,270
und ich würde in der Regel nur verwenden
doppelte Anführungszeichen es einfach zu halten.

221
00:10:14,270 --> 00:10:16,820
Beachten Sie, ich werde den Tag zu schließen.

222
00:10:16,820 --> 00:10:21,160
Und dann hier werde ich
zu sagen: "Disney World".

223
00:10:21,160 --> 00:10:26,890
Und jetzt brauche ich einige symmetry--
Klammer auf, / a, geschlossene Klammer.

224
00:10:26,890 --> 00:10:28,090
>> So was habe ich eingeführt?

225
00:10:28,090 --> 00:10:30,100
Wir haben schon ein paar Tags hatte.

226
00:10:30,100 --> 00:10:32,410
HTML, Kopf, Titel, Körper,
sind alle Tags, so zu sprechen,

227
00:10:32,410 --> 00:10:34,280
mit offenen und geschlossenen Pendants.

228
00:10:34,280 --> 00:10:36,530
Beachten Sie aber, dies ist eine Art
grundsätzlich anders.

229
00:10:36,530 --> 00:10:39,140
Dies ist, was wir nennen
in HTML ein Attribut.

230
00:10:39,140 --> 00:10:41,451
Und ein Attribut
nur ein Schlüssel-Wert-Paar.

231
00:10:41,451 --> 00:10:43,950
Dies ist eine gemeinsame Sache in
Computer science-- Schlüssel-Wert-Paar.

232
00:10:43,950 --> 00:10:45,770
Es ist eine Art Werkzeug des Handels.

233
00:10:45,770 --> 00:10:47,040
Ein Schlüssel und ein Wert.

234
00:10:47,040 --> 00:10:49,390
Ein Wort und dann einige
andere Wort oder Wörter.

235
00:10:49,390 --> 00:10:53,790
Und in diesem Fall ist der Schlüssel href,
und der Wert ist, dass die vollständige URL.

236
00:10:53,790 --> 00:10:57,890
Und was ein Attribut tut, ist es
beeinflusst das Verhalten eines Etiketts.

237
00:10:57,890 --> 00:11:01,010
Und in diesem Fall müssen wir beeinflussen
das Verhalten des Anker-Tag,

238
00:11:01,010 --> 00:11:04,140
denn wir brauchen zu verankern
um diesen Link zu irgendwo.

239
00:11:04,140 --> 00:11:06,960
Und wie Sie das tun, ist
mittels des Attributs.

240
00:11:06,960 --> 00:11:08,970
>> Also werde ich voran gehen
und speichern Sie die Datei jetzt.

241
00:11:08,970 --> 00:11:11,300
Gehen Sie zurück zu meinem Browser und reload.

242
00:11:11,300 --> 00:11:14,580
Und voila, haben wir nun die
Anfänge einer legitimen Webseite.

243
00:11:14,580 --> 00:11:18,420
Super einfach, aber wenn ich den Mauszeiger über
this-- Bekanntmachung in der linken unteren Ecke,

244
00:11:18,420 --> 00:11:19,830
es ist super-klein.

245
00:11:19,830 --> 00:11:21,730
Aber Sie sehen www.disney.com.

246
00:11:21,730 --> 00:11:27,076
Und wenn ich es klicken, in der Tat diese
Handrührer mich disney.com entfernt.

247
00:11:27,076 --> 00:11:29,380
Nun wird das Merkwürdige
hier ist, dass es nicht

248
00:11:29,380 --> 00:11:33,940
die Besten-- die meisten marktgängigen URL, aber
das ist in Ordnung, da diese Datei nicht

249
00:11:33,940 --> 00:11:35,360
gibt es auf dem World Wide Web.

250
00:11:35,360 --> 00:11:39,740
Es existiert als lokale Datei in scheinbar
meine Benutzer directory-- / jharvard--

251
00:11:39,740 --> 00:11:41,890
für John Harvard-- / Desktop.

252
00:11:41,890 --> 00:11:42,634
Aber es hat eine URL.

253
00:11:42,634 --> 00:11:43,800
Es passiert einfach vor Ort zu sein.

254
00:11:43,800 --> 00:11:47,050
Leider kann keiner von euch besuchen
dies, weil, wenn Sie diese Adresse ein,

255
00:11:47,050 --> 00:11:49,980
Sie würden Ihrem Browser erzählen,
suchen Sie nach einer Datei namens hello.html

256
00:11:49,980 --> 00:11:50,772
auf Ihrer Festplatte.

257
00:11:50,772 --> 00:11:53,271
Und natürlich, es sei denn, Sie haben
Folgende entlang wurden manuell,

258
00:11:53,271 --> 00:11:54,530
es wird dort nicht existieren.

259
00:11:54,530 --> 00:11:55,190
>> Also das ist in Ordnung.

260
00:11:55,190 --> 00:11:57,815
Wir müssen noch einen Weg, schließlich,
diese Datei in das Web zu bekommen,

261
00:11:57,815 --> 00:12:01,180
aber lassen Sie uns necken neben ein paar
Auswirkungen auf die Sicherheit von dem, was wir gerade

262
00:12:01,180 --> 00:12:04,850
sah und es zurück auf die frühere binden
Diskussion von heute Morgen.

263
00:12:04,850 --> 00:12:08,200
Es stellt sich heraus, dass, wenn ein
Browser buchstäblich nur tut

264
00:12:08,200 --> 00:12:12,560
was ich sagen, es zu tun, und es scheint,
der Fall zu sein, dass ein Anker-Tag ist

265
00:12:12,560 --> 00:12:17,380
durch den Wert beeinflusst von
Dieses Attribut namens href

266
00:12:17,380 --> 00:12:20,810
aber es zeigt diese
Text, dies scheint

267
00:12:20,810 --> 00:12:26,520
zu implizieren, dass ich die URL setzen könnte
in beiden Orten und dann neu zu laden

268
00:12:26,520 --> 00:12:29,100
und jetzt die URL sehen und auf die URL gehen.

269
00:12:29,100 --> 00:12:32,680
Beachten Sie, wenn ich schweben über der unteren linken,
Ich bin immer noch in der Tat zu disney.com.

270
00:12:32,680 --> 00:12:38,340
>> Also, wenn Sie jemals gewesen
phished-- P-H-I-S-H-E-D--

271
00:12:38,340 --> 00:12:42,820
mit einer dieser gefälschten E-Mails
aus wie PayPal Ihrer Bank,

272
00:12:42,820 --> 00:12:46,470
Sie haben wahrscheinlich Links innen bekommen
der E-Mail, die Sie lesen, dass

273
00:12:46,470 --> 00:12:49,970
Tells Sie hier klicken, bestätigen zu gehen
Ihr Passwort oder Ihr Geburtsdatum bestätigen

274
00:12:49,970 --> 00:12:53,840
oder soziale oder etwas sozial
Engineering Sie offen zu legen

275
00:12:53,840 --> 00:12:54,920
Information.

276
00:12:54,920 --> 00:12:57,625
Nun, ich könnte Art nehmen
Vorteil dieser, könnte ich nicht?

277
00:12:57,625 --> 00:13:01,240
Ich konnte etwas sagen
wie www.paypal.com.

278
00:13:01,240 --> 00:13:11,340
Und statt disney.com, ich
gehen könnte, wie, badguy.com.

279
00:13:11,340 --> 00:13:12,850
Neu laden.

280
00:13:12,850 --> 00:13:16,620
Und wie einfach ist es, hinters Licht zu führen,
insbesondere ein nicht-technische Leser

281
00:13:16,620 --> 00:13:20,649
oder ein kursorisch lesen
Leser als zu klicken

282
00:13:20,649 --> 00:13:23,940
ein Link wie diesen, die, wenn ich es-- klicken
Ich will eigentlich nicht badguy.com zu gehen.

283
00:13:23,940 --> 00:13:25,398
Ich weiß nicht, was tatsächlich da ist.

284
00:13:25,398 --> 00:13:30,080
So paypal.com, bemerken, ist
was er sagt, es wird,

285
00:13:30,080 --> 00:13:33,210
aber natürlich, wenn ich nach unten schauen
super-low, es ist ein wenig verschwommen,

286
00:13:33,210 --> 00:13:34,230
aber es sagt badguy.com.

287
00:13:34,230 --> 00:13:38,644
Das ist das einzige im Moment sagen
dass ich an der falschen Stelle werde.

288
00:13:38,644 --> 00:13:41,560
Und wenn ich vorhin gesagt, dass Banken
sollte wirklich nicht zu fördern oder zu trainieren

289
00:13:41,560 --> 00:13:44,510
Nutzer zum Klicken auf Links, diese
ist nur eine Manifestation davon.

290
00:13:44,510 --> 00:13:45,430
Und es ist so einfach.

291
00:13:45,430 --> 00:13:48,120
Sie sind jetzt ein Gegner, wenn
Sie tun so etwas wie dieses

292
00:13:48,120 --> 00:13:51,000
und versuchen, einen Benutzer zu betrügen
in Ihre Website besuchen.

293
00:13:51,000 --> 00:13:53,320
Aber jetzt, wir halten
Dinge schön und sauber.

294
00:13:53,320 --> 00:13:55,640
Wir gehen voran gehen
und Zurückspulen diese Änderungen.

295
00:13:55,640 --> 00:13:56,530
Aktualisieren Sie die Seite.

296
00:13:56,530 --> 00:13:57,740
Und ich gehe zurück zu disney.com.

297
00:13:57,740 --> 00:14:00,660
>> Mal sehen, ob wir nicht ärgern können
diese auseinander, ein wenig mehr.

298
00:14:00,660 --> 00:14:04,160
So "hallo, Disney World."

299
00:14:04,160 --> 00:14:05,950
Ich werde hier unten zu sagen.

300
00:14:05,950 --> 00:14:08,220
Ich werde etwas Raum Vielleicht machen.

301
00:14:08,220 --> 00:14:12,730
"Wir hoffen, dass Sie Ihren Aufenthalt genießen!"

302
00:14:12,730 --> 00:14:13,830
Sparen.

303
00:14:13,830 --> 00:14:15,850
Neu laden.

304
00:14:15,850 --> 00:14:19,010
Es ist rea-- nicht, das ist nicht
was soll ich, nicht wahr?

305
00:14:19,010 --> 00:14:21,870
Ich meine, wenn ich meinen Text bin Behandlung
Datei wie ein Textverarbeitungsprogramm,

306
00:14:21,870 --> 00:14:24,894
was hast hoffen, dass Sie hier passieren würde?

307
00:14:24,894 --> 00:14:27,060
Ja, ich fühle mich dort wie
sollte hier ein Zeilenumbruch,

308
00:14:27,060 --> 00:14:28,799
so fühlt es sich Buggy in gewisser Weise.

309
00:14:28,799 --> 00:14:31,090
Aber das ist eigentlich absichtlich,
denn nach wie vor,

310
00:14:31,090 --> 00:14:33,381
der Browser wird nur
tun, was Sie es zu tun erzählen.

311
00:14:33,381 --> 00:14:34,806
Ich habe gesagt, dass es nicht Linien zu brechen.

312
00:14:34,806 --> 00:14:37,930
Ich habe gesagt, dass es nicht nach unten zu bewegen, auch
obwohl, intuitiv, ich fühle mich wie ich es tat.

313
00:14:37,930 --> 00:14:39,805
So stellt sich heraus, dass wir brauchen
ein wenig mehr Markup,

314
00:14:39,805 --> 00:14:41,390
und ich werde dies zu beheben, wie folgt.

315
00:14:41,390 --> 00:14:46,160
Ich werde das Vorwort zuerst hallo
mit dem, was ein Absatz-Tag genannt wird.

316
00:14:46,160 --> 00:14:48,920
Und dann gehe ich voran gehen
und wickeln diese andere Satz

317
00:14:48,920 --> 00:14:54,370
in einem anderen Absatz-Tag, obwohl
sie sind super-kurzen Absätzen.

318
00:14:54,370 --> 00:14:55,930
Jetzt werde ich zu speichern.

319
00:14:55,930 --> 00:14:57,160
Neu laden.

320
00:14:57,160 --> 00:14:59,070
Und jetzt haben wir, dass
Raum, und wir Art

321
00:14:59,070 --> 00:15:01,680
haben die Semantik
zwei getrennte Absätze.

322
00:15:01,680 --> 00:15:05,290
>> Das ist alles schön und gut, aber es wäre
nett sein, um ein Bild zu dieser Seite hinzugefügt werden,

323
00:15:05,290 --> 00:15:08,710
also werde ich für zu gehen, schauen
Mickey Mouse auf Google Images.

324
00:15:08,710 --> 00:15:12,830
Und nur zum Spaß, ich bin
geht um das Bild zu greifen.

325
00:15:12,830 --> 00:15:15,350
Ich gehe jetzt nach vorne gehen und
greifen die URL dieses Bildes,

326
00:15:15,350 --> 00:15:16,510
obwohl es anders
Möglichkeiten, dies zu tun.

327
00:15:16,510 --> 00:15:18,520
Denn jetzt werde ich einfach die URL zu kopieren.

328
00:15:18,520 --> 00:15:24,770
Ich werde in meinem Text zurück zu gehen
Datei, und ich werde hier zu sagen,

329
00:15:24,770 --> 00:15:31,160
img src = Zitat unquote
dass URL, super-lange.

330
00:15:31,160 --> 00:15:34,580
Und dann die Idee eines
Bild ist ein wenig anders.

331
00:15:34,580 --> 00:15:38,640
Es gibt wirklich keine Ahnung von Start
ein Bild und das Ende eines Bildes,

332
00:15:38,640 --> 00:15:40,630
wie ein Anfang, ein Ende-Tag markieren.

333
00:15:40,630 --> 00:15:43,840
So fühlt es sich ein bisschen komisch an
mir tun dies semantisch,

334
00:15:43,840 --> 00:15:45,390
ein close-Bild-Tag zu haben.

335
00:15:45,390 --> 00:15:46,780
Es ist nicht falsch.

336
00:15:46,780 --> 00:15:48,840
Es ist vollkommen richtig,
und es ermutigt,

337
00:15:48,840 --> 00:15:50,870
aber es gibt Kurzschreibweise.

338
00:15:50,870 --> 00:15:53,780
Ich kann Art von gleichzeitig
öffnen und schließen Sie die gleichen Tag,

339
00:15:53,780 --> 00:15:55,510
und das wird der Browser glücklich zu machen.

340
00:15:55,510 --> 00:15:56,950
So ist es nur ein wenig
prägnanter für Dinge

341
00:15:56,950 --> 00:15:59,408
dass konzeptionell tun wirklich nicht
sinnvoll zu beginnen und enden.

342
00:15:59,408 --> 00:16:01,190
Sie sind einfach da, oder sie sind es nicht.

343
00:16:01,190 --> 00:16:06,020
>> Also werde ich diese zu speichern und gehen Sie zurück
zu meiner "Hallo Welt" -Seite und reload.

344
00:16:06,020 --> 00:16:09,880
Und es ist ein wenig außer Kontrolle geraten,
denn das Bild ist eigentlich

345
00:16:09,880 --> 00:16:12,210
ein wenig groß, aber das ist in Ordnung.

346
00:16:12,210 --> 00:16:13,710
Ich konnte es in einem Programm ändern.

347
00:16:13,710 --> 00:16:14,900
Oder wissen Sie, was.

348
00:16:14,900 --> 00:16:17,350
Nur um zu zeigen, ich bin
tatsächlich zu sagen

349
00:16:17,350 --> 00:16:21,760
dass die Breite dieser Sache sollte
nur 200 Pixel, 200 Punkte sein.

350
00:16:21,760 --> 00:16:24,360
Lassen Sie mich gehen Sie vor und sparen
und neu zu laden, und jetzt die Seite

351
00:16:24,360 --> 00:16:25,690
sieht ein wenig mehr zumutbar ist.

352
00:16:25,690 --> 00:16:27,260
Aber das Muster bemerken.

353
00:16:27,260 --> 00:16:30,030
Nun, ich habe Art gelehrt Sie alle
von HTML in gewissem Sinne, zumindest

354
00:16:30,030 --> 00:16:33,531
konzeptionell, weil alle HTML ist
diese tags-- öffnen Tags, Tags geschlossen,

355
00:16:33,531 --> 00:16:35,280
und Attribute,
ändern ihr Verhalten.

356
00:16:35,280 --> 00:16:38,380
Und anscheinend jede
Tag kann Null oder Eins haben

357
00:16:38,380 --> 00:16:43,005
oder zwei oder mehrere Attribute, die jeweils
was tut etwas ein wenig anders.

358
00:16:43,005 --> 00:16:44,380
Nun, wie Sie wissen, was existiert?

359
00:16:44,380 --> 00:16:46,800
Sie hören nur auf jemanden
wie ich Ihnen sagen, was vorhanden ist,

360
00:16:46,800 --> 00:16:50,860
oder Sie gerade Google um für ein Tutorial
auf HTML, und es ist wirklich so einfach.

361
00:16:50,860 --> 00:16:54,030
>> Wahrlich, wenn ich war ein under
Vor Jahren lernte HTML,

362
00:16:54,030 --> 00:16:56,530
einer meiner Mathematikunterricht
Assistenten nur ausgegeben

363
00:16:56,530 --> 00:16:59,600
ein bisschen Zeit, um mir Nachhilfe
für wie eine halbe Stunde, eine Stunde,

364
00:16:59,600 --> 00:17:00,660
und dann war ich auf dem Weg.

365
00:17:00,660 --> 00:17:03,300
Ich war auf dem Weg zu machen
die scheußlichsten Websites überhaupt,

366
00:17:03,300 --> 00:17:05,549
die, anscheinend habe ich nicht
wirklich jenseits fortgeschritten.

367
00:17:05,549 --> 00:17:09,849
Aber der Punkt ist, dass, sobald Sie
verstehen diese einfachen ideas--

368
00:17:09,849 --> 00:17:13,450
wenn obskure Text-- aber diese einfache
Ideen von einem Gedanken beginnen

369
00:17:13,450 --> 00:17:15,960
und Schließen eines Gedanken, halten
alles schön ausgewogen,

370
00:17:15,960 --> 00:17:19,150
etwas nach oben, das Modifizieren
Verhalten von diesem Tag, das ist wirklich alles

371
00:17:19,150 --> 00:17:20,079
es ist zu ihm.

372
00:17:20,079 --> 00:17:28,140
Und in der Tat, wenn wir gehen jetzt zu
so etwas wie google.com-- tatsächlich,

373
00:17:28,140 --> 00:17:31,920
lassen Sie uns einen Ort zu gehen, ein wenig mehr
reasonable-- stanford.edu.

374
00:17:31,920 --> 00:17:37,800
Und ich werde zum Ansehen zu gehen,
Entwickler, View Source.

375
00:17:37,800 --> 00:17:41,400
Es ist hässlich, aber notice--
und ich werde in Bekanntmachung vergrößern

376
00:17:41,400 --> 00:17:43,432
einige Sachen, die vertraut schon ist.

377
00:17:43,432 --> 00:17:45,140
Es ist das hier oben,
die ein Browser.

378
00:17:45,140 --> 00:17:46,800
Hier kommt HTML5.

379
00:17:46,800 --> 00:17:47,634
Es gibt HTML.

380
00:17:47,634 --> 00:17:49,550
Offenbar gibt es eine
tat Attribut, das ich nicht

381
00:17:49,550 --> 00:17:51,540
verwenden, der angibt, die
Sprache der Seite,

382
00:17:51,540 --> 00:17:54,380
und dies kann mit automatischer helfen
Übersetzung und solche Sachen.

383
00:17:54,380 --> 00:17:55,546
Hier ist der Kopf der Seite.

384
00:17:55,546 --> 00:17:57,790
Hier ist der Titel der Stanford-Seite.

385
00:17:57,790 --> 00:17:59,832
Es gibt einen Tag habe ich nicht
reden über yet-- Meta-Tag.

386
00:17:59,832 --> 00:18:01,540
Es ist nur eine Art
Hintergrundinformation.

387
00:18:01,540 --> 00:18:04,210
Es hilft mit SEO, oder
Suchmaschinenoptimierung,

388
00:18:04,210 --> 00:18:06,320
oder Google-Suchergebnissen oder dergleichen.

389
00:18:06,320 --> 00:18:09,029
Aber wenn wir suchen halten, halten
suchen, ist hier der Body-Tag.

390
00:18:09,029 --> 00:18:11,570
Und es gibt Bündel anderer
Tags haben wir noch nicht gesprochen.

391
00:18:11,570 --> 00:18:13,750
Aber Div ist eine für ein
Aufteilung der Seite.

392
00:18:13,750 --> 00:18:16,680
Es ist wie ein unsichtbares Rechteck
wenn Sie möchten Art von geistig

393
00:18:16,680 --> 00:18:20,160
teilen Sie Ihre Seite in
verschiedene Einheiten online.

394
00:18:20,160 --> 00:18:22,650
Und dann viel divs I
zu sehen, die so genannte Klasse,

395
00:18:22,650 --> 00:18:24,440
aber wir werden darauf zurückkommen.

396
00:18:24,440 --> 00:18:26,200
>> Dies ist interesting-- Forms.

397
00:18:26,200 --> 00:18:27,730
Formulare sind alle über das Internet.

398
00:18:27,730 --> 00:18:30,310
Alle Suchfeld du bist
je benutzt ist eine Form.

399
00:18:30,310 --> 00:18:31,490
Und so wollen wir tatsächlich sehen.

400
00:18:31,490 --> 00:18:32,790
Bilden.

401
00:18:32,790 --> 00:18:33,910
Aktion.

402
00:18:33,910 --> 00:18:37,660
Die Wirkung dieser Form, für was auch immer
historischen Gründen ist die URL.

403
00:18:37,660 --> 00:18:38,840
Methode ist "post".

404
00:18:38,840 --> 00:18:44,060
Es stellte sich heraus, dass die HTTP-Anfragen verwenden können
das Verb "kommen", wie wir zuvor gesehen haben,

405
00:18:44,060 --> 00:18:45,070
oder "post".

406
00:18:45,070 --> 00:18:47,030
Und wird einen Unterschied sehen
dies in einem Augenblick.

407
00:18:47,030 --> 00:18:48,363
Lassen Sie uns tatsächlich sehen, was das ist.

408
00:18:48,363 --> 00:18:49,830
Lassen Sie mich an der Stanford-Seite zurück.

409
00:18:49,830 --> 00:18:53,330
Welche Form sprechen sie
über, denken Sie?

410
00:18:53,330 --> 00:18:54,485
Was springt heraus an Ihnen?

411
00:18:54,485 --> 00:18:54,970
>> PUBLIKUM: Suchfeld ein.

412
00:18:54,970 --> 00:18:55,845
>> DAVID J. MALAN: Ja.

413
00:18:55,845 --> 00:18:58,410
So oben in der rechten oberen
hier ist das Suchfeld ein.

414
00:18:58,410 --> 00:19:02,441
Und das ist, wie sie umgesetzt es-- ein
Tag, das buchstäblich offene Klammer Form ist.

415
00:19:02,441 --> 00:19:03,940
Und dann lassen Sie uns für etwas suchen.

416
00:19:03,940 --> 00:19:09,220
Lassen Sie uns für einen Kumpel zu suchen
von mine-- "Nick Parlante."

417
00:19:09,220 --> 00:19:11,380
Eingeben.

418
00:19:11,380 --> 00:19:13,750
Und natürlich ging es um
eine etwas andere URL.

419
00:19:13,750 --> 00:19:15,140
Lassen Sie mich hier zurück.

420
00:19:15,140 --> 00:19:18,960
Lassen Sie uns nach "Kurse".

421
00:19:18,960 --> 00:19:19,460
Verdammt.

422
00:19:19,460 --> 00:19:20,484
Wir gingen zu einer anderen URL.

423
00:19:20,484 --> 00:19:23,400
Also, das Hinzufügen von Stanford etwas Magie
dass sie nehmen mich nicht an die URL

424
00:19:23,400 --> 00:19:25,820
dass wir sahen in der
action-Attribut gibt.

425
00:19:25,820 --> 00:19:32,480
Aber diese Form wird hier umgesetzt rein
durch diese Markup hier, diese Tags.

426
00:19:32,480 --> 00:19:35,710
In der Tat, hier ist der Eingang für
die Art der Suche, die Sie wollen.

427
00:19:35,710 --> 00:19:38,940
Hier ist der Eingang für
eine andere Art der Suche.

428
00:19:38,940 --> 00:19:41,960
Hier ist der Eingang für die Zeichenfolge selbst.

429
00:19:41,960 --> 00:19:45,394
Und so ist das Ziel nicht zu wickeln
unsere Gedanken um all diese Tags

430
00:19:45,394 --> 00:19:46,060
aber nur um zu sehen.

431
00:19:46,060 --> 00:19:48,300
Es ist nur das Öffnen und Schließen
Tags und suchen Dinge.

432
00:19:48,300 --> 00:19:48,560
Ja?

433
00:19:48,560 --> 00:19:48,920
Victoria?

434
00:19:48,920 --> 00:19:49,795
>> PUBLIKUM: [unverständlich]

435
00:19:49,795 --> 00:19:51,925

436
00:19:51,925 --> 00:19:53,550
DAVID J. MALAN: Das ist eine gute Frage.

437
00:19:53,550 --> 00:19:54,660
Das ist ein wenig schwieriger zu sehen.

438
00:19:54,660 --> 00:19:56,300
Lassen Sie mich darauf zurückkommen
Frage in nur wenigen Minuten

439
00:19:56,300 --> 00:19:59,000
wenn wir etwas betrachten genannt
CSS oder Cascading Style Sheets,

440
00:19:59,000 --> 00:20:02,500
und wir können versuchen, zu schließen,
wie viel von der Seite.

441
00:20:02,500 --> 00:20:08,090
Also, wenn wir nun einen Blick auf google.com,
Lassen Sie uns sehen, was ihre Seite aussieht.

442
00:20:08,090 --> 00:20:09,840
Sie würden they're-- das ist nett heute.

443
00:20:09,840 --> 00:20:12,490

444
00:20:12,490 --> 00:20:12,990
OK.

445
00:20:12,990 --> 00:20:13,690
Alles erledigt.

446
00:20:13,690 --> 00:20:15,260
In Ordnung, so Quelle anzeigen.

447
00:20:15,260 --> 00:20:19,590
Sie würden denken, Google hat
wirklich schön Quellcode.

448
00:20:19,590 --> 00:20:24,970
Also, es scheint, was hier vor sich geht?

449
00:20:24,970 --> 00:20:27,880
Und in der Tat ist dies nicht einmal HTML.

450
00:20:27,880 --> 00:20:30,930
Dies ist etwas, genannt JavaScript.

451
00:20:30,930 --> 00:20:32,344
Und lassen Sie uns weitermachen und gehen.

452
00:20:32,344 --> 00:20:34,010
Ich weiß nicht einmal, wo die Seite beginnt.

453
00:20:34,010 --> 00:20:37,240
Ich werde Befehl zu verwenden,
F, Klammer auf HTML.

454
00:20:37,240 --> 00:20:38,200
Also gut, da ist es.

455
00:20:38,200 --> 00:20:44,150
Ich fand den Anfang der Seite, und
es gibt so viel Zeug hier drin.

456
00:20:44,150 --> 00:20:45,310
>> Was ist eigentlich los auf?

457
00:20:45,310 --> 00:20:47,460
Nun, Sie wissen, was,
Das können wir bereinigen.

458
00:20:47,460 --> 00:20:52,109
Wenn ich gehe stattdessen das Inspizieren
Symbolleiste, diese spezielle Diagnose-Tool,

459
00:20:52,109 --> 00:20:54,150
und gehen nicht zum Netzwerk,
wo wir heute kommen immer wieder,

460
00:20:54,150 --> 00:20:56,420
aber wenn ich gehe zu Elements,
was ist wirklich schön

461
00:20:56,420 --> 00:20:59,990
ist, dass ein Browser hat eine Menge
viel besser die Augen, als ich.

462
00:20:59,990 --> 00:21:02,670
Und kann der Browser lesen
dass Durcheinander von einer Web-Seite,

463
00:21:02,670 --> 00:21:04,700
dass HTML-Mails, die wir gerade
sah, und es kann

464
00:21:04,700 --> 00:21:08,340
analysieren sie oder lesen und
zu analysieren und eine Neuformatierung

465
00:21:08,340 --> 00:21:09,910
in einem schönen menschenfreundliche Art und Weise.

466
00:21:09,910 --> 00:21:11,740
Also, was ich sehe jetzt
in diesem Bildschirm hier

467
00:21:11,740 --> 00:21:15,470
unter Elemente, die exakt gleichen Inhalt,
aber sie haben eingerückt alles,

468
00:21:15,470 --> 00:21:18,140
sie haben es koloriert, aber
es ist genau das gleiche Text

469
00:21:18,140 --> 00:21:19,620
dass ich vom Server heruntergeladen.

470
00:21:19,620 --> 00:21:23,630
>> Und was schön ist, ist jetzt kann ich sehen
im Körper, für instance-- Ankündigung,

471
00:21:23,630 --> 00:21:26,480
die Seite ist noch zusammengesetzt
nur einen Kopf und einen Körper,

472
00:21:26,480 --> 00:21:28,660
und ich kann hierarchisch hier tauchen.

473
00:21:28,660 --> 00:21:32,420
Beachten Sie, dass Google zu haben scheint
dieses und dieses zu divs--.

474
00:21:32,420 --> 00:21:33,310
Das kann ich erweitern.

475
00:21:33,310 --> 00:21:35,370
Es gibt eine ganze Reihe von anderen divs.

476
00:21:35,370 --> 00:21:36,900
So ist es ein wenig komplexer.

477
00:21:36,900 --> 00:21:37,400
Aber warte.

478
00:21:37,400 --> 00:21:40,970
Das scheint so viel mehr
lesbar, relativ, als dies.

479
00:21:40,970 --> 00:21:43,840
Warum ist Google peinlich
selbst nur durch das Senden

480
00:21:43,840 --> 00:21:50,400
Diese sehr große Verwirrung von Code von einigen
Art nur etwas zu implementieren

481
00:21:50,400 --> 00:21:53,640
das sieht auf den ersten Blick so einfach?

482
00:21:53,640 --> 00:21:55,270
Wie, warum sie nicht hinzufügen mehr Räume?

483
00:21:55,270 --> 00:21:56,811
Warum haben sie nicht getroffen Geben Sie wie ich es tat?

484
00:21:56,811 --> 00:21:59,110
Schauen Sie, wie gut ich war
auf einer Web-Seite zu schreiben.

485
00:21:59,110 --> 00:22:00,680
Ich traf so fleißig ein.

486
00:22:00,680 --> 00:22:03,760
Ich eingerückt so alles
so hübsch und lesbar ist.

487
00:22:03,760 --> 00:22:08,463
Warum üben Google nicht das gleiche?

488
00:22:08,463 --> 00:22:11,409
>> PUBLIKUM: [unverständlich]

489
00:22:11,409 --> 00:22:12,305

490
00:22:12,305 --> 00:22:13,180
DAVID J. MALAN: Gut.

491
00:22:13,180 --> 00:22:14,270
Sehr gerecht.

492
00:22:14,270 --> 00:22:16,650
Sie haben nicht einige
Person bei Google manuell

493
00:22:16,650 --> 00:22:18,160
die Homepage der Aktualisierung nicht mehr.

494
00:22:18,160 --> 00:22:20,010
Es ist nicht 1999 mehr.

495
00:22:20,010 --> 00:22:21,140
So haben sie Software.

496
00:22:21,140 --> 00:22:25,397
Sie haben andere Werkzeuge, die
dynamisch generieren sie sind HTML.

497
00:22:25,397 --> 00:22:27,480
Natürlich, das Code selbst
wurde von Menschen geschrieben,

498
00:22:27,480 --> 00:22:30,220
aber die Realität ist,
es ist ziemlich fair zu sagen,

499
00:22:30,220 --> 00:22:33,340
der Browser tut sicher nicht
egal, wie chaotisch der Code ist.

500
00:22:33,340 --> 00:22:35,940
Aber es gibt noch mehr
zwingenden technischen Grund

501
00:22:35,940 --> 00:22:42,580
dass Google vertreibt ihre HTML
Code in einer solchen schlampig, scheinbar

502
00:22:42,580 --> 00:22:48,350
überwältigende Art und Weise alles zusammen gepackt
mit sehr wenig sehr wenig way--

503
00:22:48,350 --> 00:22:51,274
in der Art und Weise der Formatierung wie ich es tat.

504
00:22:51,274 --> 00:22:52,570
>> PUBLIKUM: [unverständlich]

505
00:22:52,570 --> 00:22:53,528
>> DAVID J. MALAN: Schneller?

506
00:22:53,528 --> 00:22:54,040
Warum?

507
00:22:54,040 --> 00:22:55,680
Und was hast du gesagt, Lydia?

508
00:22:55,680 --> 00:22:56,240
Schneller?

509
00:22:56,240 --> 00:22:57,281
Warum schneller?

510
00:22:57,281 --> 00:22:58,156
PUBLIKUM: [unverständlich]

511
00:22:58,156 --> 00:23:00,522

512
00:23:00,522 --> 00:23:02,230
DAVID J. MALAN: Es gibt
kein Platz mehr zu lesen.

513
00:23:02,230 --> 00:23:02,730
Ja.

514
00:23:02,730 --> 00:23:04,560
Also denken Sie über das, was ein Raum ist.

515
00:23:04,560 --> 00:23:08,394
So ist jedes Zeichen auf der Tastatur nimmt
eine gewisse Menge an Platz darstellen,

516
00:23:08,394 --> 00:23:10,560
entweder physisch, wie es
nimmt so viel Platz,

517
00:23:10,560 --> 00:23:13,250
oder irgendwie unter die
Motorhaube, das erfordert Speicher.

518
00:23:13,250 --> 00:23:15,740
Und als ein aside-- und wir werden
reden mehr über diese tomorrow--

519
00:23:15,740 --> 00:23:19,930
jedes Zeichen auf der Tastatur
erfordert typischerweise 8 Bits oder ein Byte.

520
00:23:19,930 --> 00:23:23,360
So ein Muster von 8 Nullen oder
Einsen oder nur 1 Byte, wie wir

521
00:23:23,360 --> 00:23:24,720
Menschen würden sagen, typisch.

522
00:23:24,720 --> 00:23:27,690
Also das ist klein, aber
es ist immer noch nicht Null.

523
00:23:27,690 --> 00:23:29,940
Es ist immer noch eine gewisse Menge an Platz.

524
00:23:29,940 --> 00:23:36,082
Also, wenn ein Ingenieur oder Google Hits
die Leertaste nur einmal, und nehmen wir an

525
00:23:36,082 --> 00:23:38,540
Google-- es ist super-popular--
annehmen, dass eine Milliarde Menschen

526
00:23:38,540 --> 00:23:40,780
besuchen Sie die Homepage am Tag,
oder eine Anzahl von Leuten

527
00:23:40,780 --> 00:23:43,290
Besuchen Sie die Homepage ein
Milliarden mal am Tag,

528
00:23:43,290 --> 00:23:48,890
wie viele zusätzliche Bytes hat, dass
Software-Ingenieur kosten nur Google

529
00:23:48,890 --> 00:23:51,310
von einmal seine Leertaste schlagen?

530
00:23:51,310 --> 00:23:52,692
>> PUBLIKUM: [unverständlich]

531
00:23:52,692 --> 00:23:54,150
DAVID J. MALAN: Nicht ganz so schlimm.

532
00:23:54,150 --> 00:23:57,070
Nur ein Byte mal eine Milliarde.

533
00:23:57,070 --> 00:23:57,871
so a--

534
00:23:57,871 --> 00:23:59,120
PUBLIKUM: 8 Milliarden Gigabyte.

535
00:23:59,120 --> 00:24:00,370
DAVID J. MALAN: Nicht 8 Milliarden Euro.

536
00:24:00,370 --> 00:24:01,240
8 Milliarden Bytes.

537
00:24:01,240 --> 00:24:02,410
Aber 1 Gigabyte.

538
00:24:02,410 --> 00:24:04,080
1 Gigabyte würde die Maßeinheit sein.

539
00:24:04,080 --> 00:24:08,240
Wenn er oder sie tut zwei
Räume, 2 Gigabyte.

540
00:24:08,240 --> 00:24:09,030
Drei Gigabyte.

541
00:24:09,030 --> 00:24:09,530
Recht?

542
00:24:09,530 --> 00:24:11,860
Er skaliert teuer.

543
00:24:11,860 --> 00:24:16,150
Und so in Fällen wie Google,
die, gewährt, sind Extremfälle,

544
00:24:16,150 --> 00:24:21,450
es gibt noch andere Probleme, die nur entstehen
durch eine sehr vernünftige Entscheidungen zu treffen

545
00:24:21,450 --> 00:24:25,744
oder sehr einfache menschliche Maßnahmen ergreifen,
weil es diese vergrößerte Wirkung.

546
00:24:25,744 --> 00:24:27,660
So ist einer der Gründe
Das sieht so komprimiert

547
00:24:27,660 --> 00:24:30,660
genau wie Victoria said-- es war
einfach mal so durch Computer erzeugt.

548
00:24:30,660 --> 00:24:31,900
Also keine große Sache.

549
00:24:31,900 --> 00:24:33,309
Lassen Sie den Browser es herausfinden.

550
00:24:33,309 --> 00:24:35,350
Aber auch bewusst
nicht viel Platz haben,

551
00:24:35,350 --> 00:24:36,766
weil der Raum ist nicht erforderlich.

552
00:24:36,766 --> 00:24:38,250
Und der Raum tatsächlich kostet Geld.

553
00:24:38,250 --> 00:24:40,670
>> Entweder kostet Zeit,
weil gerade zu schieben

554
00:24:40,670 --> 00:24:44,670
dass viel mehr Daten aus
google.com Hauptquartier nur

555
00:24:44,670 --> 00:24:47,710
hat bekam eine gewisse Menge an zu nehmen
Zeit, auch wenn es Millisekunden ist

556
00:24:47,710 --> 00:24:51,190
oder Mikrosekunden, aber das summiert sich
über so viele Benutzer, oder wahrscheinlicher,

557
00:24:51,190 --> 00:24:52,270
es kostet wahrscheinlich Geld.

558
00:24:52,270 --> 00:24:54,690
Google verbindet wahrscheinlich
jemand anderes in der Welt, eine

559
00:24:54,690 --> 00:24:56,398
von denen Peering
Punkte, und wenn sie

560
00:24:56,398 --> 00:24:59,880
eine Art finanzielle Beziehung
wodurch ihre Daten kostet Geld,

561
00:24:59,880 --> 00:25:01,730
sie könnte genauso gut
minimieren, wie viele Daten

562
00:25:01,730 --> 00:25:04,530
sie spuckt auf
ihre Internet-Verbindung.

563
00:25:04,530 --> 00:25:07,630
>> So ist die lustige Sache, aber letztlich,
oder vielleicht die beruhigende Sache,

564
00:25:07,630 --> 00:25:11,030
obwohl dies, dass selbst sieht schrecklich
am Ende des Tages überwältigend,

565
00:25:11,030 --> 00:25:16,750
es ist immer noch genau die gleichen Grundsätze wie
Diese sehr einfache Seite hier eines HTML

566
00:25:16,750 --> 00:25:17,390
Seite.

567
00:25:17,390 --> 00:25:20,610
Also einfach zusammenfassen und so, dass Sie
haben eine kanonische Version, wenn Sie nicht waren

568
00:25:20,610 --> 00:25:25,900
hier folgende entlang nach Wahl, hier
könnte die einfachste von Webseiten,

569
00:25:25,900 --> 00:25:28,240
so etwas mit vielleicht später spielen.

570
00:25:28,240 --> 00:25:30,790
>> Nun, lassen Sie uns eine Einführung
jetzt paar andere Ideen.

571
00:25:30,790 --> 00:25:33,420
Wir freuen uns über die Einführung
einen so genannten Stil-Tag.

572
00:25:33,420 --> 00:25:38,110
Wir können diese Seite stilisieren
in interessanter Weise.

573
00:25:38,110 --> 00:25:40,860
Während also HTML E-Mail
dreht sich alles um die Auszeichnung von

574
00:25:40,860 --> 00:25:44,470
die Daten, die Angabe Art zu einem
Browser, wie die Daten zu strukturieren,

575
00:25:44,470 --> 00:25:48,110
wo man es ausdrückte, CSS, oder
Cascading Style Sheets,

576
00:25:48,110 --> 00:25:52,640
ist eine zweite Sprache, die
allgemein wird mit HTML vermischte

577
00:25:52,640 --> 00:25:55,670
wie wir see-- aber wir können reinigen
dass in einem moment-- up, das dauert

578
00:25:55,670 --> 00:25:59,850
es die letzte Meile, und es stilisiert es.

579
00:25:59,850 --> 00:26:02,460
Es erhält die Farben genau richtig,
die Schriftgrößen genau richtig,

580
00:26:02,460 --> 00:26:03,860
die Positionierung genau richtig.

581
00:26:03,860 --> 00:26:06,510
Es geht nur um die Ästhetik
oder Formatierung, nicht über

582
00:26:06,510 --> 00:26:08,330
die Fundamentaldaten selbst.

583
00:26:08,330 --> 00:26:11,390
Und der einfachste Weg, um zu zeigen,
dies ist vielleicht Beispiel vorangehen.

584
00:26:11,390 --> 00:26:15,320
Also werde ich gehen über
auf meine einfache Textdatei.

585
00:26:15,320 --> 00:26:17,970
Und in nur einem Augenblick, ich werde
gehen uns durch den Prozess

586
00:26:17,970 --> 00:26:19,360
dies zu tun, uns selbst.

587
00:26:19,360 --> 00:26:23,310
>> Ich werde meine Datei zu gehen zurück
hier und laden Sie die Seite nur

588
00:26:23,310 --> 00:26:25,800
um zu bestätigen, wie es aussieht.

589
00:26:25,800 --> 00:26:27,190
Das ist, wo wir jetzt sind.

590
00:26:27,190 --> 00:26:31,170
Ich fühle mich wie Kinder würden genießen
mit etwas Farbe auf dieser Web-Seite.

591
00:26:31,170 --> 00:26:34,480
Also werde ich hier zu gehen
in den Kopf der Seite.

592
00:26:34,480 --> 00:26:38,130
Und ich werde Stil / Stil zu tun.

593
00:26:38,130 --> 00:26:44,060
Und dann innerhalb dieser, ich werde
den Körper meines page-- zu sagen,

594
00:26:44,060 --> 00:26:46,870
und diese Formatierung ist, bei
den ersten Blick vielleicht ein wenig

595
00:26:46,870 --> 00:26:49,400
seltsam, aber konventionell.

596
00:26:49,400 --> 00:26:55,010
Ich werde, dass der Hintergrund zu sagen
Farbe dieser Seite sollte grün sein.

597
00:26:55,010 --> 00:26:57,960
Und das ist leider
Art nicht das beste Design.

598
00:26:57,960 --> 00:27:00,710
Beachten Sie, dass die zuvor
in der Welt der HTML,

599
00:27:00,710 --> 00:27:03,190
Ich sagte, dass Attribute
sind diese Paare Schlüssel-Wert.

600
00:27:03,190 --> 00:27:05,760
Etwas gleich Zitat
unquote "etwas."

601
00:27:05,760 --> 00:27:08,810
In der Welt der CSS, das war
entworfen von einigen unterschiedlichen Leuten,

602
00:27:08,810 --> 00:27:11,020
sie entschieden, dass in ihrem
Welt, Schlüssel-Wert-Paare

603
00:27:11,020 --> 00:27:13,920
würde Wort Kolon etwas sein.

604
00:27:13,920 --> 00:27:15,220
So ist es die gleiche Idee, aber.

605
00:27:15,220 --> 00:27:18,620
Es assoziieren Wert
mit einigen Schlüssel, irgendwie

606
00:27:18,620 --> 00:27:20,330
beeinflusst das Verhalten dieser Seite.

607
00:27:20,330 --> 00:27:21,901
>> Und Sie können sich wahrscheinlich vorstellen.

608
00:27:21,901 --> 00:27:24,150
Was ist das wohl gehen
Wenn Sie noch zu tun, noch nie

609
00:27:24,150 --> 00:27:27,867
gesehen vor HTML oder CSS?

610
00:27:27,867 --> 00:27:29,450
PUBLIKUM: Ändern Sie die Hintergrundfarbe.

611
00:27:29,450 --> 00:27:30,560
DAVID J. MALAN: Ja,
Ändern Sie die Hintergrundfarbe.

612
00:27:30,560 --> 00:27:33,280
Und insbesondere das
Hintergrundfarbe des Körpers.

613
00:27:33,280 --> 00:27:36,290
Aber soweit die
Körper für jetzt ist das Web

614
00:27:36,290 --> 00:27:38,870
page-- es ist das einzige, was
unter der Titelleiste really--

615
00:27:38,870 --> 00:27:40,870
es wird wahrscheinlich
beeinflussen die gleiche Sache.

616
00:27:40,870 --> 00:27:41,430
Also mal sehen.

617
00:27:41,430 --> 00:27:42,490
Lassen Sie uns das sparen.

618
00:27:42,490 --> 00:27:44,310
Gehen Sie hier und neu laden.

619
00:27:44,310 --> 00:27:46,140
Es ist ziemlich scheußlich.

620
00:27:46,140 --> 00:27:48,070
Und was geht ab
hier ist ein Nebeneffekt.

621
00:27:48,070 --> 00:27:49,850
Ich wählte gerade dieses Bild zufällig.

622
00:27:49,850 --> 00:27:53,305
Warum ist die grüne nicht
dringt hinter Mickey?

623
00:27:53,305 --> 00:27:54,180
PUBLIKUM: [unverständlich]

624
00:27:54,180 --> 00:27:56,880

625
00:27:56,880 --> 00:27:57,880
DAVID J. MALAN: Genau.

626
00:27:57,880 --> 00:28:01,750
Es stellt sich heraus, dass die Bilder, hübsch
viel alle Bilder, die wir verwenden könnten,

627
00:28:01,750 --> 00:28:03,670
sind alle rectangles-- von Rechtecken.

628
00:28:03,670 --> 00:28:07,710
Auch wenn Mickey hat einige Kurven
zu sich selbst und hat einen Hintergrund,

629
00:28:07,710 --> 00:28:09,330
dass Hintergrund hat etwas zu sein.

630
00:28:09,330 --> 00:28:10,280
Es muss weiß sein.

631
00:28:10,280 --> 00:28:11,910
Es hat sonst schwarz oder etwas zu sein.

632
00:28:11,910 --> 00:28:13,650
Es kann transparent sein.

633
00:28:13,650 --> 00:28:16,100
Und in der Tat, konnte ich
öffnen Mickey Mouse hier

634
00:28:16,100 --> 00:28:18,590
in einem Programm namens Photoshop
oder etwas ähnliches

635
00:28:18,590 --> 00:28:21,176
und ändern Sie all das weiß
Hintergrund transparent,

636
00:28:21,176 --> 00:28:22,550
so würde die grüne durchscheinen.

637
00:28:22,550 --> 00:28:25,980
Aber das ist etwas, was ich brauchen würde,
von mir selbst oder Grafiker zu fragen

638
00:28:25,980 --> 00:28:28,130
oder ein Designer an meinem
Unternehmen, zum Beispiel,

639
00:28:28,130 --> 00:28:31,490
zu tun, vor allem, da ich gerade
diese eine aus dem Internet ausgeliehen.

640
00:28:31,490 --> 00:28:33,030
Aber das ist, warum dies geschieht.

641
00:28:33,030 --> 00:28:34,980
>> Also, was sonst könnten wir tun wollen?

642
00:28:34,980 --> 00:28:41,040
Nun, wir könnten wir sagen,
wirklich hoffen, dass Sie Ihren Aufenthalt genießen.

643
00:28:41,040 --> 00:28:44,150
Und zur Betonung, ich will
dies stark zu machen,

644
00:28:44,150 --> 00:28:48,310
und so werde ich sagen offen starke und
schließen stark und dann neu zu laden.

645
00:28:48,310 --> 00:28:50,320
Und es ist ein wenig schwer
am Projektor, um zu sehen

646
00:28:50,320 --> 00:28:53,250
aber vielleicht jetzt wirklich
springt bei Ihnen ein bisschen mehr aus.

647
00:28:53,250 --> 00:28:56,180
So können Sie Kursivschrift in diesem Add
So fett Verkleidung auf diese Weise.

648
00:28:56,180 --> 00:28:57,500
Wir konnten die Farben ändern.

649
00:28:57,500 --> 00:29:01,610
In der Tat, nur zum Spaß, ich bin
gehen voran gehen und tun dies.

650
00:29:01,610 --> 00:29:05,120
Ich mag es nicht wirklich, wie mein
Absätze sind so nahe zusammen,

651
00:29:05,120 --> 00:29:06,870
so könnte ich so etwas tun.

652
00:29:06,870 --> 00:29:13,310
Ich werde den Browser zu sagen,
ändern sich jedes Absatz-Tag zu haben,

653
00:29:13,310 --> 00:29:16,952
Lassen Sie uns sagen-- tatsächlich, wissen Sie was,
Lassen Sie uns ausrichten text-align, Zentrum.

654
00:29:16,952 --> 00:29:19,410
Und wieder, ich weiß, das nur
weil jemand lehrte es mir

655
00:29:19,410 --> 00:29:21,118
oder ich sah es in
ein Online-Referenz.

656
00:29:21,118 --> 00:29:22,450
Also lassen Sie mich dies zu speichern.

657
00:29:22,450 --> 00:29:25,070
Und, ach, jetzt habe ich
zentriert dort das Bild.

658
00:29:25,070 --> 00:29:28,490
Und tatsächlich, weißt du was, wenn
Ich bewege mein Bild in einem Absatz

659
00:29:28,490 --> 00:29:34,510
tag-- so ein dritter Absatz,
obwohl es nicht Text.

660
00:29:34,510 --> 00:29:36,917
Lassen Sie uns das Speichern und neu laden.

661
00:29:36,917 --> 00:29:40,000
Nun ist die Seite beginnt Art zu suchen
von-- ich meine, es ist immer noch ziemlich hässlich,

662
00:29:40,000 --> 00:29:43,180
aber zumindest sieht es aus wie ich verbrachte
2 Minuten anstelle von 1 Minute

663
00:29:43,180 --> 00:29:43,950
Ich mach das.

664
00:29:43,950 --> 00:29:47,200
>> Und so, inkrementell, können wir machen
diese ästhetischen jetzt auf die Seite?

665
00:29:47,200 --> 00:29:50,860
Ich habe nicht wirklich die Daten in das geändert
anderen Seite als das Wort wirklich hinzufügen.

666
00:29:50,860 --> 00:29:52,650
Ich habe Metadaten hinzugefügt, wenn man so will.

667
00:29:52,650 --> 00:29:54,830
Hey, Browser, machen die
Wort "wirklich" fett.

668
00:29:54,830 --> 00:29:56,940
Aber die Daten sind nicht stark.

669
00:29:56,940 --> 00:29:57,830
Das ist Metadaten.

670
00:29:57,830 --> 00:29:59,410
Die Daten sind "wirklich".

671
00:29:59,410 --> 00:30:02,200
So haben wir noch einige
die gleichen Konzepte wie zuvor.

672
00:30:02,200 --> 00:30:05,990
Nun, natürlich ist dies nicht auf dem Netz ist,
also werde ich hier einen letzten Schritt zu tun.

673
00:30:05,990 --> 00:30:10,300
>> Ich werde gehen zu hello.html
und nur markieren und diese kopieren.

674
00:30:10,300 --> 00:30:12,285
Und jetzt werde ich
gehen in Cloud9, die

675
00:30:12,285 --> 00:30:13,910
Ich werde Sie zu Fuß in nur einem Augenblick durch.

676
00:30:13,910 --> 00:30:17,080
Und Chancen sind Sie werden bald sein, wenn
nicht schon, wie dieses an einem Bildschirm.

677
00:30:17,080 --> 00:30:21,080
Und lassen Sie mich nur eine schnelle geben
Tour von dem, was Cloud9 tatsächlich ist.

678
00:30:21,080 --> 00:30:26,590
So Wolke wieder 9
Diese Cloud-basierten Dienst

679
00:30:26,590 --> 00:30:30,580
das gibt Ihnen und mir die Illusion
der mit unserer eigenen virtuellen Maschine

680
00:30:30,580 --> 00:30:33,090
in der Wolke, technisch
ein Container in der Wolke,

681
00:30:33,090 --> 00:30:35,160
dass wir voll
Administratorrechte.

682
00:30:35,160 --> 00:30:37,130
Also in der Theorie, niemand
in der Welt sonst hat

683
00:30:37,130 --> 00:30:39,152
Zugriff auf den Bildschirm Ich bin
Blick in die gerade jetzt,

684
00:30:39,152 --> 00:30:40,860
außer vielleicht die Menschen
die die Website laufen,

685
00:30:40,860 --> 00:30:43,470
weil sie technisch haben
physischen Zugriff und so fort.

686
00:30:43,470 --> 00:30:44,740
>> Also, was sehen wir in diesem Umfeld?

687
00:30:44,740 --> 00:30:46,230
Ich gehe zu verkleinern,
denn es ist ein wenig klein.

688
00:30:46,230 --> 00:30:48,104
Und lassen Sie mich darauf hinweisen über
hier nur für einen Moment.

689
00:30:48,104 --> 00:30:53,210
Auf der linken Seite meiner und Ihrer
Bildschirm, gibt es eine auf der linken Dateibrowser.

690
00:30:53,210 --> 00:30:55,362
Also im Geiste
Mac OS und Windows.

691
00:30:55,362 --> 00:30:57,070
Dies sind alle der
Dateien auf meinem Konto.

692
00:30:57,070 --> 00:30:59,250
Und standardmäßig, wenn Ihr
Konto ist wie meine,

693
00:30:59,250 --> 00:31:05,090
Sie werden sehen, oder bald sehen
helloworld.html und readme.md.

694
00:31:05,090 --> 00:31:07,950
Über hier auf der rechten Seite, das ist
wo meine Textdateien gehen zu gehen.

695
00:31:07,950 --> 00:31:11,620
Wenn Sie jemals verwendet Microsoft
Word oder Notepad oder TextEdit,

696
00:31:11,620 --> 00:31:14,100
dies Wort meine Bearbeitung
von Dateien gehen zu gehen.

697
00:31:14,100 --> 00:31:16,540
Und dann mit den exotischsten
Merkmal dieser Umgebung

698
00:31:16,540 --> 00:31:20,100
dass wir müssen nicht wirklich verwenden ist
hier unten ein Terminal-Fenster genannt.

699
00:31:20,100 --> 00:31:23,390
Wenn Sie DOS benutzt habe aus
gestern, das ist das Linux

700
00:31:23,390 --> 00:31:25,450
oder die Linux-Äquivalent von DOS.

701
00:31:25,450 --> 00:31:28,190
Es ist ein textbasiertes interface--
keine Mausklicks, kein Schleppen.

702
00:31:28,190 --> 00:31:30,770
Alles, was Sie tun können, ist der Typ
Befehle, aber diese Befehle

703
00:31:30,770 --> 00:31:34,400
erstellen können Dateien, Dateien verschieben, öffnen
Verzeichnisse, in der Nähe Verzeichnisse,

704
00:31:34,400 --> 00:31:35,740
Sie eine beliebige Anzahl von Dingen.

705
00:31:35,740 --> 00:31:38,060
Aber jetzt werden wir nur
verbringen unsere Zeit hier oben.

706
00:31:38,060 --> 00:31:39,050
>> Und so wollen wir dies tun.

707
00:31:39,050 --> 00:31:41,008
Wenn Sie in diese sind
Umwelt, von denen Sie

708
00:31:41,008 --> 00:31:45,900
sein, wenn Sie einen Arbeitsbereich erstellt
gehen bereits voran und gerade nach oben

709
00:31:45,900 --> 00:31:48,690
In Datei, einen Moment Neu für.

710
00:31:48,690 --> 00:31:51,740
Und das wird Ihnen ein neues
Tab hier in der Mitte.

711
00:31:51,740 --> 00:31:54,250
Und ich just-- und lasst uns
gehen Sie vor und tun dies.

712
00:31:54,250 --> 00:31:59,910
Fahren wir fort und jetzt Datei, Speichern
und gehen Sie vor und nennen es hello.html,

713
00:31:59,910 --> 00:32:02,740
nicht zu verwechseln
helloworld.html, die

714
00:32:02,740 --> 00:32:06,910
kam mit dem neuen kostenlosen Account,
Das ist nur eine Beispieldatei.

715
00:32:06,910 --> 00:32:11,020
Sie werden sehen, es plötzlich erscheinen,
wahrscheinlich auf der linken Seite,

716
00:32:11,020 --> 00:32:12,810
und die Registerkarte wird immer noch geöffnet sein.

717
00:32:12,810 --> 00:32:21,300
Und lassen Sie mich Ihnen nun ermutigen, neu zu erstellen
Diese Datei oder einige Varianten davon.

718
00:32:21,300 --> 00:32:24,607
Und wenn Sie ganz sehen es nicht auf die
Bildschirm, ist dies mit den Schlitten identisch

719
00:32:24,607 --> 00:32:26,190
dass Sie wahrscheinlich in einem anderen Tab haben.

720
00:32:26,190 --> 00:32:29,296
>> Also kurz gesagt, machen Sie Ihre erste Web-Seite,
speichern und dann in nur einem Augenblick,

721
00:32:29,296 --> 00:32:31,170
Ich werde Ihnen zeigen, wie Sie
Dies kann tatsächlich sehen.

722
00:32:31,170 --> 00:32:32,970
Aber ändern zumindest eine Sache.

723
00:32:32,970 --> 00:32:35,400
Ändern Sie Hello World an
etwas von Ihrer eigenen Wahl,

724
00:32:35,400 --> 00:32:39,821
so dass Sie davon überzeugt sind, dass es Ihr
Datei und nicht die, die ich gerade erstellt haben.

725
00:32:39,821 --> 00:32:40,320
Gut.

726
00:32:40,320 --> 00:32:43,804
Und wenn Sie ready-- kein
rush-- wenn Sie bereit sind,

727
00:32:43,804 --> 00:32:46,220
gehen Sie vor und speichern Sie die Datei
Sobald Sie diese Änderungen vorgenommen haben.

728
00:32:46,220 --> 00:32:49,540
Und wenn Sie auf die Schaltfläche
Run-Taste nach oben top, diese

729
00:32:49,540 --> 00:32:53,610
sollte eine neue Registerkarte öffnen, die sagen wird
Sie, was URL Sie Ihre Datei zu besuchen,

730
00:32:53,610 --> 00:32:56,380
aber es könnte einen Moment dauern, bis
Zitat des Zitats "starten Apache", die

731
00:32:56,380 --> 00:32:58,820
ist der Name des Web-Servers.

732
00:32:58,820 --> 00:33:02,430
Seien Sie also vorsichtig sein, genau zu tun
was letztlich in der Datei.

733
00:33:02,430 --> 00:33:04,610
So jetzt, werde ich weiter vergrößern.

734
00:33:04,610 --> 00:33:07,780
Wenn ich der Eingabe beginnen
Open-Klammer HTML, Ankündigung

735
00:33:07,780 --> 00:33:09,650
es veranlasst mich, meine Gedanken zu beenden.

736
00:33:09,650 --> 00:33:13,750
Und wenn ich meine Gedanken beendet, es
automatisch gibt mir die schließenden Tag.

737
00:33:13,750 --> 00:33:17,190
Aber die Erwartung ist, dann werde ich getroffen
Eingeben und dann nach innen dort zu bewegen

738
00:33:17,190 --> 00:33:21,180
und sie den Kopf nach innen und
dann mache ich Körper von innen.

739
00:33:21,180 --> 00:33:24,430
Und es ist ein wenig auf den ersten seltsam,
weil es Arbeit für Sie tun,

740
00:33:24,430 --> 00:33:27,110
aber erkennen, dass letztlich
es spart Ihnen Tastatureingaben.

741
00:33:27,110 --> 00:33:30,500
Und in der Tat ein sehr allgemeines Merkmal
Programmierumgebungen in diesen Tagen

742
00:33:30,500 --> 00:33:33,260
sowohl für die Web-Entwicklung wie
dies und eigentliche Programmierung,

743
00:33:33,260 --> 00:33:36,960
was wir morgen reden,
ist diese automatische Vervollständigung Funktionen,

744
00:33:36,960 --> 00:33:39,710
Dinge, die nur erlauben
Programmierer oder Designer

745
00:33:39,710 --> 00:33:42,010
weniger Tastenanschläge eingeben zu
das Gleiche erreichen.

746
00:33:42,010 --> 00:33:43,176
Manchmal ist es gut, wenn.

747
00:33:43,176 --> 00:33:44,560
Manchmal ist es einfach ärgerlich.

748
00:33:44,560 --> 00:33:49,290

749
00:33:49,290 --> 00:33:54,010
Und wieder einmal transkribiert Sie haben
der Schieber oder eine Variante davon,

750
00:33:54,010 --> 00:33:57,360
Sie können auf die Schaltfläche Ausführen bis oben klicken.

751
00:33:57,360 --> 00:33:59,910
Und dann in den Boden
Fenster, werden Sie informiert

752
00:33:59,910 --> 00:34:04,290
zu welchem ​​URL können Sie Ihre Webseite besuchen.

753
00:34:04,290 --> 00:34:08,790
Mine, zum Beispiel, ist bei
business-daharvard.c9users.io

754
00:34:08,790 --> 00:34:11,480
und so weiter.

755
00:34:11,480 --> 00:34:14,580
Also gut, ja, lassen Sie mich- Fragen?

756
00:34:14,580 --> 00:34:19,460
Alle anderen Fragen über nur immer
dies funktioniert, bevor wir Funktionen hinzufügen?

757
00:34:19,460 --> 00:34:21,692
Und lassen Sie mich schlagen, nur
zu bekommen Leute comfortable--

758
00:34:21,692 --> 00:34:24,400
denn es ist eine Sache, nur um
Copy-Paste blind, was ich getan habe.

759
00:34:24,400 --> 00:34:27,177
Aber nur so, dass die Leute ringen
mit mindestens einer To-do,

760
00:34:27,177 --> 00:34:28,510
Ich werde etwas Musik zu machen.

761
00:34:28,510 --> 00:34:32,630
Ich werde eine Liste vorzuschlagen
Dinge, die Sie möglicherweise hinzufügen können.

762
00:34:32,630 --> 00:34:34,086
Und Sie können sicher Google verwenden.

763
00:34:34,086 --> 00:34:36,210
Und warum tun wir nicht einfach
schlagen vor, dass Sie versuchen, zu lösen

764
00:34:36,210 --> 00:34:38,710
mindestens ein bestimmtes Problem.

765
00:34:38,710 --> 00:34:45,090
Also in Bezug auf die Tags,
Lassen Sie mich dies hier wiederverwenden.

766
00:34:45,090 --> 00:34:48,280
>> Eigentlich möchte ich setzen
es in einer Textform.

767
00:34:48,280 --> 00:35:02,380
Lassen Sie uns sagen, dass unter den Tags könnten wir
Verwenden Sie hier sind einige Tags hier.

768
00:35:02,380 --> 00:35:06,090
Wir haben den Absatz-Tag gesehen.

769
00:35:06,090 --> 00:35:07,850
Jetzt geht es für die automatische Vervollständigung.

770
00:35:07,850 --> 00:35:12,220
Absatz-Tag, das Anker-Tag.

771
00:35:12,220 --> 00:35:15,250
Angenommen, Sie möchten
machen etwas größer,

772
00:35:15,250 --> 00:35:19,480
so dass Sie vielleicht like--
das span-Tag kann helfen.

773
00:35:19,480 --> 00:35:23,010
Nun, Sie könnten etwas Hilfe benötigen
denn das in nur einem Augenblick.

774
00:35:23,010 --> 00:35:24,830
Wir haben div gesehen.

775
00:35:24,830 --> 00:35:26,170
Sie werden sehen, es gibt Tabelle.

776
00:35:26,170 --> 00:35:27,928
Es ist etwas genannt tr, td.

777
00:35:27,928 --> 00:35:30,736

778
00:35:30,736 --> 00:35:32,860
Th, td.

779
00:35:32,860 --> 00:35:34,770
in einem Moment darauf zurückkommen.

780
00:35:34,770 --> 00:35:36,590
Was sonst noch nützlich sein?

781
00:35:36,590 --> 00:35:38,310
Es ist stark.

782
00:35:38,310 --> 00:35:43,640
Es gibt Betonung oder vielmehr em.

783
00:35:43,640 --> 00:35:50,110
There's-- was sonst
könnten Sie hier Lust?

784
00:35:50,110 --> 00:35:51,930
Nun, wir werden nehmen ein
schau dir das an zusammen.

785
00:35:51,930 --> 00:35:53,230
Form, die wir gesehen haben.

786
00:35:53,230 --> 00:35:54,130
Es gibt Form.

787
00:35:54,130 --> 00:35:56,500
Es gibt Eingang und ein paar andere.

788
00:35:56,500 --> 00:35:58,924

789
00:35:58,924 --> 00:36:00,090
In Ordnung, also lasst uns dies tun.

790
00:36:00,090 --> 00:36:02,330
So beantworten Sie einen Victoria
Frage, lassen Sie mich zunächst

791
00:36:02,330 --> 00:36:05,020
nur sicherstellen, dass jeder
der Lage, ihre hallo zum Laufen zu bringen.

792
00:36:05,020 --> 00:36:06,900
Dann lassen Sie mich
ein paar andere Ideen.

793
00:36:06,900 --> 00:36:09,209
Dann lassen wir die Leute lösen
ein Problem auf eigene Faust.

794
00:36:09,209 --> 00:36:11,500
Dann werden wir tatsächlich zurückkommen
dieser Begriff einer Form,

795
00:36:11,500 --> 00:36:14,950
und wir werden tatsächlich neu implementieren
zusammen die Front-End-Schnittstelle,

796
00:36:14,950 --> 00:36:16,450
sozusagen für Google selbst.

797
00:36:16,450 --> 00:36:19,700
Wir werden Google als Backend verwenden und lassen
sie tun, die harte Arbeit, die Suche,

798
00:36:19,700 --> 00:36:22,760
aber wir werden das vordere Ende neu
von Google und das Suchformular

799
00:36:22,760 --> 00:36:24,520
dass sie auf ihre eigene Homepage.

800
00:36:24,520 --> 00:36:27,050
Und so kommen wir zurück zu
diese Tags in nur einem Augenblick.

801
00:36:27,050 --> 00:36:30,270
>> So war das, was ich
nur einen Augenblick vor vorgeschlagen.

802
00:36:30,270 --> 00:36:33,940
Wir können die Stilisierung zu einem hinzufügen
Seite innerhalb dieses Stils Tag,

803
00:36:33,940 --> 00:36:36,950
und wir können den Hintergrund stilisieren
Farbe, die Textausrichtung,

804
00:36:36,950 --> 00:36:39,000
ob es Mitte oder links oder rechts.

805
00:36:39,000 --> 00:36:41,630
Aber sehr schnell würden Sie
finden oder ein Web-Designer

806
00:36:41,630 --> 00:36:44,060
würden feststellen, dass diese
wird ein wenig sperrig,

807
00:36:44,060 --> 00:36:48,330
weil du tust, was
genannt Mischgehalt

808
00:36:48,330 --> 00:36:50,120
mit Präsentation derselben.

809
00:36:50,120 --> 00:36:53,756
Sie mischen Ihre Daten
und die Ästhetik davon.

810
00:36:53,756 --> 00:36:56,380
Und in der Tat, wenn man bedenkt,
was los ist über Zeit-- passieren

811
00:36:56,380 --> 00:36:58,350
Dies ist eine sehr kleine
Web-Seite, natürlich.

812
00:36:58,350 --> 00:37:01,590
Aber wenn ich fügen Sie Inhalt dieser Seite
und ich füge hinzu Stil auf dieser Seite,

813
00:37:01,590 --> 00:37:04,650
die Seite sehr schnell bekommt
länger und länger.

814
00:37:04,650 --> 00:37:07,510
Und angenommen, dass ich will
eine zweite Web-Seite,

815
00:37:07,510 --> 00:37:09,010
teilt einige dieser Attribute.

816
00:37:09,010 --> 00:37:12,350
Angenommen, meine zweite Web-Seite für meine
site-- auch, ich will alles Zentrum,

817
00:37:12,350 --> 00:37:14,960
und ich möchte auch alles
mit einem grünen Hintergrund.

818
00:37:14,960 --> 00:37:17,940
Ich werde ziemlich viel zu müssen
Kopieren und einige dieser Zeilen einfügen

819
00:37:17,940 --> 00:37:20,730
in diese zweite Datei, die sich sehr wohlfühlt.

820
00:37:20,730 --> 00:37:22,030
Es wird das Problem lösen.

821
00:37:22,030 --> 00:37:26,060
>> Aber was, wenn ich will eine dritte Seite
oder ein 30-Seite oder eine 40-Seite?

822
00:37:26,060 --> 00:37:28,730
Jetzt werde ich zu kopieren und
Einfügen viel doppelten Code

823
00:37:28,730 --> 00:37:30,430
in mehreren Dateien.

824
00:37:30,430 --> 00:37:32,600
Und so nehme an, dass
Ich entscheide, oder ich gesagt,

825
00:37:32,600 --> 00:37:34,780
Hey, wir sind nicht mit ein
grünem Hintergrund mehr.

826
00:37:34,780 --> 00:37:36,380
Wir gehen mit Orange zu starten.

827
00:37:36,380 --> 00:37:38,690
Was müssen Sie ändern?

828
00:37:38,690 --> 00:37:42,900
Nun, müssen Sie diesen Stil ändern
von grün auf orange, in wie vielen Orten?

829
00:37:42,900 --> 00:37:44,920
Wie 30 oder 40 Plätzen.

830
00:37:44,920 --> 00:37:45,900
Es ist mühsam.

831
00:37:45,900 --> 00:37:47,039
Es ist anfällig für Fehler.

832
00:37:47,039 --> 00:37:49,580
Es gibt eine Reihe von Gründen,
wo man möchte nicht induzieren

833
00:37:49,580 --> 00:37:51,840
diese Art von Schmerz für sich.

834
00:37:51,840 --> 00:37:54,760
Und so wäre es nicht schön,
wenn wir könnten das, was ich gerade

835
00:37:54,760 --> 00:37:58,240
zwischen diesen beiden gelben setzen
Tags, diese Stil-Tags,

836
00:37:58,240 --> 00:38:04,050
Faktor es aus und legte alle meine
Stilisierung in einer zentralen Datei

837
00:38:04,050 --> 00:38:08,470
dass alle 30 oder 40 meiner anderen Dateien
leihen aus oder irgendwie zu verweisen,

838
00:38:08,470 --> 00:38:11,640
nicht anders als die Vernetzung
Diagramme taten wir vor?

839
00:38:11,640 --> 00:38:15,030
>> Also, wenn ich hier gehen, ich bin
werde tatsächlich vorschlagen

840
00:38:15,030 --> 00:38:17,880
dass wir ersetzen die
Stil-Tag mit etwas

841
00:38:17,880 --> 00:38:21,620
der Link-Tag, genannt die
schrecklich ist, schrecklich genannt,

842
00:38:21,620 --> 00:38:24,370
weil Sie verwenden die nicht
Link-Tag zu schaffen, was

843
00:38:24,370 --> 00:38:26,380
wir Menschen wissen, als Link in einer Webseite.

844
00:38:26,380 --> 00:38:29,750
Dafür verwenden Sie, welche Tag?

845
00:38:29,750 --> 00:38:31,464
Wie Sie einen Link auf einer Webseite erstellen?

846
00:38:31,464 --> 00:38:32,130
PUBLIKUM: Die a.

847
00:38:32,130 --> 00:38:34,870
DAVID J. MALAN: Der eine oder Anker
Tag, die vor zu Disney ging.

848
00:38:34,870 --> 00:38:39,090
Der Link-Tag hier zu sagen hat
this-- Link zu einer Datei mit dem Namen

849
00:38:39,090 --> 00:38:44,350
styles.css, die Beziehung zu dem
sein wird, dass es mein Sheet ist.

850
00:38:44,350 --> 00:38:48,290
So ist dies eine der S ist in
CSS-- Cascading Style Sheets.

851
00:38:48,290 --> 00:38:50,490
Stil sheet-- zwei der S ist in CSS.

852
00:38:50,490 --> 00:38:52,550
Cascading Stylesheet.

853
00:38:52,550 --> 00:38:58,640
Dies bedeutet nur, hey, Browser, gehen
finden styles.css auf dem lokalen Server

854
00:38:58,640 --> 00:39:01,870
und verwenden Sie es als Sheet
das heißt, innerhalb der Datei

855
00:39:01,870 --> 00:39:05,310
wird alle die sein,
Stilisierungen, die wir gerade gemacht haben.

856
00:39:05,310 --> 00:39:07,396
Und so, was diese Datei
könnte dies wie sein sollte, gehen.

857
00:39:07,396 --> 00:39:10,020
Und ich werde einfach tun dies ist eine schnelle
Beispiel weil wir nicht brauchen

858
00:39:10,020 --> 00:39:12,000
hier zu viel in das Unkraut zu bekommen.

859
00:39:12,000 --> 00:39:17,840
Aber wenn ich das zu kopieren, was ich vorschlagen
ist, dass ein Programmierer eine neue Datei erstellen,

860
00:39:17,840 --> 00:39:24,450
Fügen Sie in diesen lines--
whoops-- in diesen Zeilen einfügen,

861
00:39:24,450 --> 00:39:32,270
speichern Sie es als styles.css, und dann, in
die andere Datei, löschen Sie alle, dass

862
00:39:32,270 --> 00:39:35,450
und ersetzen Sie es stattdessen
mit diesem Link-Tag.

863
00:39:35,450 --> 00:39:43,090
Also, wenn ich link href = "styles.css",
die Beziehung ist "stylesheet" sein

864
00:39:43,090 --> 00:39:44,170
close-Tag.

865
00:39:44,170 --> 00:39:45,250
Speichern Sie es.

866
00:39:45,250 --> 00:39:47,000
Gehen Sie zurück zu meinem Hello World.

867
00:39:47,000 --> 00:39:48,690
Neu laden.

868
00:39:48,690 --> 00:39:51,290
>> Wörtlich ist nichts passiert ist.

869
00:39:51,290 --> 00:39:54,710
Das ist eine gute Sache, weil es
bedeutet es eigentlich alle Arbeits ist.

870
00:39:54,710 --> 00:39:58,860
Um so viel beweisen, nehme ich eine machen
Tippfehler, und ich nenne das "Styles.css"

871
00:39:58,860 --> 00:40:03,080
mit einem Kapital S, das ist
falsch, und dann neu zu laden.

872
00:40:03,080 --> 00:40:05,470
Jetzt können Sie es sehen einfach nicht funktioniert.

873
00:40:05,470 --> 00:40:06,362
Jetzt, warum?

874
00:40:06,362 --> 00:40:08,070
Nun, lassen Sie uns ein verwenden
Technik von früher.

875
00:40:08,070 --> 00:40:10,153
Lassen Sie mich gehen Sie vor und, in
mein Browser, in Chrome, ich bin

876
00:40:10,153 --> 00:40:12,900
gehen zu eröffnen, dass besondere
Registerkarte Netzwerk nach wie vor,

877
00:40:12,900 --> 00:40:15,560
und lassen Sie mich die Seite neu.

878
00:40:15,560 --> 00:40:19,341
Was sind Sie nicht überrascht, jetzt zu sehen?

879
00:40:19,341 --> 00:40:20,840
Oder vielleicht sind Sie überrascht, sie zu sehen.

880
00:40:20,840 --> 00:40:23,225
So oder so, was sehen Sie jetzt?

881
00:40:23,225 --> 00:40:24,100
PUBLIKUM: [unverständlich]

882
00:40:24,100 --> 00:40:24,770
DAVID J. MALAN: Es ist nicht gefunden.

883
00:40:24,770 --> 00:40:25,680
Warum ist es nicht gefunden?

884
00:40:25,680 --> 00:40:28,480
Nun, Styles.css-- Kapital
S-- nicht vorhanden.

885
00:40:28,480 --> 00:40:29,230
Ich misnamed es.

886
00:40:29,230 --> 00:40:30,430
Einfache Tippfehler.

887
00:40:30,430 --> 00:40:33,816
Aber ich bin immer verständlicherweise jetzt ein
404, da der Server zu sagen, hey,

888
00:40:33,816 --> 00:40:34,440
es ist nicht gefunden.

889
00:40:34,440 --> 00:40:36,300
Wörtlich Ich weiß nicht,
wo sich diese Datei befindet.

890
00:40:36,300 --> 00:40:38,880
So als Ergebnis der Browser
zeigt Ihnen, was es kann,

891
00:40:38,880 --> 00:40:42,860
der rohen Inhalt der Seite,
das war ein 200, die HTML,

892
00:40:42,860 --> 00:40:45,390
aber die Stilisierung kann nicht
werden danach hinzugefügt.

893
00:40:45,390 --> 00:40:47,120
Und das ist, was durch Kaskadierung gemeint ist.

894
00:40:47,120 --> 00:40:49,070
Sie können es irgendwie hinzufügen
nach, und es ist eine Art von

895
00:40:49,070 --> 00:40:50,874
verfeinert die Ästhetik der Web-Seite.

896
00:40:50,874 --> 00:40:53,790
Und Sie können auch diejenigen außer Kraft setzen
Stile mit noch anderen Stylesheet-Dateien

897
00:40:53,790 --> 00:40:54,700
wenn du willst.

898
00:40:54,700 --> 00:40:57,780
Es ist nicht, aber in diesem Fall gefunden,
weil natürlich misnamed ich es.

899
00:40:57,780 --> 00:41:00,330
So würde ich das erste zu beheben.

900
00:41:00,330 --> 00:41:04,667
>> Also lassen Sie uns fortfahren und
schlagen vor, die folgenden.

901
00:41:04,667 --> 00:41:07,410

902
00:41:07,410 --> 00:41:11,140
Fahren wir fort und tun dies.

903
00:41:11,140 --> 00:41:14,220
Beginnend mit vielleicht
Ihre Hello World-Datei,

904
00:41:14,220 --> 00:41:17,740
lassen Sie mich einladen, nur ein paar
von Feature-Vorschläge.

905
00:41:17,740 --> 00:41:20,400
Also, Victoria, wollte Sie
machen einige Text größer, nicht wahr?

906
00:41:20,400 --> 00:41:24,555
In Ordnung, so können wir
Sie machen Text größer.

907
00:41:24,555 --> 00:41:26,860
Und wir werden jede abzupfen
nur ein Problem zu lösen.

908
00:41:26,860 --> 00:41:30,867
Text vergrössern.

909
00:41:30,867 --> 00:41:32,700
Ich werde nicht die Mühe,
Schreiben Sie dies, wenn wir

910
00:41:32,700 --> 00:41:35,600
haben Kugel-Technologie direkt hier.

911
00:41:35,600 --> 00:41:39,970
So einige Probleme.

912
00:41:39,970 --> 00:41:44,670
Also werden wir versuchen,
um Text zu vergrößern.

913
00:41:44,670 --> 00:41:45,170
Gut.

914
00:41:45,170 --> 00:41:48,360
Was sonst würde jemand vorschlagen?

915
00:41:48,360 --> 00:41:50,332
Was sonst könnten wir wollen
in einer Web-Seite zu tun?

916
00:41:50,332 --> 00:41:52,040
Lassen Sie uns kommen mit ein
kurze Liste der Dinge

917
00:41:52,040 --> 00:41:55,366
und dann übertragen auf die
Gruppe um dies herauszufinden.

918
00:41:55,366 --> 00:41:56,270
>> PUBLIKUM: [unverständlich]

919
00:41:56,270 --> 00:42:02,251
>> DAVID J. MALAN: OK, Positionstext
auf verschiedenen Seiten der Seite?

920
00:42:02,251 --> 00:42:02,750
Gut.

921
00:42:02,750 --> 00:42:04,620
Etwas anderes.

922
00:42:04,620 --> 00:42:05,784
>> PUBLIKUM: [unverständlich]

923
00:42:05,784 --> 00:42:06,700
DAVID J. MALAN: Es ist.

924
00:42:06,700 --> 00:42:08,720
So ist ein gif nur ein
anderes Dateiformat.

925
00:42:08,720 --> 00:42:12,830
Wir haben gerade verwendet, was ein
png oder jpg wahrscheinlich?

926
00:42:12,830 --> 00:42:14,480
Wir haben ein jpg.

927
00:42:14,480 --> 00:42:16,780
Wenn Sie neugierig sind, eine übermäßige
Antwort auf Ihre Frage

928
00:42:16,780 --> 00:42:19,404
ein jpg ist in der Regel verwendet für
Fotografien, weil es unterstützt

929
00:42:19,404 --> 00:42:21,500
Millionen von Farben oder 24-Bit-Farbe.

930
00:42:21,500 --> 00:42:26,930
Ein gif wird im Allgemeinen verwendet für, wie,
Internet Memes diese days-- Animationen,

931
00:42:26,930 --> 00:42:28,810
wie animierte Gifs.

932
00:42:28,810 --> 00:42:32,320
Aber es kommt eine kleinere Farbe zu verwenden,
Palette, nur 256 möglichen Farben,

933
00:42:32,320 --> 00:42:35,230
aber es unterstützt
Transparenz und Animation.

934
00:42:35,230 --> 00:42:40,330
Und dann gibt es png, die unterstützt
Transparenz und mehr Farben

935
00:42:40,330 --> 00:42:41,300
aber nicht Animation.

936
00:42:41,300 --> 00:42:42,133
So ist es ein Trade-off.

937
00:42:42,133 --> 00:42:44,144

938
00:42:44,144 --> 00:42:46,060
So ein gif Zugabe, obwohl,
wäre funktionell

939
00:42:46,060 --> 00:42:48,396
Äquivalent eines png oder jpg zu addieren.

940
00:42:48,396 --> 00:42:49,110
Ja.

941
00:42:49,110 --> 00:42:50,550
Bildquelle entspricht.

942
00:42:50,550 --> 00:42:51,590
So etwas anderes.

943
00:42:51,590 --> 00:42:57,288
Lassen Sie uns etwas einfallen lassen, dass
wir nach Victoria geschickt zu tun.

944
00:42:57,288 --> 00:42:59,209
>> PUBLIKUM: Fügen Sie Schaltflächen für ein Formular.

945
00:42:59,209 --> 00:43:00,000
DAVID J. MALAN: OK.

946
00:43:00,000 --> 00:43:02,179
So fügen Sie Schaltflächen für ein Formular.

947
00:43:02,179 --> 00:43:03,470
Und wir werden zusammen, die man tun.

948
00:43:03,470 --> 00:43:07,220
Also das wird ein perfekter Übergang
Recht nach dieser Herausforderung.

949
00:43:07,220 --> 00:43:10,357
Noch etwas?

950
00:43:10,357 --> 00:43:11,440
Was könnten Sie tun?

951
00:43:11,440 --> 00:43:14,040

952
00:43:14,040 --> 00:43:16,516
Die Bahn fühlt sich sehr berauschend
wenn das alles ist was wir tun können.

953
00:43:16,516 --> 00:43:18,140
PUBLIKUM: Ändern Sie die Farbe des Textes.

954
00:43:18,140 --> 00:43:19,500
DAVID J. MALAN: Ändern Sie das, was?

955
00:43:19,500 --> 00:43:20,666
PUBLIKUM: Farbe des Textes.

956
00:43:20,666 --> 00:43:22,311
DAVID J. MALAN: Ändern Sie Farbe des Textes.

957
00:43:22,311 --> 00:43:22,810
Gut.

958
00:43:22,810 --> 00:43:23,790
Also, lasst uns dies tun.

959
00:43:23,790 --> 00:43:27,209
Nur noch einmal, so dass Sie nicht nur
auswendig, genau das tun, was ich tue,

960
00:43:27,209 --> 00:43:29,500
Ich werde auf Musik zu machen
denn hier vielleicht fünf Minuten.

961
00:43:29,500 --> 00:43:30,450
Sie sind willkommen, Google zu benutzen.

962
00:43:30,450 --> 00:43:33,130
Sie sind willkommen, mich zu fragen, und
Ich werde einen Hinweis in Ihrem Ohr flüstern.

963
00:43:33,130 --> 00:43:35,171
Sie sind willkommen, schauen
über auf die Schultern.

964
00:43:35,171 --> 00:43:37,340
Aber lösen nur eines dieser Probleme.

965
00:43:37,340 --> 00:43:40,190
Aber wir werden das letzte tun, die
man bildet, wenn wir konnten, zusammen.

966
00:43:40,190 --> 00:43:42,790
So fünf Minuten lösen
eines dieser Probleme

967
00:43:42,790 --> 00:43:46,780
Verwendung von Google, Intuition, oder jede
andere Mittel zur Verfügung.

968
00:43:46,780 --> 00:43:48,630
>> [MUSIK SPIELEN]

969
00:43:48,630 --> 00:43:49,130
Gut.

970
00:43:49,130 --> 00:43:50,838
Keine Sorge, wenn Sie wollen
zu halten bastelt,

971
00:43:50,838 --> 00:43:53,880
aber ich werde ein paar verderben
dieser Antworten.

972
00:43:53,880 --> 00:43:57,986
So ist der erste Vorschlag von
Victoria war, um Text zu vergrößern.

973
00:43:57,986 --> 00:43:59,360
Also gibt es ein paar Möglichkeiten, dies zu tun.

974
00:43:59,360 --> 00:44:01,530
Ich habe zur Zeit restauriert
mein Bildschirm dieser Größe,

975
00:44:01,530 --> 00:44:04,310
obwohl ich gezoomt
künstlich nur die Dinge zu sehen.

976
00:44:04,310 --> 00:44:07,470
Und lassen Sie uns dies tun.

977
00:44:07,470 --> 00:44:11,380
Lassen Sie mich gehen Sie vor und greifen
einige allgemeine lateinische Text

978
00:44:11,380 --> 00:44:19,540
nur so haben wir etwas, mit zu arbeiten.

979
00:44:19,540 --> 00:44:20,715
Also gib mir nur einen Moment.

980
00:44:20,715 --> 00:44:21,840
Ich werde drei Absätze machen.

981
00:44:21,840 --> 00:44:53,430

982
00:44:53,430 --> 00:44:53,930
OK.

983
00:44:53,930 --> 00:44:55,560
Dies wird ein besseres Beispiel sein.

984
00:44:55,560 --> 00:44:57,840
Also für die Neugierigen, in
mein hello.html, ich habe gerade

985
00:44:57,840 --> 00:45:01,645
klebte drei unsinnig
Latein Absätzen

986
00:45:01,645 --> 00:45:03,270
nur so haben wir einen Text mit zu arbeiten.

987
00:45:03,270 --> 00:45:06,720
Und Victoria Ziel war es,
machen einen Teil des Textes größer.

988
00:45:06,720 --> 00:45:09,879
So konnte ich nach wie vor gehen hier in.

989
00:45:09,879 --> 00:45:11,170
Und lassen Sie mich es richtig tun.

990
00:45:11,170 --> 00:45:13,253
Ich werde einen Link zu haben
Tag, der auf eine Datei zeigt

991
00:45:13,253 --> 00:45:20,560
genannt "styles.css," die Beziehung
von denen wieder "Sheet."

992
00:45:20,560 --> 00:45:25,221
Und dann werde ich zu retten,
und öffnen Sie dieses "styles.css." up

993
00:45:25,221 --> 00:45:28,940
>> So wie früher, habe ich die
Fähigkeit, in dieser CSS-Datei

994
00:45:28,940 --> 00:45:31,569
außer Kraft zu setzen eigentlich die Standard
Ästhetik einer Web-Seite,

995
00:45:31,569 --> 00:45:33,860
und die Standard-Ästhetik,
Natürlich sind ziemlich langweilig.

996
00:45:33,860 --> 00:45:36,943
Es ist eine Art normaler Schriftgröße, schwarz
Text, weißer Hintergrund, und so weiter.

997
00:45:36,943 --> 00:45:39,440
Also nehme ich machen möchte
all dieses Textes größer.

998
00:45:39,440 --> 00:45:40,460
Ich konnte ein paar Dinge tun.

999
00:45:40,460 --> 00:45:43,750
In meiner styles.css Datei, ich
könnte sagen, Sie wissen, was,

1000
00:45:43,750 --> 00:45:46,950
gelten die folgenden
der Körper meiner Seite.

1001
00:45:46,950 --> 00:45:51,390
Gehen Sie voran und machen die
Schriftgröße 24 Punkte,

1002
00:45:51,390 --> 00:45:54,130
Das ist eine Zahl, die ich könnte
Verwenden Sie in Microsoft Word.

1003
00:45:54,130 --> 00:45:57,620
Lassen Sie mich auf meiner Web zurück
Seite hier und neu zu laden,

1004
00:45:57,620 --> 00:45:59,640
und Sie können sehen, dass
es ist schon viel größer.

1005
00:45:59,640 --> 00:46:02,223
Und wir können ein wenig verrückt,
wie wir können auf einem desktop--

1006
00:46:02,223 --> 00:46:03,670
machen es 96 Punkte.

1007
00:46:03,670 --> 00:46:04,950
Neu laden.

1008
00:46:04,950 --> 00:46:07,610
Und es wird immer ein wenig
an dieser Stelle unhandlich.

1009
00:46:07,610 --> 00:46:09,500
>> Aber ich konnte ein wenig genauer.

1010
00:46:09,500 --> 00:46:14,530
Statt dessen Anwendung
Sheet auf den Körper meiner Seite,

1011
00:46:14,530 --> 00:46:21,740
was sonst könnte ich es auf, statt,
was andere Tag, das könnte noch

1012
00:46:21,740 --> 00:46:25,445
Funktion in der gleichen Art und Weise?

1013
00:46:25,445 --> 00:46:26,444
>> PUBLIKUM: Die p-Tag?

1014
00:46:26,444 --> 00:46:27,360
DAVID J. MALAN: P-Tag.

1015
00:46:27,360 --> 00:46:29,350
So würde der Kopf nicht sein
richtig, weil der Kopf,

1016
00:46:29,350 --> 00:46:31,300
Sie können nicht wirklich
steuern die Ästhetik.

1017
00:46:31,300 --> 00:46:32,700
Es gibt entweder Text gibt oder nicht.

1018
00:46:32,700 --> 00:46:36,760
Aber die p tag-- Ich kann in einem kleinen tauchen
tiefer, sozusagen auf den Absatz

1019
00:46:36,760 --> 00:46:37,350
Tags.

1020
00:46:37,350 --> 00:46:41,600
Und obwohl es drei,
das ist völlig in Ordnung, denn in CSS,

1021
00:46:41,600 --> 00:46:44,900
wenn ich sage nur "p", das
Mittel anwenden, die folgende

1022
00:46:44,900 --> 00:46:48,300
Für jeden Tag, das diese Spiele
Selektor, der Wähler nur

1023
00:46:48,300 --> 00:46:49,430
wobei der Name des Tags.

1024
00:46:49,430 --> 00:46:52,350
Egal, wo Sie sehen
"P", gelten die Schriftgröße,

1025
00:46:52,350 --> 00:46:55,222
und lassen Sie uns machen es
angemessenen again-- 24 Punkt.

1026
00:46:55,222 --> 00:46:56,930
Und weisst du was,
nur für eine gute Maßnahme,

1027
00:46:56,930 --> 00:46:59,810
Lassen Sie uns die Farbe machen
Rot nur für den Augenblick.

1028
00:46:59,810 --> 00:47:03,740
Und jetzt, wenn ich neu zu laden, wir jetzt
siehe drei hässliche Absätze.

1029
00:47:03,740 --> 00:47:07,180
>> Aber jetzt nehme an, dass ich sort
von-- Ich möchte den ersten Absatz

1030
00:47:07,180 --> 00:47:08,210
zu springen an den Benutzer aus.

1031
00:47:08,210 --> 00:47:11,150
Ich will nicht nur erhöhen
die Schriftgröße von allem.

1032
00:47:11,150 --> 00:47:16,105
Und so möchte ich eigentlich zu identifizieren oder
unterscheiden zwischen diesen Absätzen.

1033
00:47:16,105 --> 00:47:18,730
Lassen Sie uns also von den roten loszuwerden,
denn das ist nur irgendwie klebrig ist,

1034
00:47:18,730 --> 00:47:23,885
und wir gehen voran und machen die
Schriftgröße 12 Punkt standardmäßig

1035
00:47:23,885 --> 00:47:26,260
so dass wir auf etwas zurück
ein wenig mehr zumutbar ist.

1036
00:47:26,260 --> 00:47:29,190
Und jetzt will ich nur die zu erhöhen
Schriftgröße des ersten Absatzes.

1037
00:47:29,190 --> 00:47:31,440
Ich kann dies tun in ein paar
Wege, sondern ein Weg, das ist

1038
00:47:31,440 --> 00:47:37,180
vielleicht am Lehr bei der
Moment ist folgendes tun.

1039
00:47:37,180 --> 00:47:43,280
Lassen Sie mich voran gehen und sagen, das ist
Absatz hat eine eindeutige ID von "zuerst."

1040
00:47:43,280 --> 00:47:45,000
Ich könnte diese etwas nenne ich will.

1041
00:47:45,000 --> 00:47:46,874
Ich konnte dieses "foo" nennen
oder irgendein anderes Wort,

1042
00:47:46,874 --> 00:47:49,290
aber ich werde es einige zu geben,
semantisch sinnvollen Namen

1043
00:47:49,290 --> 00:47:50,320
wie "zuerst."

1044
00:47:50,320 --> 00:47:54,790
Dies ist die eindeutige Kennung,
die ID, für meine ersten Absatz.

1045
00:47:54,790 --> 00:47:59,360
>> Was kann ich jetzt in meinem Sheet tun
ist etwas genauer.

1046
00:47:59,360 --> 00:48:02,330
Anstatt zu sagen, gelten
Folgendes an die p-Tag,

1047
00:48:02,330 --> 00:48:04,890
Ich kann die following-- sagen
gelten die folgenden,

1048
00:48:04,890 --> 00:48:11,000
oder wählen Sie, das HTML-Element
das hat eine eindeutige Kennung von "zuerst."

1049
00:48:11,000 --> 00:48:12,350
Was will ich auf sie anzuwenden?

1050
00:48:12,350 --> 00:48:15,250
Eine Schriftgröße von 24 Punkt.

1051
00:48:15,250 --> 00:48:16,640
So habe ich zwei Selektoren jetzt.

1052
00:48:16,640 --> 00:48:19,690
Man macht alle die
Die Absätze 12 Punkt.

1053
00:48:19,690 --> 00:48:24,960
Aber dieses, vor allem, da es darum geht,
second-- es kommt zuletzt im file--

1054
00:48:24,960 --> 00:48:27,090
dies hat einen Kaskadeneffekt.

1055
00:48:27,090 --> 00:48:30,200
Ich habe gerade alle meine
Absatz-Tags 12-Punkt,

1056
00:48:30,200 --> 00:48:34,350
aber jetzt Kaskaden und
überschreibt, dass für alle Elemente

1057
00:48:34,350 --> 00:48:38,800
auf der Seite, jeder Tag in der Seite, deren
eindeutige ID Zitat unquote "zuerst."

1058
00:48:38,800 --> 00:48:41,720
Und der Hashtag in diesem Zusammenhang
bedeutet nur, "eindeutige Kennung."

1059
00:48:41,720 --> 00:48:43,750
Ich stelle sie nicht in der HTML-Datei.

1060
00:48:43,750 --> 00:48:46,880
I, hier, nur sagen,
Zitat unquote "zuerst."

1061
00:48:46,880 --> 00:48:48,470
>> Also lassen Sie mich neu zu laden.

1062
00:48:48,470 --> 00:48:49,919
Und jetzt sehe ich, ah, OK.

1063
00:48:49,919 --> 00:48:51,710
Ich meine, es ist nicht, dass
hübsch, aber es ist eine Art

1064
00:48:51,710 --> 00:48:53,600
der wie das Vorwort zu einem
Buch oder so etwas,

1065
00:48:53,600 --> 00:48:55,100
wo der erste Absatz ist größer.

1066
00:48:55,100 --> 00:48:57,933
Könnte noch präziser mit
nur die ersten Buchstaben, aber zumindest

1067
00:48:57,933 --> 00:48:59,110
Ich habe mehr Kontrolle ausgeübt.

1068
00:48:59,110 --> 00:49:04,760
Jetzt maybe-- vielleicht möchte ich dies zu tun
gelegentlich aus irgendeinem Grund,

1069
00:49:04,760 --> 00:49:09,010
und so will ich nicht, dies zu
gelten für nur ein HTML-Tag.

1070
00:49:09,010 --> 00:49:15,110
Vielmehr wollen wir sagen-- lasst uns
auch Folgendes tun.

1071
00:49:15,110 --> 00:49:18,810
Class = "Import".

1072
00:49:18,810 --> 00:49:23,970
Während eine ID wird verwendet, eindeutig
identifizieren eine Sache, ein Tag,

1073
00:49:23,970 --> 00:49:30,190
in Ihrer Web-Seite wird eine Klasse sein soll
auf einer beliebigen Anzahl von Elementen oder Tags verwendet

1074
00:49:30,190 --> 00:49:30,950
auf Ihrer Webseite ein.

1075
00:49:30,950 --> 00:49:31,710
So ist es wiederverwendbar.

1076
00:49:31,710 --> 00:49:33,090
Eine ID ist nicht wiederverwendbar.

1077
00:49:33,090 --> 00:49:34,450
Eine Klasse ist wiederverwendbar.

1078
00:49:34,450 --> 00:49:37,830
>> Und wissen Sie was, für was auch immer
philosophischen reasons--

1079
00:49:37,830 --> 00:49:40,180
Ich habe nicht beende meine
thought-- Ich werde sagen,

1080
00:49:40,180 --> 00:49:44,300
dass der erste Absatz und der
Absatz sind wichtig.

1081
00:49:44,300 --> 00:49:48,600
Also werde ich die Klasse anwenden genannt
"Wichtig", dass, wenn ich speichern meine Datei

1082
00:49:48,600 --> 00:49:51,510
und neu zu laden, hat keine
funktionelle Wirkung noch.

1083
00:49:51,510 --> 00:49:53,780
Aber ich habe einige hinzugefügt
Metadaten der Datei,

1084
00:49:53,780 --> 00:49:56,610
Art separaten etwas
von den Kerndaten der Datei,

1085
00:49:56,610 --> 00:50:02,300
so dass jetzt in meinem Stylesheet, wenn ich
stattdessen sagen: ".Wichtig" - Sie wissen,

1086
00:50:02,300 --> 00:50:07,110
alles, was wichtig ist, ich bin
gehen zu font-Farbe machen, red--

1087
00:50:07,110 --> 00:50:09,930
oder eher nicht font-Farbe, gerade Farbe.

1088
00:50:09,930 --> 00:50:12,930
Es gibt Widersprüche
leider in CSS.

1089
00:50:12,930 --> 00:50:14,120
Und neu zu laden.

1090
00:50:14,120 --> 00:50:17,640
Beachten Sie jetzt die erste
zwei Absätze sind rot

1091
00:50:17,640 --> 00:50:20,880
aber nicht die dritte, weil ich nur
angewendet, um die Klasse von "wichtig"

1092
00:50:20,880 --> 00:50:25,020
an den ersten zwei dieser Dinge.

1093
00:50:25,020 --> 00:50:28,030
>> Also in IDs, haben Sie die Möglichkeit,
sehr genau zu spezifizieren.

1094
00:50:28,030 --> 00:50:30,110
Mit Klassen haben Sie Wiederverwertbarkeit.

1095
00:50:30,110 --> 00:50:33,800
Aber in beiden Fällen bemerken die
Art der guten Design-Prinzip

1096
00:50:33,800 --> 00:50:39,072
wo einkalkuliert ich alle die aus
Ästhetik meiner styles.css Datei.

1097
00:50:39,072 --> 00:50:40,280
So gibt es hier keine Unordnung.

1098
00:50:40,280 --> 00:50:44,490
Es gibt keine Erwähnung von rot oder
fett Leiste oder Schriftgröße in dieser Datei.

1099
00:50:44,490 --> 00:50:49,430
Vielmehr habe ich semantisch,
sinnvoll charakterisiert meine Daten als,

1100
00:50:49,430 --> 00:50:51,240
Hier finden Sie einige wichtige Daten.

1101
00:50:51,240 --> 00:50:52,800
Hier einige weitere wichtige Daten.

1102
00:50:52,800 --> 00:50:56,500
Außerdem ist hier die
"Erste" meiner wichtigen Daten.

1103
00:50:56,500 --> 00:51:01,050
So HTML ist alles über Art
von Tagging, buchstäblich, Worte

1104
00:51:01,050 --> 00:51:05,270
und Absätze und Konstrukte in Ihrem
Seite mit diesen kleinen Hinweise, wenn Sie

1105
00:51:05,270 --> 00:51:07,640
will, dass Sie
irgendwie nutzen mit

1106
00:51:07,640 --> 00:51:10,880
andere Techniken wie CSS auf diese Weise.

1107
00:51:10,880 --> 00:51:14,760
>> So in der Antwort auf Victorias Frage,
wir können Text größer auf diese Weise zu machen.

1108
00:51:14,760 --> 00:51:18,380
Es gibt so viele andere Möglichkeiten, aber
die Schrift tag-- offene Klammer "font" -

1109
00:51:18,380 --> 00:51:19,770
tatsächlich mehrere Jahre alt ist.

1110
00:51:19,770 --> 00:51:21,410
Und das ist das Problem,
nur zu, mit Berufung

1111
00:51:21,410 --> 00:51:23,485
auf Online-resources--
sie neigen dazu, überholt sein.

1112
00:51:23,485 --> 00:51:26,110
Und in der Tat, als veraltet, dass ist schon,
weil die Welt realisiert,

1113
00:51:26,110 --> 00:51:28,970
Was bedeutet "font-size = 7" bedeuten?

1114
00:51:28,970 --> 00:51:29,670
Er tut es nicht.

1115
00:51:29,670 --> 00:51:32,770
Und so seit vielen Jahren und zu
Diese day-- einer der Seiten

1116
00:51:32,770 --> 00:51:36,060
hier stellt fest, ist, dass es tatsächlich
unglaublich schmerzhaft manchmal noch

1117
00:51:36,060 --> 00:51:38,900
zu entwickeln Websites für die
Netz, weil Microsoft

1118
00:51:38,900 --> 00:51:44,220
und Google und Mozilla und
andere oft nicht darüber einig, wie

1119
00:51:44,220 --> 00:51:47,480
eine Spezifikation wie HTML zu interpretieren.

1120
00:51:47,480 --> 00:51:52,490
>> Es gibt ein Regelbuch für HTML-Code,
im Allgemeinen sagt, was jeder Tag bedeutet.

1121
00:51:52,490 --> 00:51:55,690
Aber manchmal ist es nach links
Umsetzung nach Ermessen

1122
00:51:55,690 --> 00:51:57,290
Microsoft nach eigenem Ermessen und Google.

1123
00:51:57,290 --> 00:52:00,000
Und so werden Sie sehr oft
sehen auf einer Website etwas

1124
00:52:00,000 --> 00:52:04,954
sieht anders aus auf einem PC
als es auf einem Mac funktioniert,

1125
00:52:04,954 --> 00:52:06,995
und das ist wirklich da,
am Ende des Tages,

1126
00:52:06,995 --> 00:52:08,891
sie haben es bisher nicht testen
auch auf beiden Plattformen.

1127
00:52:08,891 --> 00:52:11,390
Aber es ist auch da vernünftig,
intelligenten Leute nicht einverstanden

1128
00:52:11,390 --> 00:52:14,970
und Unternehmen nicht einverstanden sind, und so
eine der Herausforderungen der Programmierung

1129
00:52:14,970 --> 00:52:16,980
für das Web oder Gestaltung
Dinge für das Web

1130
00:52:16,980 --> 00:52:21,700
Ihre Website in einer Art und Weise schreibt
das funktioniert auf jedem Web-Browser.

1131
00:52:21,700 --> 00:52:23,410
Aber auch das ist nicht vertretbar ist, nicht wahr?

1132
00:52:23,410 --> 00:52:27,807
Es gibt so viele Versionen von so vielen
Browser aus, dass es an einem gewissen Punkt,

1133
00:52:27,807 --> 00:52:30,890
Sie müssen auch ein Urteil Anruf
und Sie haben als Unternehmen zu entscheiden,

1134
00:52:30,890 --> 00:52:33,082
insbesondere für E-Commerce-Stil
Orte, an denen du bist

1135
00:52:33,082 --> 00:52:36,290
versuchen, die neuesten und besten zu verwenden,
Technologien, um eine wirklich gute User geben

1136
00:52:36,290 --> 00:52:37,110
Erfahrung.

1137
00:52:37,110 --> 00:52:41,019
Aber ein gewisser Prozentsatz der Benutzer könnte
sein noch den Internet Explorer 6 oder 7 verwenden

1138
00:52:41,019 --> 00:52:43,810
oder 8, insbesondere in Abhängigkeit von der
Land, dass sie kommen.

1139
00:52:43,810 --> 00:52:46,760
>> Und so sehr häufig
konsultierten ist etwas,

1140
00:52:46,760 --> 00:52:50,920
wie "Web-Browser-Statistiken."

1141
00:52:50,920 --> 00:52:56,560
Und wenn wir gehen zu-- mal sehen, Wikipedia
sehen und wie up-to-date dieses Diagramm ist

1142
00:52:56,560 --> 00:52:59,320
wenn es einen gibt.

1143
00:52:59,320 --> 00:53:02,420
Also hier können Sie sehen,
wo Browser tatsächlich

1144
00:53:02,420 --> 00:53:06,160
sind nach Dezember 2015
nach der US-Regierung.

1145
00:53:06,160 --> 00:53:11,170
Chrome ist mit 42% Marktanteil, gefolgt
von IE weitgehend in Corporate-Einstellungen

1146
00:53:11,170 --> 00:53:14,490
oder PC-Einstellungen, natürlich,
gefolgt von Firefox,

1147
00:53:14,490 --> 00:53:17,440
dann Safari, dann Opera tat es nicht
machen die Karte hier aus irgendeinem Grund,

1148
00:53:17,440 --> 00:53:18,210
und dann andere.

1149
00:53:18,210 --> 00:53:19,500
Vielleicht ist es unter anderen.

1150
00:53:19,500 --> 00:53:27,700
Aber noch problematischer als die ist--
auch mal sehen, ob Wikipedia hat

1151
00:53:27,700 --> 00:53:35,194
Versionen von Browsern version--

1152
00:53:35,194 --> 00:53:36,160

1153
00:53:36,160 --> 00:53:39,190
>> Gehen wir zu Browser-Statistiken.

1154
00:53:39,190 --> 00:53:40,680
IE.

1155
00:53:40,680 --> 00:53:42,030
Das ist noch nicht genug.

1156
00:53:42,030 --> 00:53:44,854
Browser-Statistiken.

1157
00:53:44,854 --> 00:53:45,353
Meine Version.

1158
00:53:45,353 --> 00:53:48,980

1159
00:53:48,980 --> 00:53:50,540
Das wird sein nicht richtig.

1160
00:53:50,540 --> 00:53:53,414
Lassen Sie uns Versionen zu sehen.

1161
00:53:53,414 --> 00:53:54,830
Browser-Marktanteil.

1162
00:53:54,830 --> 00:53:57,110
Mal sehen, ob dies kommt.

1163
00:53:57,110 --> 00:53:57,610
OK.

1164
00:53:57,610 --> 00:54:00,010
Nun das ist immer
ein wenig nützlicher.

1165
00:54:00,010 --> 00:54:04,870
Also hier feststellen, dass wir alle
verschiedene Versionen von Browsern.

1166
00:54:04,870 --> 00:54:09,887
Und, mein Gott, wenn Sie look-- Chrome
48, Chrome 47, Chrome 31, Chrome 45.

1167
00:54:09,887 --> 00:54:12,970
Ich meine, Browser immer mehr aktualisiert,
und manchmal einige dieser Änderungen

1168
00:54:12,970 --> 00:54:16,430
Bedeutung sind in
Bezug auf Funktionalität.

1169
00:54:16,430 --> 00:54:20,630
Und so irgendwann die
Produktmanager oder die Ingenieure

1170
00:54:20,630 --> 00:54:23,620
müssen, um eine decision-- machen Sie
wissen, was nur 1% der Welt

1171
00:54:23,620 --> 00:54:24,740
wird immer noch mit IE 7.

1172
00:54:24,740 --> 00:54:25,490
Zur Hölle mit ihnen.

1173
00:54:25,490 --> 00:54:27,470
Wir gehen einfach nicht
unterstützen diesen Browser.

1174
00:54:27,470 --> 00:54:28,740
Und was bedeutet es nicht, zu unterstützen?

1175
00:54:28,740 --> 00:54:31,170
Es könnte bedeuten, dass die Tasten
nicht auf Ihrer Webseite arbeiten,

1176
00:54:31,170 --> 00:54:33,050
oder es könnte bedeuten, die
Formatierung ist komplett aus.

1177
00:54:33,050 --> 00:54:35,091
Oder haben Sie vielleicht zu machen
das gleiche Urteil nennen

1178
00:54:35,091 --> 00:54:39,089
in mobilen diesen Tagen, wo wir sind
geht zu unterstützen IOS nicht 5 mehr.

1179
00:54:39,089 --> 00:54:40,380
So können die Leute müssen einfach aktualisieren.

1180
00:54:40,380 --> 00:54:45,850
Oder wir gehen nicht Kuchen zu unterstützen
auf Android OS für Android-Geräte,

1181
00:54:45,850 --> 00:54:48,629
denn als world-- wie die
Tech-Welt will sich vorwärts zu bewegen,

1182
00:54:48,629 --> 00:54:51,170
es will Art der zu ziehen
Welt mit ihm, so dass sie es nicht tun

1183
00:54:51,170 --> 00:54:53,295
müssen auch weiterhin sein
abwärtskompatibel, so dass sie

1184
00:54:53,295 --> 00:54:54,920
bieten neue und gute Funktionen können.

1185
00:54:54,920 --> 00:54:57,878
Dies ist in der Tat einer der Gründe
warum so viele Unternehmen Ausrollen

1186
00:54:57,878 --> 00:55:01,440
automatische Updates und Art zwingen
die neuesten Versionen der Software, die auf uns.

1187
00:55:01,440 --> 00:55:04,010
Und auch Unternehmen
wie Apple Art

1188
00:55:04,010 --> 00:55:07,280
Sie zwingen, fast oder zwingen
Sie in Bezug auf die Marktkräfte

1189
00:55:07,280 --> 00:55:11,164
ein neues Handy zu kaufen, weil sie nur
nicht Ihr altes Handy nicht mehr aktualisieren.

1190
00:55:11,164 --> 00:55:13,330
So Sie verpassen die
neuesten und besten Features,

1191
00:55:13,330 --> 00:55:17,520
da ist es, sie als ein kostspieliger
Unternehmen zu halten ältere, wohl

1192
00:55:17,520 --> 00:55:19,330
inferior Versionen der Software.

1193
00:55:19,330 --> 00:55:23,660
Aber der Nettoeffekt ist, dass
wir leiden auch dies auch.

1194
00:55:23,660 --> 00:55:26,550
>> Werfen wir also einen Blick auf nur
ein paar letzte Dinge hier.

1195
00:55:26,550 --> 00:55:29,740
Lassen Sie uns abschlagen wirklich schnell einige
die anderen Kugeln, wenn neugierig.

1196
00:55:29,740 --> 00:55:33,440
Also, wenn Sie versuchen, zu,
beispielsweise Positions

1197
00:55:33,440 --> 00:55:36,420
Der Text auf verschiedenen Seiten der
Seite, ich werde einen schnellen Weg zu tun,

1198
00:55:36,420 --> 00:55:38,360
aber es ist etwas anderes
Wege, dies zu tun.

1199
00:55:38,360 --> 00:55:42,610
Lassen Sie mich gehen Sie vor und eliminate--
vereinfachen dies wie folgt.

1200
00:55:42,610 --> 00:55:45,330
Lassen Sie mich meine zurück, nur um
einfach, einfach Absätze.

1201
00:55:45,330 --> 00:55:47,760
Lassen Sie mich auf meine styles.css zurück.

1202
00:55:47,760 --> 00:55:51,040
Und ich werde nur die simple-- zu verwenden
die Sie auf Google haben könnte gesehen

1203
00:55:51,040 --> 00:55:54,430
oder erinnern von earlier--
text-align rechts.

1204
00:55:54,430 --> 00:55:56,220
Und diese Seite neu laden.

1205
00:55:56,220 --> 00:55:58,470
Jetzt scheint alles
zu rechtsbündig,

1206
00:55:58,470 --> 00:56:00,770
wie Sie auf dem Overhead hier sehen könnte.

1207
00:56:00,770 --> 00:56:04,470
>> Wir können es ein wenig mehr aussehen
Buch-like, und wir können sagen, "rechtfertigen"

1208
00:56:04,470 --> 00:56:05,640
und neu zu laden.

1209
00:56:05,640 --> 00:56:09,870
Jetzt ist es schön und Platz auf beide
Seiten, die ganz nett ist.

1210
00:56:09,870 --> 00:56:12,220
Ein weiteres Ziel, das wir hatten hier
war die Veränderung Farbe des Textes.

1211
00:56:12,220 --> 00:56:13,650
So sahen wir, dass mit meinem roten Text.

1212
00:56:13,650 --> 00:56:15,630
Und nun Schaltflächen für ein Formular hinzufügen.

1213
00:56:15,630 --> 00:56:19,390
Also, warum versuchen wir nicht genau dies zu tun?

1214
00:56:19,390 --> 00:56:23,656
Aber lassen Sie mich zunächst auf eine Website, die
die meisten von uns jeden day-- Google verwenden.

1215
00:56:23,656 --> 00:56:25,780
Und lassen Sie uns einen Blick auf,
wie Google tatsächlich funktioniert.

1216
00:56:25,780 --> 00:56:26,821
Aber ich werde dies zu tun.

1217
00:56:26,821 --> 00:56:31,930
Zuerst lass es mich tun in-- yep,
lassen Sie mich zunächst zu Google gehen.

1218
00:56:31,930 --> 00:56:34,530
Ich werde gehen müssen
in Google Einstellungen,

1219
00:56:34,530 --> 00:56:40,660
weil ich möchte, zu deaktivieren
etwas Instant-Ergebnisse genannt.

1220
00:56:40,660 --> 00:56:43,580
>> So haben Sie vielleicht bemerkt, in
Google diese days-- mich gehen lassen zurück

1221
00:56:43,580 --> 00:56:44,850
und schalten Sie diese auf.

1222
00:56:44,850 --> 00:56:47,900
Also, wenn ich starten Sie die Suche
für "Katzen" wie diese,

1223
00:56:47,900 --> 00:56:50,120
feststellen, dass nicht nur
Ich erhalte die automatische Vervollständigung up

1224
00:56:50,120 --> 00:56:54,520
oben, eine plötzliche alle, die Seite selbst
scheint auch ziemlich schnell ändern,

1225
00:56:54,520 --> 00:56:58,750
und das ist Google mit einer Sprache,
genannt hilfreich sein, JavaScript zu versuchen.

1226
00:56:58,750 --> 00:57:01,540
Aber leider, es ist eine Art
von vermasselt unsere Diskussion

1227
00:57:01,540 --> 00:57:04,010
von dem, was gerade passiert,
hier unter der Haube.

1228
00:57:04,010 --> 00:57:09,070
Also ich bin gerade ein bisschen schnell
deaktivieren sofortige Ergebnisse.

1229
00:57:09,070 --> 00:57:11,510
Und ich werde Speichern klicken.

1230
00:57:11,510 --> 00:57:13,930
Und jetzt werde ich öffnen
dass diagnostische Symbolleiste, die ich

1231
00:57:13,930 --> 00:57:16,150
halten Öffnung unter der Registerkarte Netzwerk.

1232
00:57:16,150 --> 00:57:17,720
Also lassen Sie uns dies tun.

1233
00:57:17,720 --> 00:57:21,960
Lassen Sie mich- whoops--
scrollen dies ein wenig nach unten.

1234
00:57:21,960 --> 00:57:24,410
Und lassen Sie mich nach "Katzen."

1235
00:57:24,410 --> 00:57:26,790
>> Und jetzt notice-- tatsächlich,
dies ist eine gute Gelegenheit,

1236
00:57:26,790 --> 00:57:28,840
für einen Moment zu diskutieren.

1237
00:57:28,840 --> 00:57:32,460
Beachten Sie den Moment, als ich type-- es zu stoppen.

1238
00:57:32,460 --> 00:57:35,250
Hör auf.

1239
00:57:35,250 --> 00:57:35,790
OK.

1240
00:57:35,790 --> 00:57:40,870
Beachten Sie den Moment tippe ich den Brief
C, beobachten Sie die unten auf dem Bildschirm.

1241
00:57:40,870 --> 00:57:48,600
A- T- S. Was bedeutet der Unterseite
dieses Bildschirms, meine Registerkarte Netzwerk

1242
00:57:48,600 --> 00:57:53,320
geschieht vorschlagen wird jeder
Mal, wenn ich einen Brief schreiben?

1243
00:57:53,320 --> 00:57:57,700
Leider ist der Frosch sehr
ablenkend heute oder das Kleeblatt

1244
00:57:57,700 --> 00:58:00,339
oder was auch immer er ist.

1245
00:58:00,339 --> 00:58:01,880
Was geschah jedes Mal, wenn ich getippt?

1246
00:58:01,880 --> 00:58:04,230
Und lassen Sie mich klar die
Puffer und erneut eingeben.

1247
00:58:04,230 --> 00:58:06,580
SO- hoppla.

1248
00:58:06,580 --> 00:58:13,280
Jedes Mal, wenn ich einen Buchstaben eingeben, C- A- T--
so wird eine neue Zeile hält offensichtlich erscheinen.

1249
00:58:13,280 --> 00:58:16,530
Was bedeutet jeder dieser Zeilen darstellen,
auf das, was wir gesehen und besprochen haben

1250
00:58:16,530 --> 00:58:17,339
so weit?

1251
00:58:17,339 --> 00:58:18,130
PUBLIKUM: Eine Suche?

1252
00:58:18,130 --> 00:58:21,770
DAVID J. MALAN: Eine Suche, oder
allgemeiner, eine HTTP-Anforderung

1253
00:58:21,770 --> 00:58:23,125
von meinem Browser zum Server.

1254
00:58:23,125 --> 00:58:29,090
Nun, warum ist mein Browser macht einen HTTP
jedes Mal fordere ich einen Brief schreiben?

1255
00:58:29,090 --> 00:58:30,502
>> PUBLIKUM: [unverständlich]

1256
00:58:30,502 --> 00:58:33,210
DAVID J. MALAN: Ja, es gibt
mir diese auto-complete Ergebnisse.

1257
00:58:33,210 --> 00:58:35,190
Wie, wo diese tun
Suchergebnisse stammen aus?

1258
00:58:35,190 --> 00:58:38,120
Nun, jedes Mal wenn ich geben Sie eine
Brief, sendet Google mehr

1259
00:58:38,120 --> 00:58:40,460
und mehr und mehr von
das Wort, das ich bin eingeben.

1260
00:58:40,460 --> 00:58:41,040
Warum?

1261
00:58:41,040 --> 00:58:44,540
Weil sie wollen, dass ich ein zu geben
besser und besser, besseren Vorschlag,

1262
00:58:44,540 --> 00:58:48,880
eine Liste von Vorschlägen, zu welchem ​​Wort
Ich versuche eigentlich abgeschlossen.

1263
00:58:48,880 --> 00:58:53,030
Das ist also buchstäblich jeder sagen
Charakter geben Sie in Google

1264
00:58:53,030 --> 00:58:56,900
gesendet, schließlich wird in
Masse, aber auch manchmal ein

1265
00:58:56,900 --> 00:59:00,620
zu einem Zeitpunkt, zu implementieren, um
diese automatische Vervollständigung Funktionen, wenn

1266
00:59:00,620 --> 00:59:03,000
die Daten sind, natürlich auf dem Netz.

1267
00:59:03,000 --> 00:59:08,780
>> Nun lassen Sie uns einen Blick darauf werfen, was tatsächlich
passiert, wenn ich die Google-Suche klicken.

1268
00:59:08,780 --> 00:59:10,420
Und dann werden wir diese selbst nutzen.

1269
00:59:10,420 --> 00:59:15,320
Also, wenn ich scrollen jetzt bis auf den
erste Anforderung, die gerade passiert ist.

1270
00:59:15,320 --> 00:59:17,130
Beachten Sie die folgenden.

1271
00:59:17,130 --> 00:59:25,550
Es wurde auf eine ziemlich lange gesendet URL--
https://www.google.com/search?

1272
00:59:25,550 --> 00:59:27,100
und dann eine ganze Reihe von Sachen.

1273
00:59:27,100 --> 00:59:29,620
Lassen Sie uns dies tatsächlich sehen jetzt
im Browser-Tab selbst.

1274
00:59:29,620 --> 00:59:31,310
Lassen Sie uns hier loswerden der Symbolleiste erhalten.

1275
00:59:31,310 --> 00:59:33,140
Hier ist die Seite der Suchergebnisse.

1276
00:59:33,140 --> 00:59:34,790
Und beachten Sie hier die URL.

1277
00:59:34,790 --> 00:59:37,430
Nun, Sie können sich wahrscheinlich vorstellen,
was los ist hier teilweise.

1278
00:59:37,430 --> 00:59:39,090
Also zunächst einmal eine Definition.

1279
00:59:39,090 --> 00:59:42,570
Dies ist offensichtlich das Ziel
wo die Form vorgelegt wird.

1280
00:59:42,570 --> 00:59:44,910
Also, wenn ich getippt in der
Worte "Katzen" und drücken Sie die Eingabetaste,

1281
00:59:44,910 --> 00:59:48,460
anscheinend Google gesendet
mein Texteingabe zu dieser URL

1282
00:59:48,460 --> 00:59:50,770
dass ich hervorgehoben
dort, Slash suchen.

1283
00:59:50,770 --> 00:59:56,530
Es stellte sich heraus, in einer URL, alles, was
passiert, nachdem ein Fragezeichen,

1284
00:59:56,530 --> 01:00:01,270
wie wir sagen, halten, wird ein Schlüssel-Wert-Paar
das wurde in das Formular eingegeben oder irgendwie

1285
01:00:01,270 --> 01:00:04,500
aus den übertragenen
Browser an den Server.

1286
01:00:04,500 --> 01:00:07,180
>> Also jedes Mal, wenn Typ-Eingang
in eine Form auf der Internet

1287
01:00:07,180 --> 01:00:10,000
und es wird gesendet, wie wir haben
diskutiert, über eine get,

1288
01:00:10,000 --> 01:00:12,400
eine dieser virtuellen
Kuverts, der Inhalt

1289
01:00:12,400 --> 01:00:15,510
davon envelope-- ja, halten
Erhalten gestopft körperlich

1290
01:00:15,510 --> 01:00:19,010
in den Umschlag in der Klasse
heute, aber technologisch

1291
01:00:19,010 --> 01:00:21,110
es ist eigentlich in der URL setzen.

1292
01:00:21,110 --> 01:00:22,940
Also in der Tat, lassen Sie mich durch diese sieben.

1293
01:00:22,940 --> 01:00:25,010
Wo sehen Sie Benutzereingaben?

1294
01:00:25,010 --> 01:00:27,490
Wo sehen Sie etwas
dass ich mich hier getippt?

1295
01:00:27,490 --> 01:00:32,100

1296
01:00:32,100 --> 01:00:33,491
Ja, so "Katzen."

1297
01:00:33,491 --> 01:00:33,990
Recht?

1298
01:00:33,990 --> 01:00:36,380
Also lassen Sie mich diese destillieren
in etwas einfacher.

1299
01:00:36,380 --> 01:00:39,917
Ich werde alles löschen zu
Diese URL, die ich nicht verstehe,

1300
01:00:39,917 --> 01:00:42,250
und ich werde einfach verlassen
es als this-- / search? q = Katzen.

1301
01:00:42,250 --> 01:00:45,640

1302
01:00:45,640 --> 01:00:47,890
Wir werden sehen, wo q
kommt aus in einem Moment,

1303
01:00:47,890 --> 01:00:51,220
aber das fühlt sich an wie das Minimum
Informationsmenge, die I zur Verfügung gestellt.

1304
01:00:51,220 --> 01:00:53,050
Und jetzt werde ich drücken Sie die Eingabetaste.

1305
01:00:53,050 --> 01:00:55,520
Und bemerken es funktioniert immer noch.

1306
01:00:55,520 --> 01:00:57,950
Wir bekommen immer noch eine ganze Reihe von Katzen zurück.

1307
01:00:57,950 --> 01:01:00,340
So Google ist schicker
als dies in diesen Tagen.

1308
01:01:00,340 --> 01:01:01,934
Es ist 2016, nicht 1999.

1309
01:01:01,934 --> 01:01:04,600
Also gibt es andere Dinge, die meine
Browser an den Server sendet.

1310
01:01:04,600 --> 01:01:07,100
Aber das ist minimal
alles, was notwendig.

1311
01:01:07,100 --> 01:01:08,380
>> So was ist los?

1312
01:01:08,380 --> 01:01:14,320
Nun, lassen Sie mich zunächst voran gehen und gehen
mich zurück zu Cloud9 und lassen Sie gehen Sie voran

1313
01:01:14,320 --> 01:01:15,620
und schließen früher meine Registerkarten.

1314
01:01:15,620 --> 01:01:18,230
Und ich werde dies tun, auf meinem
besitzen nur für einen Moment.

1315
01:01:18,230 --> 01:01:20,730
Ich gehe voran gehen
und schaffen neue Datei.

1316
01:01:20,730 --> 01:01:23,739
Und ich werde es als google.html zu speichern.

1317
01:01:23,739 --> 01:01:26,280
Und ich werde sehr quickly--
Ich werde zu stehlen, tatsächlich,

1318
01:01:26,280 --> 01:01:28,510
einige dieser Text nur um Zeit zu sparen.

1319
01:01:28,510 --> 01:01:30,610
Ich werde dies hier einzufügen.

1320
01:01:30,610 --> 01:01:33,850
Ich werde nicht die Mühe mit
jede Stilisierung dieses Mal.

1321
01:01:33,850 --> 01:01:38,340
Wir werden diese zu nennen "Mein Google."

1322
01:01:38,340 --> 01:01:41,230
Und ich werde loswerden
von allem, was im Körper.

1323
01:01:41,230 --> 01:01:42,740
Und ich werde folgendes tun.

1324
01:01:42,740 --> 01:01:45,690
Lassen Sie mich zoomen.

1325
01:01:45,690 --> 01:01:50,620
Formular Action-- und als ich kurz erwähnt
earlier-- whoops-- als ich kurz

1326
01:01:50,620 --> 01:01:54,130
bereits erwähnt, die Wirkung eines
Form ist, wo Sie die Daten senden.

1327
01:01:54,130 --> 01:01:56,620
So google.com/search.

1328
01:01:56,620 --> 01:01:59,390
Und die Methode, die ich verwenden soll
kann eines von zwei Dingen sein.

1329
01:01:59,390 --> 01:02:02,870
Es kann entweder "bekommen", wie wir halten
diskutieren, oder es kann sein "Post".

1330
01:02:02,870 --> 01:02:05,340
Denn jetzt, die grundlegende
Unterschied ist, wenn Sie "bekommen"

1331
01:02:05,340 --> 01:02:09,590
alle Informationen, dass die
Benutzer zur Verfügung stellt wird in der URL gesendet.

1332
01:02:09,590 --> 01:02:13,530
>> Das ist großartig für Dinge wie Suche
Motoren und einige andere Anwendungen,

1333
01:02:13,530 --> 01:02:17,080
aber unter welchen Umständen würde
Sie wollen nicht ein Formular ausfüllen

1334
01:02:17,080 --> 01:02:21,620
und haben die Informationen am Ende der
URL, wie in der Adresszeile Ihres Browsers?

1335
01:02:21,620 --> 01:02:25,470

1336
01:02:25,470 --> 01:02:26,605
Welche Formen tun Sie--

1337
01:02:26,605 --> 01:02:27,480
PUBLIKUM: [unverständlich]

1338
01:02:27,480 --> 01:02:28,450
DAVID J. MALAN: Ja, wie, was?

1339
01:02:28,450 --> 01:02:29,270
PUBLIKUM: Passwörter.

1340
01:02:29,270 --> 01:02:31,936
DAVID J. MALAN: Ja, so Sie sich einloggen
auf Facebook oder eine Website.

1341
01:02:31,936 --> 01:02:34,395
Das ist eine Benutzereingabe von
eine Form, ein Textfeld,

1342
01:02:34,395 --> 01:02:37,020
aber Sie es wahrscheinlich nicht wollen,
zeigt, die in der Browser-URL oben.

1343
01:02:37,020 --> 01:02:38,121
Warum?

1344
01:02:38,121 --> 01:02:40,870
Ich meine, vielleicht gibt es einige
Auswirkungen auf die Sicherheit auf dem Netzwerk,

1345
01:02:40,870 --> 01:02:44,830
aber more-- mögen, mehr einfach, was ist, wenn
Ihre Mitbewohner, Ihrem Partner,

1346
01:02:44,830 --> 01:02:47,710
Ihre Kinder, Ihr Ehepartner sieht
über Ihren Browser Geschichte?

1347
01:02:47,710 --> 01:02:50,762
Es ist Ihr Passwort richtig
es in der Geschichte Ihres Browsers.

1348
01:02:50,762 --> 01:02:52,220
Das fühlt sich nicht wie ein gutes Design.

1349
01:02:52,220 --> 01:02:54,500
Oder noch technisch,
Angenommen, Sie versuchen,

1350
01:02:54,500 --> 01:02:59,180
ein Foto auf Flickr hochladen
oder Facebook oder wherever--

1351
01:02:59,180 --> 01:03:03,010
das ist eine Benutzereingabe, obwohl
es ist ein wenig mehr interesting-- wie

1352
01:03:03,010 --> 01:03:05,530
füge ich ein Bild in der URL-Leiste stopfen?

1353
01:03:05,530 --> 01:03:06,730
Sie Art von Art kann nicht.

1354
01:03:06,730 --> 01:03:07,396
Sie Art können.

1355
01:03:07,396 --> 01:03:10,210
Aber wirklich, ich bin hart gedrückt
vorstellen, das zu tun.

1356
01:03:10,210 --> 01:03:13,470
Also brauche ich eine andere Methode für
Fotos auf eine Website hochladen,

1357
01:03:13,470 --> 01:03:15,657
und dass andere Methode wird als "Post" genannt.

1358
01:03:15,657 --> 01:03:18,740
Aber jetzt werden wir reden nur über
"Get", das ist die einfachere der beiden.

1359
01:03:18,740 --> 01:03:21,100
Es setzt nur die ganze
Benutzereingaben in der URL.

1360
01:03:21,100 --> 01:03:22,830
>> Also hier ist die Form Ich schaffe.

1361
01:03:22,830 --> 01:03:24,070
Ich möchte einen Eingang.

1362
01:03:24,070 --> 01:03:24,820
Und weisst du was?

1363
01:03:24,820 --> 01:03:26,111
Ich werde hier eine Vermutung zu nehmen.

1364
01:03:26,111 --> 01:03:31,600
Ich werde wieder zu meiner
Eingang "q" für "Abfrage".

1365
01:03:31,600 --> 01:03:34,970
Und ich denke, das ist eine der ist
Original-Designs, vielleicht aus dem Jahr 1999.

1366
01:03:34,970 --> 01:03:39,560
Und dann wird der Typ dieses Eingangs
sein würde, nur "Text."

1367
01:03:39,560 --> 01:03:43,040
Und dann werde ich einen anderen Eingang zu haben
dass braucht keinen Namen, wie wir bald

1368
01:03:43,040 --> 01:03:45,120
zu sehen, der Typ, von denen "Eintragen".

1369
01:03:45,120 --> 01:03:47,070
Und das wird
geben Sie mir eine spezielle Taste.

1370
01:03:47,070 --> 01:03:48,320
Und das ist es.

1371
01:03:48,320 --> 01:03:50,790
>> Also lassen Sie mich gehen Sie vor und speichern Sie diese Datei.

1372
01:03:50,790 --> 01:03:54,910
Ich werde zurück zu gehen meine
Browser und gehen Sie zu google.html.

1373
01:03:54,910 --> 01:03:56,140
Eingeben.

1374
01:03:56,140 --> 01:03:59,680
Und es ist eine Art von spärlich
gelinde gesagt.

1375
01:03:59,680 --> 01:04:03,110
Aber lassen Sie mich gehen Sie voran
und die Suche nach "Katzen."

1376
01:04:03,110 --> 01:04:06,510
Und merke ich bin derzeit
an diesem Cloud9 URL.

1377
01:04:06,510 --> 01:04:09,240
Aber der Moment, als ich auf diese Schaltfläche klicken,
wo hoffen, dass Sie werde ich am Ende?

1378
01:04:09,240 --> 01:04:10,160
>> PUBLIKUM: Google.

1379
01:04:10,160 --> 01:04:11,118
>> DAVID J. MALAN: Google.

1380
01:04:11,118 --> 01:04:12,740
Also lassen Sie uns auf Senden klicken.

1381
01:04:12,740 --> 01:04:15,200
Und in der Tat habe ich neu implementiert Google.

1382
01:04:15,200 --> 01:04:15,700
Recht?

1383
01:04:15,700 --> 01:04:16,480
Es ist einfacher.

1384
01:04:16,480 --> 01:04:17,120
Es ist leichter.

1385
01:04:17,120 --> 01:04:20,350
Ich meine, mein Code ist deutlich besser als
ihre, aus dem Chaos sahen wir früher.

1386
01:04:20,350 --> 01:04:21,100
Und weisst du was?

1387
01:04:21,100 --> 01:04:22,610
Ich werde dies ein wenig zu würzen.

1388
01:04:22,610 --> 01:04:23,860
Ich habe nicht diese früher erwähnt.

1389
01:04:23,860 --> 01:04:27,860
Es gibt Tags wie H1, für die Rubrik 1,
die wichtigste Position auf einer Seite.

1390
01:04:27,860 --> 01:04:30,570
"Mein Google:" Ich werde dies nennen.

1391
01:04:30,570 --> 01:04:31,940
Lassen Sie mich neu zu laden.

1392
01:04:31,940 --> 01:04:33,772
Es sieht ein wenig besser schon.

1393
01:04:33,772 --> 01:04:34,980
Und tatsächlich, weißt du was?

1394
01:04:34,980 --> 01:04:36,430
Ich habe bereits-- log ich.

1395
01:04:36,430 --> 01:04:40,200
Ich sagte, dass ich das nicht gehen, um Stil,
aber ich werde dies nach wie vor zu gestalten.

1396
01:04:40,200 --> 01:04:46,860
Und mein Körper sein wird,
lassen Sie uns sagen, text-align Zentrum.

1397
01:04:46,860 --> 01:04:48,800
Es sieht eher wie Google bereits.

1398
01:04:48,800 --> 01:04:51,090
>> Ich brauche einen Zeilenumbruch, obwohl,
Senden für die Schaltfläche.

1399
01:04:51,090 --> 01:04:52,798
Und es stellt sich heraus, Sie
verwenden können, Absätze,

1400
01:04:52,798 --> 01:04:57,320
oder Sie können mehr buchstäblich nur sagen,
geben Sie mir einen Zeilenumbruch die br-Tag hier--.

1401
01:04:57,320 --> 01:04:59,319
Und wenn ich diese neu zu laden, jetzt geht es dort.

1402
01:04:59,319 --> 01:05:01,610
Es ist ein wenig hässlich, so dass ich
Sie könnten mehrere Zeilenumbrüche

1403
01:05:01,610 --> 01:05:03,310
aber lassen Sie uns nicht hier zu gierig.

1404
01:05:03,310 --> 01:05:06,430
So, jetzt wollen wir mal sehen, ob es für funktioniert "Hunde."

1405
01:05:06,430 --> 01:05:08,640
Es scheint für "Hunde" zu arbeiten, wie gut.

1406
01:05:08,640 --> 01:05:10,780
Also, was ist das überzeugende Gerichte zum Mitnehmen hier?

1407
01:05:10,780 --> 01:05:13,600
One-- war kein großer Sprung
Einführung ein paar Tags,

1408
01:05:13,600 --> 01:05:15,370
wie die Form-Tag in der Eingangs-Tag.

1409
01:05:15,370 --> 01:05:17,120
Aber mehr grundlegend
ist, alles, was wir tun

1410
01:05:17,120 --> 01:05:20,610
nutzt unser Verständnis
von HTTP und der Tatsache

1411
01:05:20,610 --> 01:05:24,900
dass Formen letztlich ändern
was in der URL des Browsers ist,

1412
01:05:24,900 --> 01:05:28,540
und so, deshalb können wir
mechanisch Eingang an einen Server bereitzustellen,

1413
01:05:28,540 --> 01:05:33,600
durch ein HTML-Formular zu machen und zu wissen,
dass der Server versteht HTTP,

1414
01:05:33,600 --> 01:05:36,890
Genau wie unser Körper versteht, wie,
meine Hand, dass gleiche Protokoll Schütteln,

1415
01:05:36,890 --> 01:05:40,920
und so erhalten wir die Antwort zurück
dass wir letztlich erwarten.

1416
01:05:40,920 --> 01:05:44,050
>> Also lassen Sie uns versuchen, einen zu tun
Letzte, was jetzt mit Handy,

1417
01:05:44,050 --> 01:05:47,052
und ich werde make-- werde ich hinzufügen
dieser Code auf den Folien.

1418
01:05:47,052 --> 01:05:49,760
Also, wenn Sie möchten, Sie zu basteln
sicherlich nehmen es von dort.

1419
01:05:49,760 --> 01:05:51,551
Aber ich werde gehen
voraus und eine Sache zu tun.

1420
01:05:51,551 --> 01:05:54,120
Ich gehe voran gehen und
öffne meine Index page-- up

1421
01:05:54,120 --> 01:05:59,030
meine hallo Seite nach wie vor die
hat eine Menge von dieser faux-lateinischen Text,

1422
01:05:59,030 --> 01:06:05,470
oder bedeutungslos lateinischen Text und has--
es sieht aus wie dies in dieser Schriftgröße.

1423
01:06:05,470 --> 01:06:07,850
Aber lassen Sie mich gehen Sie vor und tun dies.

1424
01:06:07,850 --> 01:06:09,300
Ich werde in Cloud9 zu gehen.

1425
01:06:09,300 --> 01:06:10,380
Und Sie müssen diesen Schritt nicht tun.

1426
01:06:10,380 --> 01:06:11,420
Ich werde es einfach selbst tun.

1427
01:06:11,420 --> 01:06:12,890
Ich werde Teilen zu klicken.

1428
01:06:12,890 --> 01:06:15,170
Und das ist ein Merkmal
nur von Cloud9, wobei

1429
01:06:15,170 --> 01:06:17,710
Ich kann meine Umgebung öffentlich machen.

1430
01:06:17,710 --> 01:06:20,240
>> Und gerade im Interesse der
Demonstration, lassen Sie mich dies tun.

1431
01:06:20,240 --> 01:06:22,870
Ich werde meine Bewerbung öffentlich machen.

1432
01:06:22,870 --> 01:06:25,230
Beachten Sie es warnt mich, bin
Ich sicher, dass ich will, dies zu tun,

1433
01:06:25,230 --> 01:06:28,438
denn das wird jeder zu machen
in der Welt sind hier, ob sie jetzt

1434
01:06:28,438 --> 01:06:33,560
oder gerade das Video später auf die
Internet Lage zu sehen, was ich sehe.

1435
01:06:33,560 --> 01:06:34,440
Aber das ist in Ordnung.

1436
01:06:34,440 --> 01:06:37,870
Ich werde sagen: "Fertig."

1437
01:06:37,870 --> 01:06:42,080
Und lassen Sie mich Sie ermutigen, wenn ich es täte
diese correctly-- mich lassen zuerst testen.

1438
01:06:42,080 --> 01:06:45,590
Gehen Sie weiter, wenn Sie nicht mind--
in einem Browser auf Ihrem Computer,

1439
01:06:45,590 --> 01:06:49,900
gehen Sie zu dieser URL und hoffentlich
Sie unterstützen meinen lateinischen Text zu sehen.

1440
01:06:49,900 --> 01:06:52,820
Und klar zu sein, es ist
läuft nicht auf meinem Laptop.

1441
01:06:52,820 --> 01:06:53,610
Es ist in der Cloud.

1442
01:06:53,610 --> 01:06:58,120
Es ist auf Cloud9 wahrsten Sinne des Wortes, aber
Ich habe meinen Arbeitsplatz öffentlich gemacht

1443
01:06:58,120 --> 01:07:03,450
so dass jeder im Internet
kann meine Latein-Homepage zugreifen.

1444
01:07:03,450 --> 01:07:07,209
>> Gehen Sie auf die gleiche URL
Ihr Telefon, wenn Sie.

1445
01:07:07,209 --> 01:07:09,750
Wenn es Sie kostet, Sie aber,
Blick über kann nur eine Schulter.

1446
01:07:09,750 --> 01:07:40,688

1447
01:07:40,688 --> 01:07:42,467
PUBLIKUM: [unverständlich]

1448
01:07:42,467 --> 01:07:43,550
DAVID J. MALAN: Tut mir leid?

1449
01:07:43,550 --> 01:07:45,390
PUBLIKUM: [unverständlich]

1450
01:07:45,390 --> 01:07:47,710
DAVID J. MALAN: Nur lateinischen Wörtern.

1451
01:07:47,710 --> 01:07:48,210
Das ist alles.

1452
01:07:48,210 --> 01:07:49,250
Aber das ist, was Sie sehen sollten.

1453
01:07:49,250 --> 01:07:49,875
>> PUBLIKUM: Ja.

1454
01:07:49,875 --> 01:07:50,790
DAVID J. MALAN: Ja.

1455
01:07:50,790 --> 01:07:51,300
Ja.

1456
01:07:51,300 --> 01:07:51,540
OK.

1457
01:07:51,540 --> 01:07:53,530
So kann ich halten Ihre
Telefon nur für einen Moment?

1458
01:07:53,530 --> 01:07:57,504
Also, hoffentlich, wenn Sie den Zugriff auf
es sollte es fast nicht lesbar aussehen.

1459
01:07:57,504 --> 01:07:59,920
Es ist still-- ich meine, es ist
wegen der lateinischen unlesbar.

1460
01:07:59,920 --> 01:08:01,920
Aber es ist auch nicht lesbar
für das, was aus anderen Gründen?

1461
01:08:01,920 --> 01:08:03,775
Wie, was mißfällt Sie darüber?

1462
01:08:03,775 --> 01:08:04,650
PUBLIKUM: Es ist klein.

1463
01:08:04,650 --> 01:08:06,420
DAVID J. MALAN: Es ist super, super klein.

1464
01:08:06,420 --> 01:08:07,920
Wie könnten wir dieses Problem beheben?

1465
01:08:07,920 --> 01:08:09,730
Es ist super, super klein
auf Victorias Telefon

1466
01:08:09,730 --> 01:08:11,400
und, wenn Sie schon gezogen
es sich, wahrscheinlich

1467
01:08:11,400 --> 01:08:14,660
als auch kleine auf Ihrem Telefon, es sei denn, Sie
haben Zugänglichkeit Einstellungen aktiviert.

1468
01:08:14,660 --> 01:08:15,530
Was ist das?

1469
01:08:15,530 --> 01:08:18,497
Sie könnten nur kneifen und
Zoom, der praktikabel ist,

1470
01:08:18,497 --> 01:08:20,330
aber dann sieht man nur
ein paar Worte auf einmal.

1471
01:08:20,330 --> 01:08:20,859
So warten Sie eine Minute.

1472
01:08:20,859 --> 01:08:21,720
Ich weiß, wie diese zu beheben.

1473
01:08:21,720 --> 01:08:22,219
Recht?

1474
01:08:22,219 --> 01:08:26,130
Ich konnte CSS verwenden, und ich konnte das ändern
Schriftgröße von 12 Punkt bis 24-Punkt.

1475
01:08:26,130 --> 01:08:29,020
Aber die Nebenwirkung, daß,
Natürlich geht jetzt zu sein,

1476
01:08:29,020 --> 01:08:32,630
auf einem Schreibtisch oder einem Laptop,
jetzt der Text ist doppelt so groß.

1477
01:08:32,630 --> 01:08:35,810
Und so wäre es ganz nett sein
zur Unterscheidung zwischen Geräten,

1478
01:08:35,810 --> 01:08:37,840
und es stellt sich heraus dort
gibt Möglichkeiten, das zu tun.

1479
01:08:37,840 --> 01:08:39,590
Es gibt einige
verschiedene Wege, in der Tat,

1480
01:08:39,590 --> 01:08:44,189
wobei mit Hilfe von CSS und ausgefallener Funktionen
dass wir in nicht im Detail zu gehen,

1481
01:08:44,189 --> 01:08:46,960
Sie können im Wesentlichen abfragen
der Browser und sagen:

1482
01:08:46,960 --> 01:08:51,550
Wenn der Bildschirm kleiner ist als diese
viele Pixel, verwenden Sie diese Schriftgröße.

1483
01:08:51,550 --> 01:08:55,180
Wenn Ihr Bildschirm ist größer als diese
viele Pixel, verwenden Sie diese andere Schriftgröße.

1484
01:08:55,180 --> 01:08:57,080
>> Sie können nach wie vor noch schicker sein.

1485
01:08:57,080 --> 01:09:00,140
Wenn Sie schon einmal besucht haben, ein
Web-Seite, die auf einem Desktop,

1486
01:09:00,140 --> 01:09:04,404
vielleicht hat ein großes Menü aus, um die
Seite, und dann der gesamte Inhalt

1487
01:09:04,404 --> 01:09:07,029
ist an der Seite des daß Verbindung zum Menü
das ist irgendwie ein gemeinsames Paradigma.

1488
01:09:07,029 --> 01:09:09,670
Menü auf der linken Seite, Inhalt
auf der rechten Seite, oder umgekehrt.

1489
01:09:09,670 --> 01:09:13,569
Funktioniert nicht wirklich auf Handy, wenn Ihr
Bildschirm ist nur so viele Pixel breit.

1490
01:09:13,569 --> 01:09:16,233
So häufiger auf Mobil ist,
Ihr Menü wird plötzlich bekommen

1491
01:09:16,233 --> 01:09:18,399
zusammengebrochen, und Sie müssen
Klicken Sie auf eine Schaltfläche, um zu sehen,

1492
01:09:18,399 --> 01:09:22,404
oder auf der Website wird das Menü setzen
darüber und über den Inhalt darunter setzen.

1493
01:09:22,404 --> 01:09:24,779
Und Sie können diese implementieren
Dinge in vielfältiger Weise auch.

1494
01:09:24,779 --> 01:09:28,340
Sie können Ihre Programmierer fragen,
hey, Team, zu jeder Zeit

1495
01:09:28,340 --> 01:09:34,450
sehen Sie eine HTTP-Anfrage von einem Android
Gerät, ein Microsoft-Gerät, ein Google

1496
01:09:34,450 --> 01:09:39,930
Gerät, ein Apple-Gerät, verwenden Sie diese
Schriftgröße und verwenden Sie dieses Menü-Layout,

1497
01:09:39,930 --> 01:09:42,670
oder aber diese Standard größer Layout.

1498
01:09:42,670 --> 01:09:45,410
>> Nun, mit was
grundlegende Technik heute

1499
01:09:45,410 --> 01:09:48,529
die Ingenieure nutzen könnten
zu wissen, ob es sich um

1500
01:09:48,529 --> 01:09:53,660
ein iPhone, ein Android-Handy, ein Laptop,
ein Desktop des Unternehmens-Server zu besuchen?

1501
01:09:53,660 --> 01:09:55,310
Worin bekommen sie diese Informationen?

1502
01:09:55,310 --> 01:09:56,080
>> PUBLIKUM: Kopf?

1503
01:09:56,080 --> 01:09:57,740
>> DAVID J. MALAN: Ja, der HTTP-Header.

1504
01:09:57,740 --> 01:10:01,714
So kommt jeder HTTP-Anforderung von
ihre Kunden auf ihre Server

1505
01:10:01,714 --> 01:10:03,880
umfassen, innerhalb dieser virtuellen
Umschlag, eine ganze Reihe

1506
01:10:03,880 --> 01:10:08,260
von HTTP-Header, einer davon ist
der Browser und das Betriebssystem

1507
01:10:08,260 --> 01:10:10,290
auch wenn Sie, egal zu
dass der Detaillierungsgrad.

1508
01:10:10,290 --> 01:10:13,790
Nun, es ist eine kryptische aussehende Zeichenfolge, aber
dort gibt es Software, die einfach

1509
01:10:13,790 --> 01:10:18,530
vereinfachen, dass, und Sie können einfach fragen
in der Programmierung code-- PHP, Java, C ++,

1510
01:10:18,530 --> 01:10:23,650
whatever-- was Telefon ist this--
Welches Gerät ist dieser Benutzer verwenden?

1511
01:10:23,650 --> 01:10:27,501
Und dann kann man sagen, zeigen sie diese
Version der Website, wenn es ein Telefon.

1512
01:10:27,501 --> 01:10:30,250
Zeigen Sie ihnen, diese Version von der
Website, wenn es ein Laptop oder Desktop.

1513
01:10:30,250 --> 01:10:32,316
Aber Sie brauchen noch nicht einmal
serverseitige Komplexität.

1514
01:10:32,316 --> 01:10:33,940
Sie können selbst die einfachsten Dinge zu tun.

1515
01:10:33,940 --> 01:10:34,815
>> Ich werde dies zu tun.

1516
01:10:34,815 --> 01:10:38,995
Ich gehe voran gehen in
meine Cloud9 Umgebung,

1517
01:10:38,995 --> 01:10:41,370
und ich werde einen Tag hinzuzufügen
dass Sie vor in Google sah.

1518
01:10:41,370 --> 01:10:42,770
Es ist das Meta-Tag genannt.

1519
01:10:42,770 --> 01:10:45,520
Und ich erinnere mich dieses man nie, so
Ich werde es hier zu transkribieren.

1520
01:10:45,520 --> 01:10:50,552
Meta name = "Ansichtsfenster" und dann
content = "width = Gerätebreite, intital

1521
01:10:50,552 --> 01:11:02,060
Skala = 1 "und das ist es.

1522
01:11:02,060 --> 01:11:06,230
>> So könnte es auch sein,
wie eine Zauberformel.

1523
01:11:06,230 --> 01:11:11,300
Es ist nicht so klar, aber dies hat
etwas mit dem Ansichtsfenster zu tun,

1524
01:11:11,300 --> 01:11:15,070
und das Ansichtsfenster ist nur der Körper eines
Web-Seite, die rechteckige Bereich,

1525
01:11:15,070 --> 01:11:16,690
die meisten der Seite definiert.

1526
01:11:16,690 --> 01:11:19,060
Und dies ist nur zu sagen
der Browser, wissen Sie was?

1527
01:11:19,060 --> 01:11:22,589
Sprechen Sie die Breite dieser Seite
effektiv gleich der Gerätebreite.

1528
01:11:22,589 --> 01:11:25,380
Mit anderen Worten, nicht davon ausgehen, dass
Sie haben eine Art unbegrenzten Raum.

1529
01:11:25,380 --> 01:11:29,920
Angenommen, Sie haben nur so viel haben
Raum wie das Gerät selbst ist groß.

1530
01:11:29,920 --> 01:11:34,454
Und jetzt, wenn ich neu laden
in meinem Browser, sehe ich keine Änderung.

1531
01:11:34,454 --> 01:11:37,370
Aber wenn ich diese correctly-- tat und
Lassen Sie mich meine fingers-- überqueren, wenn Sie alle

1532
01:11:37,370 --> 01:11:42,920
laden Sie Ihre Telefone, tun Sie
sehen eine zwingende Änderung?

1533
01:11:42,920 --> 01:11:43,620
Ja, ist dass--

1534
01:11:43,620 --> 01:11:45,067
>> PUBLIKUM: [unverständlich]

1535
01:11:45,067 --> 01:11:45,900
DAVID J. MALAN: Ja.

1536
01:11:45,900 --> 01:11:46,400
OK.

1537
01:11:46,400 --> 01:11:47,850
So wohl besser lesbar jetzt?

1538
01:11:47,850 --> 01:11:53,070
Noch klein, um fair zu sein, aber nicht
so winzig wie zu unhandlich sein.

1539
01:11:53,070 --> 01:11:56,920
Und ich könnte sicherlich außer Kraft setzen diese
weiter mit CSS oder auf der Server-Seite,

1540
01:11:56,920 --> 01:12:00,120
aber immer mehr, was Sie wollen
Sehen ist mehr und mehr Funktionen

1541
01:12:00,120 --> 01:12:02,900
wird hinzugefügt, um
clientseitige environments--

1542
01:12:02,900 --> 01:12:06,530
JavaScript, wie wir diskutieren
morgen, CSS und HTML-- so

1543
01:12:06,530 --> 01:12:09,190
dass alle diese Abfragen
können auf dem Client durchgeführt werden

1544
01:12:09,190 --> 01:12:11,910
so stören die
Server viel weniger und nicht

1545
01:12:11,910 --> 01:12:14,530
zu haben, mit zu halten, für
So die ständige Ansturm

1546
01:12:14,530 --> 01:12:17,210
von neuen Betriebssystem
Versionen, neue Browser-Versionen.

1547
01:12:17,210 --> 01:12:20,190
Sie können nur den Browser lassen
das Gerät fragen, wie groß bist du,

1548
01:12:20,190 --> 01:12:22,890
und dann machen etwas logisch
Entscheidungen auf der Grundlage, dass.

1549
01:12:22,890 --> 01:12:25,140
Aber wir werden mehr Möglichkeiten sehen
für logische Entscheidungen

1550
01:12:25,140 --> 01:12:27,223
morgen im Rahmen
einer Programmiersprache.

1551
01:12:27,223 --> 01:12:29,800

1552
01:12:29,800 --> 01:12:32,760
>> Also, irgendwelche Fragen, dann,
auf Web-Entwicklung?

1553
01:12:32,760 --> 01:12:36,130
Heute ist nicht Web-Programmierung, pro
se, da die meisten alles, was wir getan haben

1554
01:12:36,130 --> 01:12:38,370
sehr ästhetisch war, wenn man so will.

1555
01:12:38,370 --> 01:12:41,750
Es gibt keine Entscheidungsfindung in
der Code, den wir geschrieben haben,

1556
01:12:41,750 --> 01:12:44,990
und so ist das, warum HTML ein Markup
Sprache, keine Programmiersprache.

1557
01:12:44,990 --> 01:12:47,140
Aber morgen werden wir nehmen
ein kurzer Blick, schließlich,

1558
01:12:47,140 --> 01:12:49,340
bei JavaScript, das ist
eine eigentliche Programmierung

1559
01:12:49,340 --> 01:12:54,220
Sprache, die uns tun ein bisschen mehr können.

1560
01:12:54,220 --> 01:12:56,800
>> Irgendwelche Fragen?

1561
01:12:56,800 --> 01:13:00,480
Nun, lassen Sie mich schlagen zwei
Möglichkeiten optional für die Hausaufgaben.

1562
01:13:00,480 --> 01:13:02,900
Ein ist-- diese Cloud9
Konten werden nicht auslaufen.

1563
01:13:02,900 --> 01:13:04,669
Sie sind willkommen zu verwenden
sie zu basteln.

1564
01:13:04,669 --> 01:13:05,960
Es ist die kostenlose Service-Niveau.

1565
01:13:05,960 --> 01:13:08,754
Erkenne, dass, wenn bei der Erstellung
Ihr Arbeitsbereich, Sie haben es öffentlich,

1566
01:13:08,754 --> 01:13:11,670
bedeutet das, dass jemand auf dem
Internet sehen kann, was Sie eingeben.

1567
01:13:11,670 --> 01:13:15,104
Also vielleicht nur betrachten
in Verlegenheit zu bringen, sich nicht

1568
01:13:15,104 --> 01:13:18,020
wenn Sie setzen Ihre erste Web
Seite gibt öffentlich aus Versehen,

1569
01:13:18,020 --> 01:13:20,134
aber niemand wird zu
wissen, dass es auf jeden Fall zu suchen.

1570
01:13:20,134 --> 01:13:23,760
>> Und two-- lassen Sie mich werfen
up dieser URL als auch,

1571
01:13:23,760 --> 01:13:28,250
vor allem, wenn Sie heute eine kam in
etwas weniger komfortabel als andere,

1572
01:13:28,250 --> 01:13:30,430
unsicher, was all dieses Zeug bedeutet.

1573
01:13:30,430 --> 01:13:36,780
Erkenne, dass viel mehr von diesem Video,
Das ist sowohl ein guter Weg, um einzuschlafen

1574
01:13:36,780 --> 01:13:39,380
und auch während lachen
Dabei hat auch

1575
01:13:39,380 --> 01:13:44,300
viele gesellschaftlich interessant
und sicherheitsrelevante Diskussionen

1576
01:13:44,300 --> 01:13:47,370
darin von John Oliver,
wenn auch ein Komiker.

1577
01:13:47,370 --> 01:13:55,456
>> Aber wenn es keine weiteren Fragen,
das bringt uns zu der Rezeption.

1578
01:13:55,456 --> 01:13:56,830
Warum also drehe ich nicht auf die Musik.

1579
01:13:56,830 --> 01:13:58,610
Es sollte Getränke sein
und Snacks außerhalb.

1580
01:13:58,610 --> 01:14:00,220
Ich bin glücklich, für so zu mischen
solange die Leute möchten,

1581
01:14:00,220 --> 01:14:01,600
Beantwortung von Fragen mehr one-on-one.

1582
01:14:01,600 --> 01:14:03,330
Aber sonst, du bist willkommen
nehmen an einer beliebigen Stelle aus,

1583
01:14:03,330 --> 01:14:05,740
und wir werden uns wiedersehen
morgen früh für ein bisschen mehr.

1584
01:14:05,740 --> 01:14:07,290
OK, danke.

1585
01:14:07,290 --> 01:14:10,428