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

2
00:00:00,127 --> 00:00:01,210
DAVID J. MALAN: Okay.

3
00:00:01,210 --> 00:00:02,160
Vi er tilbage.

4
00:00:02,160 --> 00:00:05,810
Så målet med denne afsluttende session
er at indføre nogle flere begreber

5
00:00:05,810 --> 00:00:09,290
men også give alle en chance
at slags strække fingrene

6
00:00:09,290 --> 00:00:11,270
og rent faktisk gør noget
lidt hands-on.

7
00:00:11,270 --> 00:00:13,897
Målet er ikke at slå
os alle i web-udviklere

8
00:00:13,897 --> 00:00:16,230
af ethvert middel, men virkelig kun
at give dig en smagsprøve på nogle

9
00:00:16,230 --> 00:00:21,750
af de grundlæggende konstruktioner af hvad
går i webprogrammering og i dag web

10
00:00:21,750 --> 00:00:23,980
udvikling, så
statisk side af things--

11
00:00:23,980 --> 00:00:26,660
ingen logik, ingen programmering
sprog, bare statisk indhold.

12
00:00:26,660 --> 00:00:29,660
Og det vil give os en mulighed
til rent faktisk at se, hvad en web-server er,

13
00:00:29,660 --> 00:00:34,140
Se, hvad en HTML-fil er, se, hvad
det er HTTP faktisk tjener op.

14
00:00:34,140 --> 00:00:38,600
Men før vi dykke i, enhver retrospektiv
spørgsmål om cloud computing

15
00:00:38,600 --> 00:00:43,922
eller sikkerhed eller noget midt imellem?

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

17
00:00:44,890 --> 00:00:47,181
Okay, godt, lad os
gøre dette, bare i tilfælde

18
00:00:47,181 --> 00:00:49,680
processen med at tilmelde dig
noget tager nogle få minutter.

19
00:00:49,680 --> 00:00:51,221
Vi lader det gøre det i baggrunden.

20
00:00:51,221 --> 00:00:56,860
Gå fremad, hvis du kunne,
til denne webadresse her-- c9.io.

21
00:00:56,860 --> 00:01:02,810
Dette er en tredjepart service--
platform som en tjeneste, hvis du will--

22
00:01:02,810 --> 00:01:05,190
der kommer til at invitere dig
at tilmelde dig en konto,

23
00:01:05,190 --> 00:01:08,650
og det kommer til at give hver af jer
en konto i den såkaldte sky

24
00:01:08,650 --> 00:01:11,330
på en andens infrastruktur,
et firma kaldet Cloud9.

25
00:01:11,330 --> 00:01:13,350
Men hvad er rart om
dette er, at de giver dig

26
00:01:13,350 --> 00:01:15,990
en tilnærmelse af en
faktiske udvikling virkelige verden

27
00:01:15,990 --> 00:01:18,530
miljø, omend i
sky og i en webbrowser,

28
00:01:18,530 --> 00:01:21,175
og vi vil bruge dette til rent faktisk
eksperimentere lidt i dag.

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

30
00:01:27,116 --> 00:01:30,260
Og derefter gå videre og bare navigere
din vej til tilmeldingen

31
00:01:30,260 --> 00:01:32,630
hvis du kunne.

32
00:01:32,630 --> 00:01:36,080
Så vi tilfældigvis bruge dette i klassen
Jeg underviser for alle vores elever,

33
00:01:36,080 --> 00:01:39,140
både på campus og off nu, og
det er erstattet hvad historisk

34
00:01:39,140 --> 00:01:41,390
var software ellers kan downloades.

35
00:01:41,390 --> 00:01:44,620
Så hvad du få adgang til
er et af disse virtuelle maskiner,

36
00:01:44,620 --> 00:01:46,460
væsentlige, at jeg beskrev tidligere.

37
00:01:46,460 --> 00:01:50,260
Så dette selskab Cloud9 sandsynligvis
lejer fra en tredje Party-- faktisk

38
00:01:50,260 --> 00:01:52,760
i dette tilfælde Google-- helhed
bundt af virtuelle maskiner

39
00:01:52,760 --> 00:01:56,500
at de på en måde hugge op i
illusionen af ​​individuelle servere

40
00:01:56,500 --> 00:01:58,610
at hver af os har fuld kontrol over.

41
00:01:58,610 --> 00:02:01,640
Det er ikke helt korrekt at sige
at de er virtuelle maskiner,

42
00:02:01,640 --> 00:02:04,550
selv om, fordi det,
Cloud9 rent faktisk bruger

43
00:02:04,550 --> 00:02:07,570
er en noget nyere teknologi
kaldet containere.

44
00:02:07,570 --> 00:02:13,150
Og lad mig få fat i denne billede
her at male dette billede.

45
00:02:13,150 --> 00:02:16,540
>> En container er, hvis
du husker billedet

46
00:02:16,540 --> 00:02:19,900
fra tidligere, lidt lysere
vægt end en virtuel maskine.

47
00:02:19,900 --> 00:02:22,090
I virkeligheden, mens sidste
gang vi talte om der

48
00:02:22,090 --> 00:02:25,170
være et operativsystem
system og en hypervisor

49
00:02:25,170 --> 00:02:28,260
og derefter gæst operativsystem, gæst
operativsystem, gæsteoperativsystem

50
00:02:28,260 --> 00:02:30,940
systemet, på toppen af ​​din
fysisk hardware,

51
00:02:30,940 --> 00:02:33,740
forskellen med denne nyere
teknologi, containere,

52
00:02:33,740 --> 00:02:37,290
er, at de alle en eller anden måde deler
det samme operativsystem.

53
00:02:37,290 --> 00:02:39,970
Men de stadig skabe
illusionen af ​​alle

54
00:02:39,970 --> 00:02:44,590
har hans eller hendes egen eksklusive
administrative rettigheder og filer

55
00:02:44,590 --> 00:02:45,400
på serveren.

56
00:02:45,400 --> 00:02:48,230
Men der er mindre software i
mellem dig og hardware.

57
00:02:48,230 --> 00:02:52,260
Resultatet heraf er, i
teori, en højere ydelse,

58
00:02:52,260 --> 00:02:55,470
fordi du bruger eller
spilder færre ressourcer

59
00:02:55,470 --> 00:02:57,360
på, at den såkaldte virtualisering lag.

60
00:02:57,360 --> 00:02:59,420
Så dette kaldes
containeriseringen af ​​natur

61
00:02:59,420 --> 00:03:02,920
ved hjælp af en teknologi kaldet Docker,
som i høj grad kommer til sin ret.

62
00:03:02,920 --> 00:03:05,086
Og det er noget,
ingeniører på din virksomhed

63
00:03:05,086 --> 00:03:08,610
måske slags slags begynde at tale
om snart, hvis de ikke allerede har,

64
00:03:08,610 --> 00:03:11,590
selvom der er bestemt ingen
grund til at hoppe på eventuelle bandwagons.

65
00:03:11,590 --> 00:03:15,410
>> Så med det sagt, hvad
du sandsynligvis se nu

66
00:03:15,410 --> 00:03:22,670
er en skærm, der ligner lidt dette.

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

68
00:03:23,170 --> 00:03:25,260
Og bare ringe til mig over, hvis ikke.

69
00:03:25,260 --> 00:03:27,440
Og hvis so-- jeg kommer over, hvis ikke.

70
00:03:27,440 --> 00:03:30,244
Gå videre og klik det store
plus at skabe en arbejdsplads,

71
00:03:30,244 --> 00:03:31,660
og du vil se en skærm som denne.

72
00:03:31,660 --> 00:03:35,020
Du kan ringe arbejdsområdet
navngive noget, du ønsker for nu.

73
00:03:35,020 --> 00:03:38,660
Og bare faktisk for enkelhed,
gå og-- godt, nogle af jer

74
00:03:38,660 --> 00:03:39,660
allerede har arbejdsområder.

75
00:03:39,660 --> 00:03:47,050
Kald det hvad du want-- virksomhed,
Harvard, torsdag, uanset hvad du gerne vil.

76
00:03:47,050 --> 00:03:48,800
Du behøver ikke en beskrivelse.

77
00:03:48,800 --> 00:03:52,380
Du kan lade det private, medmindre du
har allerede en masse arbejdspladser.

78
00:03:52,380 --> 00:03:55,280
Hvis du er tvunget til at gøre det offentligt,
det er fint for nutidens formål.

79
00:03:55,280 --> 00:03:56,750
Også her er en af ​​de eftersalg.

80
00:03:56,750 --> 00:03:59,939
Du får en privat arbejdsplads ved
misligholdelse. Men hvis du vil have mere,

81
00:03:59,939 --> 00:04:00,980
du skal betale for mere.

82
00:04:00,980 --> 00:04:02,870
Ellers er de tvinge dig
at gøre dit arbejde offentligt.

83
00:04:02,870 --> 00:04:05,600
Men det er fint, fordi de også
målrette dette på open source fællesskaber

84
00:04:05,600 --> 00:04:07,700
at tilskynde folk til
faktisk samarbejder.

85
00:04:07,700 --> 00:04:10,699
>> Og den sidste ting, der er vigtigt,
er dog, når du har valgt et navn

86
00:04:10,699 --> 00:04:17,140
og efter du vælger privat eller offentlig,
klik HTML5, den store orange ikon

87
00:04:17,140 --> 00:04:22,430
sekunder fra venstre, og
klik derefter på Opret arbejdsområde.

88
00:04:22,430 --> 00:04:24,580
Og det vil formentlig
tage et minut eller deromkring,

89
00:04:24,580 --> 00:04:26,540
men du vil så have en
miljø, når du

90
00:04:26,540 --> 00:04:30,544
gøre det, der ser minder om
hvad jeg har på skærmen her nu.

91
00:04:30,544 --> 00:04:33,210
Men igen, kan det tage et minut
eller mere for at komme til denne skærm

92
00:04:33,210 --> 00:04:34,770
når du har klikket på Opret Workspace.

93
00:04:34,770 --> 00:04:37,936
Men bare markere mig over hvis du gerne vil mig
at tage et kig på noget eller rådgive.

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

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

96
00:04:40,690 --> 00:04:42,390
Så jeg har tænkt mig at baggrunden dette for nu.

97
00:04:42,390 --> 00:04:44,260
Ring til mig over, hvis du synes at
har tekniske vanskeligheder.

98
00:04:44,260 --> 00:04:46,210
Men igen, kan det tage et
lille smule for at åbne.

99
00:04:46,210 --> 00:04:49,570
Og lad os gå videre og snakke om, hvad
det egentlig betyder at lave en webside,

100
00:04:49,570 --> 00:04:52,780
hvad HTML er, og hvordan alt dette
nu forbinder som vi er begyndt

101
00:04:52,780 --> 00:04:54,730
faktisk bruge nogle af teknologien.

102
00:04:54,730 --> 00:04:58,310
Så det viser sig, at jeg kan
gå på min lille Mac her,

103
00:04:58,310 --> 00:05:01,650
åbne et simpelt program kaldet
TextEdit, eller på Windows jeg kunne

104
00:05:01,650 --> 00:05:04,480
åben noget, der hedder Notepad.exe.

105
00:05:04,480 --> 00:05:08,260
Og jeg kunne simpelthen gøre noget
ligesom denne-- "hello, world."

106
00:05:08,260 --> 00:05:12,020
Og så kunne jeg gemme denne som
hej.txt Så ingen magisk der.

107
00:05:12,020 --> 00:05:15,200
Dette har intet at gøre med web
programmering, intet at gøre med HTML.

108
00:05:15,200 --> 00:05:16,790
Bare skabe en simpel tekstfil.

109
00:05:16,790 --> 00:05:20,600
Men det viser sig, at en web
side er bogstavelig talt lige det.

110
00:05:20,600 --> 00:05:24,020
Det er en simpel tekstfil, der indeholder tekst
at du kan skrive på dit tastatur,

111
00:05:24,020 --> 00:05:30,070
men det typisk, men ikke altid
ender i ikke .txt men .html eller .htm.

112
00:05:30,070 --> 00:05:32,050
Og du ikke bare
skrive ord i filen.

113
00:05:32,050 --> 00:05:35,280
Du faktisk nødt til at bruge ting kaldet
tags eller mere generelt, noget

114
00:05:35,280 --> 00:05:37,190
kaldet markup sprog.

115
00:05:37,190 --> 00:05:40,510
>> Så jeg har tænkt mig at meget hurtigt skrive
og derefter forklare følgende.

116
00:05:40,510 --> 00:05:42,290
Jeg har tænkt mig at først
skriver dette, som siger,

117
00:05:42,290 --> 00:05:45,730
hey, browser, her kommer en
webside skrevet i HTML.

118
00:05:45,730 --> 00:05:51,850
Og disse to ting sammen sige, hey,
browser, følgende er faktisk HTML.

119
00:05:51,850 --> 00:05:55,790
Hey, browser, her kommer
hoved eller øverst på min side.

120
00:05:55,790 --> 00:05:59,900
Hey, browser, indersiden af ​​toppen af
min side, sætte en titel, der er, "Hej,

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

122
00:06:01,610 --> 00:06:08,370
Hey, browser, efter at lederen af ​​min
side, her kommer kroppen af ​​min side.

123
00:06:08,370 --> 00:06:12,170
Og hey, browser, kroppen af ​​min
side bør også sige, "Hej verden".

124
00:06:12,170 --> 00:06:15,500
Så hvad er de vigtigste detaljer her?

125
00:06:15,500 --> 00:06:17,960
Dette er, hvad der er generelt
kaldes en doc-typen erklæring,

126
00:06:17,960 --> 00:06:20,190
og helt ærligt, det er lidt
svært at huske dette i første omgang.

127
00:06:20,190 --> 00:06:21,481
Du skal bare slags copy-paste det.

128
00:06:21,481 --> 00:06:23,760
Dette er den formelle måde
at sige, hey, browser,

129
00:06:23,760 --> 00:06:28,030
Jeg bruger HTML-version 5, der
kom ud noget for nylig.

130
00:06:28,030 --> 00:06:31,380
Det er en magisk besværgelse, at nogle
mennesker med en dårlig følelse af design

131
00:06:31,380 --> 00:06:33,640
besluttede at sætte på
meget toppen af ​​filen.

132
00:06:33,640 --> 00:06:35,473
Selvom det er en
lidt mystiske, det er alt

133
00:06:35,473 --> 00:06:38,250
det means-- hey, browser, her
kommer med version 5 i HTML.

134
00:06:38,250 --> 00:06:41,741
>> Resten af ​​dette har været med os
i nogen tid nu, historisk,

135
00:06:41,741 --> 00:06:44,740
men det har været udvikling, og det er
sandsynligvis været at få lidt enklere.

136
00:06:44,740 --> 00:06:47,320
Læg mærke et par karakteristika
af hvad jeg har fremhævet.

137
00:06:47,320 --> 00:06:49,890
Der er disse ting med vinklet
brackets-- venstre beslag

138
00:06:49,890 --> 00:06:51,040
og højreparentesen.

139
00:06:51,040 --> 00:06:52,490
Og mærke til symmetri her.

140
00:06:52,490 --> 00:06:57,340
Og ved symmetri, mener jeg, ligesom jeg
har denne start tag her, eller et åbent tag

141
00:06:57,340 --> 00:07:01,560
hvis du vil, hernede har jeg en
tæt tag eller en ende tag, der er

142
00:07:01,560 --> 00:07:06,460
anderledes kun, hvis det har denne
skråstreg ved begyndelsen af ​​ordet

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

144
00:07:07,360 --> 00:07:09,360
Og du kan tænke på
dette som jeg var henkastet

145
00:07:09,360 --> 00:07:12,280
foreslår før, hey,
browser, her kommer nogle HTML.

146
00:07:12,280 --> 00:07:16,060
Og omvendt, hey, browser, det er
det for HTML-- starten og slutningen.

147
00:07:16,060 --> 00:07:18,440
>> Imens hey, browser, her
kommer lederen af ​​min side.

148
00:07:18,440 --> 00:07:20,140
Hey, browser, det er det for hovedet.

149
00:07:20,140 --> 00:07:22,240
Hey, browser, her er
kroppen af ​​min side.

150
00:07:22,240 --> 00:07:24,020
Hey, browser, det er det for kroppen.

151
00:07:24,020 --> 00:07:26,940
Og inde i det er nogle
vilkårlig tekst for nu.

152
00:07:26,940 --> 00:07:30,520
Og inde i hovedet, i mellemtiden,
er en vilkårlig, men mærkede,

153
00:07:30,520 --> 00:07:34,410
så at sige, tekst, der siger, at titlen
på min side skal være "Hej, verden."

154
00:07:34,410 --> 00:07:37,470
Nu, for nu kan du
antage, at browsere

155
00:07:37,470 --> 00:07:41,762
har only-- eller rettere websider har
kun to parts-- hovedet og kroppen.

156
00:07:41,762 --> 00:07:44,220
Og hovedet er generelt bare
ligesom menulinjen, stuff

157
00:07:44,220 --> 00:07:45,510
virkelig bare helt i top.

158
00:07:45,510 --> 00:07:48,910
Og kroppen er tarme af siden,
alt i den store rektangel

159
00:07:48,910 --> 00:07:50,239
der fylder skærmen.

160
00:07:50,239 --> 00:07:51,780
Så jeg har tænkt mig at gå videre og gøre dette.

161
00:07:51,780 --> 00:07:54,400
Jeg kommer til at gå videre og
klik på Gem, Fil Gem.

162
00:07:54,400 --> 00:07:58,580
Og jeg har tænkt mig at spare
dette som hello.html,

163
00:07:58,580 --> 00:08:00,870
og jeg bare til
sætte det på mit skrivebord.

164
00:08:00,870 --> 00:08:03,520
Og jeg har tænkt mig at gå
videre og klik på Gem.

165
00:08:03,520 --> 00:08:05,806
Og notice-- min Mac på
mindst er råben på mig.

166
00:08:05,806 --> 00:08:07,180
Er du sikker på du vil gøre dette?

167
00:08:07,180 --> 00:08:08,710
Og jeg har tænkt mig at sige, ja, bruge HTML.

168
00:08:08,710 --> 00:08:10,400
Jeg ved bedre i dette tilfælde.

169
00:08:10,400 --> 00:08:14,686
Og nu vil jeg gå til mit skrivebord
hvor jeg har denne fil pludseligt.

170
00:08:14,686 --> 00:08:16,060
Og jeg har tænkt mig at dobbeltklikke på den.

171
00:08:16,060 --> 00:08:18,268
Og du vil opdage, at ved
standard Chrome åbnet.

172
00:08:18,268 --> 00:08:19,996
Det er fordi det er
min standardbrowser.

173
00:08:19,996 --> 00:08:21,370
Og det bare siger, "Hej, verden."

174
00:08:21,370 --> 00:08:23,078
Men det siger "Hej,
verden "to steder.

175
00:08:23,078 --> 00:08:23,979
Bemærk øverst til venstre.

176
00:08:23,979 --> 00:08:25,020
Temmelig svært at brænde den.

177
00:08:25,020 --> 00:08:26,180
Det er stort og fed.

178
00:08:26,180 --> 00:08:30,690
Og hvor ellers virker det
at sige, "hej, verden"?

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

180
00:08:31,470 --> 00:08:33,100
>> DAVID J. MALAN: Ja, selve fanen.

181
00:08:33,100 --> 00:08:35,159
Så når jeg sagde lederen af ​​den
side er alt op top--

182
00:08:35,159 --> 00:08:36,367
og faktisk er dette den titel.

183
00:08:36,367 --> 00:08:37,710
Det er bare i fanen her.

184
00:08:37,710 --> 00:08:40,320
Og jeg kan trække denne fane
ud for ikke at forvirre.

185
00:08:40,320 --> 00:08:43,360
Dette er blot en enkelt fane nu,
og faktisk vi se "goddag, verden"

186
00:08:43,360 --> 00:08:45,970
heroppe og "hej, verden" hernede.

187
00:08:45,970 --> 00:08:47,160
Så temmelig ligetil.

188
00:08:47,160 --> 00:08:49,050
Men det er også forholdsvis enkel.

189
00:08:49,050 --> 00:08:50,440
Og, faktisk, jeg zoomet ind.

190
00:08:50,440 --> 00:08:53,272
Jeg kan ændre skriftstørrelsen bare
at forstørre for tilgængelighed.

191
00:08:53,272 --> 00:08:56,830
Men lad os nu gøre noget
lidt mere interessant.

192
00:08:56,830 --> 00:08:59,760
>> Jeg har tænkt mig at go-- hovsa, så lad
mig komme tilbage til min tekstfil.

193
00:08:59,760 --> 00:09:02,400
Jeg vil tilbage til min
tekstfil, og jeg har tænkt mig

194
00:09:02,400 --> 00:09:06,320
at ændre dette og sige
"Hej, Disney World."

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

196
00:09:07,970 --> 00:09:10,919
Og gå tilbage til min
browser og klik Genindlæs.

197
00:09:10,919 --> 00:09:12,710
Og nu, selvfølgelig, det
siger "Disney World."

198
00:09:12,710 --> 00:09:15,500
Og jeg har tænkt mig at kunstigt zoome
i lige så det er nemmere at se.

199
00:09:15,500 --> 00:09:19,012
Så nu, desværre, jeg slags ønsker
at-- faktisk, det er en Mac-funktion.

200
00:09:19,012 --> 00:09:21,720
Jeg ønsker at klikke på Disney World
og gå et sted som disney.com,

201
00:09:21,720 --> 00:09:23,290
men det virker ikke.

202
00:09:23,290 --> 00:09:26,850
Så en grundlæggende princip i internettet er
hyperlinks, links, gå andre steder.

203
00:09:26,850 --> 00:09:28,390
Så hvordan gør jeg det?

204
00:09:28,390 --> 00:09:34,690
Tja, jeg kunne bare sige,
"Hej, http://www.disney.com."

205
00:09:34,690 --> 00:09:36,110
Gem dette.

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

207
00:09:37,620 --> 00:09:39,400
Men også dette, ikke klikbare.

208
00:09:39,400 --> 00:09:42,930
Og hvad er rart her, selvom
dette er ikke funktionel endnu,

209
00:09:42,930 --> 00:09:45,930
er, at det lader til, at
browser bogstaveligt kun gør

210
00:09:45,930 --> 00:09:46,950
hvad jeg fortæller det til at gøre.

211
00:09:46,950 --> 00:09:50,110
Så hvis jeg bare skrive en URL som denne,
det bare at gå at vise mig URL'en.

212
00:09:50,110 --> 00:09:54,270
Jeg har brug for at bruge tags eller markup
sprog til rent faktisk at fortælle

213
00:09:54,270 --> 00:09:55,621
browseren til at gøre endnu mere.

214
00:09:55,621 --> 00:09:57,870
Så jeg har tænkt mig at gå videre og
slette denne for et øjeblik.

215
00:09:57,870 --> 00:10:00,980
Og jeg har tænkt mig at sige, hey,
browser, starte et anker her,

216
00:10:00,980 --> 00:10:02,650
et link så at sige.

217
00:10:02,650 --> 00:10:07,500
Og hyper-reference, destinationen
af denne anker, bør være denne webadresse.

218
00:10:07,500 --> 00:10:08,750
Og mærke mine citater.

219
00:10:08,750 --> 00:10:11,590
Jeg kunne bruge enkelte anførselstegn, også,
men du er nødt til at være konsekvent,

220
00:10:11,590 --> 00:10:14,270
og jeg vil generelt bare bruge
dobbelte anførselstegn til at holde det simpelt.

221
00:10:14,270 --> 00:10:16,820
Bemærk, at jeg har tænkt mig at lukke tag.

222
00:10:16,820 --> 00:10:21,160
Og så her vil jeg
at sige, "Disney World."

223
00:10:21,160 --> 00:10:26,890
Og nu har jeg brug for nogle symmetry--
åben konsol, / a, lukket beslag.

224
00:10:26,890 --> 00:10:28,090
>> Så hvad har jeg indført?

225
00:10:28,090 --> 00:10:30,100
Vi har haft et par tags allerede.

226
00:10:30,100 --> 00:10:32,410
HTML, Head, titel, Krop,
er alle tags, så at sige,

227
00:10:32,410 --> 00:10:34,280
med åbne og lukkede modstykker.

228
00:10:34,280 --> 00:10:36,530
Men varsel, dette er slags
af fundamentalt forskellige.

229
00:10:36,530 --> 00:10:39,140
Dette er, hvad vi vil kalde
i HTML en attribut.

230
00:10:39,140 --> 00:10:41,451
Og en attribut er
bare en nøgle-værdi par.

231
00:10:41,451 --> 00:10:43,950
Dette er en fælles ting i
computer science-- nøgleværdiparret.

232
00:10:43,950 --> 00:10:45,770
Det er sortering af værktøjet af handelen.

233
00:10:45,770 --> 00:10:47,040
En nøgle og en værdi.

234
00:10:47,040 --> 00:10:49,390
Et ord og derefter nogle
andre ord eller ord.

235
00:10:49,390 --> 00:10:53,790
Og i dette tilfælde, er nøglen href,
og værdien er, at fuld webadresse.

236
00:10:53,790 --> 00:10:57,890
Og hvad en attribut gør, er det
påvirker adfærden hos et tag.

237
00:10:57,890 --> 00:11:01,010
Og i dette tilfælde, er vi nødt til at påvirke
adfærd ankerkode,

238
00:11:01,010 --> 00:11:04,140
fordi vi har brug for at forankre
dette link til et sted.

239
00:11:04,140 --> 00:11:06,960
Og hvordan du gør det er
ved hjælp af attributten.

240
00:11:06,960 --> 00:11:08,970
>> Så jeg har tænkt mig at gå videre
og gem filen nu.

241
00:11:08,970 --> 00:11:11,300
Gå tilbage til min browser og reload.

242
00:11:11,300 --> 00:11:14,580
Og voila, vi nu har
begyndelsen til en legitim webside.

243
00:11:14,580 --> 00:11:18,420
Super-enkel, men hvis jeg svæver over
her-- meddelelse i nederste venstre hjørne,

244
00:11:18,420 --> 00:11:19,830
det er super-small.

245
00:11:19,830 --> 00:11:21,730
Men du kan se www.disney.com.

246
00:11:21,730 --> 00:11:27,076
Og hvis jeg klikker på det, ja dette
piskeris mig væk til disney.com.

247
00:11:27,076 --> 00:11:29,380
Nu, den nysgerrige ting
her er, at det ikke er

248
00:11:29,380 --> 00:11:33,940
den best-- den mest salgbare webadresse, men
det er fint, fordi denne fil ikke

249
00:11:33,940 --> 00:11:35,360
findes på World Wide Web.

250
00:11:35,360 --> 00:11:39,740
Den eksisterer som en lokal fil i tilsyneladende
mine Brugere directory-- / jharvard--

251
00:11:39,740 --> 00:11:41,890
for John Harvard-- / desktop.

252
00:11:41,890 --> 00:11:42,634
Men det har en URL.

253
00:11:42,634 --> 00:11:43,800
Det sker bare at være lokale.

254
00:11:43,800 --> 00:11:47,050
Desværre kan ingen af ​​jer besøger
dette, fordi hvis du skriver denne webadresse,

255
00:11:47,050 --> 00:11:49,980
du ville være at fortælle din browser,
kigge efter en fil kaldet hello.html

256
00:11:49,980 --> 00:11:50,772
på din harddisk.

257
00:11:50,772 --> 00:11:53,271
Og, selvfølgelig, medmindre du har
fulgt sammen manuelt,

258
00:11:53,271 --> 00:11:54,530
er det ikke kommer til at eksistere der.

259
00:11:54,530 --> 00:11:55,190
>> Så det er fint.

260
00:11:55,190 --> 00:11:57,815
Vi har stadig brug for en måde, i sidste ende,
at få denne fil ind i nettet,

261
00:11:57,815 --> 00:12:01,180
men lad os drille hinanden et par
sikkerhedsmæssige konsekvenser af hvad vi lige

262
00:12:01,180 --> 00:12:04,850
så og binde det tilbage til den tidligere
diskussion fra i morges.

263
00:12:04,850 --> 00:12:08,200
Det viser sig, at hvis en
browser bogstaveligt talt bare gør

264
00:12:08,200 --> 00:12:12,560
hvad jeg fortæller det til at gøre, og det synes
at være tilfældet, at et anker tag er

265
00:12:12,560 --> 00:12:17,380
påvirket af værdien af
denne attribut kaldet href

266
00:12:17,380 --> 00:12:20,810
men den viser denne
tekst, ville dette virke

267
00:12:20,810 --> 00:12:26,520
at antyde, at jeg kunne sætte URL'en
begge steder og derefter genindlæse

268
00:12:26,520 --> 00:12:29,100
og nu se webadressen og gå til URL'en.

269
00:12:29,100 --> 00:12:32,680
Bemærk, hvis jeg svæver over nederste venstre,
Jeg faktisk går stadig til disney.com.

270
00:12:32,680 --> 00:12:38,340
>> Så hvis du nogensinde har været
phished-- P-H-I-S-H-E-D--

271
00:12:38,340 --> 00:12:42,820
med en af ​​disse falske e-mails
fra som PayPal din bank,

272
00:12:42,820 --> 00:12:46,470
du har sikkert fået links inde
af e-mailen, som du læser, at

273
00:12:46,470 --> 00:12:49,970
fortæller dig at klikke her for at gå bekræfte
din adgangskode eller bekræfte din fødselsdato

274
00:12:49,970 --> 00:12:53,840
eller social eller noget socialt
engineering dig at afsløre

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

276
00:12:54,920 --> 00:12:57,625
Tja, jeg kunne slags tage
fordel af dette, kunne jeg ikke?

277
00:12:57,625 --> 00:13:01,240
Jeg kunne sige noget
lignende, www.paypal.com.

278
00:13:01,240 --> 00:13:11,340
Og i stedet for disney.com, jeg
kunne gå til, ligesom, badguy.com.

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

280
00:13:12,850 --> 00:13:16,620
Og hvor let er det at narre,
især en ikke-teknisk læser

281
00:13:16,620 --> 00:13:20,649
eller et flygtigt læser
læseren end at klikke på

282
00:13:20,649 --> 00:13:23,940
et link som dette, som, hvis jeg klikker it--
Jeg faktisk ikke ønsker at gå badguy.com.

283
00:13:23,940 --> 00:13:25,398
Jeg ved ikke, hvad er faktisk der.

284
00:13:25,398 --> 00:13:30,080
Så paypal.com, varsel, er
hvad det siger, det kommer til at,

285
00:13:30,080 --> 00:13:33,210
men selvfølgelig, hvis jeg ser ned
super-lav, det er lidt sløret,

286
00:13:33,210 --> 00:13:34,230
men det siger badguy.com.

287
00:13:34,230 --> 00:13:38,644
Det er den eneste fortælle lige nu
at jeg har tænkt mig at det forkerte sted.

288
00:13:38,644 --> 00:13:41,560
Og da jeg sagde tidligere, at bankerne
virkelig bør ikke fremme eller tog

289
00:13:41,560 --> 00:13:44,510
brugere til at klikke links, dette
er blot en manifestation af den.

290
00:13:44,510 --> 00:13:45,430
Og det er så simpelt.

291
00:13:45,430 --> 00:13:48,120
Du er nu en modstander, hvis
du gør noget som dette

292
00:13:48,120 --> 00:13:51,000
og forsøge at narre en bruger
til at besøge din hjemmeside.

293
00:13:51,000 --> 00:13:53,320
Men for nu, vil vi holde
ting pæn og ren.

294
00:13:53,320 --> 00:13:55,640
Vi kommer til at gå videre
og spole disse ændringer.

295
00:13:55,640 --> 00:13:56,530
Genindlæs siden.

296
00:13:56,530 --> 00:13:57,740
Og jeg går tilbage til disney.com.

297
00:13:57,740 --> 00:14:00,660
>> Lad os se, om vi ikke kan drille
dette fra hinanden lidt mere.

298
00:14:00,660 --> 00:14:04,160
Så "hello, Disney World."

299
00:14:04,160 --> 00:14:05,950
Jeg har tænkt mig at sige hernede.

300
00:14:05,950 --> 00:14:08,220
Måske vil jeg gøre nogle rum.

301
00:14:08,220 --> 00:14:12,730
"Vi håber du nyder dit ophold!"

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

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

304
00:14:15,850 --> 00:14:19,010
Det er ikke rea-- det er ikke
hvad jeg hensigten, ikke?

305
00:14:19,010 --> 00:14:21,870
Jeg mener, hvis jeg behandler min tekst
fil som et tekstbehandlingsprogram,

306
00:14:21,870 --> 00:14:24,894
hvad gjorde du håber vil ske her?

307
00:14:24,894 --> 00:14:27,060
Ja, jeg har lyst til der
bør være et linjeskift her,

308
00:14:27,060 --> 00:14:28,799
så det føles buggy på en eller anden måde.

309
00:14:28,799 --> 00:14:31,090
Men det er faktisk bevidst,
fordi lige som før,

310
00:14:31,090 --> 00:14:33,381
browseren er kun vil
Gør hvad du fortæller det til at gøre.

311
00:14:33,381 --> 00:14:34,806
Jeg har ikke fortalt det til at bryde linjer.

312
00:14:34,806 --> 00:14:37,930
Jeg har ikke fortalt det til at bevæge sig ned, selv
dog, intuitivt, jeg føler, at jeg gjorde.

313
00:14:37,930 --> 00:14:39,805
Så det viser sig, vi har brug for
lidt mere markup,

314
00:14:39,805 --> 00:14:41,390
og jeg har tænkt mig at løse dette på følgende måde.

315
00:14:41,390 --> 00:14:46,160
Jeg har tænkt mig at forord dette første goddag
med, hvad der kaldes et afsnit tag.

316
00:14:46,160 --> 00:14:48,920
Og så jeg har tænkt mig at gå videre
og wrap denne anden sætning

317
00:14:48,920 --> 00:14:54,370
i en anden punkt-tag, selv om
de er super-korte afsnit.

318
00:14:54,370 --> 00:14:55,930
Nu vil jeg til at redde.

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

320
00:14:57,160 --> 00:14:59,070
Og nu har vi at
plads, og vi slags

321
00:14:59,070 --> 00:15:01,680
har semantik af
to separate stykker.

322
00:15:01,680 --> 00:15:05,290
>> Det er alt fint og godt, men det ville
være rart at tilføje et billede til denne side,

323
00:15:05,290 --> 00:15:08,710
så jeg har tænkt mig at gå se efter
Mickey Mouse på Google Billeder.

324
00:15:08,710 --> 00:15:12,830
Og bare for sjov, jeg er
kommer til at få fat i dette billede.

325
00:15:12,830 --> 00:15:15,350
Jeg har tænkt mig at gå videre nu, og
grab webadressen på billedet,

326
00:15:15,350 --> 00:15:16,510
selvom der er anderledes
måder at gøre dette.

327
00:15:16,510 --> 00:15:18,520
For nu er jeg bare at kopiere URL'en.

328
00:15:18,520 --> 00:15:24,770
Jeg har tænkt mig at gå tilbage til min tekst
fil, og jeg har tænkt mig at sige her,

329
00:15:24,770 --> 00:15:31,160
img src = quote citat slut
denne webadresse, super-lange.

330
00:15:31,160 --> 00:15:34,580
Og så begrebet en
Billedet er lidt anderledes.

331
00:15:34,580 --> 00:15:38,640
Der er virkelig ingen begrebet start
et billede og slutter et billede,

332
00:15:38,640 --> 00:15:40,630
som en begyndelse tag en ende tag.

333
00:15:40,630 --> 00:15:43,840
Så det føles lidt underligt at
mig semantisk at gøre dette,

334
00:15:43,840 --> 00:15:45,390
at have et tæt-image tag.

335
00:15:45,390 --> 00:15:46,780
Det er ikke forkert.

336
00:15:46,780 --> 00:15:48,840
Det er helt korrekt,
og det er opmuntret,

337
00:15:48,840 --> 00:15:50,870
men der er stenografi notation.

338
00:15:50,870 --> 00:15:53,780
Jeg kan slags samtidigt
åbne og lukke samme tag,

339
00:15:53,780 --> 00:15:55,510
og som vil gøre browseren glad.

340
00:15:55,510 --> 00:15:56,950
Så det er bare en lille smule
mere kortfattet for ting

341
00:15:56,950 --> 00:15:59,408
at begrebsmæssigt virkelig ikke
mening at starte og slutte.

342
00:15:59,408 --> 00:16:01,190
De bare er der, eller de er ikke.

343
00:16:01,190 --> 00:16:06,020
>> Så jeg har tænkt mig at gemme denne og gå tilbage
til min "hej, verden" side og reload.

344
00:16:06,020 --> 00:16:09,880
Og det er lidt ude af kontrol,
fordi billedet er faktisk

345
00:16:09,880 --> 00:16:12,210
lidt stor, men det er OK.

346
00:16:12,210 --> 00:16:13,710
Jeg kunne ændre størrelsen på et program.

347
00:16:13,710 --> 00:16:14,900
Eller ved du hvad.

348
00:16:14,900 --> 00:16:17,350
Blot for at vise, jeg er
vil faktisk sige,

349
00:16:17,350 --> 00:16:21,760
at bredden af ​​denne ting bør
kun være 200 pixels, 200 dots.

350
00:16:21,760 --> 00:16:24,360
Lad mig gå videre og spare
og genindlæse, og nu siden

351
00:16:24,360 --> 00:16:25,690
ser lidt mere rimelig.

352
00:16:25,690 --> 00:16:27,260
Men bemærk mønsteret.

353
00:16:27,260 --> 00:16:30,030
Tja, jeg har sådan lært dig alt
af HTML i en vis forstand, i det mindste

354
00:16:30,030 --> 00:16:33,531
konceptuelt, fordi alle HTML er, er
disse tags-- åbne tags, lukkede tags,

355
00:16:33,531 --> 00:16:35,280
og attributter,
ændre deres adfærd.

356
00:16:35,280 --> 00:16:38,380
Og tilsyneladende hver
tag kan have nul eller en

357
00:16:38,380 --> 00:16:43,005
eller to eller flere attributter, der hver
som gør noget lidt anderledes.

358
00:16:43,005 --> 00:16:44,380
Nu, hvordan kan du vide, hvad der findes?

359
00:16:44,380 --> 00:16:46,800
Du skal bare lytte til nogen
som mig fortælle dig, hvad der eksisterer,

360
00:16:46,800 --> 00:16:50,860
eller du bare Google rundt efter en tutorial
på HTML, og det er virkelig det simpelt.

361
00:16:50,860 --> 00:16:54,030
>> Sandelig, da jeg var en bachelorstuderendes
år siden og lærte HTML,

362
00:16:54,030 --> 00:16:56,530
en af ​​mine matematik undervisning
assistenter lige brugt

363
00:16:56,530 --> 00:16:59,600
en lille smule tid tutoring mig
for ligesom en halv time, en time,

364
00:16:59,600 --> 00:17:00,660
og så var jeg på min vej.

365
00:17:00,660 --> 00:17:03,300
Jeg var på min vej mod at gøre
de mest hæslige hjemmesider nogensinde,

366
00:17:03,300 --> 00:17:05,549
som tilsyneladende har jeg ikke
virkelig skred ud.

367
00:17:05,549 --> 00:17:09,849
Men pointen er, at når du
forstå disse enkle ideas--

368
00:17:09,849 --> 00:17:13,450
hvis mystiske text-- men disse enkle
ideer om at starte en tanke

369
00:17:13,450 --> 00:17:15,960
og lukke en tanke, at holde
alt pænt afbalanceret,

370
00:17:15,960 --> 00:17:19,150
leder noget op, modificere
adfærd af denne tag, det er virkelig alt

371
00:17:19,150 --> 00:17:20,079
der er til det.

372
00:17:20,079 --> 00:17:28,140
Og i virkeligheden, hvis vi nu gå til
noget som google.com-- faktisk,

373
00:17:28,140 --> 00:17:31,920
lad os gå et sted lidt mere
reasonable-- stanford.edu.

374
00:17:31,920 --> 00:17:37,800
Og jeg har tænkt mig at gå til Vis,
Udvikler, Vis kilde.

375
00:17:37,800 --> 00:17:41,400
Det er grimt, men notice--
og jeg vil zoome ind varsel

376
00:17:41,400 --> 00:17:43,432
nogle ting, der er bekendt allerede.

377
00:17:43,432 --> 00:17:45,140
Der er denne her,
som er en browser.

378
00:17:45,140 --> 00:17:46,800
Her kommer HTML5.

379
00:17:46,800 --> 00:17:47,634
Der er HTML.

380
00:17:47,634 --> 00:17:49,550
Tilsyneladende er der en
tilskriver, at jeg ikke

381
00:17:49,550 --> 00:17:51,540
bruge, der angiver den
sprog på siden,

382
00:17:51,540 --> 00:17:54,380
og dette kan hjælpe med automatisk
oversættelse og den slags.

383
00:17:54,380 --> 00:17:55,546
Her er lederen af ​​siden.

384
00:17:55,546 --> 00:17:57,790
Her er titlen på Stanford side.

385
00:17:57,790 --> 00:17:59,832
Der er et tag jeg ikke
taler om yet-- Meta tag.

386
00:17:59,832 --> 00:18:01,540
Det er bare slags
baggrundsinformation.

387
00:18:01,540 --> 00:18:04,210
Det hjælper med SEO, eller
Søgemaskine optimering,

388
00:18:04,210 --> 00:18:06,320
eller Google-søgning resultater eller lignende.

389
00:18:06,320 --> 00:18:09,029
Men hvis vi holde leder, holde
ser, her er Body tag.

390
00:18:09,029 --> 00:18:11,570
Og der er klaser af andre
tags vi har ikke talt om endnu.

391
00:18:11,570 --> 00:18:13,750
Men Div er en for en
opdeling af siden.

392
00:18:13,750 --> 00:18:16,680
Det er ligesom en usynlig rektangel
hvis du slags ønsker at mentalt

393
00:18:16,680 --> 00:18:20,160
opdele din side i
forskellige enheder online.

394
00:18:20,160 --> 00:18:22,650
Og så masser af divs I
se, noget, der hedder klasse,

395
00:18:22,650 --> 00:18:24,440
men vi vil vende tilbage til.

396
00:18:24,440 --> 00:18:26,200
>> Dette er interesting-- Forms.

397
00:18:26,200 --> 00:18:27,730
Formularer er over hele internettet.

398
00:18:27,730 --> 00:18:30,310
Enhver søgefeltet du er
nogensinde brugt er en form.

399
00:18:30,310 --> 00:18:31,490
Og, ja, lad os faktisk se.

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

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

402
00:18:33,910 --> 00:18:37,660
Virkningen af ​​denne formular, uanset
historiske grunde er, at URL.

403
00:18:37,660 --> 00:18:38,840
Metode er "post".

404
00:18:38,840 --> 00:18:44,060
Viser sig, at HTTP-anmodninger kan bruge
verbet "få", ligesom vi så før,

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

406
00:18:45,070 --> 00:18:47,030
Og vil se en forskel
af dette i et øjeblik.

407
00:18:47,030 --> 00:18:48,363
Lad os faktisk se, hvad det er.

408
00:18:48,363 --> 00:18:49,830
Lad mig gå tilbage til Stanford side.

409
00:18:49,830 --> 00:18:53,330
Hvilken form taler de
om, tror du?

410
00:18:53,330 --> 00:18:54,485
Hvad springer ud på dig?

411
00:18:54,485 --> 00:18:54,970
>> PUBLIKUM: søgefeltet.

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

413
00:18:55,845 --> 00:18:58,410
Så op øverst til højre
her er denne søgefeltet.

414
00:18:58,410 --> 00:19:02,441
Og det er, hvordan de implementeret det-- en
tag, der er bogstaveligt talt åbent-beslag formular.

415
00:19:02,441 --> 00:19:03,940
Og så lad os søge efter noget.

416
00:19:03,940 --> 00:19:09,220
Lad os søge efter en kammerat
af mine-- "Nick Parlante."

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

418
00:19:11,380 --> 00:19:13,750
Og selvfølgelig gik det til
en lidt anden URL.

419
00:19:13,750 --> 00:19:15,140
Lad mig gå tilbage her.

420
00:19:15,140 --> 00:19:18,960
Lad os søge efter "kurser."

421
00:19:18,960 --> 00:19:19,460
For pokker.

422
00:19:19,460 --> 00:19:20,484
Gik til en anden URL.

423
00:19:20,484 --> 00:19:23,400
Så Stanfords tilføje nogle magi
at de ikke tager mig til webadressen

424
00:19:23,400 --> 00:19:25,820
at vi så i
handling attribut der.

425
00:19:25,820 --> 00:19:32,480
Men denne formular her gennemføres rent
ved hjælp af denne markup her, disse tags.

426
00:19:32,480 --> 00:19:35,710
Faktisk, her er input for
den type søgning, som du ønsker.

427
00:19:35,710 --> 00:19:38,940
Her er input til
en anden type søgning.

428
00:19:38,940 --> 00:19:41,960
Her er indgangen til selve strengen.

429
00:19:41,960 --> 00:19:45,394
Og så er målet ikke at vikle
vores sind omkring alle disse tags

430
00:19:45,394 --> 00:19:46,060
men bare for at se.

431
00:19:46,060 --> 00:19:48,300
Det er bare at åbne og lukke
tags og søger ting op.

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: [uhørligt]

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

436
00:19:51,925 --> 00:19:53,550
DAVID J. MALAN: Det er et godt spørgsmål.

437
00:19:53,550 --> 00:19:54,660
Det er lidt tricky at se.

438
00:19:54,660 --> 00:19:56,300
Lad mig vende tilbage til det
spørgsmål i blot et par minutter

439
00:19:56,300 --> 00:19:59,000
når vi ser på noget, der hedder
CSS, eller cascading style sheets,

440
00:19:59,000 --> 00:20:02,500
og vi kan forsøge at udlede
så meget fra siden.

441
00:20:02,500 --> 00:20:08,090
Så hvis vi nu tage et kig på google.com,
lad os se hvad deres side ser ud.

442
00:20:08,090 --> 00:20:09,840
Du ville they're-- der er sød i dag.

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

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

445
00:20:12,990 --> 00:20:13,690
Helt færdig.

446
00:20:13,690 --> 00:20:15,260
Okay, så Vis kilde.

447
00:20:15,260 --> 00:20:19,590
Man skulle tro Google har
virkelig rart kildekode.

448
00:20:19,590 --> 00:20:24,970
Så tilsyneladende, hvad der foregår her?

449
00:20:24,970 --> 00:20:27,880
Og faktisk er det ikke engang HTML.

450
00:20:27,880 --> 00:20:30,930
Dette er noget, der hedder JavaScript.

451
00:20:30,930 --> 00:20:32,344
Og lad os bare ved og ved.

452
00:20:32,344 --> 00:20:34,010
Jeg ved ikke engang, hvor siden starter.

453
00:20:34,010 --> 00:20:37,240
Jeg har tænkt mig at bruge Kommando
F, åben bøjle HTML.

454
00:20:37,240 --> 00:20:38,200
Okay, der er det.

455
00:20:38,200 --> 00:20:44,150
Jeg fandt starten af ​​siden, og
der er så mange ting i her.

456
00:20:44,150 --> 00:20:45,310
>> Hvad der rent faktisk sker?

457
00:20:45,310 --> 00:20:47,460
Tja, ved du hvad,
Vi kan rense det op.

458
00:20:47,460 --> 00:20:52,109
Hvis jeg i stedet gå til denne Undersøg
værktøjslinje, denne særlige diagnostisk værktøj,

459
00:20:52,109 --> 00:20:54,150
og gå ikke til Netværk,
hvor vi holde gå i dag,

460
00:20:54,150 --> 00:20:56,420
men hvis jeg går til Elements,
hvad er virkelig rart

461
00:20:56,420 --> 00:20:59,990
er, at en browser har en masse
meget bedre øjne end jeg.

462
00:20:59,990 --> 00:21:02,670
Og browseren kan læse
at rod af en webside,

463
00:21:02,670 --> 00:21:04,700
at HTML mail vi bare
kigget på, og det kan

464
00:21:04,700 --> 00:21:08,340
parse det eller læse og
analysere det og omformatere det

465
00:21:08,340 --> 00:21:09,910
i et dejligt menneske-venlig måde.

466
00:21:09,910 --> 00:21:11,740
Så hvad jeg ser nu
i denne skærm her

467
00:21:11,740 --> 00:21:15,470
under Elements, nøjagtig samme indhold,
men de har indrykket alt,

468
00:21:15,470 --> 00:21:18,140
de har farvelagt det, men
det er nøjagtigt den samme tekst

469
00:21:18,140 --> 00:21:19,620
at jeg downloades fra serveren.

470
00:21:19,620 --> 00:21:23,630
>> Og hvad er rart nu kan jeg se
i kroppen, for instance-- meddelelse,

471
00:21:23,630 --> 00:21:26,480
siden er stadig sammensat
af blot et hoved og en krop,

472
00:21:26,480 --> 00:21:28,660
og jeg kan hierarkisk dykke ind her.

473
00:21:28,660 --> 00:21:32,420
Bemærk, at Google synes at have
at divs-- denne ene og dette ene.

474
00:21:32,420 --> 00:21:33,310
Jeg kan udvide det.

475
00:21:33,310 --> 00:21:35,370
Der er en hel masse andre divs.

476
00:21:35,370 --> 00:21:36,900
Så det er en lidt kompliceret.

477
00:21:36,900 --> 00:21:37,400
Men vent.

478
00:21:37,400 --> 00:21:40,970
Dette synes så meget mere
læsbar, relativt, end dette.

479
00:21:40,970 --> 00:21:43,840
Hvorfor er Google pinligt
selv ved blot at sende

480
00:21:43,840 --> 00:21:50,400
denne enorme rod af kode nogle
sortere blot at gennemføre noget

481
00:21:50,400 --> 00:21:53,640
der ser så enkelt ved første øjekast?

482
00:21:53,640 --> 00:21:55,270
Ligesom, hvorfor de ikke tilføje flere rum?

483
00:21:55,270 --> 00:21:56,811
Hvorfor de ikke ramt Enter ligesom jeg gjorde?

484
00:21:56,811 --> 00:21:59,110
Se hvor god jeg var
ved at skrive en webside.

485
00:21:59,110 --> 00:22:00,680
Jeg ramte Indtast så flittigt.

486
00:22:00,680 --> 00:22:03,760
Jeg indrykket så alt
er så smuk og læsbar.

487
00:22:03,760 --> 00:22:08,463
Hvorfor Google ikke praktiserer det samme?

488
00:22:08,463 --> 00:22:11,409
>> PUBLIKUM: [uhørligt]

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

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

491
00:22:13,180 --> 00:22:14,270
Meget retfærdigt.

492
00:22:14,270 --> 00:22:16,650
De har ikke nogen
person på Google manuelt

493
00:22:16,650 --> 00:22:18,160
opdatere hjemmesiden længere.

494
00:22:18,160 --> 00:22:20,010
Det er ikke 1999 længere.

495
00:22:20,010 --> 00:22:21,140
Så de har software.

496
00:22:21,140 --> 00:22:25,397
De har andre værktøjer, som
generere dynamisk de er HTML.

497
00:22:25,397 --> 00:22:27,480
Selvfølgelig, det selve koden
blev skrevet af mennesker,

498
00:22:27,480 --> 00:22:30,220
men virkeligheden er,
det er ganske rimeligt at sige,

499
00:22:30,220 --> 00:22:33,340
browseren bestemt ikke
pleje, hvor rodet koden er.

500
00:22:33,340 --> 00:22:35,940
Men der er en endnu mere
tvingende teknisk årsag

501
00:22:35,940 --> 00:22:42,580
at Google distribuerer deres HTML
kode i sådan en sjusket, tilsyneladende

502
00:22:42,580 --> 00:22:48,350
overvældende måde hele pakket sammen
med meget lidt way-- meget lidt

503
00:22:48,350 --> 00:22:51,274
i vejen for formatering som jeg gjorde.

504
00:22:51,274 --> 00:22:52,570
>> PUBLIKUM: [uhørligt]

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

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

507
00:22:54,040 --> 00:22:55,680
Og hvad sagde du, Lydia?

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

509
00:22:56,240 --> 00:22:57,281
Hvorfor hurtigere?

510
00:22:57,281 --> 00:22:58,156
PUBLIKUM: [uhørligt]

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

512
00:23:00,522 --> 00:23:02,230
DAVID J. MALAN: Der er
ingen plads til at læse.

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

514
00:23:02,730 --> 00:23:04,560
Så tænk over, hvad et rum er.

515
00:23:04,560 --> 00:23:08,394
Så hvert tegn på tastaturet tager
en vis mængde af plads til at repræsentere,

516
00:23:08,394 --> 00:23:10,560
enten fysisk, ligesom det
fylder så meget plads,

517
00:23:10,560 --> 00:23:13,250
eller anden måde under
hætte, der kræver hukommelse.

518
00:23:13,250 --> 00:23:15,740
Og som en aside-- og vi vil
tale mere om denne tomorrow--

519
00:23:15,740 --> 00:23:19,930
hvert tegn på tastaturet
kræver typisk 8 bit eller en byte.

520
00:23:19,930 --> 00:23:23,360
Så et mønster af 8 nuller eller
dem, eller kun 1 byte, som vi

521
00:23:23,360 --> 00:23:24,720
mennesker vil typisk sige.

522
00:23:24,720 --> 00:23:27,690
Så det er små, men
det er stadig ikke-nul.

523
00:23:27,690 --> 00:23:29,940
Det er stadig en vis mængde af plads.

524
00:23:29,940 --> 00:23:36,082
Så hvis en ingeniør eller Google hits
mellemrumstasten bare én gang, og formoder

525
00:23:36,082 --> 00:23:38,540
Google-- det er super-popular--
antage, at en milliard mennesker

526
00:23:38,540 --> 00:23:40,780
besøge deres hjemmeside en dag,
eller nogle antal mennesker

527
00:23:40,780 --> 00:23:43,290
besøge hjemmesiden en
milliarder gange om dagen,

528
00:23:43,290 --> 00:23:48,890
hvor mange ekstra bytes har at
software ingeniør bare koste Google

529
00:23:48,890 --> 00:23:51,310
ved at ramme hans eller hendes mellemrumstasten én gang?

530
00:23:51,310 --> 00:23:52,692
>> PUBLIKUM: [uhørligt]

531
00:23:52,692 --> 00:23:54,150
DAVID J. MALAN: Ikke helt så slemt.

532
00:23:54,150 --> 00:23:57,070
Blot én byte gange milliard.

533
00:23:57,070 --> 00:23:57,871
Så en--

534
00:23:57,871 --> 00:23:59,120
PUBLIKUM: 8 milliarder gigabytes.

535
00:23:59,120 --> 00:24:00,370
DAVID J. MALAN: Ikke 8 mia.

536
00:24:00,370 --> 00:24:01,240
8 milliarder bytes.

537
00:24:01,240 --> 00:24:02,410
Men en gigabyte.

538
00:24:02,410 --> 00:24:04,080
1 gigabyte ville være måleenheden.

539
00:24:04,080 --> 00:24:08,240
Hvis han eller hun gør to
rum, 2 gigabytes.

540
00:24:08,240 --> 00:24:09,030
Tre gigabyte.

541
00:24:09,030 --> 00:24:09,530
Højre?

542
00:24:09,530 --> 00:24:11,860
Det skalaer dyrt.

543
00:24:11,860 --> 00:24:16,150
Og så i tilfælde som Google,
der, indrømmet, er ekstreme tilfælde,

544
00:24:16,150 --> 00:24:21,450
der er andre problemer, der opstår bare
ved at gøre meget rimelige beslutninger

545
00:24:21,450 --> 00:24:25,744
eller tage meget enkle menneskelige handlinger,
fordi det har denne forstørret virkning.

546
00:24:25,744 --> 00:24:27,660
Så en af ​​grundene
dette ser så komprimeret

547
00:24:27,660 --> 00:24:30,660
er præcis som Victoria said-- det var
blot genereret af computere alligevel.

548
00:24:30,660 --> 00:24:31,900
Så nogen big deal.

549
00:24:31,900 --> 00:24:33,309
Lad browseren regne det ud.

550
00:24:33,309 --> 00:24:35,350
Men det er også bevidst
har ikke meget plads,

551
00:24:35,350 --> 00:24:36,766
fordi rummet ikke er nødvendig.

552
00:24:36,766 --> 00:24:38,250
Og pladsen faktisk koster penge.

553
00:24:38,250 --> 00:24:40,670
>> Det enten koster tid,
fordi bare at skubbe

554
00:24:40,670 --> 00:24:44,670
at langt flere data ud af
google.com hovedkvarter bare

555
00:24:44,670 --> 00:24:47,710
har fået til at tage en vis mængde af
tid, selvom det er millisekunder

556
00:24:47,710 --> 00:24:51,190
eller mikrosekunder, men der tilføjer op
i så mange brugere, eller mere sandsynligt,

557
00:24:51,190 --> 00:24:52,270
det sandsynligvis koster penge.

558
00:24:52,270 --> 00:24:54,690
Google sandsynligvis forbindelse til
en anden i verden, en

559
00:24:54,690 --> 00:24:56,398
af dem peering
point, og hvis de har

560
00:24:56,398 --> 00:24:59,880
anden form for økonomisk forhold
hvorved deres data koster penge,

561
00:24:59,880 --> 00:25:01,730
de kan lige så godt
minimere hvor meget data

562
00:25:01,730 --> 00:25:04,530
de er spytte ud på
deres internetforbindelse.

563
00:25:04,530 --> 00:25:07,630
>> Så det sjove, men i sidste ende,
eller måske den beroligende ting,

564
00:25:07,630 --> 00:25:11,030
er, at selvom det ser forfærdeligt
overvældende, ved slutningen af ​​dagen,

565
00:25:11,030 --> 00:25:16,750
det er stadig præcis de samme principper som
denne meget enkle side her af en HTML

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

567
00:25:17,390 --> 00:25:20,610
Så bare for at opsummere og så du
har en kanonisk version, hvis du ikke var

568
00:25:20,610 --> 00:25:25,900
følgende sammen ved valg her, her
kan være den mest enkle af websider,

569
00:25:25,900 --> 00:25:28,240
så noget at lege med måske senere.

570
00:25:28,240 --> 00:25:30,790
>> Nå, lad os indføre en
par andre ideer nu.

571
00:25:30,790 --> 00:25:33,420
Vi er ved at indføre
noget, der hedder en stil tag.

572
00:25:33,420 --> 00:25:38,110
Vi kan stilisere denne side
i mere interessante måder.

573
00:25:38,110 --> 00:25:40,860
Så mens HTML e-mail
handler om mærkning op

574
00:25:40,860 --> 00:25:44,470
dataene, en slags specificere til en
browser, hvordan man strukturere dataene,

575
00:25:44,470 --> 00:25:48,110
hvor at sætte det, CSS, eller
cascading style sheets,

576
00:25:48,110 --> 00:25:52,640
er et andet sprog, som
generelt bliver blandet med HTML

577
00:25:52,640 --> 00:25:55,670
som vi vil see--, men vi kan rense
at i at moment-- der tager

578
00:25:55,670 --> 00:25:59,850
det endelige mile, og det stylizes det.

579
00:25:59,850 --> 00:26:02,460
Det bliver farverne lige højre,
skrifttypen størrelser lige højre,

580
00:26:02,460 --> 00:26:03,860
positioneringen lige højre.

581
00:26:03,860 --> 00:26:06,510
Det handler om æstetik
eller formatering, ikke om

582
00:26:06,510 --> 00:26:08,330
den grundlæggende data selv.

583
00:26:08,330 --> 00:26:11,390
Og den nemmeste måde at vise
dette er måske ved eksempel.

584
00:26:11,390 --> 00:26:15,320
Så jeg har tænkt mig at gå over
til min simpel tekstfil.

585
00:26:15,320 --> 00:26:17,970
Og på bare et øjeblik, vil jeg
gå os gennem processen

586
00:26:17,970 --> 00:26:19,360
at gøre dette selv.

587
00:26:19,360 --> 00:26:23,310
>> Jeg har tænkt mig at gå tilbage til min fil
her og genindlæse siden bare

588
00:26:23,310 --> 00:26:25,800
at bekræfte, hvad det ligner.

589
00:26:25,800 --> 00:26:27,190
Det er der vi er på nu.

590
00:26:27,190 --> 00:26:31,170
Jeg har lyst til børn ville nyde
have nogle farver til denne webside.

591
00:26:31,170 --> 00:26:34,480
Så jeg har tænkt mig at gå op her
ind i hovedet på siden.

592
00:26:34,480 --> 00:26:38,130
Og jeg har tænkt mig at gøre stil, / stil.

593
00:26:38,130 --> 00:26:44,060
Og så inde i dette, vil jeg
at fortælle kroppen af ​​min page--

594
00:26:44,060 --> 00:26:46,870
og dette formatering er, på
første øjekast, måske lidt

595
00:26:46,870 --> 00:26:49,400
mærkeligt, men konventionelle.

596
00:26:49,400 --> 00:26:55,010
Jeg har tænkt mig at sige, at baggrunden
Farven på denne side skal være grøn.

597
00:26:55,010 --> 00:26:57,960
Og det er desværre
slags ikke det bedste design.

598
00:26:57,960 --> 00:27:00,710
Bemærk, at tidligere
i verden af ​​HTML,

599
00:27:00,710 --> 00:27:03,190
Jeg sagde, at attributter
er disse nøgleværdipar.

600
00:27:03,190 --> 00:27:05,760
Noget lig citat
citat slut "noget."

601
00:27:05,760 --> 00:27:08,810
I en verden af ​​CSS, som var
designet af nogle forskellige mennesker,

602
00:27:08,810 --> 00:27:11,020
de besluttede, at, i deres
verden, nøgleværdipar

603
00:27:11,020 --> 00:27:13,920
ville være ord kolon noget.

604
00:27:13,920 --> 00:27:15,220
Så det er den samme idé, selv om.

605
00:27:15,220 --> 00:27:18,620
Det er at knytte en værdi
med nogle nøgle, en eller anden måde

606
00:27:18,620 --> 00:27:20,330
påvirker adfærden på denne side.

607
00:27:20,330 --> 00:27:21,901
>> Og du kan sikkert gætte.

608
00:27:21,901 --> 00:27:24,150
Hvad er det sandsynligvis vil
at gøre, selv om du aldrig har

609
00:27:24,150 --> 00:27:27,867
set HTML eller CSS før?

610
00:27:27,867 --> 00:27:29,450
PUBLIKUM: Skift baggrundsfarve.

611
00:27:29,450 --> 00:27:30,560
DAVID J. MALAN: Ja,
ændre baggrundsfarven.

612
00:27:30,560 --> 00:27:33,280
Og specifikt
baggrundsfarve af kroppen.

613
00:27:33,280 --> 00:27:36,290
Men for så vidt som
organ for nu er den web

614
00:27:36,290 --> 00:27:38,870
page-- det er det eneste,
under titellinjen really--

615
00:27:38,870 --> 00:27:40,870
det sandsynligvis kommer til at
påvirke det samme.

616
00:27:40,870 --> 00:27:41,430
Så lad os se.

617
00:27:41,430 --> 00:27:42,490
Lad os gemme denne.

618
00:27:42,490 --> 00:27:44,310
Gå her og genindlæse.

619
00:27:44,310 --> 00:27:46,140
Det er temmelig hæslige.

620
00:27:46,140 --> 00:27:48,070
Og hvad der foregår
her er en bivirkning.

621
00:27:48,070 --> 00:27:49,850
Jeg valgte billedet tilfældigt.

622
00:27:49,850 --> 00:27:53,305
Hvorfor er det grønne ikke
gennemsyrer bag Mickey?

623
00:27:53,305 --> 00:27:54,180
PUBLIKUM: [uhørligt]

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

625
00:27:56,880 --> 00:27:57,880
DAVID J. MALAN: Præcis.

626
00:27:57,880 --> 00:28:01,750
Det viser sig, at billederne, pretty
set alle billeder, som vi kan bruge,

627
00:28:01,750 --> 00:28:03,670
er alle rectangles-- af rektangler.

628
00:28:03,670 --> 00:28:07,710
Selv om Mickey har nogle kurver
til sig selv og har en baggrund,

629
00:28:07,710 --> 00:28:09,330
at baggrunden skal være noget.

630
00:28:09,330 --> 00:28:10,280
Det skal være hvid.

631
00:28:10,280 --> 00:28:11,910
Det skal være sorte eller noget andet.

632
00:28:11,910 --> 00:28:13,650
Det kan være transparent.

633
00:28:13,650 --> 00:28:16,100
Og i virkeligheden, jeg kunne
åbne Mickey Mouse her

634
00:28:16,100 --> 00:28:18,590
i et program kaldet Photoshop
eller noget lignende

635
00:28:18,590 --> 00:28:21,176
og ændre alt dette hvide
baggrunden til gennemsigtige,

636
00:28:21,176 --> 00:28:22,550
så den grønne ville skinne igennem.

637
00:28:22,550 --> 00:28:25,980
Men det er noget, jeg skulle
at spørge mig selv eller en grafiker

638
00:28:25,980 --> 00:28:28,130
eller en designer på min
selskab, for eksempel,

639
00:28:28,130 --> 00:28:31,490
at gøre, især da jeg lige
lånt denne ene fra internettet.

640
00:28:31,490 --> 00:28:33,030
Men det er, hvorfor dette sker.

641
00:28:33,030 --> 00:28:34,980
>> Så hvad der ellers måtte vi ønsker at gøre?

642
00:28:34,980 --> 00:28:41,040
Nå, vi måske ønsker at sige, at vi
virkelig håber du nyder dit ophold.

643
00:28:41,040 --> 00:28:44,150
Og for vægt, jeg vil
at gøre dette stærke,

644
00:28:44,150 --> 00:28:48,310
og så jeg vil sige åben stærk og
luk stærk og læg.

645
00:28:48,310 --> 00:28:50,320
Og det er lidt svært
at se på projektoren

646
00:28:50,320 --> 00:28:53,250
men måske virkelig nu
springer ud på dig lidt mere.

647
00:28:53,250 --> 00:28:56,180
Så du kan tilføje kursiv i denne
måde, fed vendende på denne måde.

648
00:28:56,180 --> 00:28:57,500
Vi kunne ændre farverne.

649
00:28:57,500 --> 00:29:01,610
I virkeligheden, bare for sjov, jeg er
kommer til at gå videre og gøre dette.

650
00:29:01,610 --> 00:29:05,120
Jeg kan ikke rigtig lide, hvordan min
stykker er så tæt sammen,

651
00:29:05,120 --> 00:29:06,870
så jeg kunne gøre noget som dette.

652
00:29:06,870 --> 00:29:13,310
Jeg har tænkt mig at fortælle browseren,
ændre hvert afsnit tag til have,

653
00:29:13,310 --> 00:29:16,952
lad os say-- faktisk, ved du hvad,
lad os tilpasse den tekst-align, center.

654
00:29:16,952 --> 00:29:19,410
Og igen, jeg ved det eneste
fordi nogen lærte mig det

655
00:29:19,410 --> 00:29:21,118
eller jeg kiggede det op i
en online reference.

656
00:29:21,118 --> 00:29:22,450
Så lad mig gemme denne.

657
00:29:22,450 --> 00:29:25,070
Og, ah, nu har jeg
centreret aftrykket der.

658
00:29:25,070 --> 00:29:28,490
Og faktisk, ved du hvad, hvis
Jeg flytter mit billede ind i et afsnit

659
00:29:28,490 --> 00:29:34,510
tag-- så en tredje afsnit,
selvom det er ikke tekst.

660
00:29:34,510 --> 00:29:36,917
Lad os gemme det og genindlæse.

661
00:29:36,917 --> 00:29:40,000
Nu siden er begyndt at se slags
of-- Jeg mener, det er stadig temmelig grim,

662
00:29:40,000 --> 00:29:43,180
men i det mindste ser det ud som jeg brugte
to minutter i stedet på et minut

663
00:29:43,180 --> 00:29:43,950
gør det.

664
00:29:43,950 --> 00:29:47,200
>> Og så, trinvist, kan vi gøre
disse æstetiske ændringer nu til siden?

665
00:29:47,200 --> 00:29:50,860
Jeg har ikke rigtig ændret data i
bortset tilføje ordet virkelig side.

666
00:29:50,860 --> 00:29:52,650
Jeg har tilføjet metadata, hvis du vil.

667
00:29:52,650 --> 00:29:54,830
Hey, browser, gør
ordet "virkelig" fed.

668
00:29:54,830 --> 00:29:56,940
Men data er ikke stærk.

669
00:29:56,940 --> 00:29:57,830
Det er metadata.

670
00:29:57,830 --> 00:29:59,410
Dataene er "virkelig".

671
00:29:59,410 --> 00:30:02,200
Så vi har stadig nogle af
de samme begreber som før.

672
00:30:02,200 --> 00:30:05,990
Nu, selvfølgelig, er dette ikke på nettet,
så jeg har tænkt mig at gøre et sidste trin her.

673
00:30:05,990 --> 00:30:10,300
>> Jeg har tænkt mig at gå til hello.html
og bare markere og kopiere dette.

674
00:30:10,300 --> 00:30:12,285
Og nu vil jeg
gå i Cloud9, som

675
00:30:12,285 --> 00:30:13,910
Jeg vil lede dig gennem på bare et øjeblik.

676
00:30:13,910 --> 00:30:17,080
Og odds er du vil snart være, hvis
ikke allerede på en skærm som denne.

677
00:30:17,080 --> 00:30:21,080
Og lad mig bare give dig en hurtig
rundtur i hvad Cloud9 egentlig er.

678
00:30:21,080 --> 00:30:26,590
Så igen cloud 9 er
denne sky-baseret tjeneste

679
00:30:26,590 --> 00:30:30,580
der giver dig og mig illusionen
for at have vores egen virtuelle maskine

680
00:30:30,580 --> 00:30:33,090
i skyen, teknisk
en container i skyen,

681
00:30:33,090 --> 00:30:35,160
at vi har fuld
administrative privilegier til.

682
00:30:35,160 --> 00:30:37,130
Så i teorien, ingen
steder i verden har

683
00:30:37,130 --> 00:30:39,152
adgang til skærmen er jeg
kigger på lige nu,

684
00:30:39,152 --> 00:30:40,860
måske bortset fra de mennesker
der kører stedet,

685
00:30:40,860 --> 00:30:43,470
fordi teknisk de har
fysisk adgang og så videre.

686
00:30:43,470 --> 00:30:44,740
>> Så hvad ser vi i dette miljø?

687
00:30:44,740 --> 00:30:46,230
Jeg har tænkt mig at zoome ud,
fordi det er lidt lille.

688
00:30:46,230 --> 00:30:48,104
Og lad mig påpege løbet
her for et øjeblik.

689
00:30:48,104 --> 00:30:53,210
På venstre side af min og din
skærm, der er en fil browser til venstre.

690
00:30:53,210 --> 00:30:55,362
Så ligner i ånden
til Mac OS og Windows.

691
00:30:55,362 --> 00:30:57,070
Disse er alle af
filer i min konto.

692
00:30:57,070 --> 00:30:59,250
Og som standard, hvis din
konto er som mit,

693
00:30:59,250 --> 00:31:05,090
du vil se eller snart se
helloworld.html og readme.md.

694
00:31:05,090 --> 00:31:07,950
Over her til højre, det er
hvor mine tekstfiler kommer til at gå.

695
00:31:07,950 --> 00:31:11,620
Hvis du nogensinde har brugt Microsoft
Word eller Notesblok eller TextEdit,

696
00:31:11,620 --> 00:31:14,100
dette er ord min redigering
af filer kommer til at gå.

697
00:31:14,100 --> 00:31:16,540
Og så den mest mystiske
træk ved dette miljø

698
00:31:16,540 --> 00:31:20,100
at vi ikke virkelig bliver nødt til at bruge, er
hernede kaldes et terminalvindue.

699
00:31:20,100 --> 00:31:23,390
Hvis du har brugt DOS fra
Gårsdagens, det er Linux

700
00:31:23,390 --> 00:31:25,450
eller Linux svarer til DOS.

701
00:31:25,450 --> 00:31:28,190
Det er en tekstbaseret interface--
ingen museklik, ingen trække.

702
00:31:28,190 --> 00:31:30,770
Alt hvad du kan gøre er at skrive
kommandoer, men disse kommandoer

703
00:31:30,770 --> 00:31:34,400
kan oprette filer, flytte filer, åbne
mapper, tæt telefonbøger,

704
00:31:34,400 --> 00:31:35,740
gøre en række ting.

705
00:31:35,740 --> 00:31:38,060
Men for nu, vil vi bare
bruge vores tid heroppe.

706
00:31:38,060 --> 00:31:39,050
>> Og så lad os gøre det.

707
00:31:39,050 --> 00:31:41,008
Hvis du er i denne
miljø, som du bør

708
00:31:41,008 --> 00:31:45,900
være, hvis du har oprettet et arbejdsområde
allerede, gå videre og bare gå op

709
00:31:45,900 --> 00:31:48,690
til Fil, Ny et øjeblik.

710
00:31:48,690 --> 00:31:51,740
Og det vil give dig en ny
Fanen lige her i midten.

711
00:31:51,740 --> 00:31:54,250
Og jeg bare-- og lad os se
gå videre og gøre dette.

712
00:31:54,250 --> 00:31:59,910
Lad os gå videre og nu gør Fil, Gem
og gå videre og kalder det hello.html,

713
00:31:59,910 --> 00:32:02,740
ikke at forveksle med
helloworld.html, som

714
00:32:02,740 --> 00:32:06,910
fulgte med din nye gratis konto,
som er blot en prøve-fil.

715
00:32:06,910 --> 00:32:11,020
Du vil se det pludselig dukke,
mest sandsynligt på venstre side,

716
00:32:11,020 --> 00:32:12,810
og fanen vil stadig være åben.

717
00:32:12,810 --> 00:32:21,300
Og lad mig opfordre dig nu for at genskabe
denne fil eller nogle varianter deraf.

718
00:32:21,300 --> 00:32:24,607
Og hvis du kan ikke helt se det på
skærmen, er identisk til objektglassene

719
00:32:24,607 --> 00:32:26,190
at du sandsynligvis have i en anden fane.

720
00:32:26,190 --> 00:32:29,296
>> Så kort, gør din første webside,
gemme det, og derefter i et øjeblik,

721
00:32:29,296 --> 00:32:31,170
Jeg vil vise dig, hvordan du
kan faktisk se disse.

722
00:32:31,170 --> 00:32:32,970
Men ændre mindst én ting.

723
00:32:32,970 --> 00:32:35,400
Skift helloworld til
noget af dit eget valg,

724
00:32:35,400 --> 00:32:39,821
så du er overbevist om, at det er din
fil og ikke den, jeg lige har oprettet.

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

726
00:32:40,320 --> 00:32:43,804
Og når du ready-- nej
rush-- når du er klar,

727
00:32:43,804 --> 00:32:46,220
gå videre og gemme filen
når du har foretaget disse ændringer.

728
00:32:46,220 --> 00:32:49,540
Og hvis du klikker på
Kør knap op toppen, dette

729
00:32:49,540 --> 00:32:53,610
skal åbne en ny fane, der vil fortælle
dig, hvad URL du kan besøge din fil på,

730
00:32:53,610 --> 00:32:56,380
men det kan tage et øjeblik at
quote citat slut "start Apache", som

731
00:32:56,380 --> 00:32:58,820
er navnet på webserveren.

732
00:32:58,820 --> 00:33:02,430
Så vær omhyggelig med at gøre præcis
hvad der er i filen til sidst.

733
00:33:02,430 --> 00:33:04,610
Så lige nu, vil jeg zoome ind.

734
00:33:04,610 --> 00:33:07,780
Hvis jeg begynder at skrive
open-beslag HTML, varsel

735
00:33:07,780 --> 00:33:09,650
det er at spørge mig at afslutte min tanke.

736
00:33:09,650 --> 00:33:13,750
Og hvis jeg færdig min tanke, det
giver mig automatisk afsluttende tag.

737
00:33:13,750 --> 00:33:17,190
Men forventningen er så vil jeg ramt
Enter, og derefter flytte inde der

738
00:33:17,190 --> 00:33:21,180
og gør hovedet inde og
så jeg gør kroppen indeni.

739
00:33:21,180 --> 00:33:24,430
Og det er lidt underligt i starten,
fordi det gør arbejdet for dig,

740
00:33:24,430 --> 00:33:27,110
men indse, at i sidste ende
det sparer dig tastetryk.

741
00:33:27,110 --> 00:33:30,500
Og faktisk en meget fælles træk ved
programmering miljøer i disse dage

742
00:33:30,500 --> 00:33:33,260
både for webudvikling ligesom
dette, og faktisk programmering,

743
00:33:33,260 --> 00:33:36,960
som vi vil tale om i morgen,
er disse auto-complete funktioner,

744
00:33:36,960 --> 00:33:39,710
ting, der bare giver et
programmør eller en designer

745
00:33:39,710 --> 00:33:42,010
at skrive færre tastetryk til
opnå det samme.

746
00:33:42,010 --> 00:33:43,176
Nogle gange er det godt, selv om.

747
00:33:43,176 --> 00:33:44,560
Nogle gange er det bare irriterende.

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

749
00:33:49,290 --> 00:33:54,010
Og igen, når du har transskriberet
dias eller nogle variant deraf

750
00:33:54,010 --> 00:33:57,360
du kan klikke på knappen Kør op øverst.

751
00:33:57,360 --> 00:33:59,910
Og så i bunden
vindue, vil du blive informeret

752
00:33:59,910 --> 00:34:04,290
på, hvad URL kan besøge din webside.

753
00:34:04,290 --> 00:34:08,790
Mine, for eksempel, er ved
business-daharvard.c9users.io

754
00:34:08,790 --> 00:34:11,480
og så videre.

755
00:34:11,480 --> 00:34:14,580
Okay, så lad mig-- nogen spørgsmål?

756
00:34:14,580 --> 00:34:19,460
Eventuelle andre spørgsmål om blot at få
dette arbejde, før vi tilføje funktioner?

757
00:34:19,460 --> 00:34:21,692
Og lad mig foreslå, bare
at få folk comfortable--

758
00:34:21,692 --> 00:34:24,400
fordi det er én ting at bare
copy-paste blindt hvad jeg har gjort.

759
00:34:24,400 --> 00:34:27,177
Men lige så folk kæmper
med mindst en to-do,

760
00:34:27,177 --> 00:34:28,510
Jeg har tænkt mig at tænde noget musik.

761
00:34:28,510 --> 00:34:32,630
Jeg har tænkt mig at foreslå en liste over
ting kan du potentielt tilføje.

762
00:34:32,630 --> 00:34:34,086
Og du kan helt sikkert bruge Google.

763
00:34:34,086 --> 00:34:36,210
Og hvorfor gør vi ikke bare
foreslå, at du prøver at løse

764
00:34:36,210 --> 00:34:38,710
mindst et særligt problem her.

765
00:34:38,710 --> 00:34:45,090
Så med hensyn til tags,
lad mig genbruge denne her.

766
00:34:45,090 --> 00:34:48,280
>> Faktisk, lad mig sætte
det i en tekstform.

767
00:34:48,280 --> 00:35:02,380
Lad os sige, at blandt de tags vi måske
bruge her er nogle tags herovre.

768
00:35:02,380 --> 00:35:06,090
Vi har set det afsnit tag.

769
00:35:06,090 --> 00:35:07,850
Nu det vil automatisk udfyldning.

770
00:35:07,850 --> 00:35:12,220
§ tag, anker tag.

771
00:35:12,220 --> 00:35:15,250
Lad os sige, at du vil
gøre noget større,

772
00:35:15,250 --> 00:35:19,480
så du måske like--
span tag kan hjælpe.

773
00:35:19,480 --> 00:35:23,010
Nå, du måske har brug for hjælp
for at i bare et øjeblik.

774
00:35:23,010 --> 00:35:24,830
Vi har set div.

775
00:35:24,830 --> 00:35:26,170
Du vil se, at der er bord.

776
00:35:26,170 --> 00:35:27,928
Der noget, der hedder 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
Kom tilbage til om et øjeblik.

780
00:35:34,770 --> 00:35:36,590
Hvad andet kan være praktisk?

781
00:35:36,590 --> 00:35:38,310
Der er stærk.

782
00:35:38,310 --> 00:35:43,640
Der er vægt, eller rettere em.

783
00:35:43,640 --> 00:35:50,110
There's-- hvad der ellers
måske du har lyst til her?

784
00:35:50,110 --> 00:35:51,930
Nå, vi vil tage et
se på det sammen.

785
00:35:51,930 --> 00:35:53,230
Form, som vi har set.

786
00:35:53,230 --> 00:35:54,130
Der er formular.

787
00:35:54,130 --> 00:35:56,500
Der er input og et par andre.

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

789
00:35:58,924 --> 00:36:00,090
Okay, så lad os gøre det.

790
00:36:00,090 --> 00:36:02,330
Sådan besvares et Victorias
spørgsmål, lad mig først

791
00:36:02,330 --> 00:36:05,020
bare sørg for, at alle er
stand til at få deres hej arbejder.

792
00:36:05,020 --> 00:36:06,900
Så lad mig introducere
en par andre ideer.

793
00:36:06,900 --> 00:36:09,209
Så vil vi lade folk løser
nogle problemer på egen hånd.

794
00:36:09,209 --> 00:36:11,500
Så vil vi faktisk kommer tilbage
til begrebet en formular,

795
00:36:11,500 --> 00:36:14,950
og vi vil faktisk re-implementere
sammen front-end interface,

796
00:36:14,950 --> 00:36:16,450
så at sige, for Google selv.

797
00:36:16,450 --> 00:36:19,700
Vi bruger Google som bagenden og lad
dem gøre det hårde arbejde, det søgende,

798
00:36:19,700 --> 00:36:22,760
men vi vil genskabe den forreste ende
Google og søgeskemaet

799
00:36:22,760 --> 00:36:24,520
at de har på deres egen hjemmeside.

800
00:36:24,520 --> 00:36:27,050
Og så vi vil vende tilbage til
disse tags på blot et øjeblik.

801
00:36:27,050 --> 00:36:30,270
>> Så dette var, hvad jeg
foreslået et øjeblik siden.

802
00:36:30,270 --> 00:36:33,940
Vi kan tilføje stilisering til en
side indersiden af ​​denne stil tag,

803
00:36:33,940 --> 00:36:36,950
og vi kan stilisere baggrunden
farve, tekstjusteringen,

804
00:36:36,950 --> 00:36:39,000
uanset om det er centrum eller til venstre eller højre.

805
00:36:39,000 --> 00:36:41,630
Men meget hurtigt du ville
finde eller en webdesigner

806
00:36:41,630 --> 00:36:44,060
ville finde, at dette
bliver lidt uhåndterlig,

807
00:36:44,060 --> 00:36:48,330
fordi du laver, hvad der er
kaldet blande indhold

808
00:36:48,330 --> 00:36:50,120
med præsentation heraf.

809
00:36:50,120 --> 00:36:53,756
Du blande dine data
og æstetik deraf.

810
00:36:53,756 --> 00:36:56,380
Og i virkeligheden, hvis du overveje
hvad der kommer til at ske i løbet af time--

811
00:36:56,380 --> 00:36:58,350
dette er en meget lille
webside, selvfølgelig.

812
00:36:58,350 --> 00:37:01,590
Men hvis jeg tilføje indhold til denne side
og jeg tilføje stil til denne side,

813
00:37:01,590 --> 00:37:04,650
siden bliver meget hurtigt
længere og længere og længere.

814
00:37:04,650 --> 00:37:07,510
Og formoder, at jeg vil
have en anden webside,

815
00:37:07,510 --> 00:37:09,010
deler nogle af disse attributter.

816
00:37:09,010 --> 00:37:12,350
Antag min anden webside for min
site-- også, jeg vil have det hele center,

817
00:37:12,350 --> 00:37:14,960
og jeg vil også alt
med en grøn baggrund.

818
00:37:14,960 --> 00:37:17,940
Jeg er temmelig meget nødt til at
kopiere og indsætte nogle af disse linjer

819
00:37:17,940 --> 00:37:20,730
ind i den anden fil, som føles fint.

820
00:37:20,730 --> 00:37:22,030
Det vil løse problemet.

821
00:37:22,030 --> 00:37:26,060
>> Men hvad hvis jeg vil have en tredje side
eller en 30-side eller en 40th side?

822
00:37:26,060 --> 00:37:28,730
Nu vil jeg være at kopiere og
indsætte en masse duplo kode

823
00:37:28,730 --> 00:37:30,430
i flere filer.

824
00:37:30,430 --> 00:37:32,600
Og så antage, at
Jeg beslutter eller jeg har fået fortalt,

825
00:37:32,600 --> 00:37:34,780
hey, vi bruger ikke en
grøn baggrund længere.

826
00:37:34,780 --> 00:37:36,380
Vi kommer til at begynde at bruge orange.

827
00:37:36,380 --> 00:37:38,690
Hvad har du at ændre?

828
00:37:38,690 --> 00:37:42,900
Nå, er du nødt til at ændre den stil
fra grøn til orange, hvor mange steder?

829
00:37:42,900 --> 00:37:44,920
Ligesom 30 eller 40 pladser.

830
00:37:44,920 --> 00:37:45,900
Det er trættende.

831
00:37:45,900 --> 00:37:47,039
Det er udsat for fejl.

832
00:37:47,039 --> 00:37:49,580
Der er en række årsager
hvor du ikke ønsker at fremkalde

833
00:37:49,580 --> 00:37:51,840
den slags smerte for dig selv.

834
00:37:51,840 --> 00:37:54,760
Og så ville det ikke være rart
hvis vi kunne tage, hvad jeg lige

835
00:37:54,760 --> 00:37:58,240
sat mellem disse to gule
tags, disse stil-tags,

836
00:37:58,240 --> 00:38:04,050
faktor det ud, og sætte alle mine
stilisering i én central fil

837
00:38:04,050 --> 00:38:08,470
at alle 30 eller 40 af mine andre filer
låne fra eller anden måde referere,

838
00:38:08,470 --> 00:38:11,640
ikke i modsætning til netværk
diagrammer vi lavede før?

839
00:38:11,640 --> 00:38:15,030
>> Så hvis jeg går i her, er jeg
vil faktisk foreslå

840
00:38:15,030 --> 00:38:17,880
at vi erstatte
stil tag med noget

841
00:38:17,880 --> 00:38:21,620
kaldet taglinket, som
er forfærdeligt, forfærdeligt navngivet,

842
00:38:21,620 --> 00:38:24,370
fordi du ikke bruger den
link-tag til at skabe, hvad

843
00:38:24,370 --> 00:38:26,380
vi mennesker kender som et link i en webside.

844
00:38:26,380 --> 00:38:29,750
Til det, du bruge som tag?

845
00:38:29,750 --> 00:38:31,464
Hvordan skaber man et link i en webside?

846
00:38:31,464 --> 00:38:32,130
PUBLIKUM: Den a.

847
00:38:32,130 --> 00:38:34,870
DAVID J. MALAN: Den a, eller anker
tag, der gik til Disney før.

848
00:38:34,870 --> 00:38:39,090
Linket tag her siger
denne-- link til en fil kaldet

849
00:38:39,090 --> 00:38:44,350
styles.css, forholdet til hvilken
vil være, at det er min stylesheet.

850
00:38:44,350 --> 00:38:48,290
Så dette er en af ​​de S 'i
CSS-- cascading style sheets.

851
00:38:48,290 --> 00:38:50,490
Style sheet-- to af S 'i CSS.

852
00:38:50,490 --> 00:38:52,550
Cascading Style Sheet.

853
00:38:52,550 --> 00:38:58,640
Det betyder bare, hey, browser, gå
finde styles.css på den lokale server

854
00:38:58,640 --> 00:39:01,870
og bruge det som dit stilark,
hvilket betyder indersiden af ​​denne fil

855
00:39:01,870 --> 00:39:05,310
bliver alle de
stylizations som vi lige har gjort.

856
00:39:05,310 --> 00:39:07,396
Og så hvad denne fil
kunne ligne dette.

857
00:39:07,396 --> 00:39:10,020
Og jeg vil bare gøre dette er en hurtig
eksempel, fordi vi ikke har brug for

858
00:39:10,020 --> 00:39:12,000
at komme for meget i ukrudtet her.

859
00:39:12,000 --> 00:39:17,840
Men hvis jeg kopiere denne, hvad jeg foreslår
er, at en programmør oprette en ny fil,

860
00:39:17,840 --> 00:39:24,450
indsætte disse lines--
whoops-- indsætte disse linjer,

861
00:39:24,450 --> 00:39:32,270
gemme det som styles.css, og derefter, i
den anden fil, slette alle, der

862
00:39:32,270 --> 00:39:35,450
og erstatte det i stedet
med dette link tag.

863
00:39:35,450 --> 00:39:43,090
Så hvis jeg linker href = "styles.css",
forholdet skal være "stylesheet"

864
00:39:43,090 --> 00:39:44,170
tæt tag.

865
00:39:44,170 --> 00:39:45,250
Gem det.

866
00:39:45,250 --> 00:39:47,000
Gå tilbage til min helloworld.

867
00:39:47,000 --> 00:39:48,690
Opdater.

868
00:39:48,690 --> 00:39:51,290
>> Bogstaveligt talt intet er sket.

869
00:39:51,290 --> 00:39:54,710
Det er en god ting, fordi det
betyder, at det er faktisk alle arbejder.

870
00:39:54,710 --> 00:39:58,860
For at bevise så meget, formoder jeg lave en
tastefejl, og jeg kalder denne "styles.css"

871
00:39:58,860 --> 00:40:03,080
med stort S, som er
forkert, og derefter genindlæse.

872
00:40:03,080 --> 00:40:05,470
Nu kan du se det bare ikke fungerer.

873
00:40:05,470 --> 00:40:06,362
Nu, hvorfor?

874
00:40:06,362 --> 00:40:08,070
Nå, lad os bruge et
teknik fra tidligere.

875
00:40:08,070 --> 00:40:10,153
Lad mig gå videre og, i
min browser, i Chrome, jeg er

876
00:40:10,153 --> 00:40:12,900
kommer til at åbne op, at særlige
Fanen netværk som før,

877
00:40:12,900 --> 00:40:15,560
og lad mig genindlæse siden.

878
00:40:15,560 --> 00:40:19,341
Hvad er du ikke overrasket over at se nu?

879
00:40:19,341 --> 00:40:20,840
Eller måske er du overrasket over at se det.

880
00:40:20,840 --> 00:40:23,225
Uanset hvad, hvad ser du nu?

881
00:40:23,225 --> 00:40:24,100
PUBLIKUM: [uhørligt]

882
00:40:24,100 --> 00:40:24,770
DAVID J. MALAN: Det er ikke fundet.

883
00:40:24,770 --> 00:40:25,680
Hvorfor er det ikke fundet?

884
00:40:25,680 --> 00:40:28,480
Nå, Styles.css-- kapital
S-- findes ikke.

885
00:40:28,480 --> 00:40:29,230
Jeg misnamed det.

886
00:40:29,230 --> 00:40:30,430
Simple typo.

887
00:40:30,430 --> 00:40:33,816
Men jeg får forståeligt nok nu en
404, fordi serveren siger, hey,

888
00:40:33,816 --> 00:40:34,440
det er ikke fundet.

889
00:40:34,440 --> 00:40:36,300
Bogstaveligt, ved jeg ikke
når denne fil er.

890
00:40:36,300 --> 00:40:38,880
Så som et resultat, browseren
viser dig, hvad det kan,

891
00:40:38,880 --> 00:40:42,860
den rå indholdet på siden,
som var en 200, HTML,

892
00:40:42,860 --> 00:40:45,390
men stilisering ikke kan
tilsættes derefter.

893
00:40:45,390 --> 00:40:47,120
Og det er, hvad der menes med cascading.

894
00:40:47,120 --> 00:40:49,070
Du kan slags tilføje det
efter, og det slags

895
00:40:49,070 --> 00:40:50,874
raffinerer æstetik websiden.

896
00:40:50,874 --> 00:40:53,790
Og du kan endda tilsidesætte dem
stilarter med endnu andre stylesheet filer

897
00:40:53,790 --> 00:40:54,700
Hvis du vil.

898
00:40:54,700 --> 00:40:57,780
Det er ikke fundet, men i dette tilfælde,
fordi selvfølgelig, jeg misnamed det.

899
00:40:57,780 --> 00:41:00,330
Så jeg ville have til at ordne det første.

900
00:41:00,330 --> 00:41:04,667
>> Så lad os gå videre og
foreslå følgende.

901
00:41:04,667 --> 00:41:07,410

902
00:41:07,410 --> 00:41:11,140
Lad os gå videre og gøre dette.

903
00:41:11,140 --> 00:41:14,220
Startende med måske
din HelloWorld fil,

904
00:41:14,220 --> 00:41:17,740
lad mig bare invitere et par
af funktionen forslag.

905
00:41:17,740 --> 00:41:20,400
Så, Victoria, du ville
lave noget tekst større, ikke?

906
00:41:20,400 --> 00:41:24,555
Okay, så vi kan
gør teksten større.

907
00:41:24,555 --> 00:41:26,860
Og vi vil hver plukke off
kun et problem at løse.

908
00:41:26,860 --> 00:41:30,867
Gør teksten større.

909
00:41:30,867 --> 00:41:32,700
Jeg har ikke tænkt mig at genere
skriver dette, når vi

910
00:41:32,700 --> 00:41:35,600
har bullet teknologi lige herovre.

911
00:41:35,600 --> 00:41:39,970
Så nogle problemer.

912
00:41:39,970 --> 00:41:44,670
Så vi vil prøve
at gøre teksten større.

913
00:41:44,670 --> 00:41:45,170
Okay.

914
00:41:45,170 --> 00:41:48,360
Hvad ellers ville nogen foreslå?

915
00:41:48,360 --> 00:41:50,332
Hvad andet kunne vi ønsker
at gøre i en webside?

916
00:41:50,332 --> 00:41:52,040
Lad os komme op med en
kort liste over ting

917
00:41:52,040 --> 00:41:55,366
og derefter uddelegere
gruppe til at finde ud af dette.

918
00:41:55,366 --> 00:41:56,270
>> PUBLIKUM: [uhørligt]

919
00:41:56,270 --> 00:42:02,251
>> DAVID J. MALAN: OK, position tekst
på forskellige sider af siden?

920
00:42:02,251 --> 00:42:02,750
Okay.

921
00:42:02,750 --> 00:42:04,620
Noget andet.

922
00:42:04,620 --> 00:42:05,784
>> PUBLIKUM: [uhørligt]

923
00:42:05,784 --> 00:42:06,700
DAVID J. MALAN: Det er.

924
00:42:06,700 --> 00:42:08,720
Så en gif er bare en
andet filformat.

925
00:42:08,720 --> 00:42:12,830
Vi har lige brugt, hvad en
png eller jpg sandsynligvis?

926
00:42:12,830 --> 00:42:14,480
Vi brugte en jpg.

927
00:42:14,480 --> 00:42:16,780
Hvis du er nysgerrig, en overdreven
svar på dit spørgsmål

928
00:42:16,780 --> 00:42:19,404
er en jpg anvendes normalt til
fotografier, fordi det understøtter

929
00:42:19,404 --> 00:42:21,500
millioner af farver eller 24-bit farve.

930
00:42:21,500 --> 00:42:26,930
En gif anvendes normalt til, ligesom,
internetfænomen disse days-- animationer,

931
00:42:26,930 --> 00:42:28,810
som animerede gif-filer.

932
00:42:28,810 --> 00:42:32,320
Men det sker at anvende en mindre farve
palet, kun 256 mulige farver,

933
00:42:32,320 --> 00:42:35,230
men det understøtter
gennemsigtighed og animation.

934
00:42:35,230 --> 00:42:40,330
Og så er der png, som understøtter
gennemsigtighed og flere farver

935
00:42:40,330 --> 00:42:41,300
men ikke animation.

936
00:42:41,300 --> 00:42:42,133
Så det er en afvejning.

937
00:42:42,133 --> 00:42:44,144

938
00:42:44,144 --> 00:42:46,060
Så tilføje en gif, selv om,
ville være funktionelt

939
00:42:46,060 --> 00:42:48,396
svarer til at tilføje en png eller en jpg.

940
00:42:48,396 --> 00:42:49,110
Ja.

941
00:42:49,110 --> 00:42:50,550
Billede kilde lig.

942
00:42:50,550 --> 00:42:51,590
Så noget andet.

943
00:42:51,590 --> 00:42:57,288
Lad os komme op med noget, der
vi sendt til Victoria at gøre her.

944
00:42:57,288 --> 00:42:59,209
>> PUBLIKUM: Tilføj knapper til en formular.

945
00:42:59,209 --> 00:43:00,000
DAVID J. MALAN: OK.

946
00:43:00,000 --> 00:43:02,179
Så tilføje knapper til en formular.

947
00:43:02,179 --> 00:43:03,470
Og vi vil gøre, at man sammen.

948
00:43:03,470 --> 00:43:07,220
Så det vil være en perfekt Overgang
lige efter denne udfordring.

949
00:43:07,220 --> 00:43:10,357
Ellers andet?

950
00:43:10,357 --> 00:43:11,440
Hvad kan du lide at gøre?

951
00:43:11,440 --> 00:43:14,040

952
00:43:14,040 --> 00:43:16,516
Den web føles meget underwhelming
hvis det er alt vi kan gøre.

953
00:43:16,516 --> 00:43:18,140
PUBLIKUM: Ændre farven på teksten.

954
00:43:18,140 --> 00:43:19,500
DAVID J. MALAN: Skift hvad?

955
00:43:19,500 --> 00:43:20,666
PUBLIKUM: Farve af teksten.

956
00:43:20,666 --> 00:43:22,311
DAVID J. MALAN: Skift farve på tekst.

957
00:43:22,311 --> 00:43:22,810
Okay.

958
00:43:22,810 --> 00:43:23,790
Så lad os gøre det.

959
00:43:23,790 --> 00:43:27,209
Bare igen, så du ikke bare
udenad, gør præcis, hvad jeg gør,

960
00:43:27,209 --> 00:43:29,500
Jeg har tænkt mig at tænde musik
for måske fem minutter her.

961
00:43:29,500 --> 00:43:30,450
Du er velkommen til at bruge Google.

962
00:43:30,450 --> 00:43:33,130
Du er velkommen til at spørge mig, og
Jeg vil hviske et tip i øret.

963
00:43:33,130 --> 00:43:35,171
Du er velkommen til at kigge
over på andre skuldre.

964
00:43:35,171 --> 00:43:37,340
Men løser kun et af disse problemer.

965
00:43:37,340 --> 00:43:40,190
Men vi vil gøre det sidste, de
danner en, hvis vi kunne, sammen.

966
00:43:40,190 --> 00:43:42,790
Så fem minutter til at løse
helst af disse problemer

967
00:43:42,790 --> 00:43:46,780
ved hjælp af Google, intuition, eller en hvilken som helst
andre midler til rådighed for dig.

968
00:43:46,780 --> 00:43:48,630
>> [MUSIK AFSPILLER]

969
00:43:48,630 --> 00:43:49,130
Okay.

970
00:43:49,130 --> 00:43:50,838
Ingen bekymringer, hvis du ønsker
at holde lappeløsninger,

971
00:43:50,838 --> 00:43:53,880
men jeg vil ødelægge et par
af disse svar.

972
00:43:53,880 --> 00:43:57,986
Så den første forslag fra
Victoria var at gøre teksten større.

973
00:43:57,986 --> 00:43:59,360
Så der er et par måder at gøre dette.

974
00:43:59,360 --> 00:44:01,530
Jeg har i øjeblikket restaureret
min skærm til denne størrelse,

975
00:44:01,530 --> 00:44:04,310
selvom jeg har zoomet ind
kunstigt bare at se tingene.

976
00:44:04,310 --> 00:44:07,470
Og lad os gøre det.

977
00:44:07,470 --> 00:44:11,380
Lad mig gå videre og grab
nogle generiske latinske tekst

978
00:44:11,380 --> 00:44:19,540
bare så vi har noget at arbejde med.

979
00:44:19,540 --> 00:44:20,715
Så giv mig bare et øjeblik.

980
00:44:20,715 --> 00:44:21,840
Jeg vil gøre tre stykker.

981
00:44:21,840 --> 00:44:53,430

982
00:44:53,430 --> 00:44:53,930
OKAY.

983
00:44:53,930 --> 00:44:55,560
Dette vil være et bedre eksempel.

984
00:44:55,560 --> 00:44:57,840
Så for de nysgerrige, i
min hello.html, jeg bare

985
00:44:57,840 --> 00:45:01,645
indsat tre meningsløse
latinske stykker

986
00:45:01,645 --> 00:45:03,270
bare så vi har noget tekst at arbejde med.

987
00:45:03,270 --> 00:45:06,720
Og Victoria mål var at
gøre noget af teksten større.

988
00:45:06,720 --> 00:45:09,879
Så jeg kunne, som før, gå her.

989
00:45:09,879 --> 00:45:11,170
Og lad mig gøre det på den rigtige måde.

990
00:45:11,170 --> 00:45:13,253
Jeg har tænkt mig at have et link
tag, der peger på en fil

991
00:45:13,253 --> 00:45:20,560
kaldet "styles.css" forholdet
hvoraf er igen "stylesheet."

992
00:45:20,560 --> 00:45:25,221
Og så jeg har tænkt mig at redde denne
og åbne denne "styles.css."

993
00:45:25,221 --> 00:45:28,940
>> Så som før, jeg har
kvalifikationer på dette CSS-fil

994
00:45:28,940 --> 00:45:31,569
til faktisk tilsidesætte standardindstillingen
æstetik af en webside,

995
00:45:31,569 --> 00:45:33,860
og standardindstillingerne æstetik,
selvfølgelig er temmelig kedelig.

996
00:45:33,860 --> 00:45:36,943
Det er en slags normal skriftstørrelse, sort
tekst, hvid baggrund, og så videre.

997
00:45:36,943 --> 00:45:39,440
Så formoder jeg ønsker at gøre
alt dette tekst større.

998
00:45:39,440 --> 00:45:40,460
Jeg kunne gøre et par ting.

999
00:45:40,460 --> 00:45:43,750
I min styles.css fil, jeg
kunne sige, ved du hvad,

1000
00:45:43,750 --> 00:45:46,950
anvende følgende til
kroppen af ​​min side.

1001
00:45:46,950 --> 00:45:51,390
Gå videre og gøre
skriftstørrelse 24 point,

1002
00:45:51,390 --> 00:45:54,130
hvilket er et tal jeg måske
brug i Microsoft Word.

1003
00:45:54,130 --> 00:45:57,620
Lad mig vende tilbage til mit web
side her og genindlæse,

1004
00:45:57,620 --> 00:45:59,640
og du kan se, at
det er allerede meget større.

1005
00:45:59,640 --> 00:46:02,223
Og vi kan få lidt skør,
ligesom vi kan på en desktop--

1006
00:46:02,223 --> 00:46:03,670
gøre det 96 point.

1007
00:46:03,670 --> 00:46:04,950
Opdater.

1008
00:46:04,950 --> 00:46:07,610
Og det er at få lidt
uhåndterlig på dette punkt.

1009
00:46:07,610 --> 00:46:09,500
>> Men jeg kunne være lidt mere præcis.

1010
00:46:09,500 --> 00:46:14,530
I stedet for at anvende denne
stylesheet til kroppen af ​​min side,

1011
00:46:14,530 --> 00:46:21,740
hvad der ellers kunne jeg anvende det på stedet,
hvilke andre tag, der måske stadig

1012
00:46:21,740 --> 00:46:25,445
fungerer på samme måde?

1013
00:46:25,445 --> 00:46:26,444
>> PUBLIKUM: 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
Så hovedet ville ikke være
korrekt, fordi hovedet,

1016
00:46:29,350 --> 00:46:31,300
du kan faktisk ikke
styre æstetik.

1017
00:46:31,300 --> 00:46:32,700
Der er enten tekst der eller ej.

1018
00:46:32,700 --> 00:46:36,760
Men p tag-- jeg kan dykke i en lille
dybere, så at sige, til punkt

1019
00:46:36,760 --> 00:46:37,350
tags.

1020
00:46:37,350 --> 00:46:41,600
Og selv om der er tre,
det er helt fint, for i CSS,

1021
00:46:41,600 --> 00:46:44,900
når jeg bare sige "p", dette
betyder anvender følgende

1022
00:46:44,900 --> 00:46:48,300
til alle tags, der matcher dette
selector, vælgeren bare

1023
00:46:48,300 --> 00:46:49,430
er navnet på mærket.

1024
00:46:49,430 --> 00:46:52,350
Så uanset hvor du ser en
"P", anvende den skriftstørrelse,

1025
00:46:52,350 --> 00:46:55,222
og lad os gøre det mere
rimelig igen-- 24 point.

1026
00:46:55,222 --> 00:46:56,930
Og ved du hvad,
bare for god foranstaltning,

1027
00:46:56,930 --> 00:46:59,810
lad os gøre farven
rød lige for øjeblikket.

1028
00:46:59,810 --> 00:47:03,740
Og nu, hvis jeg genindlæse, nu vi
se tre grimme stykker.

1029
00:47:03,740 --> 00:47:07,180
>> Men nu antage, at jeg er sort
of-- Jeg vil have det første afsnit

1030
00:47:07,180 --> 00:47:08,210
at springe ud på brugeren.

1031
00:47:08,210 --> 00:47:11,150
Jeg ønsker ikke at bare stige
skriftstørrelsen af ​​alting.

1032
00:47:11,150 --> 00:47:16,105
Og så jeg rent faktisk ønsker at identificere eller
skelne mellem disse stykker.

1033
00:47:16,105 --> 00:47:18,730
Så lad os slippe af med den røde,
fordi det er bare slags tarvelige,

1034
00:47:18,730 --> 00:47:23,885
og lad os gå videre og gøre det
skriftstørrelse 12-punkts som standard,

1035
00:47:23,885 --> 00:47:26,260
så vi er tilbage til noget
lidt mere rimelig.

1036
00:47:26,260 --> 00:47:29,190
Og nu vil jeg bare at øge
skriftstørrelse i første afsnit.

1037
00:47:29,190 --> 00:47:31,440
Jeg kan gøre dette i et par
måder, men en måde, der er

1038
00:47:31,440 --> 00:47:37,180
måske mest instruktions- på
øjeblik er at gøre følgende.

1039
00:47:37,180 --> 00:47:43,280
Lad mig gå videre og sige, det
afsnit har et unikt ID af "først."

1040
00:47:43,280 --> 00:47:45,000
Jeg kunne kalde dette noget jeg vil.

1041
00:47:45,000 --> 00:47:46,874
Jeg kunne kalde denne "foo"
eller andre ord,

1042
00:47:46,874 --> 00:47:49,290
men jeg har tænkt mig at give det lidt
semantisk meningsfulde navn

1043
00:47:49,290 --> 00:47:50,320
som "først."

1044
00:47:50,320 --> 00:47:54,790
Dette er den entydige identifikationskode,
ID, for min første afsnit.

1045
00:47:54,790 --> 00:47:59,360
>> Hvad jeg kan nu gøre i min stilark
er være lidt mere præcis.

1046
00:47:59,360 --> 00:48:02,330
I stedet for at sige, gælder
følgende til p-tag,

1047
00:48:02,330 --> 00:48:04,890
Jeg kan sige det following--
anvende det følgende,

1048
00:48:04,890 --> 00:48:11,000
eller vælg, HTML element
der har et unikt id af "først."

1049
00:48:11,000 --> 00:48:12,350
Hvad ønsker jeg at gælde for det?

1050
00:48:12,350 --> 00:48:15,250
En skriftstørrelse 24-point.

1051
00:48:15,250 --> 00:48:16,640
Så jeg har to selektorer nu.

1052
00:48:16,640 --> 00:48:19,690
Man gør alle de
præmis 12-point.

1053
00:48:19,690 --> 00:48:24,960
Men denne ene, især da det kommer
second-- det kommer sidst i file--

1054
00:48:24,960 --> 00:48:27,090
dette har en dominoeffekt.

1055
00:48:27,090 --> 00:48:30,200
Jeg har lige lavet alle mine
stk tags 12-punkts,

1056
00:48:30,200 --> 00:48:34,350
men dette nu kaskader og
tilsidesætter, at for nogen elementer

1057
00:48:34,350 --> 00:48:38,800
på siden, nogen tag i den side, hvis
unikt id er citat citat slut "først."

1058
00:48:38,800 --> 00:48:41,720
Og hashtag i denne sammenhæng
bare betyder "entydigt id."

1059
00:48:41,720 --> 00:48:43,750
Jeg kan ikke sætte det i HTML-filen.

1060
00:48:43,750 --> 00:48:46,880
Jeg, herovre, bare sige
quote citat slut "først."

1061
00:48:46,880 --> 00:48:48,470
>> Så lad mig genindlæse.

1062
00:48:48,470 --> 00:48:49,919
Og nu ser jeg, ah, OK.

1063
00:48:49,919 --> 00:48:51,710
Jeg mener, det er ikke det
smuk, men det er sådan

1064
00:48:51,710 --> 00:48:53,600
ligesom forordet til en
bog eller noget lignende,

1065
00:48:53,600 --> 00:48:55,100
hvor det første afsnit er større.

1066
00:48:55,100 --> 00:48:57,933
Kunne være endnu mere præcis med
bare de første bogstaver, men i det mindste

1067
00:48:57,933 --> 00:48:59,110
Jeg har udøvet mere kontrol.

1068
00:48:59,110 --> 00:49:04,760
Nu maybe-- måske jeg ønsker at gøre dette
lejlighedsvis uanset årsagen,

1069
00:49:04,760 --> 00:49:09,010
og så kan jeg ikke ønsker, at dette
gælder kun én HTML-tag.

1070
00:49:09,010 --> 00:49:15,110
Snarere, lad os say-- lad os
også gøre følgende.

1071
00:49:15,110 --> 00:49:18,810
Class = "import".

1072
00:49:18,810 --> 00:49:23,970
Betragtninger en ID bruges til entydigt
identificere én ting, en tag,

1073
00:49:23,970 --> 00:49:30,190
i din webside, er en klasse menes at være
bruges på et vilkårligt antal elementer eller tags

1074
00:49:30,190 --> 00:49:30,950
på din webside.

1075
00:49:30,950 --> 00:49:31,710
Så det er genanvendeligt.

1076
00:49:31,710 --> 00:49:33,090
En id er ikke genbruges.

1077
00:49:33,090 --> 00:49:34,450
En klasse er genanvendelig.

1078
00:49:34,450 --> 00:49:37,830
>> Og ved du hvad, uanset
filosofiske reasons--

1079
00:49:37,830 --> 00:49:40,180
Jeg har ikke slutte min
thought-- Jeg har tænkt mig at sige

1080
00:49:40,180 --> 00:49:44,300
at det første afsnit og
andet afsnit er vigtige.

1081
00:49:44,300 --> 00:49:48,600
Så jeg har tænkt mig at anvende klasse kaldet
"Vigtigt", at hvis jeg gemmer min fil

1082
00:49:48,600 --> 00:49:51,510
og genindlæse, har ingen
funktionel effekt endnu.

1083
00:49:51,510 --> 00:49:53,780
Men jeg har tilføjet nogle
metadata til filen,

1084
00:49:53,780 --> 00:49:56,610
slags noget særskilt
fra de centrale data for filen,

1085
00:49:56,610 --> 00:50:02,300
så der nu i min stylesheet, hvis jeg
i stedet sige ".important" - du ved,

1086
00:50:02,300 --> 00:50:07,110
noget, der er vigtigt, er jeg
vil gøre font-farve, red--

1087
00:50:07,110 --> 00:50:09,930
eller rettere ikke font-farve, bare farve.

1088
00:50:09,930 --> 00:50:12,930
Der er uoverensstemmelser
i CSS desværre.

1089
00:50:12,930 --> 00:50:14,120
Og genindlæse.

1090
00:50:14,120 --> 00:50:17,640
Bemærk nu det første
to stykker er røde

1091
00:50:17,640 --> 00:50:20,880
men ikke den tredje, fordi jeg kun
anvendt klassen af ​​"vigtige"

1092
00:50:20,880 --> 00:50:25,020
til de to første af disse ting.

1093
00:50:25,020 --> 00:50:28,030
>> Så i id'er, har du mulighed
at angive meget præcist.

1094
00:50:28,030 --> 00:50:30,110
Med klasser, har du genanvendelighed.

1095
00:50:30,110 --> 00:50:33,800
Men i begge tilfælde, bemærk
slags princippet godt design

1096
00:50:33,800 --> 00:50:39,072
hvor jeg indregnet ud af alle de
æstetik til min styles.css fil.

1097
00:50:39,072 --> 00:50:40,280
Så der er ingen roderi her.

1098
00:50:40,280 --> 00:50:44,490
Der er ingen omtale af rød eller
fed-vendende eller skriftstørrelse i denne fil.

1099
00:50:44,490 --> 00:50:49,430
Jeg har Snarere semantisk,
meningsfuldt karakteriseret mine data som,

1100
00:50:49,430 --> 00:50:51,240
her er nogle vigtige data.

1101
00:50:51,240 --> 00:50:52,800
Her er nogle mere vigtige data.

1102
00:50:52,800 --> 00:50:56,500
Endvidere her er den
"Første" af mine vigtige data.

1103
00:50:56,500 --> 00:51:01,050
Så HTML handler om sortering
af tagging, bogstaveligt, ord

1104
00:51:01,050 --> 00:51:05,270
og afsnit og konstruktioner i dit
side med disse små hints, hvis du

1105
00:51:05,270 --> 00:51:07,640
vil, at du kan
en eller anden måde udnytte hjælp

1106
00:51:07,640 --> 00:51:10,880
andre teknikker som CSS på denne måde.

1107
00:51:10,880 --> 00:51:14,760
>> Så som svar på Victoria spørgsmål,
vi kan gøre teksten større på den måde.

1108
00:51:14,760 --> 00:51:18,380
Der er så mange andre måder, men
skrifttypen tag-- åben beslag "font" -

1109
00:51:18,380 --> 00:51:19,770
er faktisk flere år.

1110
00:51:19,770 --> 00:51:21,410
Og det er problemet,
også, med kun stole

1111
00:51:21,410 --> 00:51:23,485
på online resources--
de tendens til at være forældet.

1112
00:51:23,485 --> 00:51:26,110
Og ja, der er blevet forældet,
fordi verden indså,

1113
00:51:26,110 --> 00:51:28,970
hvad betyder "font-size = 7" betyder?

1114
00:51:28,970 --> 00:51:29,670
Det gør det ikke.

1115
00:51:29,670 --> 00:51:32,770
Og det i mange år og til
dette dag-- en af ​​side

1116
00:51:32,770 --> 00:51:36,060
bemærker her er, at det faktisk
utroligt smertefuldt undertiden stadig

1117
00:51:36,060 --> 00:51:38,900
at udvikle steder for
web, fordi Microsoft

1118
00:51:38,900 --> 00:51:44,220
og Google og Mozilla og
andre ofte er uenige om, hvordan

1119
00:51:44,220 --> 00:51:47,480
at fortolke en specifikation som HTML.

1120
00:51:47,480 --> 00:51:52,490
>> Der er en regelsæt for HTML, der
generelt siger, hvad hver mærke betyder.

1121
00:51:52,490 --> 00:51:55,690
Men nogle gange er det overlades til
implementering skøn,

1122
00:51:55,690 --> 00:51:57,290
Microsofts skøn og Google.

1123
00:51:57,290 --> 00:52:00,000
Og så vil du meget ofte
se på en hjemmeside noget

1124
00:52:00,000 --> 00:52:04,954
ser anderledes på en pc
end den gør på en Mac,

1125
00:52:04,954 --> 00:52:06,995
og det er virkelig fordi,
i sidste ende,

1126
00:52:06,995 --> 00:52:08,891
de ikke teste det
godt på begge platforme.

1127
00:52:08,891 --> 00:52:11,390
Men det er også fordi rimeligt,
intelligente mennesker vil være uenige

1128
00:52:11,390 --> 00:52:14,970
og virksomheder vil være uenige, og så
en af ​​udfordringerne i programmering

1129
00:52:14,970 --> 00:52:16,980
til nettet eller design
ting til nettet

1130
00:52:16,980 --> 00:52:21,700
skriver dit website på en måde
der virker på hver webbrowser.

1131
00:52:21,700 --> 00:52:23,410
Men selv det er urimeligt, ikke?

1132
00:52:23,410 --> 00:52:27,807
Der er så mange versioner af så mange
browsere derude, der, på et tidspunkt,

1133
00:52:27,807 --> 00:52:30,890
du også nødt til at foretage en dom opkald
og du er nødt til at beslutte, som en virksomhed,

1134
00:52:30,890 --> 00:52:33,082
især for e-handel-stil
steder, hvor du er

1135
00:52:33,082 --> 00:52:36,290
forsøger at bruge den nyeste og bedste
teknologier til at give en rigtig god brugeroplevelse

1136
00:52:36,290 --> 00:52:37,110
erfaring.

1137
00:52:37,110 --> 00:52:41,019
Men nogle procentdel af dine brugere kunne
stadig bruger Internet Explorer 6 eller 7

1138
00:52:41,019 --> 00:52:43,810
eller 8, især afhængigt af
land, de kommer fra.

1139
00:52:43,810 --> 00:52:46,760
>> Og så meget almindeligt
hørt på noget

1140
00:52:46,760 --> 00:52:50,920
lignende "web browser statistik."

1141
00:52:50,920 --> 00:52:56,560
Og hvis vi går at-- lad os se Wikipedia
og se, hvordan up-to-date dette diagram er

1142
00:52:56,560 --> 00:52:59,320
hvis der er én.

1143
00:52:59,320 --> 00:53:02,420
Så her kan du se
hvor browsere faktisk

1144
00:53:02,420 --> 00:53:06,160
er ifølge december 2015
i henhold til den amerikanske regering.

1145
00:53:06,160 --> 00:53:11,170
Chrome er på 42% af markedet, fulgt
af IE stort set i virksomhedernes indstillinger

1146
00:53:11,170 --> 00:53:14,490
eller pc-indstillinger, selvfølgelig,
efterfulgt af Firefox,

1147
00:53:14,490 --> 00:53:17,440
derefter Safari, så Opera gjorde ikke
gøre kortet her en eller anden grund,

1148
00:53:17,440 --> 00:53:18,210
og derefter Andre.

1149
00:53:18,210 --> 00:53:19,500
Måske er det under andre.

1150
00:53:19,500 --> 00:53:27,700
Men mere problematisk end det is--
lad os se om Wikipedia har også

1151
00:53:27,700 --> 00:53:35,194
versioner af browsere version--

1152
00:53:35,194 --> 00:53:36,160

1153
00:53:36,160 --> 00:53:39,190
>> Lad os gå til browser statistik.

1154
00:53:39,190 --> 00:53:40,680
IE.

1155
00:53:40,680 --> 00:53:42,030
Selv det er ikke nok.

1156
00:53:42,030 --> 00:53:44,854
Browser statistik.

1157
00:53:44,854 --> 00:53:45,353
Min version.

1158
00:53:45,353 --> 00:53:48,980

1159
00:53:48,980 --> 00:53:50,540
Det kommer ikke til at være rigtigt.

1160
00:53:50,540 --> 00:53:53,414
Lad os se versioner.

1161
00:53:53,414 --> 00:53:54,830
Browser markedsandel.

1162
00:53:54,830 --> 00:53:57,110
Lad os se, om det kommer op.

1163
00:53:57,110 --> 00:53:57,610
OKAY.

1164
00:53:57,610 --> 00:54:00,010
Nu bliver
lidt mere nyttigt.

1165
00:54:00,010 --> 00:54:04,870
Så her, bemærke, at vi har alle
forskellige versioner af browsere.

1166
00:54:04,870 --> 00:54:09,887
Og, min Gud, hvis du look-- Chrome
48, Chrome 47, Chrome 31, Chrome 45.

1167
00:54:09,887 --> 00:54:12,970
Jeg mener, browsere stigende grad opdateret,
og undertiden nogle af disse ændringer

1168
00:54:12,970 --> 00:54:16,430
er signifikante i
hensyn til funktionalitet.

1169
00:54:16,430 --> 00:54:20,630
Og så på et tidspunkt, den
produktchefer eller ingeniører

1170
00:54:20,630 --> 00:54:23,620
nødt til at gøre en decision-- dig
hvad, kun 1% af verdens

1171
00:54:23,620 --> 00:54:24,740
er stadig bruger IE 7.

1172
00:54:24,740 --> 00:54:25,490
Til helvede med dem.

1173
00:54:25,490 --> 00:54:27,470
Vi bare ikke kommer til at
understøtte denne browser.

1174
00:54:27,470 --> 00:54:28,740
Og hvad betyder det ikke at støtte?

1175
00:54:28,740 --> 00:54:31,170
Det kan betyde, at knapper
virker ikke på din webside,

1176
00:54:31,170 --> 00:54:33,050
eller det kan betyde
formatering er helt slukket.

1177
00:54:33,050 --> 00:54:35,091
Eller du måske nødt til at gøre
samme dom opkald

1178
00:54:35,091 --> 00:54:39,089
i mobile disse dage, hvor vi er
ikke kommer til at støtte IOS 5 længere.

1179
00:54:39,089 --> 00:54:40,380
Så folk bare nødt til at opgradere.

1180
00:54:40,380 --> 00:54:45,850
Eller vi kommer ikke til at understøtte Cupcake
på Android OS til Android-enheder,

1181
00:54:45,850 --> 00:54:48,629
fordi som den verden-som
tech verden ønsker at bevæge sig fremad,

1182
00:54:48,629 --> 00:54:51,170
den slags ønsker at trække
verden med det, således at de ikke

1183
00:54:51,170 --> 00:54:53,295
nødt til at fortsætte med at være
bagudkompatibel, så de

1184
00:54:53,295 --> 00:54:54,920
kan tilbyde nye og gode funktioner.

1185
00:54:54,920 --> 00:54:57,878
Dette er faktisk en af ​​grundene
hvorfor så mange virksomheder er rullende ud

1186
00:54:57,878 --> 00:55:01,440
automatiske opdateringer og slags tvinge
de nyeste versioner af software på os.

1187
00:55:01,440 --> 00:55:04,010
Og selv virksomheder
ligesom Apple vil sortere på

1188
00:55:04,010 --> 00:55:07,280
tvinge dig næsten eller tvinge
dig i form af markedskræfterne

1189
00:55:07,280 --> 00:55:11,164
at købe en ny telefon, fordi de bare
vil ikke opdatere din gamle telefon længere.

1190
00:55:11,164 --> 00:55:13,330
Så du glip af
nyeste og største funktioner,

1191
00:55:13,330 --> 00:55:17,520
fordi det er dyrt at dem som en
selskabet at opretholde ældre, velsagtens

1192
00:55:17,520 --> 00:55:19,330
ringere versioner af software.

1193
00:55:19,330 --> 00:55:23,660
Men nettovirkningen er, at
vi lider også det så godt.

1194
00:55:23,660 --> 00:55:26,550
>> Så lad os tage et kig på netop
et par af de endelige ting her.

1195
00:55:26,550 --> 00:55:29,740
Lad os banke off reelle hurtigt nogle af
disse andre kugler, hvis nysgerrig.

1196
00:55:29,740 --> 00:55:33,440
Så hvis du prøvede at,
for eksempel, position

1197
00:55:33,440 --> 00:55:36,420
teksten på forskellige sider af
side, jeg har tænkt mig at gøre én hurtig måde,

1198
00:55:36,420 --> 00:55:38,360
men der er anderledes
måder at gøre dette.

1199
00:55:38,360 --> 00:55:42,610
Lad mig gå videre og eliminate--
forenkle denne som følger.

1200
00:55:42,610 --> 00:55:45,330
Lad mig bare gå tilbage til min
simple, enkle stykker.

1201
00:55:45,330 --> 00:55:47,760
Lad mig gå tilbage til min styles.css.

1202
00:55:47,760 --> 00:55:51,040
Og jeg bare bruge simple--
som du måske har set på Google

1203
00:55:51,040 --> 00:55:54,430
eller huske fra earlier--
tekst-justere højre.

1204
00:55:54,430 --> 00:55:56,220
Og genindlæse denne side.

1205
00:55:56,220 --> 00:55:58,470
Nu alt synes
at være højrestillet,

1206
00:55:58,470 --> 00:56:00,770
som du kan se på overhead her.

1207
00:56:00,770 --> 00:56:04,470
>> Vi kan gøre det ser lidt mere
bog-lignende, og vi kan sige "retfærdiggøre"

1208
00:56:04,470 --> 00:56:05,640
og genindlæse.

1209
00:56:05,640 --> 00:56:09,870
Nu er det rart og firkant på begge
sider, som er slags nice.

1210
00:56:09,870 --> 00:56:12,220
Et andet mål, som vi havde her
var ændre farven på tekst.

1211
00:56:12,220 --> 00:56:13,650
Så så vi, at med min røde tekst.

1212
00:56:13,650 --> 00:56:15,630
Og nu tilføje knapper til en formular.

1213
00:56:15,630 --> 00:56:19,390
Så hvorfor skal vi ikke forsøge at gøre netop dette?

1214
00:56:19,390 --> 00:56:23,656
Men først lad mig gå til et websted,
de fleste af os bruger hver dag-- Google.

1215
00:56:23,656 --> 00:56:25,780
Og lad os tage et kig på
hvordan Google rent faktisk virker.

1216
00:56:25,780 --> 00:56:26,821
Men jeg har tænkt mig at gøre dette.

1217
00:56:26,821 --> 00:56:31,930
Første Lad mig gøre det in-- jep,
lad mig gå til Google først.

1218
00:56:31,930 --> 00:56:34,530
Jeg har tænkt mig at have til at gå
ind i Google Indstillinger,

1219
00:56:34,530 --> 00:56:40,660
fordi jeg ønsker at deaktivere
noget, der hedder Instant resultater.

1220
00:56:40,660 --> 00:56:43,580
>> Så du måske har bemærket i
Google disse days-- lade mig gå tilbage

1221
00:56:43,580 --> 00:56:44,850
og slå det på.

1222
00:56:44,850 --> 00:56:47,900
Så hvis jeg begynder at søge
for "katte" som denne,

1223
00:56:47,900 --> 00:56:50,120
bemærke, at ikke kun
Jeg får auto-udfylde op

1224
00:56:50,120 --> 00:56:54,520
top, pludselig, selve siden
synes at ændre temmelig hurtigt samt,

1225
00:56:54,520 --> 00:56:58,750
og det er Google ved hjælp af et sprog
kaldet JavaScript forsøger at være hjælpsom.

1226
00:56:58,750 --> 00:57:01,540
Men desværre, den slags
af messer op vores diskussion

1227
00:57:01,540 --> 00:57:04,010
af, hvad der faktisk sker
under emhætten her.

1228
00:57:04,010 --> 00:57:09,070
Så jeg er bare lidt hurtigt
slukke øjeblikkelige resultater.

1229
00:57:09,070 --> 00:57:11,510
Og jeg har tænkt mig at klikke på Gem.

1230
00:57:11,510 --> 00:57:13,930
Og nu vil jeg åbne
at diagnostisk værktøjslinje, jeg

1231
00:57:13,930 --> 00:57:16,150
holde åbning under fanen Netværk.

1232
00:57:16,150 --> 00:57:17,720
Så lad os gøre det.

1233
00:57:17,720 --> 00:57:21,960
Lad mig-- whoops--
rulle det ned lidt.

1234
00:57:21,960 --> 00:57:24,410
Og lad mig søger efter "katte".

1235
00:57:24,410 --> 00:57:26,790
>> Og nu notice-- faktisk,
dette er en god mulighed

1236
00:57:26,790 --> 00:57:28,840
at diskutere et øjeblik.

1237
00:57:28,840 --> 00:57:32,460
Læg mærke det øjeblik jeg Motortype- stoppe det.

1238
00:57:32,460 --> 00:57:35,250
Stop det.

1239
00:57:35,250 --> 00:57:35,790
OKAY.

1240
00:57:35,790 --> 00:57:40,870
Læg mærke det øjeblik jeg skriver brevet
C, se bunden af ​​skærmen.

1241
00:57:40,870 --> 00:57:48,600
A- T- S. Hvad gør bunden
af denne skærm, min fanen Netværk,

1242
00:57:48,600 --> 00:57:53,320
tyder sker hver
gang jeg skriver et brev?

1243
00:57:53,320 --> 00:57:57,700
Desværre Frøen er meget
distraherende dag eller shamrock

1244
00:57:57,700 --> 00:58:00,339
eller hvad han er.

1245
00:58:00,339 --> 00:58:01,880
Hvad skete hver gang jeg har skrevet?

1246
00:58:01,880 --> 00:58:04,230
Og lad mig rydde
buffer og skrive det igen.

1247
00:58:04,230 --> 00:58:06,580
So-- hovsa.

1248
00:58:06,580 --> 00:58:13,280
Hver gang jeg skriver et brev, C- A- T--
så en ny række tydeligvis holder vises.

1249
00:58:13,280 --> 00:58:16,530
Hvad betyder hver af disse rækker repræsenterer,
baseret på, hvad vi har set og diskuteret

1250
00:58:16,530 --> 00:58:17,339
så langt?

1251
00:58:17,339 --> 00:58:18,130
PUBLIKUM: En søgning?

1252
00:58:18,130 --> 00:58:21,770
DAVID J. MALAN: En søgning, eller
mere generisk, en HTTP-anmodning

1253
00:58:21,770 --> 00:58:23,125
fra min browser til serveren.

1254
00:58:23,125 --> 00:58:29,090
Tja, hvorfor er min browser gør en HTTP
anmode hver gang jeg skriver et brev?

1255
00:58:29,090 --> 00:58:30,502
>> PUBLIKUM: [uhørligt]

1256
00:58:30,502 --> 00:58:33,210
DAVID J. MALAN: Ja, det er at give
mig disse auto-complete resultater.

1257
00:58:33,210 --> 00:58:35,190
Ligesom, hvor vil disse
søgeresultater fra?

1258
00:58:35,190 --> 00:58:38,120
Nå, hver gang jeg skriver en
brev, Google sender mere

1259
00:58:38,120 --> 00:58:40,460
og flere og flere af
det ord, jeg skriver.

1260
00:58:40,460 --> 00:58:41,040
Hvorfor?

1261
00:58:41,040 --> 00:58:44,540
Fordi de ønsker at give mig en
bedre og bedre, bedre forslag,

1262
00:58:44,540 --> 00:58:48,880
en liste med forslag, for hvad ord
Jeg forsøger at faktisk færdig.

1263
00:58:48,880 --> 00:58:53,030
Så dette er at sige bogstaveligt talt hver
tegn, du skriver i Google

1264
00:58:53,030 --> 00:58:56,900
bliver sendt, i sidste ende i
bulk, men også nogle gange en

1265
00:58:56,900 --> 00:59:00,620
på et tidspunkt for at gennemføre
disse auto-complete funktioner, når

1266
00:59:00,620 --> 00:59:03,000
dataene er naturligvis på nettet.

1267
00:59:03,000 --> 00:59:08,780
>> Lad os nu tage et kig på, hvad der egentlig
sker der, når jeg klikker Google-søgning.

1268
00:59:08,780 --> 00:59:10,420
Og så vil vi udnytte dette selv.

1269
00:59:10,420 --> 00:59:15,320
Så hvis jeg rulle ned nu til den meget
første anmodning om, at der lige er sket.

1270
00:59:15,320 --> 00:59:17,130
Læg mærke til følgende.

1271
00:59:17,130 --> 00:59:25,550
Det blev sendt til en temmelig lang URL--
https://www.google.com/search?

1272
00:59:25,550 --> 00:59:27,100
og derefter en hel masse ting.

1273
00:59:27,100 --> 00:59:29,620
Lad os se det faktisk nu
i browseren fanen selv.

1274
00:59:29,620 --> 00:59:31,310
Lad os slippe af værktøjslinjen her.

1275
00:59:31,310 --> 00:59:33,140
Her er den side med søgeresultater.

1276
00:59:33,140 --> 00:59:34,790
Og varsel her er den URL.

1277
00:59:34,790 --> 00:59:37,430
Nu kan du sikkert gætte
hvad der foregår her delvist.

1278
00:59:37,430 --> 00:59:39,090
Så først og fremmest, en definition.

1279
00:59:39,090 --> 00:59:42,570
Denne tilsyneladende er destinationen
hvor formularen er indsendt.

1280
00:59:42,570 --> 00:59:44,910
Så når jeg har skrevet i den
ordene "katte" og tryk Enter,

1281
00:59:44,910 --> 00:59:48,460
tilsyneladende Google sendt
min tekst input til denne URL

1282
00:59:48,460 --> 00:59:50,770
at jeg har fremhævet
der, skråstreg søgning.

1283
00:59:50,770 --> 00:59:56,530
Slår ud, i en URL, noget, der
der sker efter et spørgsmålstegn er,

1284
00:59:56,530 --> 01:00:01,270
som vi altid siger, en nøgleværdiparret
der blev indtastet i formularen eller anden måde

1285
01:00:01,270 --> 01:00:04,500
transmitteret fra
browser til serveren.

1286
01:00:04,500 --> 01:00:07,180
>> Så hver gang du skriver input
til en form på nettet

1287
01:00:07,180 --> 01:00:10,000
og det er sendt som vi har
talt via en get,

1288
01:00:10,000 --> 01:00:12,400
en af ​​disse virtuelle
kuverter, hvis indhold

1289
01:00:12,400 --> 01:00:15,510
af det envelope-- ja, holde
få proppet fysisk

1290
01:00:15,510 --> 01:00:19,010
i kuverten i klassen
dag, men teknologisk

1291
01:00:19,010 --> 01:00:21,110
det er faktisk sat i webadressen.

1292
01:00:21,110 --> 01:00:22,940
Så i virkeligheden, lad mig finkæmme gennem dette.

1293
01:00:22,940 --> 01:00:25,010
Hvor ser du brugerinput?

1294
01:00:25,010 --> 01:00:27,490
Hvor ser du noget
at jeg selv har skrevet op her?

1295
01:00:27,490 --> 01:00:32,100

1296
01:00:32,100 --> 01:00:33,491
Ja, så "katte".

1297
01:00:33,491 --> 01:00:33,990
Højre?

1298
01:00:33,990 --> 01:00:36,380
Så lad mig destillere denne
til noget enklere.

1299
01:00:36,380 --> 01:00:39,917
Jeg har tænkt mig at slette alt om
denne webadresse, som jeg ikke forstår,

1300
01:00:39,917 --> 01:00:42,250
og jeg bare at forlade
det som denne-- / søge? q = katte.

1301
01:00:42,250 --> 01:00:45,640

1302
01:00:45,640 --> 01:00:47,890
Vi vil se, hvor q
kommer fra i et øjeblik,

1303
01:00:47,890 --> 01:00:51,220
men der føles som minimum
mængden af ​​oplysninger, jeg forudsat.

1304
01:00:51,220 --> 01:00:53,050
Og nu vil jeg trykke Enter.

1305
01:00:53,050 --> 01:00:55,520
Og mærke det stadig virker.

1306
01:00:55,520 --> 01:00:57,950
Vi har stadig få tilbage en hel masse katte.

1307
01:00:57,950 --> 01:01:00,340
Så Google er mere avanceret
end dette disse dage.

1308
01:01:00,340 --> 01:01:01,934
Det er 2016, ikke 1999.

1309
01:01:01,934 --> 01:01:04,600
Så der er andre ting, som min
browser sender til serveren.

1310
01:01:04,600 --> 01:01:07,100
Men dette er minimalt
alt, hvad der er nødvendigt.

1311
01:01:07,100 --> 01:01:08,380
>> Så hvad sker der?

1312
01:01:08,380 --> 01:01:14,320
Nå, lad mig gå videre og gå
tilbage til Cloud9 og lad mig gå videre

1313
01:01:14,320 --> 01:01:15,620
og lukker faner tidligere.

1314
01:01:15,620 --> 01:01:18,230
Og jeg vil gøre dette på min
ejer bare for et øjeblik.

1315
01:01:18,230 --> 01:01:20,730
Jeg har tænkt mig at gå videre
og skabe ny fil.

1316
01:01:20,730 --> 01:01:23,739
Og jeg har tænkt mig at gemme det som google.html.

1317
01:01:23,739 --> 01:01:26,280
Og jeg har tænkt mig at meget quickly--
Jeg har tænkt mig at stjæle, faktisk,

1318
01:01:26,280 --> 01:01:28,510
nogle af denne tekst blot for at spare tid.

1319
01:01:28,510 --> 01:01:30,610
Jeg har tænkt mig at indsætte denne i her.

1320
01:01:30,610 --> 01:01:33,850
Jeg har ikke tænkt mig at genere med
enhver stilisering denne gang.

1321
01:01:33,850 --> 01:01:38,340
Vi kommer til at kalde denne "Min Google."

1322
01:01:38,340 --> 01:01:41,230
Og jeg har tænkt mig at slippe
af alt i legemet.

1323
01:01:41,230 --> 01:01:42,740
Og jeg har tænkt mig at gøre følgende.

1324
01:01:42,740 --> 01:01:45,690
Lad mig zoome ind.

1325
01:01:45,690 --> 01:01:50,620
Form action-- og som jeg kort nævnt
earlier-- whoops-- da jeg kort

1326
01:01:50,620 --> 01:01:54,130
nævnt tidligere, virkningen af ​​et
formen er, hvor du sende data til.

1327
01:01:54,130 --> 01:01:56,620
Så google.com/search.

1328
01:01:56,620 --> 01:01:59,390
Og den metode, jeg vil bruge
kan være en af ​​to ting.

1329
01:01:59,390 --> 01:02:02,870
Det kan enten være "få", som vi holder
diskuterer, eller det kan være "post".

1330
01:02:02,870 --> 01:02:05,340
For nu, den grundlæggende
Forskellen er, hvis du bruger "få"

1331
01:02:05,340 --> 01:02:09,590
alle de oplysninger, som
bruger giver bliver sendt i URL'en.

1332
01:02:09,590 --> 01:02:13,530
>> Det er fantastisk til ting som søgning
motorer og nogle få andre anvendelser,

1333
01:02:13,530 --> 01:02:17,080
men i hvilke omstændigheder ville
du ikke ønsker at udfylde en formular

1334
01:02:17,080 --> 01:02:21,620
og har de oplysninger ender den
URL, ligesom i din browsers adresselinje?

1335
01:02:21,620 --> 01:02:25,470

1336
01:02:25,470 --> 01:02:26,605
Hvilken slags former gør du--

1337
01:02:26,605 --> 01:02:27,480
PUBLIKUM: [uhørligt]

1338
01:02:27,480 --> 01:02:28,450
DAVID J. MALAN: Ja, som hvad?

1339
01:02:28,450 --> 01:02:29,270
PUBLIKUM: Adgangskoder.

1340
01:02:29,270 --> 01:02:31,936
DAVID J. MALAN: Ja, så du logger
ind på Facebook eller nogle hjemmeside.

1341
01:02:31,936 --> 01:02:34,395
Det er brugerens input fra
en formular, en tekstboks,

1342
01:02:34,395 --> 01:02:37,020
men du sandsynligvis ikke ønsker det
dukke op i browserens URL.

1343
01:02:37,020 --> 01:02:38,121
Hvorfor?

1344
01:02:38,121 --> 01:02:40,870
Jeg mener, måske er der nogle
sikkerhedsmæssige konsekvenser på netværket,

1345
01:02:40,870 --> 01:02:44,830
men more-- lide, mere enkelt, hvad nu hvis
din værelseskammerat, din betydelige andre,

1346
01:02:44,830 --> 01:02:47,710
dine børn, din ægtefælle ser
gennem din browser historien?

1347
01:02:47,710 --> 01:02:50,762
Der er dit password til højre
der i browserens historik.

1348
01:02:50,762 --> 01:02:52,220
Det betyder ikke lyst til godt design.

1349
01:02:52,220 --> 01:02:54,500
Eller endnu mere teknisk,
formoder du prøver

1350
01:02:54,500 --> 01:02:59,180
at uploade et billede til Flickr
eller Facebook eller wherever--

1351
01:02:59,180 --> 01:03:03,010
der er brugerinput, selv om
det er lidt mere interesting-- hvordan

1352
01:03:03,010 --> 01:03:05,530
skal jeg proppe et billede i adresselinjen?

1353
01:03:05,530 --> 01:03:06,730
Du slags slags ikke kan.

1354
01:03:06,730 --> 01:03:07,396
Du slags kan.

1355
01:03:07,396 --> 01:03:10,210
Men virkelig, jeg er hårdt pressede
at forestille sig at gøre det.

1356
01:03:10,210 --> 01:03:13,470
Så jeg har brug for en anden metode til
uploade billeder til en hjemmeside,

1357
01:03:13,470 --> 01:03:15,657
og denne anden metode kaldes "post".

1358
01:03:15,657 --> 01:03:18,740
Men for nu, vil vi bare tale om
"Get", som er den enkleste af de to.

1359
01:03:18,740 --> 01:03:21,100
Det bare sætter alle de
brugerinput i URL.

1360
01:03:21,100 --> 01:03:22,830
>> Så her er formen jeg skaber.

1361
01:03:22,830 --> 01:03:24,070
Jeg vil have et input.

1362
01:03:24,070 --> 01:03:24,820
Og ved du hvad?

1363
01:03:24,820 --> 01:03:26,111
Jeg har tænkt mig at tage et gæt her.

1364
01:03:26,111 --> 01:03:31,600
Jeg har tænkt mig at huske min
input "q" for "forespørgsel."

1365
01:03:31,600 --> 01:03:34,970
Og jeg tror, ​​det er en af ​​de
originale tegninger, måske, fra 1999.

1366
01:03:34,970 --> 01:03:39,560
Og derefter typen af ​​denne indgang
er bare at være "tekst".

1367
01:03:39,560 --> 01:03:43,040
Og så jeg har tænkt mig at have en anden indgang
som ikke behøver et navn, som vi snart

1368
01:03:43,040 --> 01:03:45,120
se, hvilken type der er "send".

1369
01:03:45,120 --> 01:03:47,070
Og det kommer til at
give mig en særlig knap.

1370
01:03:47,070 --> 01:03:48,320
Og det er det.

1371
01:03:48,320 --> 01:03:50,790
>> Så lad mig gå videre og gemme denne fil.

1372
01:03:50,790 --> 01:03:54,910
Jeg har tænkt mig at gå tilbage til min
browser og gå til google.html.

1373
01:03:54,910 --> 01:03:56,140
Enter.

1374
01:03:56,140 --> 01:03:59,680
Og det er slags sparsomme
mildest talt.

1375
01:03:59,680 --> 01:04:03,110
Men lad mig gå videre
og søg efter "katte".

1376
01:04:03,110 --> 01:04:06,510
Og mærke jeg er i øjeblikket
på denne Cloud9 webadresse.

1377
01:04:06,510 --> 01:04:09,240
Men i det øjeblik jeg klikker dette,
hvor vil du håber jeg ender?

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
Så lad os klikke på Send.

1381
01:04:12,740 --> 01:04:15,200
Og faktisk har jeg re-implementeret Google.

1382
01:04:15,200 --> 01:04:15,700
Højre?

1383
01:04:15,700 --> 01:04:16,480
Det er enklere.

1384
01:04:16,480 --> 01:04:17,120
Det er lysere.

1385
01:04:17,120 --> 01:04:20,350
Jeg mener, min kode er klart bedre end
deres, fra det rod, vi så tidligere.

1386
01:04:20,350 --> 01:04:21,100
Og ved du hvad?

1387
01:04:21,100 --> 01:04:22,610
Jeg har tænkt mig at krydre dette op en lille smule.

1388
01:04:22,610 --> 01:04:23,860
Jeg nævner ikke dette tidligere.

1389
01:04:23,860 --> 01:04:27,860
Der er tags som H1, for udgiftsområde 1,
den vigtigste post i en side.

1390
01:04:27,860 --> 01:04:30,570
"Min Google," Jeg vil kalde dette.

1391
01:04:30,570 --> 01:04:31,940
Lad mig genindlæse.

1392
01:04:31,940 --> 01:04:33,772
Det ser lidt bedre allerede.

1393
01:04:33,772 --> 01:04:34,980
Og, faktisk, ved du hvad?

1394
01:04:34,980 --> 01:04:36,430
Jeg har already-- jeg løj.

1395
01:04:36,430 --> 01:04:40,200
Jeg sagde, jeg var ikke til at style det,
men jeg har tænkt mig at style dette som før.

1396
01:04:40,200 --> 01:04:46,860
Og min krop bliver,
lad os sige, tekst-align center.

1397
01:04:46,860 --> 01:04:48,800
Det ser mere som Google allerede.

1398
01:04:48,800 --> 01:04:51,090
>> Jeg har brug for et linjeskift, selv om,
for at Submit knap.

1399
01:04:51,090 --> 01:04:52,798
Og det viser sig, du
kan bruge stykker,

1400
01:04:52,798 --> 01:04:57,320
eller du kan mere bogstavelig talt bare sige,
give mig et linjeskift her-- den br tag.

1401
01:04:57,320 --> 01:04:59,319
Og hvis jeg genindlæse dette, nu går det der.

1402
01:04:59,319 --> 01:05:01,610
Det er lidt grimt, så jeg
kunne gøre flere linjeskift,

1403
01:05:01,610 --> 01:05:03,310
men lad os ikke blive for grådig her.

1404
01:05:03,310 --> 01:05:06,430
Så lad os nu se om det virker for "hunde."

1405
01:05:06,430 --> 01:05:08,640
Det synes at arbejde for "hunde", så godt.

1406
01:05:08,640 --> 01:05:10,780
Så hvad er den overbevisende takeaway her?

1407
01:05:10,780 --> 01:05:13,600
En-- var ikke et stort spring til
indføre nogle flere tags,

1408
01:05:13,600 --> 01:05:15,370
ligesom formen tag i input tag.

1409
01:05:15,370 --> 01:05:17,120
Men mere fundamentalt
er, er alle vi laver

1410
01:05:17,120 --> 01:05:20,610
er at udnytte vores forståelse
af HTTP og den omstændighed

1411
01:05:20,610 --> 01:05:24,900
at formularer i sidste ende ændre
hvad der er i URL'en i browseren,

1412
01:05:24,900 --> 01:05:28,540
og så derfor kan vi
mekanisk give input til en server

1413
01:05:28,540 --> 01:05:33,600
ved at gøre et HTML-formular og vide
at serveren forstår HTTP,

1414
01:05:33,600 --> 01:05:36,890
ligesom vores krop forstår, ligesom,
ryste min hånd, at samme protokol,

1415
01:05:36,890 --> 01:05:40,920
og så vi får tilbage svaret
at vi i sidste ende forventer.

1416
01:05:40,920 --> 01:05:44,050
>> Så lad os prøve at gøre en
sidste ting nu med mobil,

1417
01:05:44,050 --> 01:05:47,052
og jeg vil make-- jeg vil tilføje
denne kode til dias.

1418
01:05:47,052 --> 01:05:49,760
Så hvis du gerne vil pille, du
kan helt sikkert tage den derfra.

1419
01:05:49,760 --> 01:05:51,551
Men jeg har tænkt mig at gå
videre og gøre én ting.

1420
01:05:51,551 --> 01:05:54,120
Jeg har tænkt mig at gå videre og
åbne op for min indeks page--

1421
01:05:54,120 --> 01:05:59,030
min hello side som før, hvilket
har en masse af denne faux-latinsk tekst,

1422
01:05:59,030 --> 01:06:05,470
eller meningsløs latinsk tekst, og has--
det ser sådan ud på denne skriftstørrelse.

1423
01:06:05,470 --> 01:06:07,850
Men lad mig gå videre og gøre dette.

1424
01:06:07,850 --> 01:06:09,300
Jeg har tænkt mig at gå ind i Cloud9.

1425
01:06:09,300 --> 01:06:10,380
Og du behøver ikke at gøre dette skridt.

1426
01:06:10,380 --> 01:06:11,420
Jeg vil bare gøre det selv.

1427
01:06:11,420 --> 01:06:12,890
Jeg har tænkt mig at klikke på Del.

1428
01:06:12,890 --> 01:06:15,170
Og dette er en funktion
bare for Cloud9, hvorved

1429
01:06:15,170 --> 01:06:17,710
Jeg kan offentliggøre mine omgivelser.

1430
01:06:17,710 --> 01:06:20,240
>> Og bare af hensyn til
demonstration, lad mig gøre det.

1431
01:06:20,240 --> 01:06:22,870
Jeg har tænkt mig at gøre min ansøgning offentligt.

1432
01:06:22,870 --> 01:06:25,230
Bemærk det advarer mig, er
Jeg sikker på at jeg ønsker at gøre dette,

1433
01:06:25,230 --> 01:06:28,438
fordi dette vil gøre alle
i verden, uanset om de er her nu

1434
01:06:28,438 --> 01:06:33,560
eller se videoen senere på
internet i stand til at se, hvad jeg ser.

1435
01:06:33,560 --> 01:06:34,440
Men det er OK.

1436
01:06:34,440 --> 01:06:37,870
Jeg har tænkt mig at sige "Udført".

1437
01:06:37,870 --> 01:06:42,080
Og lad mig opfordre dig, hvis jeg gjorde
dette correctly-- lade mig teste det først.

1438
01:06:42,080 --> 01:06:45,590
Gå fremad, hvis du ikke mind--
i en browser på din computer,

1439
01:06:45,590 --> 01:06:49,900
gå til denne URL, og forhåbentlig
vil du se min latinske tekst.

1440
01:06:49,900 --> 01:06:52,820
Og for at være klar, det er
kører ikke på min laptop.

1441
01:06:52,820 --> 01:06:53,610
Det er i skyen.

1442
01:06:53,610 --> 01:06:58,120
Det er på Cloud9, bogstaveligt talt, men
Jeg har lavet mit arbejdsområde offentligt

1443
01:06:58,120 --> 01:07:03,450
så alle på internettet
kan få adgang til min latin hjemmeside.

1444
01:07:03,450 --> 01:07:07,209
>> Gå til den samme webadresse på
din telefon, hvis du kunne.

1445
01:07:07,209 --> 01:07:09,750
Hvis det vil koste dig, selvom du
kan bare se over en skulder.

1446
01:07:09,750 --> 01:07:40,688

1447
01:07:40,688 --> 01:07:42,467
PUBLIKUM: [uhørligt]

1448
01:07:42,467 --> 01:07:43,550
DAVID J. MALAN: Jeg er ked af?

1449
01:07:43,550 --> 01:07:45,390
PUBLIKUM: [uhørligt]

1450
01:07:45,390 --> 01:07:47,710
DAVID J. MALAN: Bare latinske ord.

1451
01:07:47,710 --> 01:07:48,210
Det er alt.

1452
01:07:48,210 --> 01:07:49,250
Men det er, hvad du skal se.

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
OKAY.

1457
01:07:51,540 --> 01:07:53,530
Så kan jeg holde din
telefon for et øjeblik?

1458
01:07:53,530 --> 01:07:57,504
Så forhåbentlig hvis du adgang
det, bør det se næsten ulæselige.

1459
01:07:57,504 --> 01:07:59,920
Det er still-- jeg mener, det er
ulæselig på grund af det latinske.

1460
01:07:59,920 --> 01:08:01,920
Men det er også ulæselig
for hvad anden grund?

1461
01:08:01,920 --> 01:08:03,775
Ligesom, hvad mishager dig om dette?

1462
01:08:03,775 --> 01:08:04,650
PUBLIKUM: Den er lille.

1463
01:08:04,650 --> 01:08:06,420
DAVID J. MALAN: Det er super, super lille.

1464
01:08:06,420 --> 01:08:07,920
Så hvordan kunne vi løse dette?

1465
01:08:07,920 --> 01:08:09,730
Det er super, super lille
på Victoria telefon

1466
01:08:09,730 --> 01:08:11,400
og hvis du har trukket
den op selv, sandsynligvis

1467
01:08:11,400 --> 01:08:14,660
lille på din telefon så godt, medmindre du
har indstillinger for tilgængelighed aktiveret.

1468
01:08:14,660 --> 01:08:15,530
Hvad er det?

1469
01:08:15,530 --> 01:08:18,497
Du kunne bare knibe og
zoom, som er brugbar,

1470
01:08:18,497 --> 01:08:20,330
men så du kun ser
et par ord ad gangen.

1471
01:08:20,330 --> 01:08:20,859
Så vent et øjeblik.

1472
01:08:20,859 --> 01:08:21,720
Jeg ved, hvordan man kan løse dette.

1473
01:08:21,720 --> 01:08:22,219
Højre?

1474
01:08:22,219 --> 01:08:26,130
Jeg kunne bruge CSS, og jeg kunne ændre
skriftstørrelse fra 12-punkt til 24-punkt.

1475
01:08:26,130 --> 01:08:29,020
Men den bivirkning af denne,
naturligvis vil være nu,

1476
01:08:29,020 --> 01:08:32,630
på en stationær eller en bærbar computer,
nu teksten er dobbelt så stor.

1477
01:08:32,630 --> 01:08:35,810
Og så ville den slags være rart
at skelne mellem enheder,

1478
01:08:35,810 --> 01:08:37,840
og det viser sig der
er måder at gøre det.

1479
01:08:37,840 --> 01:08:39,590
Der er flere
forskellige måder, i virkeligheden,

1480
01:08:39,590 --> 01:08:44,189
hvorved bruger CSS og amatør funktioner
at vi ikke vil gå ind i detaljer,

1481
01:08:44,189 --> 01:08:46,960
kan du hovedsageligt forespørge
browseren og sige,

1482
01:08:46,960 --> 01:08:51,550
Hvis din skærm er mindre end denne
mange pixels, bruge denne skriftstørrelse.

1483
01:08:51,550 --> 01:08:55,180
Hvis din skærm er større end dette
mange pixels, bruge denne anden skriftstørrelse.

1484
01:08:55,180 --> 01:08:57,080
>> Du kan være endnu mere avanceret endnu.

1485
01:08:57,080 --> 01:09:00,140
Hvis du nogensinde har besøgt en
webside,, på et skrivebord,

1486
01:09:00,140 --> 01:09:04,404
har en stor menu måske ud til
side, og derefter alt indhold

1487
01:09:04,404 --> 01:09:07,029
er til den side af det menu--
der er slags en fælles paradigme.

1488
01:09:07,029 --> 01:09:09,670
Menu på venstre, indhold
på højre eller omvendt.

1489
01:09:09,670 --> 01:09:13,569
Ikke virkelig arbejde på mobil, når din
Skærmen er kun så mange pixels bredt.

1490
01:09:13,569 --> 01:09:16,233
Så mere almindelige på mobile er,
din menu vil pludselig få

1491
01:09:16,233 --> 01:09:18,399
kollapsede, og du er nødt til
klikke på en knap for at se det,

1492
01:09:18,399 --> 01:09:22,404
eller hjemmesiden vil sætte menuen
over det og sætte indholdet under den.

1493
01:09:22,404 --> 01:09:24,779
Og du kan gennemføre disse
ting på flere måder, også.

1494
01:09:24,779 --> 01:09:28,340
Du kan spørge dine programmører,
hey, hold, helst

1495
01:09:28,340 --> 01:09:34,450
du ser en HTTP-anmodning fra en Android
enhed, en Microsoft-enhed, en Google

1496
01:09:34,450 --> 01:09:39,930
enhed, en Apple-enhed, skal du bruge denne
skriftstørrelse og bruge denne menu layout,

1497
01:09:39,930 --> 01:09:42,670
ellers bruge denne standard større layout.

1498
01:09:42,670 --> 01:09:45,410
>> Nu, ved hjælp af hvad
grundlæggende teknik i dag

1499
01:09:45,410 --> 01:09:48,529
kunne ingeniørerne bruge
at vide, om det er

1500
01:09:48,529 --> 01:09:53,660
en iPhone, en Android-telefon, en bærbar computer,
en desktop besøger virksomhedens server?

1501
01:09:53,660 --> 01:09:55,310
Hvori de får disse oplysninger?

1502
01:09:55,310 --> 01:09:56,080
>> PUBLIKUM: Header?

1503
01:09:56,080 --> 01:09:57,740
>> DAVID J. MALAN: Ja, HTTP header.

1504
01:09:57,740 --> 01:10:01,714
Så hver HTTP-anmodning, der kommer fra
deres kunder til deres servere

1505
01:10:01,714 --> 01:10:03,880
omfatter, indeni, virtuelle
kuvert, en hel masse

1506
01:10:03,880 --> 01:10:08,260
af HTTP headers, hvoraf den ene er
browseren og operativsystemet

1507
01:10:08,260 --> 01:10:10,290
selv, hvis du holder til
at detaljeringsgraden.

1508
01:10:10,290 --> 01:10:13,790
Nu er det en kryptisk udseende streng, men
der findes software, der vil bare

1509
01:10:13,790 --> 01:10:18,530
forenkle det, og du kan bare spørge
i programmering code-- PHP, Java, C ++,

1510
01:10:18,530 --> 01:10:23,650
whatever-- hvad telefonen er denne--
hvilken enhed er denne bruger bruger?

1511
01:10:23,650 --> 01:10:27,501
Og så kan du sige, vise dem denne
udgave af hjemmesiden, hvis det er en telefon.

1512
01:10:27,501 --> 01:10:30,250
Vis dem denne version af
hjemmeside, hvis det er en bærbar eller stationær.

1513
01:10:30,250 --> 01:10:32,316
Men du behøver ikke engang
server-side kompleksitet.

1514
01:10:32,316 --> 01:10:33,940
Du kan gøre selv den simpleste ting.

1515
01:10:33,940 --> 01:10:34,815
>> Jeg har tænkt mig at gøre dette.

1516
01:10:34,815 --> 01:10:38,995
Jeg har tænkt mig at gå videre ind i
min Cloud9 miljø,

1517
01:10:38,995 --> 01:10:41,370
og jeg har tænkt mig at tilføje et tag
at du så i Google før.

1518
01:10:41,370 --> 01:10:42,770
Det hedder metatag.

1519
01:10:42,770 --> 01:10:45,520
Og jeg husker aldrig denne ene, så
Jeg har tænkt mig at omskrive det her.

1520
01:10:45,520 --> 01:10:50,552
Meta name = "viewport" og derefter
content = "width = enhed bredde, intital

1521
01:10:50,552 --> 01:11:02,060
skala = 1 "og det er det.

1522
01:11:02,060 --> 01:11:06,230
>> Så det kan lige så godt være
ligesom en magisk besværgelse.

1523
01:11:06,230 --> 01:11:11,300
Det er ikke alt, klar, men det har
noget at gøre med den viewport,

1524
01:11:11,300 --> 01:11:15,070
og viewport er bare kroppen af ​​en
webside, den rektangulære region,

1525
01:11:15,070 --> 01:11:16,690
definerer det meste af siden.

1526
01:11:16,690 --> 01:11:19,060
Og det er bare at fortælle
browseren, ved du hvad?

1527
01:11:19,060 --> 01:11:22,589
Gøre bredden af ​​denne side
effektivt lig med enhedens bredde.

1528
01:11:22,589 --> 01:11:25,380
Med andre ord, ikke antage, at
du har slags ubegrænset plads.

1529
01:11:25,380 --> 01:11:29,920
Antag, at du kun har så meget
plads som selve enheden er stor.

1530
01:11:29,920 --> 01:11:34,454
Og så nu, hvis jeg genindlæse denne
i min browser, ser jeg ingen ændring.

1531
01:11:34,454 --> 01:11:37,370
Men hvis jeg gjorde dette correctly-- og
lad mig krydser min fingers-- hvis du alle

1532
01:11:37,370 --> 01:11:42,920
genindlæse dine telefoner, gør du
se en overbevisende forandring?

1533
01:11:42,920 --> 01:11:43,620
Ja, er at--

1534
01:11:43,620 --> 01:11:45,067
>> PUBLIKUM: [uhørligt]

1535
01:11:45,067 --> 01:11:45,900
DAVID J. MALAN: Ja.

1536
01:11:45,900 --> 01:11:46,400
OKAY.

1537
01:11:46,400 --> 01:11:47,850
Så velsagtens mere læsbar nu?

1538
01:11:47,850 --> 01:11:53,070
Stadig lille, for at være fair, men ikke
så lille som at være uhåndterlige.

1539
01:11:53,070 --> 01:11:56,920
Og jeg kunne sikkert tilsidesætte denne
videre med CSS eller på serveren side,

1540
01:11:56,920 --> 01:12:00,120
men i stigende grad, hvad du er
se er flere og flere funktioner

1541
01:12:00,120 --> 01:12:02,900
føjes til
klientsiden environments--

1542
01:12:02,900 --> 01:12:06,530
JavaScript, som vi vil diskutere
i morgen, CSS, og HTML-- så

1543
01:12:06,530 --> 01:12:09,190
at alle disse forespørgsler
kan gøres på klienten

1544
01:12:09,190 --> 01:12:11,910
således at genere den
server en masse mindre og ikke

1545
01:12:11,910 --> 01:12:14,530
at nødt til at holde op med, for
eksempel den konstante stormløb

1546
01:12:14,530 --> 01:12:17,210
af nyt operativsystem-system
versioner, nye browserversioner.

1547
01:12:17,210 --> 01:12:20,190
Du kan bare lade browseren
spørger enheden, hvor stor er du,

1548
01:12:20,190 --> 01:12:22,890
og derefter foretage noget logisk
beslutninger baseret på det.

1549
01:12:22,890 --> 01:12:25,140
Men vi vil se flere muligheder
for logiske beslutninger

1550
01:12:25,140 --> 01:12:27,223
i morgen i forbindelse med
af et programmeringssprog.

1551
01:12:27,223 --> 01:12:29,800

1552
01:12:29,800 --> 01:12:32,760
>> Så nogen spørgsmål, så,
på webudvikling?

1553
01:12:32,760 --> 01:12:36,130
I dag er ikke webprogrammering, per
se, da de fleste alt, hvad vi gjorde

1554
01:12:36,130 --> 01:12:38,370
var meget æstetisk, hvis du vil.

1555
01:12:38,370 --> 01:12:41,750
Der er ingen beslutningsprocessen i
den kode, vi har skrevet,

1556
01:12:41,750 --> 01:12:44,990
og så det er derfor, HTML er et markup
sprog, ikke et programmeringssprog.

1557
01:12:44,990 --> 01:12:47,140
Men i morgen tager vi
et hurtigt kig, i sidste ende,

1558
01:12:47,140 --> 01:12:49,340
på JavaScript, som er
et virkeligt programmering

1559
01:12:49,340 --> 01:12:54,220
sprog, der lader os gøre lidt mere.

1560
01:12:54,220 --> 01:12:56,800
>> Nogen spørgsmål?

1561
01:12:56,800 --> 01:13:00,480
Nå, lad mig foreslå to
muligheder valgfri for hjemmearbejde.

1562
01:13:00,480 --> 01:13:02,900
Man is-- disse Cloud9
konti vil ikke udløbe.

1563
01:13:02,900 --> 01:13:04,669
Du er velkommen til at bruge
dem til at rode med.

1564
01:13:04,669 --> 01:13:05,960
Det er gratis serviceniveau.

1565
01:13:05,960 --> 01:13:08,754
Indse, at hvis, når du opretter
din arbejdsplads, du gjorde det offentligt,

1566
01:13:08,754 --> 01:13:11,670
der betyder, at alle på
internettet kan se, hvad du skriver.

1567
01:13:11,670 --> 01:13:15,104
Så måske bare overveje
ikke pinligt dig selv

1568
01:13:15,104 --> 01:13:18,020
hvis du lægger dit første web
side derude offentligt uheld,

1569
01:13:18,020 --> 01:13:20,134
men ingen kommer til at
ved at se der alligevel.

1570
01:13:20,134 --> 01:13:23,760
>> Og to-- lad mig kaste
op denne URL så godt,

1571
01:13:23,760 --> 01:13:28,250
især hvis du kom i dag et
lidt mindre behagelig end andre,

1572
01:13:28,250 --> 01:13:30,430
usikker på, hvad alle disse ting betyder.

1573
01:13:30,430 --> 01:13:36,780
Erkend, at meget mere af denne video,
som både er en god måde at falde i søvn

1574
01:13:36,780 --> 01:13:39,380
og også til at grine, mens
Herved har også

1575
01:13:39,380 --> 01:13:44,300
en masse samfundsmæssigt interessant
og sikkerhedsrelaterede relevante diskussioner

1576
01:13:44,300 --> 01:13:47,370
deri fra John Oliver,
omend en komiker.

1577
01:13:47,370 --> 01:13:55,456
>> Men hvis der ikke er flere spørgsmål,
det bringer os til receptionen.

1578
01:13:55,456 --> 01:13:56,830
Så hvorfor jeg ikke tænde for musikken.

1579
01:13:56,830 --> 01:13:58,610
Der bør være drikkevarer
og snacks udenfor.

1580
01:13:58,610 --> 01:14:00,220
Jeg er glad for at blande sig, så
længe folk gerne vil,

1581
01:14:00,220 --> 01:14:01,600
besvare spørgsmål mere en-til-en.

1582
01:14:01,600 --> 01:14:03,330
Men ellers, er du velkommen
at tage ud på noget tidspunkt,

1583
01:14:03,330 --> 01:14:05,740
og vi vil se dig igen
i morgen formiddag til lidt mere.

1584
01:14:05,740 --> 01:14:07,290
Okay, tak.

1585
01:14:07,290 --> 01:14:10,428