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

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

3
00:00:01,210 --> 00:00:02,160
Vi är tillbaka.

4
00:00:02,160 --> 00:00:05,810
Så målet för denna sista session
är att införa några fler begrepp

5
00:00:05,810 --> 00:00:09,290
men också ge alla en chans
att typ av sträcka fingrarna

6
00:00:09,290 --> 00:00:11,270
och faktiskt göra något
lite hands-on.

7
00:00:11,270 --> 00:00:13,897
Målet är inte att vända
oss alla i webbutvecklare

8
00:00:13,897 --> 00:00:16,230
på något sätt, men egentligen bara
att ge dig en smak av vissa

9
00:00:16,230 --> 00:00:21,750
av de grundläggande konstruktionerna enligt vad
går in i webbprogrammering och idag webben

10
00:00:21,750 --> 00:00:23,980
utveckling, så det
statiska sidan av saker--

11
00:00:23,980 --> 00:00:26,660
ingen logik, ingen programmering
språk, bara statiskt innehåll.

12
00:00:26,660 --> 00:00:29,660
Och det kommer att ge oss en möjlighet
att faktiskt se vad en webbserver är,

13
00:00:29,660 --> 00:00:34,140
Se vad en HTML-fil är, se vad
det är HTTP är faktiskt betjäna upp.

14
00:00:34,140 --> 00:00:38,600
Men innan vi dyka i, någon retroaktiv
frågor om cloud computing

15
00:00:38,600 --> 00:00:43,922
eller säkerhet eller något däremellan?

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

17
00:00:44,890 --> 00:00:47,181
Okej, låt oss
göra detta, ifall

18
00:00:47,181 --> 00:00:49,680
processen för att registrera dig för
något tar några minuter.

19
00:00:49,680 --> 00:00:51,221
Vi kommer att låta den göra det i bakgrunden.

20
00:00:51,221 --> 00:00:56,860
Gå vidare, om du kunde,
till denna URL här-- c9.io.

21
00:00:56,860 --> 00:01:02,810
Detta är en tredje part service--
plattform som en tjänst, om du will--

22
00:01:02,810 --> 00:01:05,190
som kommer att bjuda in dig
registrera dig för ett konto,

23
00:01:05,190 --> 00:01:08,650
och det kommer att ge er alla
ett konto i den så kallade molnet

24
00:01:08,650 --> 00:01:11,330
på någon annans infrastruktur,
ett företag som heter Cloud9.

25
00:01:11,330 --> 00:01:13,350
Men vad är trevligt om
detta är att de ger dig

26
00:01:13,350 --> 00:01:15,990
en approximation av en
faktiska verkliga utveckling

27
00:01:15,990 --> 00:01:18,530
miljö, om än i
moln och i en webbläsare,

28
00:01:18,530 --> 00:01:21,175
och vi kommer att använda denna för att verkligen
experimentera lite idag.

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

30
00:01:27,116 --> 00:01:30,260
Och sedan gå vidare och bara navigera
din väg till registreringsprocessen

31
00:01:30,260 --> 00:01:32,630
om du kunde.

32
00:01:32,630 --> 00:01:36,080
Så vi råkar använda detta i klassen
Jag undervisar för alla våra elever,

33
00:01:36,080 --> 00:01:39,140
både på campus och off nu, och
det är ersatt vad historiskt

34
00:01:39,140 --> 00:01:41,390
annars var nedladdningsbar programvara.

35
00:01:41,390 --> 00:01:44,620
Så vad du får tillgång till
är en av dessa virtuella maskiner,

36
00:01:44,620 --> 00:01:46,460
i huvudsak som jag beskrev tidigare.

37
00:01:46,460 --> 00:01:50,260
Så detta företag Cloud9 förmodligen
hyror från en tredje Party-- verkligen

38
00:01:50,260 --> 00:01:52,760
i detta fall, Google-- helhet
gäng virtuella maskiner

39
00:01:52,760 --> 00:01:56,500
att de på något sätt hugga upp i
illusionen av enskilda servrar

40
00:01:56,500 --> 00:01:58,610
att var och en av oss har full kontroll över.

41
00:01:58,610 --> 00:02:01,640
Det är inte helt korrekt att säga
att de är virtuella maskiner,

42
00:02:01,640 --> 00:02:04,550
men eftersom det
Cloud9 använder faktiskt

43
00:02:04,550 --> 00:02:07,570
är en något nyare teknik
kallas containerisering.

44
00:02:07,570 --> 00:02:13,150
Och låt mig ta den här bilden
här för att måla bilden.

45
00:02:13,150 --> 00:02:16,540
>> En behållare är, om
ni minns bilden

46
00:02:16,540 --> 00:02:19,900
från tidigare lite ljusare
vikt än en virtuell maskin.

47
00:02:19,900 --> 00:02:22,090
I själva verket, medan förra
När vi talade om det

48
00:02:22,090 --> 00:02:25,170
är en rörelse
system och en hypervisor

49
00:02:25,170 --> 00:02:28,260
och sedan gästoperativsystemet, gäst
operativsystem, gästoperativsystemet

50
00:02:28,260 --> 00:02:30,940
systemet, på toppen av din
fysisk hårdvara,

51
00:02:30,940 --> 00:02:33,740
skillnaden med denna nyare
teknik, containerisering,

52
00:02:33,740 --> 00:02:37,290
är att de alla på något sätt delar
samma operativsystem.

53
00:02:37,290 --> 00:02:39,970
Men de fortfarande skapa
illusionen av alla

54
00:02:39,970 --> 00:02:44,590
har sin egen exklusiva
administrativa rättigheter och filer

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

56
00:02:45,400 --> 00:02:48,230
Men det finns mindre programvara i
mellan dig och hårdvaran.

57
00:02:48,230 --> 00:02:52,260
Vars resultat är, i
teori, en högre prestanda,

58
00:02:52,260 --> 00:02:55,470
eftersom du använder eller
slösa mindre resurser

59
00:02:55,470 --> 00:02:57,360
på den så kallade virtualiseringslagret.

60
00:02:57,360 --> 00:02:59,420
Så detta kallas
container av naturen

61
00:02:59,420 --> 00:03:02,920
med hjälp av en teknik som kallas Docker,
vilket är mycket kommer till sin rätt.

62
00:03:02,920 --> 00:03:05,086
Och detta är något som
ingenjörer på ditt företag

63
00:03:05,086 --> 00:03:08,610
kanske slags slags börja prata
om snart om de inte redan har,

64
00:03:08,610 --> 00:03:11,590
men det är verkligen ingen
anledning att hoppa på någon bandwagons.

65
00:03:11,590 --> 00:03:15,410
>> Så med det sagt, vad
du ser förmodligen nu

66
00:03:15,410 --> 00:03:22,670
är en skärm som ser lite ut så här.

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

68
00:03:23,170 --> 00:03:25,260
Och ring mig över om inte.

69
00:03:25,260 --> 00:03:27,440
Och om so-- jag ska komma över om inte.

70
00:03:27,440 --> 00:03:30,244
Gå vidare och klicka på den stora
plus att skapa en arbetsyta,

71
00:03:30,244 --> 00:03:31,660
och du ser en skärm som denna.

72
00:03:31,660 --> 00:03:35,020
Du kan ringa arbetsytan
namnge vad du vill nu.

73
00:03:35,020 --> 00:03:38,660
Och bara faktiskt för enkelhets skull
gå och-- väl, några av er

74
00:03:38,660 --> 00:03:39,660
redan har arbetsytor.

75
00:03:39,660 --> 00:03:47,050
Kalla det vad du want-- företag,
Harvard, torsdag, vad du vill.

76
00:03:47,050 --> 00:03:48,800
Du behöver inte en beskrivning.

77
00:03:48,800 --> 00:03:52,380
Du kan lämna den privata, om du
redan har en massa arbetsytor.

78
00:03:52,380 --> 00:03:55,280
Om du är tvungen att göra det offentligt,
det är bra för dagens ändamål.

79
00:03:55,280 --> 00:03:56,750
Här är också en av de upsells.

80
00:03:56,750 --> 00:03:59,939
Du får en privat arbetsplats efter
standard. Men om du vill ha mer,

81
00:03:59,939 --> 00:04:00,980
du måste betala för mer.

82
00:04:00,980 --> 00:04:02,870
Annars tvinga de dig
att göra din offentligt arbete.

83
00:04:02,870 --> 00:04:05,600
Men det är bra, eftersom de också
rikta detta på öppen källkod samhällen

84
00:04:05,600 --> 00:04:07,700
att uppmuntra människor att
faktiskt samarbeta.

85
00:04:07,700 --> 00:04:10,699
>> Och det sista som är viktigt,
är dock, när du har valt ett namn

86
00:04:10,699 --> 00:04:17,140
och när du har valt privat eller offentlig,
klicka HTML5, den stora orange ikon

87
00:04:17,140 --> 00:04:22,430
andra från vänster, och
klicka på Skapa arbetsyta.

88
00:04:22,430 --> 00:04:24,580
Och det kommer förmodligen
ta en minut eller så,

89
00:04:24,580 --> 00:04:26,540
men du kommer då att ha en
miljö, när du

90
00:04:26,540 --> 00:04:30,544
göra det, som ser påminner om
vad jag har på skärmen här nu.

91
00:04:30,544 --> 00:04:33,210
Men, återigen, kan det ta en minut
eller mer för att få till den här skärmen

92
00:04:33,210 --> 00:04:34,770
När du har klickat på Skapa arbetsyta.

93
00:04:34,770 --> 00:04:37,936
Men bara flagga mig över om du vill att jag
att ta en titt på något eller råd.

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

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

96
00:04:40,690 --> 00:04:42,390
Så jag ska bakgrund detta för nu.

97
00:04:42,390 --> 00:04:44,260
Ring mig över om du verkar
har några tekniska problem.

98
00:04:44,260 --> 00:04:46,210
Men, återigen, kan det ta en
lite för att det ska öppnas.

99
00:04:46,210 --> 00:04:49,570
Och låt oss gå vidare och prata om vad
det faktiskt innebär att göra en webbsida,

100
00:04:49,570 --> 00:04:52,780
vad HTML är, och hur allt detta
Nu sammanbinder som vi börjar

101
00:04:52,780 --> 00:04:54,730
att faktiskt använda en del av tekniken.

102
00:04:54,730 --> 00:04:58,310
Så visar det sig att jag kan
gå på min lilla Mac här,

103
00:04:58,310 --> 00:05:01,650
öppna ett enkelt program som heter
Textedit, eller på Windows jag kunde

104
00:05:01,650 --> 00:05:04,480
öppna något som kallas Notepad.exe.

105
00:05:04,480 --> 00:05:08,260
Och jag kunde helt enkelt göra något
som this-- "Hello, World."

106
00:05:08,260 --> 00:05:12,020
Och då kunde jag spara detta som
hello.txt Så ingen magi där.

107
00:05:12,020 --> 00:05:15,200
Detta har ingenting att göra med webben
programmering, ingenting att göra med HTML.

108
00:05:15,200 --> 00:05:16,790
Bara skapa en enkel textfil.

109
00:05:16,790 --> 00:05:20,600
Men det visar sig att en bana
sida är bokstavligen just detta.

110
00:05:20,600 --> 00:05:24,020
Det är en enkel textfil som innehåller text
att du kan skriva på tangentbordet,

111
00:05:24,020 --> 00:05:30,070
men det typiskt men inte alltid
slutar i inte .txt men .html eller .htm.

112
00:05:30,070 --> 00:05:32,050
Och du inte bara
skriver ord i filen.

113
00:05:32,050 --> 00:05:35,280
Du har faktiskt att använda saker som kallas
taggar eller, mer allmänt, något

114
00:05:35,280 --> 00:05:37,190
kallas märkningsspråk.

115
00:05:37,190 --> 00:05:40,510
>> Så jag kommer att mycket snabbt skriva
och sedan förklara följande.

116
00:05:40,510 --> 00:05:42,290
Jag ska först
skriver detta, som säger,

117
00:05:42,290 --> 00:05:45,730
hej, webbläsare, här kommer en
webbsida skriven i HTML.

118
00:05:45,730 --> 00:05:51,850
Och dessa två saker att säga tillsammans, hej,
webbläsare, är verkligen HTML följande.

119
00:05:51,850 --> 00:05:55,790
Hej, webbläsare, här kommer
huvudet eller toppen av min sida.

120
00:05:55,790 --> 00:05:59,900
Hej, webbläsare, insidan av toppen av
min sida, sätta en titel som är, "Hej,

121
00:05:59,900 --> 00:06:01,610
värld."

122
00:06:01,610 --> 00:06:08,370
Hej, webbläsare, efter chefen för min
sida, här kommer kroppen av min sida.

123
00:06:08,370 --> 00:06:12,170
Och hej, webbläsare, kroppen av min
sida bör också säga, "Hello World".

124
00:06:12,170 --> 00:06:15,500
Så vad är de framträdande detaljer här?

125
00:06:15,500 --> 00:06:17,960
Detta är vad som är allmänt
kallas en förklaring doc-typ,

126
00:06:17,960 --> 00:06:20,190
och, uppriktigt sagt, det är lite
svårt att memorera detta till en början.

127
00:06:20,190 --> 00:06:21,481
Du kopiera och klistra in bara typ av det.

128
00:06:21,481 --> 00:06:23,760
Detta är den formella sättet
att säga, hej, webbläsare,

129
00:06:23,760 --> 00:06:28,030
Jag använder HTML version 5 som
kom ut något under senare tid.

130
00:06:28,030 --> 00:06:31,380
Det är en magisk besvärjelse att vissa
människor med en dålig känsla för design

131
00:06:31,380 --> 00:06:33,640
beslutat att lägga på
högst upp i filen.

132
00:06:33,640 --> 00:06:35,473
Även om det är en
lite hemligt, det är allt

133
00:06:35,473 --> 00:06:38,250
det means-- hey, webbläsare, här
levereras med version 5 av HTML.

134
00:06:38,250 --> 00:06:41,741
>> Resten av detta har varit med oss
under en tid nu, historiskt,

135
00:06:41,741 --> 00:06:44,740
men det har varit utvecklas, och det är
förmodligen fått en lite enklare.

136
00:06:44,740 --> 00:06:47,320
Lägg märke till några egenskaper
av vad jag har markerat.

137
00:06:47,320 --> 00:06:49,890
Det finns dessa saker med vinklad
brackets-- den vänstra konsolen

138
00:06:49,890 --> 00:06:51,040
och den högra konsolen.

139
00:06:51,040 --> 00:06:52,490
Och lägg märke till symmetrin här.

140
00:06:52,490 --> 00:06:57,340
Och genom symmetri, jag menar, precis som jag
har denna starttagg här eller en öppen tagg

141
00:06:57,340 --> 00:07:01,560
om man så vill, här nere har jag en
tagg eller en sluttagg som är

142
00:07:01,560 --> 00:07:06,460
annorlunda endast i den mån det har denna
snedstreck i början av ordet

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

144
00:07:07,360 --> 00:07:09,360
Och du kan tänka på
detta som jag var nonchalant

145
00:07:09,360 --> 00:07:12,280
föreslår innan, hej,
webbläsare, här kommer några HTML.

146
00:07:12,280 --> 00:07:16,060
Och omvänt, hej, webbläsare, det är
det för HTML-- start och slut.

147
00:07:16,060 --> 00:07:18,440
>> Samtidigt hey, webbläsare, här
kommer chefen för min sida.

148
00:07:18,440 --> 00:07:20,140
Hej, webbläsare, det är det för huvudet.

149
00:07:20,140 --> 00:07:22,240
Hej, webbläsare, här är
kroppen av min sida.

150
00:07:22,240 --> 00:07:24,020
Hej, webbläsare, det är det för kroppen.

151
00:07:24,020 --> 00:07:26,940
Och insidan av detta finns en viss
godtycklig text för nu.

152
00:07:26,940 --> 00:07:30,520
Och insidan av huvudet, under tiden,
är en godtycklig men taggade,

153
00:07:30,520 --> 00:07:34,410
så att säga, text som säger titeln
min sida ska vara "Hello, World."

154
00:07:34,410 --> 00:07:37,470
Nu, för nu kan du
anta att webbläsarna

155
00:07:37,470 --> 00:07:41,762
har only-- eller snarare webbsidor har
endast två parts-- huvudet och kroppen.

156
00:07:41,762 --> 00:07:44,220
Och huvudet är i allmänhet bara
som menyraden, grejer

157
00:07:44,220 --> 00:07:45,510
egentligen bara högst upp.

158
00:07:45,510 --> 00:07:48,910
Och kroppen är modet på sidan,
allt i det stora rektangel

159
00:07:48,910 --> 00:07:50,239
som fyller hela skärmen.

160
00:07:50,239 --> 00:07:51,780
Så jag kommer att gå vidare och göra det.

161
00:07:51,780 --> 00:07:54,400
Jag kommer att gå vidare och
klicka på Spara, Arkiv Spara.

162
00:07:54,400 --> 00:07:58,580
Och jag kommer att spara
detta som hello.html,

163
00:07:58,580 --> 00:08:00,870
och jag ska bara
satte den på mitt skrivbord.

164
00:08:00,870 --> 00:08:03,520
Och jag kommer att gå
framåt och klicka på Spara.

165
00:08:03,520 --> 00:08:05,806
Och notice-- min Mac på
minst skriker på mig.

166
00:08:05,806 --> 00:08:07,180
Är du säker på att du vill göra detta?

167
00:08:07,180 --> 00:08:08,710
Och jag kommer att säga, ja, använda HTML.

168
00:08:08,710 --> 00:08:10,400
Jag vet bättre i det här fallet.

169
00:08:10,400 --> 00:08:14,686
Och nu ska jag gå till mitt skrivbord
där jag har den här filen plötsligt.

170
00:08:14,686 --> 00:08:16,060
Och jag kommer att dubbelklicka på den.

171
00:08:16,060 --> 00:08:18,268
Och du kommer att märka att genom
standard öppnade Chrome upp.

172
00:08:18,268 --> 00:08:19,996
Det beror på att det är
min standardwebbläsare.

173
00:08:19,996 --> 00:08:21,370
Och det bara säger: "Hej, världen".

174
00:08:21,370 --> 00:08:23,078
Men det säger "Hej,
värld "på två ställen.

175
00:08:23,078 --> 00:08:23,979
Lägg märke till uppe till vänster.

176
00:08:23,979 --> 00:08:25,020
Ganska svårt att missa det.

177
00:08:25,020 --> 00:08:26,180
Det är stora och djärva.

178
00:08:26,180 --> 00:08:30,690
Och var annars verkar det
att säga, "hej, världen"?

179
00:08:30,690 --> 00:08:31,470
>> PUBLIK: Fliken.

180
00:08:31,470 --> 00:08:33,100
>> DAVID J. MALAN: Ja, fliken själv.

181
00:08:33,100 --> 00:08:35,159
Så när jag sa chefen för
sida är allt upp top--

182
00:08:35,159 --> 00:08:36,367
och detta är den i rubriken.

183
00:08:36,367 --> 00:08:37,710
Det är bara på fliken här.

184
00:08:37,710 --> 00:08:40,320
Och jag kan dra den här fliken
ut för att inte blanda ihop.

185
00:08:40,320 --> 00:08:43,360
Detta är bara en flik nu,
och faktiskt ser vi "Hej, världen"

186
00:08:43,360 --> 00:08:45,970
upp här och "Hej, världen" här nere.

187
00:08:45,970 --> 00:08:47,160
Så ganska enkelt.

188
00:08:47,160 --> 00:08:49,050
Men det är också ganska enkelt.

189
00:08:49,050 --> 00:08:50,440
Och faktiskt, jag zoomat in.

190
00:08:50,440 --> 00:08:53,272
Jag kan ändra teckenstorlek bara
att förstora för tillgänglighet.

191
00:08:53,272 --> 00:08:56,830
Men låt oss nu göra något
lite mer intressant.

192
00:08:56,830 --> 00:08:59,760
>> Jag kommer att go-- hoppsan, låt
mig komma tillbaka till min textfil.

193
00:08:59,760 --> 00:09:02,400
Jag kommer tillbaka till min
textfil, och jag kommer

194
00:09:02,400 --> 00:09:06,320
att ändra på detta och säga
"Hej, Disney World."

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

196
00:09:07,970 --> 00:09:10,919
Och gå tillbaka till min
webbläsare och klicka på Ladda.

197
00:09:10,919 --> 00:09:12,710
Och nu, naturligtvis, det
säger "Disney World."

198
00:09:12,710 --> 00:09:15,500
Och jag kommer att artificiellt zooma
i bara så det är lättare att se.

199
00:09:15,500 --> 00:09:19,012
Så nu, tyvärr, jag slags vill
att-- faktiskt, det är en Mac-funktionen.

200
00:09:19,012 --> 00:09:21,720
Jag vill klicka på Disney World
och gå någonstans som disney.com,

201
00:09:21,720 --> 00:09:23,290
men det fungerar inte.

202
00:09:23,290 --> 00:09:26,850
Så en grundläggande grundsats av banan är
hyperlänkar, länkar som går någon annanstans.

203
00:09:26,850 --> 00:09:28,390
Så hur gör jag det?

204
00:09:28,390 --> 00:09:34,690
Tja, jag kan bara säga,
"Hej, http://www.disney.com."

205
00:09:34,690 --> 00:09:36,110
Spara detta.

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

207
00:09:37,620 --> 00:09:39,400
Men även detta, inte klickbara.

208
00:09:39,400 --> 00:09:42,930
Och vad är trevligt här, även om
detta är inte fungerar ännu,

209
00:09:42,930 --> 00:09:45,930
är att det verkar som om
webbläsare bokstavligen bara har

210
00:09:45,930 --> 00:09:46,950
vad jag säger det att göra.

211
00:09:46,950 --> 00:09:50,110
Så om jag skriver bara en URL som denna,
det är bara kommer att visa mig webbadressen.

212
00:09:50,110 --> 00:09:54,270
Jag behöver använda taggar eller markup
språk för att faktiskt berätta

213
00:09:54,270 --> 00:09:55,621
webbläsaren att göra ännu mer.

214
00:09:55,621 --> 00:09:57,870
Så jag kommer att gå vidare och
ta bort detta för ett ögonblick.

215
00:09:57,870 --> 00:10:00,980
Och jag kommer att säga, hej,
webbläsare, starta ett ankare här,

216
00:10:00,980 --> 00:10:02,650
en länk så att säga.

217
00:10:02,650 --> 00:10:07,500
Och hyper-referens, destinationen
av att ankaret, bör vara den här webbadressen.

218
00:10:07,500 --> 00:10:08,750
Och lägg märke till mina citat.

219
00:10:08,750 --> 00:10:11,590
Jag skulle kunna använda enkla citattecken, också,
men du måste vara konsekvent,

220
00:10:11,590 --> 00:10:14,270
och jag skulle i allmänhet bara använda
citationstecken för att hålla det enkelt.

221
00:10:14,270 --> 00:10:16,820
Märker jag ska stänga taggen.

222
00:10:16,820 --> 00:10:21,160
Och så här kommer jag
att säga, "Disney World."

223
00:10:21,160 --> 00:10:26,890
Och nu behöver jag lite symmetry--
öppna fäste, / a, stängd konsol.

224
00:10:26,890 --> 00:10:28,090
>> Så vad har jag infört?

225
00:10:28,090 --> 00:10:30,100
Vi har haft några taggar redan.

226
00:10:30,100 --> 00:10:32,410
HTML, huvud, titel, kropp,
är alla taggar, så att säga,

227
00:10:32,410 --> 00:10:34,280
med öppna och slutna motsvarigheter.

228
00:10:34,280 --> 00:10:36,530
Men varsel, är den här sortens
av fundamentalt annorlunda.

229
00:10:36,530 --> 00:10:39,140
Detta är vad vi kallar
i HTML ett attribut.

230
00:10:39,140 --> 00:10:41,451
Och ett attribut är
bara en nyckel-värde-par.

231
00:10:41,451 --> 00:10:43,950
Detta är en gemensam sak i
dator science-- nyckel-värdepar.

232
00:10:43,950 --> 00:10:45,770
Det är typ av verktyg för handeln.

233
00:10:45,770 --> 00:10:47,040
En nyckel och ett värde.

234
00:10:47,040 --> 00:10:49,390
Ett ord och sedan några
annat ord eller ord.

235
00:10:49,390 --> 00:10:53,790
Och i det här fallet, är nyckeln href,
och värdet är att hela webbadressen.

236
00:10:53,790 --> 00:10:57,890
Och vad ett attribut gör det
påverkar beteendet hos en tagg.

237
00:10:57,890 --> 00:11:01,010
Och i det här fallet måste vi påverka
beteendet hos ankarmärket,

238
00:11:01,010 --> 00:11:04,140
eftersom vi måste förankra
denna länk i någonstans.

239
00:11:04,140 --> 00:11:06,960
Och hur du gör det är
med hjälp av attributet.

240
00:11:06,960 --> 00:11:08,970
>> Så jag kommer att gå vidare
och spara filen nu.

241
00:11:08,970 --> 00:11:11,300
Gå tillbaka till min webbläsare och ladda om.

242
00:11:11,300 --> 00:11:14,580
Och voila, har vi nu
början av en legitim webbsida.

243
00:11:14,580 --> 00:11:18,420
Super enkel, men om jag svävar över
this-- meddelande i det nedre vänstra hörnet,

244
00:11:18,420 --> 00:11:19,830
det är super-liten.

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

246
00:11:21,730 --> 00:11:27,076
Och om jag klickar på den, verkligen detta
vispar mig bort till disney.com.

247
00:11:27,076 --> 00:11:29,380
Nu märkliga
här är att det inte är

248
00:11:29,380 --> 00:11:33,940
den best-- mest säljbara webbadressen, men
det är bra eftersom den här filen inte

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

250
00:11:35,360 --> 00:11:39,740
Det finns som en lokal fil i till synes
mina Användare directory-- / jharvard--

251
00:11:39,740 --> 00:11:41,890
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 råkar bara vara lokal.

254
00:11:43,800 --> 00:11:47,050
Tyvärr kan ingen av er besöka
detta, för om du skriver den här webbadressen,

255
00:11:47,050 --> 00:11:49,980
du skulle tala om din webbläsare,
leta efter en fil som heter hello.html

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

257
00:11:50,772 --> 00:11:53,271
Och, naturligtvis, om du inte har
följt tillsammans manuellt

258
00:11:53,271 --> 00:11:54,530
det kommer inte att finnas där.

259
00:11:54,530 --> 00:11:55,190
>> Så det är bra.

260
00:11:55,190 --> 00:11:57,815
Vi behöver fortfarande ett sätt, i slutändan,
att få den här filen i banan,

261
00:11:57,815 --> 00:12:01,180
men låt oss retas isär ett par
konsekvenser för säkerheten vad vi just

262
00:12:01,180 --> 00:12:04,850
såg och knyta den tillbaka till den tidigare
diskussion från i morse.

263
00:12:04,850 --> 00:12:08,200
Det visar sig att om en
webbläsare bokstavligen bara gör

264
00:12:08,200 --> 00:12:12,560
vad jag säger det att göra, och det verkar
att vara fallet att ett ankare tagg är

265
00:12:12,560 --> 00:12:17,380
påverkas av värdet av
detta attribut kallas href

266
00:12:17,380 --> 00:12:20,810
men det visar denna
text, skulle detta verkar

267
00:12:20,810 --> 00:12:26,520
att antyda att jag kunde sätta webbadressen
på båda ställena och sedan ladda

268
00:12:26,520 --> 00:12:29,100
och nu se webbadressen och gå till webbadressen.

269
00:12:29,100 --> 00:12:32,680
Lägg märke till om jag muspekaren över det nedre vänstra,
Jag verkligen kommer fortfarande disney.com.

270
00:12:32,680 --> 00:12:38,340
>> Så om du någonsin varit
phished-- P-H-I-S-H-E-D--

271
00:12:38,340 --> 00:12:42,820
med en av de falska e-postmeddelanden
från som PayPal din bank,

272
00:12:42,820 --> 00:12:46,470
du har förmodligen fått länkar inne
av e-post som du läser det

273
00:12:46,470 --> 00:12:49,970
berättar du klicka här för att gå bekräfta
ditt lösenord eller bekräfta ditt födelsedatum

274
00:12:49,970 --> 00:12:53,840
eller social eller något socialt
engineering dig att avslöja

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

276
00:12:54,920 --> 00:12:57,625
Tja, jag kunde slags ta
Fördelen med detta, kunde inte jag?

277
00:12:57,625 --> 00:13:01,240
Jag kunde säga något
liknande, www.paypal.com.

278
00:13:01,240 --> 00:13:11,340
Och i stället för disney.com jag
kunde gå till, liksom, badguy.com.

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

280
00:13:12,850 --> 00:13:16,620
Och hur lätt är det att lura,
speciellt en icke-teknisk läsare

281
00:13:16,620 --> 00:13:20,649
eller en summariskt läsning
läsare än att klicka

282
00:13:20,649 --> 00:13:23,940
en länk som den här, som om jag klickar det--
Jag faktiskt inte vill gå badguy.com.

283
00:13:23,940 --> 00:13:25,398
Jag vet inte vad som faktiskt finns.

284
00:13:25,398 --> 00:13:30,080
Så paypal.com, varsel, är
vad det säger att det kommer att,

285
00:13:30,080 --> 00:13:33,210
men naturligtvis, om jag tittar ner
super-låg, det är lite suddiga,

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

287
00:13:34,230 --> 00:13:38,644
Det är bara berätta just nu
att jag ska till fel ställe.

288
00:13:38,644 --> 00:13:41,560
Och när jag sade tidigare att bankerna
borde verkligen inte uppmuntra eller tåg

289
00:13:41,560 --> 00:13:44,510
användare till att klicka länkar, detta
är bara en manifestation av den.

290
00:13:44,510 --> 00:13:45,430
Och det är så enkelt.

291
00:13:45,430 --> 00:13:48,120
Du är nu en motståndare om
du göra något liknande

292
00:13:48,120 --> 00:13:51,000
och försök att lura en användare
i att besöka din webbplats.

293
00:13:51,000 --> 00:13:53,320
Men nu kommer vi att hålla
saker fin och ren.

294
00:13:53,320 --> 00:13:55,640
Vi kommer att gå vidare
och spola tillbaka dessa förändringar.

295
00:13:55,640 --> 00:13:56,530
Uppdatera sidan.

296
00:13:56,530 --> 00:13:57,740
Och jag går tillbaka till disney.com.

297
00:13:57,740 --> 00:14:00,660
>> Låt oss se om vi inte kan reta
Detta lägenhets lite mer.

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

299
00:14:04,160 --> 00:14:05,950
Jag kommer att säga här nere.

300
00:14:05,950 --> 00:14:08,220
Kanske kommer jag att göra några rum.

301
00:14:08,220 --> 00:14:12,730
"Vi hoppas att du ska trivas!"

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

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

304
00:14:15,850 --> 00:14:19,010
Det är inte rea-- det är inte
vad jag tänkt, eller hur?

305
00:14:19,010 --> 00:14:21,870
Jag menar, om jag behandla min text
fil som en ordbehandlare,

306
00:14:21,870 --> 00:14:24,894
vad gjorde du hoppas skulle hända här?

307
00:14:24,894 --> 00:14:27,060
Ja, jag tycker det
bör vara en radbrytning här,

308
00:14:27,060 --> 00:14:28,799
så det känns buggy på något sätt.

309
00:14:28,799 --> 00:14:31,090
Men det är faktiskt avsiktligt,
eftersom precis som tidigare,

310
00:14:31,090 --> 00:14:33,381
webbläsaren är bara att
gör vad du säger den att göra.

311
00:14:33,381 --> 00:14:34,806
Jag har inte sagt att bryta rader.

312
00:14:34,806 --> 00:14:37,930
Jag har inte sagt det att röra sig nedåt, även
Men intuitivt, jag känner att jag gjorde.

313
00:14:37,930 --> 00:14:39,805
Så visar det sig att vi behöver
lite mer markup,

314
00:14:39,805 --> 00:14:41,390
och jag kommer att fixa detta på följande sätt.

315
00:14:41,390 --> 00:14:46,160
Jag kommer att inleda denna första hello
med vad som kallas ett stycke tagg.

316
00:14:46,160 --> 00:14:48,920
Och då kommer jag att gå vidare
och linda denna andra meningen

317
00:14:48,920 --> 00:14:54,370
i en annan punkt taggen, även om
de är super-korta stycken.

318
00:14:54,370 --> 00:14:55,930
Nu ska jag spara.

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

320
00:14:57,160 --> 00:14:59,070
Och nu har vi att
utrymme, och vi slags

321
00:14:59,070 --> 00:15:01,680
har semantiken för
två separata stycken.

322
00:15:01,680 --> 00:15:05,290
>> Det är allt bra och bra, men det skulle
vara trevligt att lägga till en bild på denna sida,

323
00:15:05,290 --> 00:15:08,710
så jag kommer att leta efter
Musse Pigg på Google Bilder.

324
00:15:08,710 --> 00:15:12,830
Och bara för skojs skull, jag är
kommer att ta bilden.

325
00:15:12,830 --> 00:15:15,350
Jag kommer att gå vidare nu och
ta webbadressen till den här bilden

326
00:15:15,350 --> 00:15:16,510
även om det finns olika
sätt att göra detta.

327
00:15:16,510 --> 00:15:18,520
För nu, jag kommer bara att kopiera webbadressen.

328
00:15:18,520 --> 00:15:24,770
Jag kommer att gå tillbaka till min text
fil, och jag kommer att säga här,

329
00:15:24,770 --> 00:15:31,160
img src = quote unquote
webbadressen, superlång.

330
00:15:31,160 --> 00:15:34,580
Och då begreppet en
bild är lite annorlunda.

331
00:15:34,580 --> 00:15:38,640
Det finns egentligen ingen begreppet start
en bild och slutar en bild,

332
00:15:38,640 --> 00:15:40,630
som en start märka en sluttagg.

333
00:15:40,630 --> 00:15:43,840
Så det känns lite konstigt att
mig semantiskt att göra detta,

334
00:15:43,840 --> 00:15:45,390
att ha en nära-bildtaggen.

335
00:15:45,390 --> 00:15:46,780
Det är inte fel.

336
00:15:46,780 --> 00:15:48,840
Det är helt korrekt,
och det uppmuntras,

337
00:15:48,840 --> 00:15:50,870
men det finns en förkortning notation.

338
00:15:50,870 --> 00:15:53,780
Jag kan typ av samtidigt
öppna och stänga samma tagg,

339
00:15:53,780 --> 00:15:55,510
och som kommer att göra webbläsaren glad.

340
00:15:55,510 --> 00:15:56,950
Så det är bara en liten
mer kortfattad saker

341
00:15:56,950 --> 00:15:59,408
att begrepps verkligen inte
vettigt att börja och sluta.

342
00:15:59,408 --> 00:16:01,190
De är bara där, eller att de inte är.

343
00:16:01,190 --> 00:16:06,020
>> Så jag kommer att spara och gå tillbaka
min "Hej, världen" sida och reload.

344
00:16:06,020 --> 00:16:09,880
Och det är lite utom kontroll,
eftersom denna bild är faktiskt

345
00:16:09,880 --> 00:16:12,210
lite stor, men det är OK.

346
00:16:12,210 --> 00:16:13,710
Jag kunde ändra storlek på det i ett program.

347
00:16:13,710 --> 00:16:14,900
Eller vet du vad.

348
00:16:14,900 --> 00:16:17,350
Bara för att demonstrera, jag
kommer att faktiskt säga

349
00:16:17,350 --> 00:16:21,760
att bredden av denna sak bör
endast 200 pixlar, 200 punkter.

350
00:16:21,760 --> 00:16:24,360
Låt mig gå vidare och spara
och ladda, och nu sidan

351
00:16:24,360 --> 00:16:25,690
ser lite mer rimlig.

352
00:16:25,690 --> 00:16:27,260
Men märker mönstret.

353
00:16:27,260 --> 00:16:30,030
Tja, jag har typ av lärt er alla
HTML i någon mening, åtminstone

354
00:16:30,030 --> 00:16:33,531
konceptuellt, eftersom alla HTML är är
dessa tags-- öppna taggar, slutna taggar,

355
00:16:33,531 --> 00:16:35,280
och attribut som
ändra sitt beteende.

356
00:16:35,280 --> 00:16:38,380
Och, uppenbarligen, varje
tagg kan ha noll eller ett

357
00:16:38,380 --> 00:16:43,005
eller två eller flera attribut, varje dos om
som gör något lite annorlunda.

358
00:16:43,005 --> 00:16:44,380
Nu, hur vet du vad som finns?

359
00:16:44,380 --> 00:16:46,800
Du lyssnar bara någon
som mig berätta vad som finns,

360
00:16:46,800 --> 00:16:50,860
eller om du bara Google runt för en tutorial
på HTML, och det är verkligen denna enkla.

361
00:16:50,860 --> 00:16:54,030
>> Sannerligen, när jag var en undergrad
år sedan och lärde HTML,

362
00:16:54,030 --> 00:16:56,530
en av min matematik undervisning
assistenter tillbringade bara

363
00:16:56,530 --> 00:16:59,600
lite tid handledning mig
för som en halvtimme, en timme,

364
00:16:59,600 --> 00:17:00,660
och då jag var på väg.

365
00:17:00,660 --> 00:17:03,300
Jag var på väg mot att göra
de mest avskyvärda webbplatser någonsin,

366
00:17:03,300 --> 00:17:05,549
som uppenbarligen har jag inte
verkligen utvecklats bortom.

367
00:17:05,549 --> 00:17:09,849
Men poängen är att, när du
förstå dessa enkla ideas--

368
00:17:09,849 --> 00:17:13,450
om svårbegripliga text-- men dessa enkla
idéer om att starta en tanke

369
00:17:13,450 --> 00:17:15,960
och stänga en tanke, att hålla
allt fint balanserad,

370
00:17:15,960 --> 00:17:19,150
ser något upp, modifiera
beteendet hos den taggen, det är verkligen allt

371
00:17:19,150 --> 00:17:20,079
det finns det.

372
00:17:20,079 --> 00:17:28,140
Och i själva verket, om vi nu går till
något i stil google.com-- faktiskt,

373
00:17:28,140 --> 00:17:31,920
låt oss gå en plats lite mer
reasonable-- stanford.edu.

374
00:17:31,920 --> 00:17:37,800
Och jag kommer att gå till Visa,
Utvecklare, Visa källa.

375
00:17:37,800 --> 00:17:41,400
Det är fult, men notice--
och jag ska zooma i meddelandet

376
00:17:41,400 --> 00:17:43,432
några saker som är bekant redan.

377
00:17:43,432 --> 00:17:45,140
Det är det här upp här,
som är en webbläsare.

378
00:17:45,140 --> 00:17:46,800
Här kommer HTML5.

379
00:17:46,800 --> 00:17:47,634
Det finns HTML.

380
00:17:47,634 --> 00:17:49,550
Uppenbarligen finns det en
attribut att jag inte

381
00:17:49,550 --> 00:17:51,540
Använd som anger
språk på sidan,

382
00:17:51,540 --> 00:17:54,380
och detta kan hjälpa till med automatisk
översättning och sånt.

383
00:17:54,380 --> 00:17:55,546
Här är huvudet på sidan.

384
00:17:55,546 --> 00:17:57,790
Här är titeln på Stanford sida.

385
00:17:57,790 --> 00:17:59,832
Det finns en tagg jag inte
tala om yet-- metataggen.

386
00:17:59,832 --> 00:18:01,540
Det är bara sorts
bakgrundsinformation.

387
00:18:01,540 --> 00:18:04,210
Det hjälper med SEO, eller
sökmotoroptimering,

388
00:18:04,210 --> 00:18:06,320
eller Google-sökresultat eller liknande.

389
00:18:06,320 --> 00:18:09,029
Men om vi fortsätta leta, hålla
ser här är body-taggen.

390
00:18:09,029 --> 00:18:11,570
Och det finns knippen av andra
taggar vi inte har talat om ännu.

391
00:18:11,570 --> 00:18:13,750
Men Div är en för en
uppdelning av sidan.

392
00:18:13,750 --> 00:18:16,680
Det är som en osynlig rektangel
Om du slags vill mentalt

393
00:18:16,680 --> 00:18:20,160
dela din sida i
olika enheter på nätet.

394
00:18:20,160 --> 00:18:22,650
Och sedan massor av divs I
se, något som kallas klass,

395
00:18:22,650 --> 00:18:24,440
men vi ska återkomma till det.

396
00:18:24,440 --> 00:18:26,200
>> Detta är interesting-- formulär.

397
00:18:26,200 --> 00:18:27,730
Formulär är hela webben.

398
00:18:27,730 --> 00:18:30,310
Alla sökrutan du
någonsin använt är en form.

399
00:18:30,310 --> 00:18:31,490
Och så, låt oss faktiskt 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
Verkan av denna form, oavsett
historiska skäl, är webbadressen.

403
00:18:37,660 --> 00:18:38,840
Metod är "post."

404
00:18:38,840 --> 00:18:44,060
Det visade sig att HTTP-förfrågningar kan använda
verbet "få", som vi såg tidigare,

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

406
00:18:45,070 --> 00:18:47,030
Och kommer att se en skillnad
om detta i ett ögonblick.

407
00:18:47,030 --> 00:18:48,363
Låt oss faktiskt se vad detta är.

408
00:18:48,363 --> 00:18:49,830
Låt mig gå tillbaka till Stanford sida.

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

410
00:18:53,330 --> 00:18:54,485
Vad hoppar ut på dig?

411
00:18:54,485 --> 00:18:54,970
>> PUBLIK: sökrutan.

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

413
00:18:55,845 --> 00:18:58,410
Så upp längst upp till höger
här är sökrutan.

414
00:18:58,410 --> 00:19:02,441
Och det är hur de genomförs det-- en
tagg som är bokstavligen öppen fäste form.

415
00:19:02,441 --> 00:19:03,940
Och sedan ska vi söka efter något.

416
00:19:03,940 --> 00:19:09,220
Låt oss söka efter en kompis
av mine-- "Nick Parlante."

417
00:19:09,220 --> 00:19:11,380
Stiga på.

418
00:19:11,380 --> 00:19:13,750
Och naturligtvis, gick det att
en något annorlunda webbadress.

419
00:19:13,750 --> 00:19:15,140
Låt mig gå tillbaka hit.

420
00:19:15,140 --> 00:19:18,960
Låt oss söka efter "kurser."

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

422
00:19:19,460 --> 00:19:20,484
Gick till en annan adress.

423
00:19:20,484 --> 00:19:23,400
Så, Stanfords lägga till några magiska
att de inte tar mig till URL

424
00:19:23,400 --> 00:19:25,820
som vi såg i
åtgärd attribut där.

425
00:19:25,820 --> 00:19:32,480
Men denna form här genomförs rent
med hjälp av denna markering här, dessa taggar.

426
00:19:32,480 --> 00:19:35,710
I själva verket, här är ingången för
den typ av sökning som du vill.

427
00:19:35,710 --> 00:19:38,940
Här är ingång för
en annan typ av sökning.

428
00:19:38,940 --> 00:19:41,960
Här är ingången för själva strängen.

429
00:19:41,960 --> 00:19:45,394
Och så målet är inte att linda
våra sinnen runt alla dessa taggar

430
00:19:45,394 --> 00:19:46,060
men bara för att se.

431
00:19:46,060 --> 00:19:48,300
Det är bara att öppna och stänga
taggar och söker upp saker.

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
>> PUBLIK: [OHÖRBART]

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

436
00:19:51,925 --> 00:19:53,550
DAVID J. MALAN: Det är en bra fråga.

437
00:19:53,550 --> 00:19:54,660
Det är lite svårare att se.

438
00:19:54,660 --> 00:19:56,300
Låt mig återkomma till detta
fråga på bara några minuter

439
00:19:56,300 --> 00:19:59,000
när vi tittar på något som kallas
CSS, eller Cascading Style Sheets,

440
00:19:59,000 --> 00:20:02,500
och vi kan försöka att sluta
så mycket från sidan.

441
00:20:02,500 --> 00:20:08,090
Så om vi nu ta en titt på google.com,
Låt oss se vad deras sida ser ut.

442
00:20:08,090 --> 00:20:09,840
Du skulle they're-- som är söt idag.

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

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

445
00:20:12,990 --> 00:20:13,690
Helt klar.

446
00:20:13,690 --> 00:20:15,260
Okej, så Visa källa.

447
00:20:15,260 --> 00:20:19,590
Man skulle kunna tro Google har
riktigt nice källkod.

448
00:20:19,590 --> 00:20:24,970
Så uppenbarligen vad som händer här?

449
00:20:24,970 --> 00:20:27,880
Och i själva verket är detta inte ens HTML.

450
00:20:27,880 --> 00:20:30,930
Detta är något som kallas JavaScript.

451
00:20:30,930 --> 00:20:32,344
Och låt oss hålla på och gå.

452
00:20:32,344 --> 00:20:34,010
Jag vet inte ens där sidan börjar.

453
00:20:34,010 --> 00:20:37,240
Jag kommer att använda Command
F, öppna fäste HTML.

454
00:20:37,240 --> 00:20:38,200
Okej, det är det.

455
00:20:38,200 --> 00:20:44,150
Jag hittade i början av sidan, och
det finns så mycket grejer här.

456
00:20:44,150 --> 00:20:45,310
>> Vad är det egentligen som händer?

457
00:20:45,310 --> 00:20:47,460
Tja, du vet vad,
vi kan städa upp detta.

458
00:20:47,460 --> 00:20:52,109
Om jag istället gå till denna Inspektera
verktygsfältet denna speciella diagnosverktyg,

459
00:20:52,109 --> 00:20:54,150
och gå inte till nätverk,
där vi hålla i dag,

460
00:20:54,150 --> 00:20:56,420
men om jag går till Elements,
Vad är riktigt nice

461
00:20:56,420 --> 00:20:59,990
är att en webbläsare har en hel del
mycket bättre ögon än jag.

462
00:20:59,990 --> 00:21:02,670
Och webbläsaren kan läsa
att röra av en webbsida,

463
00:21:02,670 --> 00:21:04,700
som HTML mail vi bara
tittat på, och det kan

464
00:21:04,700 --> 00:21:08,340
tolka det eller läsa och
analysera det och formatera om den

465
00:21:08,340 --> 00:21:09,910
i en trevlig människa vänligt sätt.

466
00:21:09,910 --> 00:21:11,740
Så vad jag ser nu
i den här skärmen här

467
00:21:11,740 --> 00:21:15,470
enligt Elements, exakt samma innehåll,
men de har indragen allt,

468
00:21:15,470 --> 00:21:18,140
de har färglagt det, men
Det är exakt samma text

469
00:21:18,140 --> 00:21:19,620
att jag hämtat från servern.

470
00:21:19,620 --> 00:21:23,630
>> Och vad är trevligt nu är jag kan se
i kroppen, för instance-- varsel,

471
00:21:23,630 --> 00:21:26,480
sidan fortfarande består
av bara ett huvud och en kropp,

472
00:21:26,480 --> 00:21:28,660
och jag kan hierarkiskt dyka in här.

473
00:21:28,660 --> 00:21:32,420
Lägg märke till att Google verkar ha
att divs-- här och här.

474
00:21:32,420 --> 00:21:33,310
Jag kan expandera det.

475
00:21:33,310 --> 00:21:35,370
Det finns en hel massa andra divar.

476
00:21:35,370 --> 00:21:36,900
Så det är lite komplicerat.

477
00:21:36,900 --> 00:21:37,400
Men vänta.

478
00:21:37,400 --> 00:21:40,970
Detta verkar så mycket mer
läsbar, relativt, än detta.

479
00:21:40,970 --> 00:21:43,840
Varför är Google pinsamt
sig genom att skicka

480
00:21:43,840 --> 00:21:50,400
denna enorma röra av kod av något
sortera bara för att genomföra något

481
00:21:50,400 --> 00:21:53,640
som ser så enkelt vid första anblicken?

482
00:21:53,640 --> 00:21:55,270
Liksom, varför inte de lägga till fler utrymmen?

483
00:21:55,270 --> 00:21:56,811
Varför de inte trycka Enter som jag gjorde?

484
00:21:56,811 --> 00:21:59,110
Titta hur bra jag var
på att skriva en webbsida.

485
00:21:59,110 --> 00:22:00,680
Jag trycker på Retur så flitigt.

486
00:22:00,680 --> 00:22:03,760
Jag indragen så allt
är så söt och läsbar.

487
00:22:03,760 --> 00:22:08,463
Varför Google inte utövar samma?

488
00:22:08,463 --> 00:22:11,409
>> PUBLIK: [OHÖRBART]

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

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

491
00:22:13,180 --> 00:22:14,270
Väldigt rättvist.

492
00:22:14,270 --> 00:22:16,650
De har inte några
personen på Google manuellt

493
00:22:16,650 --> 00:22:18,160
uppdatera hemsidan längre.

494
00:22:18,160 --> 00:22:20,010
Det är inte 1999 längre.

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

496
00:22:21,140 --> 00:22:25,397
De har andra verktyg som
generera dynamiskt de är HTML.

497
00:22:25,397 --> 00:22:27,480
Naturligtvis att själva koden
skriven av människor,

498
00:22:27,480 --> 00:22:30,220
men verkligheten är,
det är ganska rimligt att säga,

499
00:22:30,220 --> 00:22:33,340
webbläsaren gör verkligen inte
care hur rörigt koden.

500
00:22:33,340 --> 00:22:35,940
Men det finns en ännu mer
tvingande tekniska skäl

501
00:22:35,940 --> 00:22:42,580
att Google distribuerar deras HTML
kod i en sådan slarvig, synes

502
00:22:42,580 --> 00:22:48,350
överväldigande sätt packat ihop
med mycket lite way-- mycket lite

503
00:22:48,350 --> 00:22:51,274
i vägen för formatering som jag gjorde.

504
00:22:51,274 --> 00:22:52,570
>> PUBLIK: [OHÖRBART]

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

506
00:22:53,528 --> 00:22:54,040
Varför?

507
00:22:54,040 --> 00:22:55,680
Och vad sa du, Lydia?

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

509
00:22:56,240 --> 00:22:57,281
Varför snabbare?

510
00:22:57,281 --> 00:22:58,156
PUBLIK: [OHÖRBART]

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

512
00:23:00,522 --> 00:23:02,230
DAVID J. MALAN: Det finns
inget utrymme att läsa.

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

514
00:23:02,730 --> 00:23:04,560
Så fundera på vad en plats är.

515
00:23:04,560 --> 00:23:08,394
Så varje tecken på tangentbordet tar
en viss mängd utrymme för att representera,

516
00:23:08,394 --> 00:23:10,560
antingen fysiskt, som om det
tar upp så mycket utrymme,

517
00:23:10,560 --> 00:23:13,250
eller på något sätt under den
huv, kräver att minnet.

518
00:23:13,250 --> 00:23:15,740
Och som en aside-- och vi ska
prata mer om detta tomorrow--

519
00:23:15,740 --> 00:23:19,930
varje tecken på tangentbordet
typiskt kräver 8 bitar, eller en bitgrupp.

520
00:23:19,930 --> 00:23:23,360
Så ett mönster av 8 nollor eller
kära, eller bara ett byte, som vi

521
00:23:23,360 --> 00:23:24,720
människor skulle normalt säga.

522
00:23:24,720 --> 00:23:27,690
Så det är liten, men
det är fortfarande icke-noll.

523
00:23:27,690 --> 00:23:29,940
Det är fortfarande en viss mängd utrymme.

524
00:23:29,940 --> 00:23:36,082
Så om en ingenjör eller Google träffar
mellanslagstangenten bara en gång, och antar

525
00:23:36,082 --> 00:23:38,540
Google-- det är super-popular--
Anta att en miljard människor

526
00:23:38,540 --> 00:23:40,780
besök deras hemsida en dag,
eller något antal människor

527
00:23:40,780 --> 00:23:43,290
Besök hemsidan en
miljard gånger om dagen,

528
00:23:43,290 --> 00:23:48,890
hur många ytterligare byte har att
mjukvaruingenjör bara kostar Google

529
00:23:48,890 --> 00:23:51,310
genom att slå hans eller hennes mellanslagstangenten en gång?

530
00:23:51,310 --> 00:23:52,692
>> PUBLIK: [OHÖRBART]

531
00:23:52,692 --> 00:23:54,150
DAVID J. MALAN: Inte riktigt så illa.

532
00:23:54,150 --> 00:23:57,070
Bara ett byte gånger en miljard.

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

534
00:23:57,871 --> 00:23:59,120
PUBLIK: 8 miljarder gigabyte.

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

536
00:24:00,370 --> 00:24:01,240
8 miljard byte.

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

538
00:24:02,410 --> 00:24:04,080
1 gigabyte skulle vara måttenhet.

539
00:24:04,080 --> 00:24:08,240
Om han eller hon gör två
utrymmen, 2 gigabyte.

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

541
00:24:09,030 --> 00:24:09,530
Höger?

542
00:24:09,530 --> 00:24:11,860
Det vågar dyrt.

543
00:24:11,860 --> 00:24:16,150
Och så i fall som Google,
som beviljas är extrema fall,

544
00:24:16,150 --> 00:24:21,450
det finns andra frågor som uppstår bara
genom att göra mycket rimliga beslut

545
00:24:21,450 --> 00:24:25,744
eller ta mycket enkla mänskliga handlingar,
eftersom den har denna förstorad effekt.

546
00:24:25,744 --> 00:24:27,660
Så en av anledningarna
detta ser så komprimerade

547
00:24:27,660 --> 00:24:30,660
är precis som Victoria sa-- det var
bara genereras av datorer ändå.

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

549
00:24:31,900 --> 00:24:33,309
Låt webbläsaren räkna ut det.

550
00:24:33,309 --> 00:24:35,350
Men det är också medvetet
har inte mycket utrymme,

551
00:24:35,350 --> 00:24:36,766
eftersom utrymmet är inte nödvändigt.

552
00:24:36,766 --> 00:24:38,250
Och utrymmet kostar faktiskt pengar.

553
00:24:38,250 --> 00:24:40,670
>> Det antingen kostar tid,
eftersom bara att driva

554
00:24:40,670 --> 00:24:44,670
Så mycket mer data av
google.com huvudkontor bara

555
00:24:44,670 --> 00:24:47,710
har fått ta en viss mängd
tid, även om det är millisekunder

556
00:24:47,710 --> 00:24:51,190
eller mikro, men som lägger upp
över så många användare, eller mer troligt,

557
00:24:51,190 --> 00:24:52,270
det kostar förmodligen pengar.

558
00:24:52,270 --> 00:24:54,690
Google ansluter förmodligen
någon annanstans i världen, en

559
00:24:54,690 --> 00:24:56,398
av dem peering
poäng, och om de har

560
00:24:56,398 --> 00:24:59,880
någon form av finansiell relation
varigenom deras uppgifter kostar pengar,

561
00:24:59,880 --> 00:25:01,730
de kan lika gärna
minimera hur mycket data

562
00:25:01,730 --> 00:25:04,530
de är spottar ut på
deras internet-anslutning.

563
00:25:04,530 --> 00:25:07,630
>> Så rolig sak, men i slutändan,
eller kanske lugnande sak,

564
00:25:07,630 --> 00:25:11,030
är att även om det ser fruktansvärt
överväldigande, vid slutet av dagen,

565
00:25:11,030 --> 00:25:16,750
det är fortfarande exakt samma principer som
detta mycket enkel sida här av en HTML

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

567
00:25:17,390 --> 00:25:20,610
Så bara för att sammanfatta och så att du
har en kanonisk version om du inte var

568
00:25:20,610 --> 00:25:25,900
följer med genom val här, här
kan vara den mest enkla av webbsidor,

569
00:25:25,900 --> 00:25:28,240
så något att leka med kanske senare.

570
00:25:28,240 --> 00:25:30,790
>> Nåväl, låt oss införa en
par andra idéer nu.

571
00:25:30,790 --> 00:25:33,420
Vi håller på att införa
något som kallas en stil tagg.

572
00:25:33,420 --> 00:25:38,110
Vi kan stilisera denna sida
mer intressant sätt.

573
00:25:38,110 --> 00:25:40,860
Så medan HTML-e
handlar om märkning upp

574
00:25:40,860 --> 00:25:44,470
data, typ av specificerar till en
webbläsare hur man strukturerar data,

575
00:25:44,470 --> 00:25:48,110
var att sätta den, CSS, eller
Cascading Style Sheets,

576
00:25:48,110 --> 00:25:52,640
är ett andra språk som
i allmänhet blir blandas med HTML

577
00:25:52,640 --> 00:25:55,670
som vi see-- men vi kan rengöra
att upp i en moment-- som tar

578
00:25:55,670 --> 00:25:59,850
den sista milen, och det stylizes det.

579
00:25:59,850 --> 00:26:02,460
Det blir färgerna precis rätt,
den teckenstorlekar precis rätt,

580
00:26:02,460 --> 00:26:03,860
placeringen precis lagom.

581
00:26:03,860 --> 00:26:06,510
Det handlar om estetik
eller formatering, inte om

582
00:26:06,510 --> 00:26:08,330
den fundamentala data själv.

583
00:26:08,330 --> 00:26:11,390
Och det enklaste sättet att visa
detta är kanske genom exempel.

584
00:26:11,390 --> 00:26:15,320
Så jag kommer att gå över
min enkel textfil.

585
00:26:15,320 --> 00:26:17,970
Och på bara ett ögonblick, jag
guida oss genom processen

586
00:26:17,970 --> 00:26:19,360
att göra detta själva.

587
00:26:19,360 --> 00:26:23,310
>> Jag kommer att gå tillbaka till min fil
här och ladda om sidan bara

588
00:26:23,310 --> 00:26:25,800
för att bekräfta hur det ser ut.

589
00:26:25,800 --> 00:26:27,190
Det är där vi är på nu.

590
00:26:27,190 --> 00:26:31,170
Det känns som barnen skulle åtnjuta
med lite färg på denna webbsida.

591
00:26:31,170 --> 00:26:34,480
Så jag kommer att gå upp här
i huvudet på sidan.

592
00:26:34,480 --> 00:26:38,130
Och jag kommer att göra stil, / stil.

593
00:26:38,130 --> 00:26:44,060
Och sedan insidan av denna, kommer jag
att tala om kroppen av min page--

594
00:26:44,060 --> 00:26:46,870
och denna formatering är på
första anblick kanske lite

595
00:26:46,870 --> 00:26:49,400
konstigt men konventionell.

596
00:26:49,400 --> 00:26:55,010
Jag kommer att säga att bakgrunden
Färgen på denna sida bör vara grön.

597
00:26:55,010 --> 00:26:57,960
Och detta är tyvärr
sorts inte den bästa designen.

598
00:26:57,960 --> 00:27:00,710
Märker att tidigare
i en värld av HTML,

599
00:27:00,710 --> 00:27:03,190
Jag sa att attribut
är dessa nyckelvärdepar.

600
00:27:03,190 --> 00:27:05,760
Något lika med citat
unquote "något."

601
00:27:05,760 --> 00:27:08,810
I en värld av CSS, som var
designad av några olika personer,

602
00:27:08,810 --> 00:27:11,020
de beslutade att i deras
värld, par nyckel-

603
00:27:11,020 --> 00:27:13,920
skulle vara ordet kolon något.

604
00:27:13,920 --> 00:27:15,220
Så det är samma idé, men.

605
00:27:15,220 --> 00:27:18,620
Det associera ett värde
med några viktiga som på något sätt

606
00:27:18,620 --> 00:27:20,330
påverkar beteendet hos denna sida.

607
00:27:20,330 --> 00:27:21,901
>> Och du kan nog gissa.

608
00:27:21,901 --> 00:27:24,150
Vad är detta förmodligen kommer
att göra även om du har aldrig

609
00:27:24,150 --> 00:27:27,867
sett HTML eller CSS förut?

610
00:27:27,867 --> 00:27:29,450
PUBLIK: Ändra bakgrundsfärgen.

611
00:27:29,450 --> 00:27:30,560
DAVID J. MALAN: Ja,
ändra bakgrundsfärgen.

612
00:27:30,560 --> 00:27:33,280
Och särskilt
bakgrundsfärg kroppen.

613
00:27:33,280 --> 00:27:36,290
Men i den mån
organ för nu är webben

614
00:27:36,290 --> 00:27:38,870
page-- det är det enda
under namnlisten really--

615
00:27:38,870 --> 00:27:40,870
det förmodligen kommer att
påverka samma sak.

616
00:27:40,870 --> 00:27:41,430
Så låt oss se.

617
00:27:41,430 --> 00:27:42,490
Låt oss spara.

618
00:27:42,490 --> 00:27:44,310
Gå hit och ladda om.

619
00:27:44,310 --> 00:27:46,140
Det är ganska ohyggliga.

620
00:27:46,140 --> 00:27:48,070
Och vad som händer
här är en bieffekt.

621
00:27:48,070 --> 00:27:49,850
Jag valde just den här bilden slumpmässigt.

622
00:27:49,850 --> 00:27:53,305
Varför är den gröna inte
permeerande bakom Mickey?

623
00:27:53,305 --> 00:27:54,180
PUBLIK: [OHÖRBART]

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

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

626
00:27:57,880 --> 00:28:01,750
Det visar sig att bilderna, ganska
mycket alla bilder som vi kan använda,

627
00:28:01,750 --> 00:28:03,670
är alla rectangles-- av rektanglar.

628
00:28:03,670 --> 00:28:07,710
Även om Mickey har några kurvor
för sig själv och har en bakgrund,

629
00:28:07,710 --> 00:28:09,330
den bakgrunden måste vara något.

630
00:28:09,330 --> 00:28:10,280
Det måste vara vit.

631
00:28:10,280 --> 00:28:11,910
Det måste vara svart eller något annat.

632
00:28:11,910 --> 00:28:13,650
Det kan vara transparent.

633
00:28:13,650 --> 00:28:16,100
Och faktiskt, jag kunde
Öppna Musse Pigg här

634
00:28:16,100 --> 00:28:18,590
i ett program som kallas Photoshop
eller något liknande

635
00:28:18,590 --> 00:28:21,176
och ändra allt detta vita
Bakgrunden till transparent,

636
00:28:21,176 --> 00:28:22,550
så den gröna skulle lysa igenom.

637
00:28:22,550 --> 00:28:25,980
Men det är något jag skulle behöva
att be mig eller grafiker

638
00:28:25,980 --> 00:28:28,130
eller en designer på mitt
bolag, till exempel,

639
00:28:28,130 --> 00:28:31,490
att göra, särskilt eftersom jag bara
lånat en från internet.

640
00:28:31,490 --> 00:28:33,030
Men det är varför detta händer.

641
00:28:33,030 --> 00:28:34,980
>> Så vad kan vi vill göra?

642
00:28:34,980 --> 00:28:41,040
Tja, kanske vi vill säga vi
verkligen hoppas du ska trivas.

643
00:28:41,040 --> 00:28:44,150
Och för betoning, jag vill
för att göra denna starka,

644
00:28:44,150 --> 00:28:48,310
och så jag ska säga öppen stark och
stäng stark och sedan ladda om.

645
00:28:48,310 --> 00:28:50,320
Och det är lite svårt
att se på projektorn

646
00:28:50,320 --> 00:28:53,250
men kanske egentligen nu
hoppar ut på dig lite mer.

647
00:28:53,250 --> 00:28:56,180
Så du kan lägga till kursiv stil i detta
sätt, djärvt vända på detta sätt.

648
00:28:56,180 --> 00:28:57,500
Vi kunde ändra färger.

649
00:28:57,500 --> 00:29:01,610
I själva verket bara för sparkar, jag
kommer att gå vidare och göra det.

650
00:29:01,610 --> 00:29:05,120
Jag vet inte riktigt gillar hur min
punkterna är så nära varandra,

651
00:29:05,120 --> 00:29:06,870
så jag kan göra något sådant.

652
00:29:06,870 --> 00:29:13,310
Jag kommer att tala om för webbläsaren,
ändra varje stycke tagg för att ha,

653
00:29:13,310 --> 00:29:16,952
låt oss säga-- faktiskt, du vet vad,
låt oss rikta in den text-align, center.

654
00:29:16,952 --> 00:29:19,410
Och återigen, jag vet att detta bara
att någon lärt det till mig

655
00:29:19,410 --> 00:29:21,118
eller jag såg upp i
en online-referens.

656
00:29:21,118 --> 00:29:22,450
Så låt mig spara.

657
00:29:22,450 --> 00:29:25,070
Och ah, nu har jag
centrerad bilden där.

658
00:29:25,070 --> 00:29:28,490
Och faktiskt, du vet vad, om
Jag flyttar min bild i ett stycke

659
00:29:28,490 --> 00:29:34,510
tag-- så en tredje stycket,
även om det inte är text.

660
00:29:34,510 --> 00:29:36,917
Låt oss spara den och ladda om.

661
00:29:36,917 --> 00:29:40,000
Nu sidan börjar se snäll
of-- Jag menar, det är fortfarande ganska ful,

662
00:29:40,000 --> 00:29:43,180
men åtminstone det ser ut som jag tillbringade
två minuter i stället för en minut

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

664
00:29:43,950 --> 00:29:47,200
>> Och så, stegvis, kan vi göra
dessa estetiska förändringar nu till sidan?

665
00:29:47,200 --> 00:29:50,860
Jag har egentligen inte ändrats uppgifterna i
sida annat än att lägga till ordet egentligen.

666
00:29:50,860 --> 00:29:52,650
Jag har lagt till metadata, om man så vill.

667
00:29:52,650 --> 00:29:54,830
Hej, webbläsare, gör
ordet "verkligen" fet.

668
00:29:54,830 --> 00:29:56,940
Men uppgifterna är inte stark.

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

670
00:29:57,830 --> 00:29:59,410
Datan är "egentligen".

671
00:29:59,410 --> 00:30:02,200
Så vi har fortfarande några av
samma koncept som tidigare.

672
00:30:02,200 --> 00:30:05,990
Nu, naturligtvis, är detta inte på webben,
så jag kommer att göra ett sista steget här.

673
00:30:05,990 --> 00:30:10,300
>> Jag kommer att gå till hello.html
och bara markera och kopiera.

674
00:30:10,300 --> 00:30:12,285
Och nu ska jag
gå in Cloud9, vilket

675
00:30:12,285 --> 00:30:13,910
Jag ska gå igenom på bara ett ögonblick.

676
00:30:13,910 --> 00:30:17,080
Och oddsen är att du kommer snart att bli, om
inte redan vid en skärm som denna.

677
00:30:17,080 --> 00:30:21,080
Och låt mig bara ge dig en snabb
rundtur i vad Cloud9 faktiskt är.

678
00:30:21,080 --> 00:30:26,590
Så återigen moln 9 är
denna molnbaserade tjänsten

679
00:30:26,590 --> 00:30:30,580
som ger dig och mig illusionen
med vår egen virtuell maskin

680
00:30:30,580 --> 00:30:33,090
i molnet, tekniskt
en behållare i molnet,

681
00:30:33,090 --> 00:30:35,160
att vi har full
administratörsbehörighet till.

682
00:30:35,160 --> 00:30:37,130
Så i teorin, utan en
annanstans i världen har

683
00:30:37,130 --> 00:30:39,152
tillgång till skärmen är jag
tittar på just nu,

684
00:30:39,152 --> 00:30:40,860
utom kanske folk
som driver sajten,

685
00:30:40,860 --> 00:30:43,470
eftersom tekniskt sett har
fysisk tillgång och så vidare.

686
00:30:43,470 --> 00:30:44,740
>> Vad ser vi i denna miljö?

687
00:30:44,740 --> 00:30:46,230
Jag kommer att zooma ut,
eftersom det är en liten liten.

688
00:30:46,230 --> 00:30:48,104
Och låt mig påpeka över
här bara ett ögonblick.

689
00:30:48,104 --> 00:30:53,210
På den vänstra sidan av min och din
skärm, det finns en filhanterare till vänster.

690
00:30:53,210 --> 00:30:55,362
Så i samma anda
Mac OS och Windows.

691
00:30:55,362 --> 00:30:57,070
Dessa är alla av
filer på mitt konto.

692
00:30:57,070 --> 00:30:59,250
Och som standard, om din
konto är som mitt,

693
00:30:59,250 --> 00:31:05,090
du ser eller snart se
HelloWorld.html och readme.md.

694
00:31:05,090 --> 00:31:07,950
Över här till höger, är detta
där mina textfiler kommer att gå.

695
00:31:07,950 --> 00:31:11,620
Om du någonsin har använt Microsoft
Word eller Anteckningar eller Textedit,

696
00:31:11,620 --> 00:31:14,100
Detta är ord min redigering
filer kommer att gå.

697
00:31:14,100 --> 00:31:16,540
Och sedan mest svårbegripliga
inslag i denna miljö

698
00:31:16,540 --> 00:31:20,100
att vi inte riktigt kommer att behöva använda är
här nere kallas en terminalfönster.

699
00:31:20,100 --> 00:31:23,390
Om du har använt DOS från
förr, detta är Linux

700
00:31:23,390 --> 00:31:25,450
eller Linux motsvarighet till DOS.

701
00:31:25,450 --> 00:31:28,190
Det är en textbaserad interface--
inga musklick, ingen släp.

702
00:31:28,190 --> 00:31:30,770
Allt du kan göra är att skriva
kommandon, men dessa kommandon

703
00:31:30,770 --> 00:31:34,400
kan skapa filer, flytta filer, öppna
kataloger, nära kataloger,

704
00:31:34,400 --> 00:31:35,740
göra en rad olika saker.

705
00:31:35,740 --> 00:31:38,060
Men nu, vi ska bara
ägna vår tid här.

706
00:31:38,060 --> 00:31:39,050
>> Och så låt oss göra detta.

707
00:31:39,050 --> 00:31:41,008
Om du är i detta
miljö, som du bör

708
00:31:41,008 --> 00:31:45,900
vara om du har skapat en arbetsyta
redan, gå vidare och bara gå upp

709
00:31:45,900 --> 00:31:48,690
till fil Nytt för ett ögonblick.

710
00:31:48,690 --> 00:31:51,740
Och det kommer att ge dig en ny
Fliken här i mitten.

711
00:31:51,740 --> 00:31:54,250
Och jag bara-- och låt oss
gå vidare och göra det.

712
00:31:54,250 --> 00:31:59,910
Låt oss gå vidare och nu gör Arkiv, Spara
och gå vidare och kalla det hello.html,

713
00:31:59,910 --> 00:32:02,740
inte att förväxla med
HelloWorld.html, vilket

714
00:32:02,740 --> 00:32:06,910
kom med nya gratiskonto,
vilket är bara ett urval fil.

715
00:32:06,910 --> 00:32:11,020
Du kommer att se det plötsligt visas,
troligen på vänstra sidan,

716
00:32:11,020 --> 00:32:12,810
och fliken kommer fortfarande att vara öppen.

717
00:32:12,810 --> 00:32:21,300
Och låt mig uppmuntra dig nu att återskapa
filen eller vissa varianter därav.

718
00:32:21,300 --> 00:32:24,607
Och om du inte kan riktigt se det på
skärmen är detta identiskt med sliderna

719
00:32:24,607 --> 00:32:26,190
att du förmodligen i en annan flik.

720
00:32:26,190 --> 00:32:29,296
>> Så kort sagt, gör din första webbsida,
spara den och sedan på bara ett ögonblick,

721
00:32:29,296 --> 00:32:31,170
Jag ska visa dig hur du
kan faktiskt visa detta.

722
00:32:31,170 --> 00:32:32,970
Men ändra åtminstone en sak.

723
00:32:32,970 --> 00:32:35,400
Ändra Helloworld till
något av ditt eget val,

724
00:32:35,400 --> 00:32:39,821
så att du är övertygad om att det är din
fil och inte en jag just skapat.

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

726
00:32:40,320 --> 00:32:43,804
Och när du ready-- ingen
rush-- när du är redo,

727
00:32:43,804 --> 00:32:46,220
gå vidare och spara filen
När du har gjort dessa ändringar.

728
00:32:46,220 --> 00:32:49,540
Och om du klickar på
Kör knappen uppe, detta

729
00:32:49,540 --> 00:32:53,610
ska öppna en ny flik som kommer att berätta
vad URL kan du besöka filen på,

730
00:32:53,610 --> 00:32:56,380
men det kan ta en stund att
quote unquote "start Apache", som

731
00:32:56,380 --> 00:32:58,820
är namnet på webbservern.

732
00:32:58,820 --> 00:33:02,430
Så var noga med att göra exakt
vad som finns i filen i slutändan.

733
00:33:02,430 --> 00:33:04,610
Så just nu, jag zooma in.

734
00:33:04,610 --> 00:33:07,780
Om jag börjar skriva
öppen fäste HTML, meddelande

735
00:33:07,780 --> 00:33:09,650
det föranledde mig att avsluta min tanke.

736
00:33:09,650 --> 00:33:13,750
Och om jag avslutat min tanke, det
ger mig automatiskt den avslutande taggen.

737
00:33:13,750 --> 00:33:17,190
Men förväntningarna är då jag ska träffa
Ange och sedan röra sig inuti det

738
00:33:17,190 --> 00:33:21,180
och inte huvudet inne och
då gör jag kropp inuti.

739
00:33:21,180 --> 00:33:24,430
Och det är lite konstigt i början,
eftersom det gör jobbet åt dig,

740
00:33:24,430 --> 00:33:27,110
men inser att slutligen
det sparar tangenttryckningar.

741
00:33:27,110 --> 00:33:30,500
Och i själva verket ett mycket vanligt särdrag hos
programmeringsmiljöer dessa dagar

742
00:33:30,500 --> 00:33:33,260
både för webbutveckling som
Detta och faktiska programmering,

743
00:33:33,260 --> 00:33:36,960
som vi kommer att prata om i morgon,
är dessa auto-komplett funktioner,

744
00:33:36,960 --> 00:33:39,710
saker som bara tillåter en
programmerare eller en designer

745
00:33:39,710 --> 00:33:42,010
att skriva färre knapptryckningar till
åstadkomma samma sak.

746
00:33:42,010 --> 00:33:43,176
Ibland är det bra, men.

747
00:33:43,176 --> 00:33:44,560
Ibland är det bara irriterande.

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

749
00:33:49,290 --> 00:33:54,010
Och återigen, när du har transkriberas
sliden eller någon variant därav,

750
00:33:54,010 --> 00:33:57,360
Du kan klicka på knappen Kör där uppe.

751
00:33:57,360 --> 00:33:59,910
Och sedan i botten
fönster, kommer du bli informerad

752
00:33:59,910 --> 00:34:04,290
på vilken webbadress kan du besöka webbsidan.

753
00:34:04,290 --> 00:34:08,790
Gruvan, till exempel, är i
business-daharvard.c9users.io

754
00:34:08,790 --> 00:34:11,480
och så vidare.

755
00:34:11,480 --> 00:34:14,580
Okej, så låt mig-- några frågor?

756
00:34:14,580 --> 00:34:19,460
Alla andra frågor om bara få
detta fungerar innan vi lägger till funktioner?

757
00:34:19,460 --> 00:34:21,692
Och låt mig föreslå bara
att få folks comfortable--

758
00:34:21,692 --> 00:34:24,400
eftersom det är en sak att bara
kopiera och klistra in blint vad jag har gjort.

759
00:34:24,400 --> 00:34:27,177
Men bara så att folk brottas
med åtminstone en uppgift,

760
00:34:27,177 --> 00:34:28,510
Jag kommer att slå på lite musik.

761
00:34:28,510 --> 00:34:32,630
Jag kommer att föreslå en lista över
saker du kan eventuellt lägga till.

762
00:34:32,630 --> 00:34:34,086
Och du kan säkert använda Google.

763
00:34:34,086 --> 00:34:36,210
Och varför inte vi bara
föreslå att du försöker lösa

764
00:34:36,210 --> 00:34:38,710
åtminstone ett särskilt problem här.

765
00:34:38,710 --> 00:34:45,090
Så när det gäller taggar
Låt mig åter det här.

766
00:34:45,090 --> 00:34:48,280
>> Faktiskt, låt mig uttrycka
den i en textform.

767
00:34:48,280 --> 00:35:02,380
Låt oss säga att bland taggarna vi kan
Använd här är några taggar hit.

768
00:35:02,380 --> 00:35:06,090
Vi har sett punkt taggen.

769
00:35:06,090 --> 00:35:07,850
Nu är det kommer att komplettera automatiskt.

770
00:35:07,850 --> 00:35:12,220
Punkt tag, ankartaggen.

771
00:35:12,220 --> 00:35:15,250
Låt oss säga att du vill
göra något större,

772
00:35:15,250 --> 00:35:19,480
så du kanske like--
span taggen kan hjälpa.

773
00:35:19,480 --> 00:35:23,010
Tja, kanske du behöver lite hjälp
för att på bara ett ögonblick.

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

775
00:35:24,830 --> 00:35:26,170
Du ser att det finns bord.

776
00:35:26,170 --> 00:35:27,928
Det kallas något 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 tillbaka till det om en stund.

780
00:35:34,770 --> 00:35:36,590
Vad kan vara praktiskt?

781
00:35:36,590 --> 00:35:38,310
Det finns starka.

782
00:35:38,310 --> 00:35:43,640
Det finns betoning, eller snarare em.

783
00:35:43,640 --> 00:35:50,110
There's-- vad
kanske du vill ha här?

784
00:35:50,110 --> 00:35:51,930
Tja, tar vi en
titta på det tillsammans.

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

786
00:35:53,230 --> 00:35:54,130
Det finns formulär.

787
00:35:54,130 --> 00:35:56,500
Det finns ingång och några andra.

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

789
00:35:58,924 --> 00:36:00,090
Okej, så låt oss göra detta.

790
00:36:00,090 --> 00:36:02,330
För att besvara ett Victorias
fråga, låt mig först

791
00:36:02,330 --> 00:36:05,020
bara se till att alla är
kunna få sin hello arbets.

792
00:36:05,020 --> 00:36:06,900
Låt mig presentera
ett par andra idéer.

793
00:36:06,900 --> 00:36:09,209
Sedan kommer vi att låta folk löser
vissa problem på egen hand.

794
00:36:09,209 --> 00:36:11,500
Då kommer vi faktiskt komma tillbaka
som begreppet ett formulär,

795
00:36:11,500 --> 00:36:14,950
och vi kommer faktiskt åter genomföra
tillsammans front-end-gränssnitt,

796
00:36:14,950 --> 00:36:16,450
så att säga, för Google.

797
00:36:16,450 --> 00:36:19,700
Vi kommer att använda Google som den bakre änden och låt
dem göra det hårda arbete, sökningen,

798
00:36:19,700 --> 00:36:22,760
men vi återskapa den främre änden
Google och sökfunktionen

799
00:36:22,760 --> 00:36:24,520
som de har på sin egen hemsida.

800
00:36:24,520 --> 00:36:27,050
Och så vi kommer tillbaka till
dessa taggar på bara ett ögonblick.

801
00:36:27,050 --> 00:36:30,270
>> Så det här var vad jag
föreslagna nyss.

802
00:36:30,270 --> 00:36:33,940
Vi kan lägga till stilisering till en
sida insidan av denna stil tagg,

803
00:36:33,940 --> 00:36:36,950
och vi kan stilisera bakgrunden
färg, textjusteringen,

804
00:36:36,950 --> 00:36:39,000
oavsett om det är centrum eller till vänster eller höger.

805
00:36:39,000 --> 00:36:41,630
Men mycket snabbt du skulle
hitta eller en webbdesigner

806
00:36:41,630 --> 00:36:44,060
skulle finna att detta
blir lite otymplig,

807
00:36:44,060 --> 00:36:48,330
eftersom du gör vad som är
kallas blandningsinnehåll

808
00:36:48,330 --> 00:36:50,120
med presentation av dessa.

809
00:36:50,120 --> 00:36:53,756
Du blandar data
och estetik därav.

810
00:36:53,756 --> 00:36:56,380
Och faktiskt, om man betänker
vad som kommer att hända över time--

811
00:36:56,380 --> 00:36:58,350
detta är en mycket liten
webbsida, naturligtvis.

812
00:36:58,350 --> 00:37:01,590
Men om jag lägga till innehåll på denna sida
och jag lägga stil till denna sida,

813
00:37:01,590 --> 00:37:04,650
sidan blir mycket snabbt
längre och längre och längre.

814
00:37:04,650 --> 00:37:07,510
Och antar att jag vill
har en andra webbsida som

815
00:37:07,510 --> 00:37:09,010
delar vissa av dessa attribut.

816
00:37:09,010 --> 00:37:12,350
Antar att min andra webbsida för min
site-- också, jag vill ha allt centrum,

817
00:37:12,350 --> 00:37:14,960
och jag vill också allt
med en grön bakgrund.

818
00:37:14,960 --> 00:37:17,940
Jag är ganska mycket kommer att behöva
kopiera och klistra in några av dessa linjer

819
00:37:17,940 --> 00:37:20,730
in i den andra filen, vilket känns bra.

820
00:37:20,730 --> 00:37:22,030
Det kommer att lösa problemet.

821
00:37:22,030 --> 00:37:26,060
>> Men om jag vill ha en tredje sidan
eller en 30 sida eller en 40 sida?

822
00:37:26,060 --> 00:37:28,730
Nu ska jag vara kopiering och
klistra in en hel del duplikat kod

823
00:37:28,730 --> 00:37:30,430
i flera filer.

824
00:37:30,430 --> 00:37:32,600
Och så antar att
Jag bestämmer eller jag har hört,

825
00:37:32,600 --> 00:37:34,780
Hej, vi inte använder en
grön bakgrund längre.

826
00:37:34,780 --> 00:37:36,380
Vi kommer att börja använda orange.

827
00:37:36,380 --> 00:37:38,690
Vad har du att ändra?

828
00:37:38,690 --> 00:37:42,900
Tja, måste du ändra den stilen
från grönt till orange hur många platser?

829
00:37:42,900 --> 00:37:44,920
Som 30 eller 40 platser.

830
00:37:44,920 --> 00:37:45,900
Det är långtråkigt.

831
00:37:45,900 --> 00:37:47,039
Det är risk för fel.

832
00:37:47,039 --> 00:37:49,580
Det finns ett antal skäl
där du inte vill att förmå

833
00:37:49,580 --> 00:37:51,840
den typen av smärta för dig själv.

834
00:37:51,840 --> 00:37:54,760
Och så skulle det inte vara trevligt
om vi kunde ta vad jag bara

835
00:37:54,760 --> 00:37:58,240
sätta mellan dessa två gula
taggar, dessa stil taggar,

836
00:37:58,240 --> 00:38:04,050
faktor ut och sätta alla mina
stilisering i en central fil

837
00:38:04,050 --> 00:38:08,470
att alla 30 eller 40 av mina andra filer
låna från eller på något sätt referera,

838
00:38:08,470 --> 00:38:11,640
inte olikt nätverk
diagram vi gjorde innan?

839
00:38:11,640 --> 00:38:15,030
>> Så om jag går in här, jag är
kommer att faktiskt föreslå

840
00:38:15,030 --> 00:38:17,880
att vi byter ut
stil tagg med något

841
00:38:17,880 --> 00:38:21,620
kallas länken taggen, som
är fruktansvärt, fruktansvärt namngiven,

842
00:38:21,620 --> 00:38:24,370
eftersom du inte använder
link tag att skapa vad

843
00:38:24,370 --> 00:38:26,380
vi människor känner som en länk på en webbsida.

844
00:38:26,380 --> 00:38:29,750
För detta använder man vilken tagg?

845
00:38:29,750 --> 00:38:31,464
Hur skapar man en länk på en webbsida?

846
00:38:31,464 --> 00:38:32,130
PUBLIK: Den a.

847
00:38:32,130 --> 00:38:34,870
DAVID J. MALAN: Den a, eller ankare
tagg, som gick till Disney innan.

848
00:38:34,870 --> 00:38:39,090
Länken taggen här säger
this-- länk till en fil som heter

849
00:38:39,090 --> 00:38:44,350
styles.css, förhållandet till vilken
kommer att vara att det är min mall.

850
00:38:44,350 --> 00:38:48,290
Så det här är en av de S i
CSS-- CSS.

851
00:38:48,290 --> 00:38:50,490
Style sheet-- två av S i CSS.

852
00:38:50,490 --> 00:38:52,550
CSS.

853
00:38:52,550 --> 00:38:58,640
Detta betyder bara, hej, webbläsare, gå
hitta styles.css på den lokala servern

854
00:38:58,640 --> 00:39:01,870
och använda den som din stilmall,
vilket innebär insidan av den filen

855
00:39:01,870 --> 00:39:05,310
kommer att bli alla av
stylizations som vi just har gjort.

856
00:39:05,310 --> 00:39:07,396
Och så vad filen
kan se ut är detta.

857
00:39:07,396 --> 00:39:10,020
Och jag ska bara göra detta är en snabb
exempel, eftersom vi inte behöver

858
00:39:10,020 --> 00:39:12,000
att få för mycket till ogräs här.

859
00:39:12,000 --> 00:39:17,840
Men om jag kopiera, vad jag föreslår
är att en programmerare skapa en ny fil,

860
00:39:17,840 --> 00:39:24,450
klistra i dessa lines--
whoops-- klistra in dessa rader,

861
00:39:24,450 --> 00:39:32,270
spara den som styles.css, och sedan, i
den andra filen, ta bort allt detta

862
00:39:32,270 --> 00:39:35,450
och ersätta den i stället
med den här länken tag.

863
00:39:35,450 --> 00:39:43,090
Så att om jag länkar href = "styles.css"
förhållandet skall vara "stylesheet"

864
00:39:43,090 --> 00:39:44,170
tagg.

865
00:39:44,170 --> 00:39:45,250
Spara den.

866
00:39:45,250 --> 00:39:47,000
Gå tillbaka till min Helloworld.

867
00:39:47,000 --> 00:39:48,690
Ladda om.

868
00:39:48,690 --> 00:39:51,290
>> Bokstavligen ingenting har hänt.

869
00:39:51,290 --> 00:39:54,710
Det är en bra sak, eftersom det
innebär att det är faktiskt allt arbete.

870
00:39:54,710 --> 00:39:58,860
För att bevisa så mycket, antar jag göra en
stavfel, och jag kallar detta "styles.css"

871
00:39:58,860 --> 00:40:03,080
med en huvudstad S, som är
felaktig, och sedan ladda om.

872
00:40:03,080 --> 00:40:05,470
Nu kan du se det bara inte fungerar.

873
00:40:05,470 --> 00:40:06,362
Nu, varför?

874
00:40:06,362 --> 00:40:08,070
Nåväl, låt oss använda en
teknik från tidigare.

875
00:40:08,070 --> 00:40:10,153
Låt mig gå vidare och, i
min webbläsare, i Chrome, jag

876
00:40:10,153 --> 00:40:12,900
kommer att öppna upp den speciella
Fliken nätverk som tidigare,

877
00:40:12,900 --> 00:40:15,560
och låt mig ladda om sidan.

878
00:40:15,560 --> 00:40:19,341
Vad är du inte förvånad över att se nu?

879
00:40:19,341 --> 00:40:20,840
Eller kanske du är förvånad över att se det.

880
00:40:20,840 --> 00:40:23,225
Hursomhelst, vad ser du nu?

881
00:40:23,225 --> 00:40:24,100
PUBLIK: [OHÖRBART]

882
00:40:24,100 --> 00:40:24,770
DAVID J. MALAN: Det är inte hittats.

883
00:40:24,770 --> 00:40:25,680
Varför är det inte hittas?

884
00:40:25,680 --> 00:40:28,480
Tja, Styles.css-- kapital
S-- finns inte.

885
00:40:28,480 --> 00:40:29,230
Jag misnamed det.

886
00:40:29,230 --> 00:40:30,430
Enkel stavfel.

887
00:40:30,430 --> 00:40:33,816
Men jag blir förståeligt nu en
404, eftersom servern säger, hej,

888
00:40:33,816 --> 00:40:34,440
det är inte hittas.

889
00:40:34,440 --> 00:40:36,300
Bokstavligen, jag vet inte
där filen är.

890
00:40:36,300 --> 00:40:38,880
Så som ett resultat, webbläsaren
visar hur det kan,

891
00:40:38,880 --> 00:40:42,860
den råa innehållet på sidan,
som var en 200, HTML,

892
00:40:42,860 --> 00:40:45,390
men stilisering kan inte
tillsättas därefter.

893
00:40:45,390 --> 00:40:47,120
Och detta är vad som menas med kaskadkoppling.

894
00:40:47,120 --> 00:40:49,070
Du kan slags lägga det
efter, och det slags

895
00:40:49,070 --> 00:40:50,874
förfinar estetik webbsidan.

896
00:40:50,874 --> 00:40:53,790
Och du kan även åsidosätta de
stilar med ytterligare andra formatfiler

897
00:40:53,790 --> 00:40:54,700
om du vill.

898
00:40:54,700 --> 00:40:57,780
Det är inte hittats, men i det här fallet,
på grund av kursen, jag misnamed det.

899
00:40:57,780 --> 00:41:00,330
Så jag måste fixa det första.

900
00:41:00,330 --> 00:41:04,667
>> Så låt oss gå vidare och
föreslå följande.

901
00:41:04,667 --> 00:41:07,410

902
00:41:07,410 --> 00:41:11,140
Låt oss gå vidare och göra det.

903
00:41:11,140 --> 00:41:14,220
Börjar med kanske
din Helloworld-fil,

904
00:41:14,220 --> 00:41:17,740
Låt mig bara bjuda ett par
av funktionen förslag.

905
00:41:17,740 --> 00:41:20,400
Så, Victoria, du ville
göra några text större, eller hur?

906
00:41:20,400 --> 00:41:24,555
Okej, så vi kan
gör texten större.

907
00:41:24,555 --> 00:41:26,860
Och vi var plocka bort
bara ett problem att lösa.

908
00:41:26,860 --> 00:41:30,867
Gör texten större.

909
00:41:30,867 --> 00:41:32,700
Jag tänker inte bry
skriver detta när vi

910
00:41:32,700 --> 00:41:35,600
har kula teknik rätt över här.

911
00:41:35,600 --> 00:41:39,970
Så några problem.

912
00:41:39,970 --> 00:41:44,670
Så vi ska försöka
att göra texten större.

913
00:41:44,670 --> 00:41:45,170
Okej.

914
00:41:45,170 --> 00:41:48,360
Vad skulle någon föreslå?

915
00:41:48,360 --> 00:41:50,332
Vad kan vi vill
att göra i en webbsida?

916
00:41:50,332 --> 00:41:52,040
Låt oss komma med en
kort lista över saker

917
00:41:52,040 --> 00:41:55,366
och sedan delegera till
grupp att räkna ut detta.

918
00:41:55,366 --> 00:41:56,270
>> PUBLIK: [OHÖRBART]

919
00:41:56,270 --> 00:42:02,251
>> DAVID J. MALAN: OK, textposition
på olika sidor av papperet?

920
00:42:02,251 --> 00:42:02,750
Okej.

921
00:42:02,750 --> 00:42:04,620
Något annat.

922
00:42:04,620 --> 00:42:05,784
>> PUBLIK: [OHÖRBART]

923
00:42:05,784 --> 00:42:06,700
DAVID J. MALAN: Det är.

924
00:42:06,700 --> 00:42:08,720
Så en gif är bara en
olika filformat.

925
00:42:08,720 --> 00:42:12,830
Vi använde bara, vad, en
png eller jpg förmodligen?

926
00:42:12,830 --> 00:42:14,480
Vi använde en jpg.

927
00:42:14,480 --> 00:42:16,780
Om du är nyfiken, en överdriven
svara på din fråga

928
00:42:16,780 --> 00:42:19,404
är en JPG används i allmänhet för
fotografier, eftersom det stöder

929
00:42:19,404 --> 00:42:21,500
miljontals färger eller 24-bitars färg.

930
00:42:21,500 --> 00:42:26,930
En gif används vanligen för, som,
Internet memes dessa days-- animationer,

931
00:42:26,930 --> 00:42:28,810
som animerade GIF.

932
00:42:28,810 --> 00:42:32,320
Men det händer att använda en mindre färg
palett, endast 256 möjliga färger,

933
00:42:32,320 --> 00:42:35,230
men det stöder
insyn och animation.

934
00:42:35,230 --> 00:42:40,330
Och så finns det png, som stöder
öppenhet och fler färger

935
00:42:40,330 --> 00:42:41,300
men inte animering.

936
00:42:41,300 --> 00:42:42,133
Så det är en kompromiss.

937
00:42:42,133 --> 00:42:44,144

938
00:42:44,144 --> 00:42:46,060
Så att lägga en gif, men,
skulle vara funktionellt

939
00:42:46,060 --> 00:42:48,396
motsvarar lägga till en png eller jpg.

940
00:42:48,396 --> 00:42:49,110
Ja.

941
00:42:49,110 --> 00:42:50,550
Bildkälla är lika.

942
00:42:50,550 --> 00:42:51,590
Så något annat.

943
00:42:51,590 --> 00:42:57,288
Låt oss komma fram till något som
vi skickade till Victoria att göra här.

944
00:42:57,288 --> 00:42:59,209
>> PUBLIK: Lägg till knappar för ett formulär.

945
00:42:59,209 --> 00:43:00,000
DAVID J. MALAN: OK.

946
00:43:00,000 --> 00:43:02,179
Så lägga till knappar för ett formulär.

947
00:43:02,179 --> 00:43:03,470
Och vi kommer att göra det en tillsammans.

948
00:43:03,470 --> 00:43:07,220
Så det kommer att bli en perfekt segue
direkt efter denna utmaning.

949
00:43:07,220 --> 00:43:10,357
Något annat?

950
00:43:10,357 --> 00:43:11,440
Vad skulle du vilja göra?

951
00:43:11,440 --> 00:43:14,040

952
00:43:14,040 --> 00:43:16,516
Webben känns mycket underwhelming
Om detta är allt vi kan göra.

953
00:43:16,516 --> 00:43:18,140
PUBLIK: Ändra färgen på texten.

954
00:43:18,140 --> 00:43:19,500
DAVID J. MALAN: Ändra vad?

955
00:43:19,500 --> 00:43:20,666
PUBLIK: Färg på texten.

956
00:43:20,666 --> 00:43:22,311
DAVID J. MALAN: Ändra färg på text.

957
00:43:22,311 --> 00:43:22,810
Okej.

958
00:43:22,810 --> 00:43:23,790
Så, låt oss göra detta.

959
00:43:23,790 --> 00:43:27,209
Bara en gång så inte att du är bara
utantill, att göra exakt vad jag gör,

960
00:43:27,209 --> 00:43:29,500
Jag kommer att slå på musik
för kanske fem minuter här.

961
00:43:29,500 --> 00:43:30,450
Du är välkommen att använda Google.

962
00:43:30,450 --> 00:43:33,130
Du är välkommen att fråga mig, och
Jag ska viska en antydan i örat.

963
00:43:33,130 --> 00:43:35,171
Du är välkommen att titta
över på andra axlar.

964
00:43:35,171 --> 00:43:37,340
Men lösa bara en av dessa problem.

965
00:43:37,340 --> 00:43:40,190
Men vi ska göra det sista,
bildar en, om vi kunde tillsammans.

966
00:43:40,190 --> 00:43:42,790
Så fem minuter för att lösa
något av dessa problem

967
00:43:42,790 --> 00:43:46,780
med hjälp av Google, intuition, eller någon
andra medel som finns tillgängliga för dig.

968
00:43:46,780 --> 00:43:48,630
>> [Musik spelar]

969
00:43:48,630 --> 00:43:49,130
Okej.

970
00:43:49,130 --> 00:43:50,838
Inga bekymmer om du vill
att hålla mixtra,

971
00:43:50,838 --> 00:43:53,880
men jag ska förstöra ett par
av dessa svar.

972
00:43:53,880 --> 00:43:57,986
Så det första förslaget från
Victoria var att göra texten större.

973
00:43:57,986 --> 00:43:59,360
Så det finns några sätt att göra detta.

974
00:43:59,360 --> 00:44:01,530
Jag har för närvarande återställs
min skärm till denna storlek,

975
00:44:01,530 --> 00:44:04,310
även om jag har zoomat in
artificiellt bara för att se saker.

976
00:44:04,310 --> 00:44:07,470
Och låt oss göra detta.

977
00:44:07,470 --> 00:44:11,380
Låt mig gå vidare och ta tag
några generiska latinska texten

978
00:44:11,380 --> 00:44:19,540
bara så vi har något att arbeta med.

979
00:44:19,540 --> 00:44:20,715
Så ge mig bara ett ögonblick.

980
00:44:20,715 --> 00:44:21,840
Jag ska göra tre stycken.

981
00:44:21,840 --> 00:44:53,430

982
00:44:53,430 --> 00:44:53,930
OK.

983
00:44:53,930 --> 00:44:55,560
Detta kommer att vara ett bättre exempel.

984
00:44:55,560 --> 00:44:57,840
Så för den nyfikne, i
min hello.html, jag bara

985
00:44:57,840 --> 00:45:01,645
klistras tre meningslösa
latin punkterna

986
00:45:01,645 --> 00:45:03,270
bara så vi har en text att arbeta med.

987
00:45:03,270 --> 00:45:06,720
Och Victoria mål var att
göra en del av texten större.

988
00:45:06,720 --> 00:45:09,879
Så jag kunde, som tidigare, gå in här.

989
00:45:09,879 --> 00:45:11,170
Och låt mig göra det på rätt sätt.

990
00:45:11,170 --> 00:45:13,253
Jag kommer att ha en länk
tagg som pekar på en fil

991
00:45:13,253 --> 00:45:20,560
kallas "styles.css," förhållandet
av vilka är igen "formatmall."

992
00:45:20,560 --> 00:45:25,221
Och då kommer jag att spara som
och öppna upp denna "styles.css."

993
00:45:25,221 --> 00:45:28,940
>> Så, som tidigare, jag har
förmåga i detta CSS-fil

994
00:45:28,940 --> 00:45:31,569
faktiskt åsidosätta standard
estetik på en webbsida,

995
00:45:31,569 --> 00:45:33,860
och standard estetik,
Naturligtvis är ganska tråkig.

996
00:45:33,860 --> 00:45:36,943
Det är typ av normal textstorlek, svart
text, vit bakgrund, och så vidare.

997
00:45:36,943 --> 00:45:39,440
Så antar jag vill göra
allt detta text större.

998
00:45:39,440 --> 00:45:40,460
Jag kunde göra ett par saker.

999
00:45:40,460 --> 00:45:43,750
I mitt styles.css fil, jag
kan säga, vet du vad,

1000
00:45:43,750 --> 00:45:46,950
tillämpa följande till
kroppen av min sida.

1001
00:45:46,950 --> 00:45:51,390
Gå vidare och göra
teckenstorlek 24 punkter,

1002
00:45:51,390 --> 00:45:54,130
som är ett nummer jag kan
användning i Microsoft Word.

1003
00:45:54,130 --> 00:45:57,620
Låt mig gå tillbaka till min hemsida
sida här och ladda om,

1004
00:45:57,620 --> 00:45:59,640
och du kan se att
Det är redan mycket större.

1005
00:45:59,640 --> 00:46:02,223
Och vi kan få lite galen,
precis som vi kan på en desktop--

1006
00:46:02,223 --> 00:46:03,670
göra det 96 poäng.

1007
00:46:03,670 --> 00:46:04,950
Ladda om.

1008
00:46:04,950 --> 00:46:07,610
Och det blir lite
otymplig på denna punkt.

1009
00:46:07,610 --> 00:46:09,500
>> Men jag kunde vara lite mer exakt.

1010
00:46:09,500 --> 00:46:14,530
I stället för att tillämpa denna
format till kroppen av min sida,

1011
00:46:14,530 --> 00:46:21,740
vad kan jag använda den istället,
vad andra tagg som kanske fortfarande

1012
00:46:21,740 --> 00:46:25,445
fungerar på samma sätt?

1013
00:46:25,445 --> 00:46:26,444
>> PUBLIK: p-taggen?

1014
00:46:26,444 --> 00:46:27,360
DAVID J. MALAN: P-tagg.

1015
00:46:27,360 --> 00:46:29,350
Så att huvudet inte skulle vara
korrekt, eftersom huvudet,

1016
00:46:29,350 --> 00:46:31,300
Du kan faktiskt inte
styra estetik.

1017
00:46:31,300 --> 00:46:32,700
Det finns antingen text där eller inte.

1018
00:46:32,700 --> 00:46:36,760
Men p tag-- jag kan dyka i en liten
djupare, så att säga, i den punkt

1019
00:46:36,760 --> 00:46:37,350
taggar.

1020
00:46:37,350 --> 00:46:41,600
Och även om det finns tre,
det är helt bra, eftersom det i CSS,

1021
00:46:41,600 --> 00:46:44,900
när jag bara säga "p" detta
betyder tillämpa följande

1022
00:46:44,900 --> 00:46:48,300
till en tagg som matchar detta
väljare, väljaren bara

1023
00:46:48,300 --> 00:46:49,430
är namnet på etiketten.

1024
00:46:49,430 --> 00:46:52,350
Så var du se en
"P" tillämpa teckenstorlek,

1025
00:46:52,350 --> 00:46:55,222
och låt oss göra det mer
rimlig igen-- 24 poäng.

1026
00:46:55,222 --> 00:46:56,930
Och vet du vad,
bara för bra åtgärd,

1027
00:46:56,930 --> 00:46:59,810
Låt oss göra färgen
röd bara för stunden.

1028
00:46:59,810 --> 00:47:03,740
Och nu om jag ladda om, nu har vi
se tre fula stycken.

1029
00:47:03,740 --> 00:47:07,180
>> Men nu antar att jag är typ
of-- Jag vill i första stycket

1030
00:47:07,180 --> 00:47:08,210
att hoppa ut på användaren.

1031
00:47:08,210 --> 00:47:11,150
Jag vill inte bara öka
teckenstorleken på allt.

1032
00:47:11,150 --> 00:47:16,105
Och så vill jag faktiskt att identifiera eller
skilja mellan dessa punkter.

1033
00:47:16,105 --> 00:47:18,730
Så låt oss bli av med röda,
eftersom det är bara typ av klibbig,

1034
00:47:18,730 --> 00:47:23,885
och låt oss gå vidare och göra
teckenstorlek 12 punkter som standard,

1035
00:47:23,885 --> 00:47:26,260
så att vi är tillbaka till något
lite mer rimlig.

1036
00:47:26,260 --> 00:47:29,190
Och nu vill jag bara att öka
teckenstorlek i första stycket.

1037
00:47:29,190 --> 00:47:31,440
Jag kan göra detta på ett fåtal
sätt, men ett sätt som är

1038
00:47:31,440 --> 00:47:37,180
kanske mest instruktions på
just nu är att göra följande.

1039
00:47:37,180 --> 00:47:43,280
Låt mig gå vidare och säga, detta
punkt har ett unikt ID av "först."

1040
00:47:43,280 --> 00:47:45,000
Jag kan kalla detta vad jag vill.

1041
00:47:45,000 --> 00:47:46,874
Jag skulle kunna kalla detta "foo"
eller något annat ord,

1042
00:47:46,874 --> 00:47:49,290
men jag ska ge det några
semantiskt meningsfullt namn

1043
00:47:49,290 --> 00:47:50,320
som "först."

1044
00:47:50,320 --> 00:47:54,790
Detta är en unik identifierare,
ID för min första stycket.

1045
00:47:54,790 --> 00:47:59,360
>> Vad jag kan göra nu i min stilmall
är vara lite mer exakt.

1046
00:47:59,360 --> 00:48:02,330
Istället för att säga, tillämpa
följande till p-taggen,

1047
00:48:02,330 --> 00:48:04,890
Jag kan säga following--
tillämpa följande,

1048
00:48:04,890 --> 00:48:11,000
eller välj, HTML-elementet
som har ett unikt ID av "först."

1049
00:48:11,000 --> 00:48:12,350
Vad vill jag att gälla för det?

1050
00:48:12,350 --> 00:48:15,250
En teckenstorlek på 24 punkter.

1051
00:48:15,250 --> 00:48:16,640
Så jag har två väljare nu.

1052
00:48:16,640 --> 00:48:19,690
Man gör alla
punkterna 12 poäng.

1053
00:48:19,690 --> 00:48:24,960
Men detta, särskilt eftersom det kommer
second-- det kommer sist i file--

1054
00:48:24,960 --> 00:48:27,090
detta har en kaskadeffekt.

1055
00:48:27,090 --> 00:48:30,200
Jag har bara gjort alla mina
punkt tags 12-point,

1056
00:48:30,200 --> 00:48:34,350
men detta nu kaskader och
åsidosätter att för varje element

1057
00:48:34,350 --> 00:48:38,800
på sidan, en tagg i sidan vars
unikt ID är citat unquote "först."

1058
00:48:38,800 --> 00:48:41,720
Och hashtaggen i detta sammanhang
bara betyder "unik identifierare."

1059
00:48:41,720 --> 00:48:43,750
Jag vill inte säga det i HTML-filen.

1060
00:48:43,750 --> 00:48:46,880
Jag, här borta, bara säga
citat unquote "först."

1061
00:48:46,880 --> 00:48:48,470
>> Så låt mig ladda om.

1062
00:48:48,470 --> 00:48:49,919
Och nu ser jag, ah, OK.

1063
00:48:49,919 --> 00:48:51,710
Jag menar, det är inte så
söt, men det är typ

1064
00:48:51,710 --> 00:48:53,600
av som förordet till en
bok eller något liknande,

1065
00:48:53,600 --> 00:48:55,100
där det första stycket är större.

1066
00:48:55,100 --> 00:48:57,933
Skulle kunna vara ännu mer exakt med
bara de första bokstäverna, men åtminstone

1067
00:48:57,933 --> 00:48:59,110
Jag har utövat mer kontroll.

1068
00:48:59,110 --> 00:49:04,760
Nu maybe-- kanske jag vill göra detta
ibland av någon anledning,

1069
00:49:04,760 --> 00:49:09,010
och så jag inte vill att det ska
gäller bara en HTML-tagg.

1070
00:49:09,010 --> 00:49:15,110
Snarare, låt oss säga-- låt oss
också göra följande.

1071
00:49:15,110 --> 00:49:18,810
Class = "import".

1072
00:49:18,810 --> 00:49:23,970
Medan en ID används för att unikt
identifiera en sak, en tagg,

1073
00:49:23,970 --> 00:49:30,190
i din webbsida, är en klass tänkt att vara
användas på valfritt antal element eller taggar

1074
00:49:30,190 --> 00:49:30,950
på din hemsida.

1075
00:49:30,950 --> 00:49:31,710
Så det är återanvändbara.

1076
00:49:31,710 --> 00:49:33,090
Ett ID kan inte återanvändas.

1077
00:49:33,090 --> 00:49:34,450
En klass är återanvändbar.

1078
00:49:34,450 --> 00:49:37,830
>> Och vet du vad, oavsett
filosofiska reasons--

1079
00:49:37,830 --> 00:49:40,180
Jag ville inte avsluta min
thought-- Jag ska säga

1080
00:49:40,180 --> 00:49:44,300
att det första stycket och
andra stycket är viktiga.

1081
00:49:44,300 --> 00:49:48,600
Så jag kommer att tillämpa den klass som kallas
"Viktigt" att om jag sparar min fil

1082
00:49:48,600 --> 00:49:51,510
och ladda, har ingen
funktionell effekt ännu.

1083
00:49:51,510 --> 00:49:53,780
Men jag har lagt några
metadata till filen,

1084
00:49:53,780 --> 00:49:56,610
typ av något separat
från kärnuppgifter i filen,

1085
00:49:56,610 --> 00:50:02,300
så att nu i min stilmall, om jag
istället säga ".important" - ni vet,

1086
00:50:02,300 --> 00:50:07,110
något som är viktigt, jag är
kommer att göra font-färg, red--

1087
00:50:07,110 --> 00:50:09,930
eller snarare inte font-färg, bara färg.

1088
00:50:09,930 --> 00:50:12,930
Det finns inkonsekvenser
i CSS tyvärr.

1089
00:50:12,930 --> 00:50:14,120
Och ladda om.

1090
00:50:14,120 --> 00:50:17,640
Nu märker först
två stycken är röda

1091
00:50:17,640 --> 00:50:20,880
men inte den tredje, eftersom jag bara
tillämpas klassen "viktig"

1092
00:50:20,880 --> 00:50:25,020
till två av dessa saker först.

1093
00:50:25,020 --> 00:50:28,030
>> Så i ID, har du möjlighet
att specificera mycket exakt.

1094
00:50:28,030 --> 00:50:30,110
Med klasser, har du återanvändbarhet.

1095
00:50:30,110 --> 00:50:33,800
Men i båda fallen märker
sorts princip bra design

1096
00:50:33,800 --> 00:50:39,072
där jag räknade ut alla
estetik till min styles.css fil.

1097
00:50:39,072 --> 00:50:40,280
Så det finns ingen messiness här.

1098
00:50:40,280 --> 00:50:44,490
Det finns ingen uppgift om rött eller
fet vänd eller teckenstorlek i den här filen.

1099
00:50:44,490 --> 00:50:49,430
Snarare jag har semantiskt,
ett meningsfullt sätt kännetecknas mina uppgifter som,

1100
00:50:49,430 --> 00:50:51,240
här är några viktiga data.

1101
00:50:51,240 --> 00:50:52,800
Här är några mer viktiga data.

1102
00:50:52,800 --> 00:50:56,500
Dessutom, här är
"Första" av mina viktiga data.

1103
00:50:56,500 --> 00:51:01,050
Så HTML handlar om sort
av märkning, bokstavligen, ord

1104
00:51:01,050 --> 00:51:05,270
och punkterna och konstruktioner i din
sida med dessa små tips, om du

1105
00:51:05,270 --> 00:51:07,640
kommer, att du kan
på något sätt utnyttja användning av

1106
00:51:07,640 --> 00:51:10,880
andra tekniker som CSS på detta sätt.

1107
00:51:10,880 --> 00:51:14,760
>> Så som svar på Victoria fråga,
vi kan göra texten större på det sättet.

1108
00:51:14,760 --> 00:51:18,380
Det finns så många andra sätt, men
typsnittet tag-- öppna fäste "font" -

1109
00:51:18,380 --> 00:51:19,770
är faktiskt flera år.

1110
00:51:19,770 --> 00:51:21,410
Och detta är problemet,
Även med endast förlitar

1111
00:51:21,410 --> 00:51:23,485
på nätet resources--
de tenderar att vara föråldrad.

1112
00:51:23,485 --> 00:51:26,110
Och faktiskt, det är fasats,
eftersom världen insåg,

1113
00:51:26,110 --> 00:51:28,970
vad betyder "font-size = 7" betyder?

1114
00:51:28,970 --> 00:51:29,670
Det gör det inte.

1115
00:51:29,670 --> 00:51:32,770
Och så i många år och
detta day-- en av sido

1116
00:51:32,770 --> 00:51:36,060
noterar här är att det är faktiskt
otroligt smärt fortfarande ibland

1117
00:51:36,060 --> 00:51:38,900
att utveckla platser för
webb, eftersom Microsoft

1118
00:51:38,900 --> 00:51:44,220
och Google och Mozilla och
andra håller ofta på hur

1119
00:51:44,220 --> 00:51:47,480
att tolka en specifikation som HTML.

1120
00:51:47,480 --> 00:51:52,490
>> Det finns en regelbok för HTML som
i allmänhet säger vad varje tagg betyder.

1121
00:51:52,490 --> 00:51:55,690
Men ibland är det kvar till
genomförandet gottfinnande,

1122
00:51:55,690 --> 00:51:57,290
Microsofts godtycke och Google.

1123
00:51:57,290 --> 00:52:00,000
Och så du kommer mycket ofta
se på en webbplats något

1124
00:52:00,000 --> 00:52:04,954
ser annorlunda på en dator
än det gör på en Mac,

1125
00:52:04,954 --> 00:52:06,995
och det är verkligen eftersom,
Vid slutet av dagen,

1126
00:52:06,995 --> 00:52:08,891
de inte testa den
väl på båda plattformarna.

1127
00:52:08,891 --> 00:52:11,390
Men det är också därför rimligt,
smarta människor kommer att vara oense

1128
00:52:11,390 --> 00:52:14,970
och företag kommer att vara oense, och så
en av de utmaningar som programmering

1129
00:52:14,970 --> 00:52:16,980
för webben eller design
saker för webben

1130
00:52:16,980 --> 00:52:21,700
skriver din webbplats på ett sätt
som fungerar på alla webbläsare.

1131
00:52:21,700 --> 00:52:23,410
Men även det är orimligt, eller hur?

1132
00:52:23,410 --> 00:52:27,807
Det finns så många versioner av så många
webbläsare där ute som, vid någon tidpunkt,

1133
00:52:27,807 --> 00:52:30,890
du måste också göra en bedömning
och du måste bestämma som företag,

1134
00:52:30,890 --> 00:52:33,082
särskilt för e-handel-stil
platser där du är

1135
00:52:33,082 --> 00:52:36,290
försöker använda den senaste och bästa
teknik för att ge en riktigt bra användar

1136
00:52:36,290 --> 00:52:37,110
erfarenhet.

1137
00:52:37,110 --> 00:52:41,019
Men några procent av användarna kanske
fortfarande använder Internet Explorer 6 eller 7

1138
00:52:41,019 --> 00:52:43,810
eller 8, i synnerhet beroende på
land som de kommer ifrån.

1139
00:52:43,810 --> 00:52:46,760
>> Och så mycket vanligt
rådfrågas är något

1140
00:52:46,760 --> 00:52:50,920
som "statistik webbläsare."

1141
00:52:50,920 --> 00:52:56,560
Och om vi går att-- låt oss se Wikipedia
och se hur up-to-date detta diagram är

1142
00:52:56,560 --> 00:52:59,320
om det finns en.

1143
00:52:59,320 --> 00:53:02,420
Så här kan du se
där webbläsare faktiskt

1144
00:53:02,420 --> 00:53:06,160
är enligt december 2015
Enligt den amerikanska regeringen.

1145
00:53:06,160 --> 00:53:11,170
Chrome är på 42% av marknaden, följt
av IE till stor del i företagens inställningar

1146
00:53:11,170 --> 00:53:14,490
eller PC inställningar, naturligtvis,
följt av Firefox,

1147
00:53:14,490 --> 00:53:17,440
då Safari, då Opera inte
göra kartan här av någon anledning,

1148
00:53:17,440 --> 00:53:18,210
och sedan andra.

1149
00:53:18,210 --> 00:53:19,500
Kanske det är under övriga.

1150
00:53:19,500 --> 00:53:27,700
Men mer problematisk än det är--
Låt oss se om Wikipedia har också

1151
00:53:27,700 --> 00:53:35,194
versioner av webbläsare version--

1152
00:53:35,194 --> 00:53:36,160

1153
00:53:36,160 --> 00:53:39,190
>> Låt oss gå till statistik webbläsare.

1154
00:53:39,190 --> 00:53:40,680
IE.

1155
00:53:40,680 --> 00:53:42,030
Även det är inte tillräckligt.

1156
00:53:42,030 --> 00:53:44,854
Webbläsare 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 inte att vara rätt.

1160
00:53:50,540 --> 00:53:53,414
Låt oss se versioner.

1161
00:53:53,414 --> 00:53:54,830
Webbläsare marknadsandel.

1162
00:53:54,830 --> 00:53:57,110
Låt oss se om detta kommer upp.

1163
00:53:57,110 --> 00:53:57,610
OK.

1164
00:53:57,610 --> 00:54:00,010
Nu blir
lite mer användbar.

1165
00:54:00,010 --> 00:54:04,870
Så här märke till att vi har alla
olika versioner av webbläsare.

1166
00:54:04,870 --> 00:54:09,887
Och herregud, om du look-- Chrome
48, Chrome 47, Chrome 31, Chrome 45.

1167
00:54:09,887 --> 00:54:12,970
Jag menar, webbläsare allt uppdateras,
och ibland vissa av dessa förändringar

1168
00:54:12,970 --> 00:54:16,430
är betydande i
termer av funktionalitet.

1169
00:54:16,430 --> 00:54:20,630
Och så vid någon tidpunkt, den
produktchefer eller ingenjörer

1170
00:54:20,630 --> 00:54:23,620
måste göra en decision-- du
vet vad, bara 1% av världens

1171
00:54:23,620 --> 00:54:24,740
fortfarande använder IE 7.

1172
00:54:24,740 --> 00:54:25,490
Åt helvete med dem.

1173
00:54:25,490 --> 00:54:27,470
Vi bara inte gå till
stödja den webbläsaren.

1174
00:54:27,470 --> 00:54:28,740
Och vad betyder det inte att stödja?

1175
00:54:28,740 --> 00:54:31,170
Det kan innebära att knapparna
inte fungerar på din hemsida,

1176
00:54:31,170 --> 00:54:33,050
eller det kan betyda att
formatering är helt avstängd.

1177
00:54:33,050 --> 00:54:35,091
Eller du kanske måste göra
samma dom samtal

1178
00:54:35,091 --> 00:54:39,089
i mobila dessa dagar, där vi är
inte kommer att stödja IOS 5 längre.

1179
00:54:39,089 --> 00:54:40,380
Så att folk bara måste uppgradera.

1180
00:54:40,380 --> 00:54:45,850
Eller vi inte kommer att stödja Cupcake
på Android OS för Android-enheter,

1181
00:54:45,850 --> 00:54:48,629
eftersom som world-- som den
tech världen vill gå framåt,

1182
00:54:48,629 --> 00:54:51,170
det slags vill dra
värld med den så att de inte

1183
00:54:51,170 --> 00:54:53,295
måste fortsätta att vara
bakåtkompatibel så att de

1184
00:54:53,295 --> 00:54:54,920
kan erbjuda nya och bra funktioner.

1185
00:54:54,920 --> 00:54:57,878
Detta är verkligen en av orsakerna
varför så många företag rullar ut

1186
00:54:57,878 --> 00:55:01,440
automatiska uppdateringar och slags tvinga
de senaste versionerna av programvara på oss.

1187
00:55:01,440 --> 00:55:04,010
Och även företag
som Apple kommer att sortera av

1188
00:55:04,010 --> 00:55:07,280
tvinga dig nästan eller tvinga
dig när det gäller marknadskrafterna

1189
00:55:07,280 --> 00:55:11,164
att köpa en ny telefon, eftersom de bara
kommer inte att uppdatera din gamla telefon längre.

1190
00:55:11,164 --> 00:55:13,330
Så du miste om
senaste och bästa funktionerna,

1191
00:55:13,330 --> 00:55:17,520
eftersom det är kostsamt för dem som
företaget att behålla äldre, utan tvekan

1192
00:55:17,520 --> 00:55:19,330
sämre versioner av programvara.

1193
00:55:19,330 --> 00:55:23,660
Men nettoeffekten är att
vi lider också detta.

1194
00:55:23,660 --> 00:55:26,550
>> Så låt oss ta en titt på precis
ett par av slut saker här.

1195
00:55:26,550 --> 00:55:29,740
Låt oss slå ut riktigt snabbt en del av
dessa andra kulor, om nyfiken.

1196
00:55:29,740 --> 00:55:33,440
Så om du försökte,
till exempel, positionen

1197
00:55:33,440 --> 00:55:36,420
texten på olika sidor av
sida, kommer jag att göra ett snabbt sätt,

1198
00:55:36,420 --> 00:55:38,360
men det finns olika
sätt att göra detta.

1199
00:55:38,360 --> 00:55:42,610
Låt mig gå vidare och eliminate--
förenkla denna på följande sätt.

1200
00:55:42,610 --> 00:55:45,330
Låt mig bara gå tillbaka till min
enkla, enkla stycken.

1201
00:55:45,330 --> 00:55:47,760
Låt mig gå tillbaka till mitt styles.css.

1202
00:55:47,760 --> 00:55:51,040
Och jag ska bara använda simple--
som du kanske har sett på Google

1203
00:55:51,040 --> 00:55:54,430
eller hämta från earlier--
text-align höger.

1204
00:55:54,430 --> 00:55:56,220
Och uppdatera den här sidan.

1205
00:55:56,220 --> 00:55:58,470
Nu verkar allt
att vara högerjusterad,

1206
00:55:58,470 --> 00:56:00,770
som du kan se på overhead här.

1207
00:56:00,770 --> 00:56:04,470
>> Vi kan göra det ser lite mer
bokliknande, och vi kan säga "rättfärdiga"

1208
00:56:04,470 --> 00:56:05,640
och ladda om.

1209
00:56:05,640 --> 00:56:09,870
Nu är det trevligt och offentlig på båda
sidor, som är ganska trevligt.

1210
00:56:09,870 --> 00:56:12,220
Ett annat mål som vi hade här
var ändra färg på texten.

1211
00:56:12,220 --> 00:56:13,650
Så vi såg det med min röd text.

1212
00:56:13,650 --> 00:56:15,630
Och nu lägga till knappar för ett formulär.

1213
00:56:15,630 --> 00:56:19,390
Så varför inte vi försöker att göra just detta?

1214
00:56:19,390 --> 00:56:23,656
Men låt mig först gå till en webbplats som
de flesta av oss använder varje day-- Google.

1215
00:56:23,656 --> 00:56:25,780
Och låt oss ta en titt på
hur Google faktiskt fungerar.

1216
00:56:25,780 --> 00:56:26,821
Men jag ska göra det.

1217
00:56:26,821 --> 00:56:31,930
Låt mig göra det in-- Japp,
Låt mig gå till Google först.

1218
00:56:31,930 --> 00:56:34,530
Jag kommer att behöva gå
i Google Inställningar,

1219
00:56:34,530 --> 00:56:40,660
eftersom jag vill inaktivera
något som kallas snabba resultat.

1220
00:56:40,660 --> 00:56:43,580
>> Så du kanske har märkt i
Google dessa days-- låt mig gå tillbaka

1221
00:56:43,580 --> 00:56:44,850
och slå på.

1222
00:56:44,850 --> 00:56:47,900
Så om jag börja söka
för "katter" som denna,

1223
00:56:47,900 --> 00:56:50,120
märka att inte bara
Jag får automatiskt fylla upp

1224
00:56:50,120 --> 00:56:54,520
topp, helt plötsligt, själva sidan
verkar förändras ganska snabbt också,

1225
00:56:54,520 --> 00:56:58,750
och det är Google med ett språk
kallas JavaScript försöker vara till hjälp.

1226
00:56:58,750 --> 00:57:01,540
Men tyvärr, det slags
av förstör vår diskussion

1227
00:57:01,540 --> 00:57:04,010
av vad som faktiskt händer
under huven här.

1228
00:57:04,010 --> 00:57:09,070
Så jag bara typ av snabbt
stänga omedelbara resultat.

1229
00:57:09,070 --> 00:57:11,510
Och jag kommer att klicka på Spara.

1230
00:57:11,510 --> 00:57:13,930
Och nu ska jag öppna
att diagnostisk verktygsfält som jag

1231
00:57:13,930 --> 00:57:16,150
hålla öppningen under fliken Nätverk.

1232
00:57:16,150 --> 00:57:17,720
Så låt oss göra detta.

1233
00:57:17,720 --> 00:57:21,960
Låt mig-- whoops--
rulla ner det lite.

1234
00:57:21,960 --> 00:57:24,410
Och låt mig söka efter "katter."

1235
00:57:24,410 --> 00:57:26,790
>> Och nu notice-- faktiskt,
Detta är ett bra tillfälle

1236
00:57:26,790 --> 00:57:28,840
att diskutera en stund.

1237
00:57:28,840 --> 00:57:32,460
Lägg märke till det ögonblick jag Motortyp- stoppa det.

1238
00:57:32,460 --> 00:57:35,250
Sluta.

1239
00:57:35,250 --> 00:57:35,790
OK.

1240
00:57:35,790 --> 00:57:40,870
Lägg märke till det ögonblick jag skriver brev
C, titta ned på skärmen.

1241
00:57:40,870 --> 00:57:48,600
A- T- S. Vad botten
den här skärmen, min fliken Nätverk

1242
00:57:48,600 --> 00:57:53,320
föreslår händer varje
gång jag skriver ett brev?

1243
00:57:53,320 --> 00:57:57,700
Tyvärr är grodan mycket
störande dag eller vitklöver

1244
00:57:57,700 --> 00:58:00,339
eller vad han är.

1245
00:58:00,339 --> 00:58:01,880
Vad som hände varje gång jag skrev?

1246
00:58:01,880 --> 00:58:04,230
Och låt mig rensa
buffert och skriver det igen.

1247
00:58:04,230 --> 00:58:06,580
So-- hoppsan.

1248
00:58:06,580 --> 00:58:13,280
Varje gång jag skriver ett brev, C- A- T--
så en ny rad håller uppenbarligen förekommer.

1249
00:58:13,280 --> 00:58:16,530
Vad gör var och en av dessa rader representerar
baserat på vad vi har sett och diskuterat

1250
00:58:16,530 --> 00:58:17,339
än så länge?

1251
00:58:17,339 --> 00:58:18,130
PUBLIK: En sökning?

1252
00:58:18,130 --> 00:58:21,770
DAVID J. MALAN: En sökning, eller
mer allmänt, en HTTP-begäran

1253
00:58:21,770 --> 00:58:23,125
från min webbläsare till servern.

1254
00:58:23,125 --> 00:58:29,090
Tja, varför är min webbläsare att göra en HTTP
begära varje gång jag skriver ett brev?

1255
00:58:29,090 --> 00:58:30,502
>> PUBLIK: [OHÖRBART]

1256
00:58:30,502 --> 00:58:33,210
DAVID J. MALAN: Ja, det ger
mig dessa auto-komplett resultat.

1257
00:58:33,210 --> 00:58:35,190
Liksom, där dessa
sökresultat ifrån?

1258
00:58:35,190 --> 00:58:38,120
Tja, varje gång jag skriver en
brev, Google skickar mer

1259
00:58:38,120 --> 00:58:40,460
och mer och mer av
ordet jag skriver.

1260
00:58:40,460 --> 00:58:41,040
Varför?

1261
00:58:41,040 --> 00:58:44,540
Eftersom de vill ge mig en
bättre och bättre, bättre förslag,

1262
00:58:44,540 --> 00:58:48,880
en lista med förslag, för det ordet
Jag försöker faktiskt klar.

1263
00:58:48,880 --> 00:58:53,030
Så detta är att säga bokstavligen varje
tecken du skriver i Google

1264
00:58:53,030 --> 00:58:56,900
sänds slutligen i
bulk, men också ibland en

1265
00:58:56,900 --> 00:59:00,620
vid en tidpunkt för att genomföra
dessa auto-komplett funktioner när

1266
00:59:00,620 --> 00:59:03,000
data är, naturligtvis, på webben.

1267
00:59:03,000 --> 00:59:08,780
>> Nu ska vi ta en titt på vad som faktiskt
händer när jag klickar Google Search.

1268
00:59:08,780 --> 00:59:10,420
Och då kommer vi utnyttja detta själva.

1269
00:59:10,420 --> 00:59:15,320
Så om jag bläddra ner nu till mycket
första begäran om att just hänt.

1270
00:59:15,320 --> 00:59:17,130
Lägg märke till följande.

1271
00:59:17,130 --> 00:59:25,550
Det sändes till en ganska lång URL--
https://www.google.com/search?

1272
00:59:25,550 --> 00:59:27,100
och sedan en massa saker.

1273
00:59:27,100 --> 00:59:29,620
Låt oss se detta faktiskt nu
på fliken webbläsaren själv.

1274
00:59:29,620 --> 00:59:31,310
Låt oss bli av verktygsfältet här.

1275
00:59:31,310 --> 00:59:33,140
Här är sidan med sökresultat.

1276
00:59:33,140 --> 00:59:34,790
Och varsel här är webbadressen.

1277
00:59:34,790 --> 00:59:37,430
Nu kan du nog gissa
vad som händer här delvis.

1278
00:59:37,430 --> 00:59:39,090
Så först av allt, en definition.

1279
00:59:39,090 --> 00:59:42,570
Detta är tydligen destinationen
där formuläret skickas.

1280
00:59:42,570 --> 00:59:44,910
Så när jag skrev på
Orden "katter" och tryck Enter,

1281
00:59:44,910 --> 00:59:48,460
tydligen Google skickade
min textinmatning till den här webbadressen

1282
00:59:48,460 --> 00:59:50,770
att jag har markerat
där snedstreck sökning.

1283
00:59:50,770 --> 00:59:56,530
Det visade sig, i en webbadress, något som
händer efter ett frågetecken är,

1284
00:59:56,530 --> 01:00:01,270
som vi fortsätter att säga, en nyckel-värde-par
som skrivs in i form eller på något sätt

1285
01:00:01,270 --> 01:00:04,500
sänds från den
webbläsare till servern.

1286
01:00:04,500 --> 01:00:07,180
>> Så när du skriver ingång
i ett formulär på webben

1287
01:00:07,180 --> 01:00:10,000
och det skickas som vi har
diskuterat, via en get,

1288
01:00:10,000 --> 01:00:12,400
en av dessa virtuella
kuvert, innehållet

1289
01:00:12,400 --> 01:00:15,510
av detta envelope-- ja, fortsätt
få fyllda fysiskt

1290
01:00:15,510 --> 01:00:19,010
i kuvertet i klassen
idag, men tekniskt

1291
01:00:19,010 --> 01:00:21,110
det är faktiskt sätta i webbadressen.

1292
01:00:21,110 --> 01:00:22,940
Så i själva verket, låt mig gå igenom detta.

1293
01:00:22,940 --> 01:00:25,010
Var ser du användarens input?

1294
01:00:25,010 --> 01:00:27,490
Var ser du något
att jag själv skrivit upp här?

1295
01:00:27,490 --> 01:00:32,100

1296
01:00:32,100 --> 01:00:33,491
Ja, så "katter."

1297
01:00:33,491 --> 01:00:33,990
Höger?

1298
01:00:33,990 --> 01:00:36,380
Så låt mig destillera detta
till något enklare.

1299
01:00:36,380 --> 01:00:39,917
Jag kommer att ta bort allt om
denna URL som jag inte förstår,

1300
01:00:39,917 --> 01:00:42,250
och jag ska bara lämna
det som this-- / söka? q = katter.

1301
01:00:42,250 --> 01:00:45,640

1302
01:00:45,640 --> 01:00:47,890
Vi får se var q
kommer från ett ögonblick,

1303
01:00:47,890 --> 01:00:51,220
men det känns som ett minimum
mängd information som jag har uppgetts.

1304
01:00:51,220 --> 01:00:53,050
Och nu ska jag slå Enter.

1305
01:00:53,050 --> 01:00:55,520
Och märker det fortfarande fungerar.

1306
01:00:55,520 --> 01:00:57,950
Vi får fortfarande tillbaka en massa katter.

1307
01:00:57,950 --> 01:01:00,340
Så Google är snyggare
än detta i dessa dagar.

1308
01:01:00,340 --> 01:01:01,934
Det är 2016, inte 1999.

1309
01:01:01,934 --> 01:01:04,600
Så det finns andra saker som min
webbläsare skickar till servern.

1310
01:01:04,600 --> 01:01:07,100
Men detta är minimalt
allt som behövs.

1311
01:01:07,100 --> 01:01:08,380
>> Så vad händer?

1312
01:01:08,380 --> 01:01:14,320
Tja, låt mig först gå vidare och gå
tillbaka till Cloud9 och låt mig gå vidare

1313
01:01:14,320 --> 01:01:15,620
och stänger mina flikar tidigare.

1314
01:01:15,620 --> 01:01:18,230
Och jag ska göra detta på min
äger bara för ett ögonblick.

1315
01:01:18,230 --> 01:01:20,730
Jag kommer att gå vidare
och skapa en ny fil.

1316
01:01:20,730 --> 01:01:23,739
Och jag kommer att spara det som google.html.

1317
01:01:23,739 --> 01:01:26,280
Och jag tänker mycket quickly--
Jag kommer att stjäla, faktiskt,

1318
01:01:26,280 --> 01:01:28,510
en del av denna text bara för att spara tid.

1319
01:01:28,510 --> 01:01:30,610
Jag kommer att klistra in den här här.

1320
01:01:30,610 --> 01:01:33,850
Jag tänker inte bry sig om
någon stilisering denna gång.

1321
01:01:33,850 --> 01:01:38,340
Vi kommer att kalla detta "Min Google."

1322
01:01:38,340 --> 01:01:41,230
Och jag kommer att bli
allt i kroppen.

1323
01:01:41,230 --> 01:01:42,740
Och jag kommer att göra följande.

1324
01:01:42,740 --> 01:01:45,690
Låt mig zooma in.

1325
01:01:45,690 --> 01:01:50,620
Form action-- och som jag nämnde i korthet
earlier-- whoops-- som jag kortfattat

1326
01:01:50,620 --> 01:01:54,130
tidigare nämnts, verkan av en
formulär kan du skicka data till.

1327
01:01:54,130 --> 01:01:56,620
Så google.com/search.

1328
01:01:56,620 --> 01:01:59,390
Och metoden jag vill använda
kan vara en av två saker.

1329
01:01:59,390 --> 01:02:02,870
Det kan antingen vara "få", som vi håller
diskutera, eller det kan vara "post."

1330
01:02:02,870 --> 01:02:05,340
För nu, de grundläggande
Skillnaden är, om du använder "få"

1331
01:02:05,340 --> 01:02:09,590
all den information som
användaren ger får skickas i webbadressen.

1332
01:02:09,590 --> 01:02:13,530
>> Det är bra för saker som sökning
motorer och några andra program,

1333
01:02:13,530 --> 01:02:17,080
men under vilka omständigheter skulle
du inte vill fylla i ett formulär

1334
01:02:17,080 --> 01:02:21,620
och har informationen hamnar i
URL, som i webbläsarens adressfält?

1335
01:02:21,620 --> 01:02:25,470

1336
01:02:25,470 --> 01:02:26,605
Vilken typ av blanketter gör du--

1337
01:02:26,605 --> 01:02:27,480
PUBLIK: [OHÖRBART]

1338
01:02:27,480 --> 01:02:28,450
DAVID J. MALAN: Ja, precis vad?

1339
01:02:28,450 --> 01:02:29,270
PUBLIK: Lösenord.

1340
01:02:29,270 --> 01:02:31,936
DAVID J. MALAN: Ja, så du loggar
in på Facebook eller någon hemsida.

1341
01:02:31,936 --> 01:02:34,395
Det är användarens input från
en form, en textruta,

1342
01:02:34,395 --> 01:02:37,020
men du förmodligen inte vill det
dyka upp i webbläsarens URL.

1343
01:02:37,020 --> 01:02:38,121
Varför?

1344
01:02:38,121 --> 01:02:40,870
Jag menar, kanske det finns några
säkerhetskonsekvenser på nätet,

1345
01:02:40,870 --> 01:02:44,830
men more-- vill, enklare, vad händer om
din rumskamrat, betydande andra,

1346
01:02:44,830 --> 01:02:47,710
dina barn, ser din make
genom webbläsarhistoriken?

1347
01:02:47,710 --> 01:02:50,762
Det är ditt lösenord rätt
det i webbläsarens historik.

1348
01:02:50,762 --> 01:02:52,220
Det känns inte som god design.

1349
01:02:52,220 --> 01:02:54,500
Eller ännu mer tekniskt,
antar att du försöker

1350
01:02:54,500 --> 01:02:59,180
att ladda upp en bild till Flickr
eller Facebook eller wherever--

1351
01:02:59,180 --> 01:03:03,010
det vill säga användarinmatning, även om
det är lite mer interesting-- hur

1352
01:03:03,010 --> 01:03:05,530
jag klämma en bild i adressfältet?

1353
01:03:05,530 --> 01:03:06,730
Du kan slags slags inte.

1354
01:03:06,730 --> 01:03:07,396
Du kan typ av.

1355
01:03:07,396 --> 01:03:10,210
Men egentligen, jag är hårt pressade
att föreställa sig att göra det.

1356
01:03:10,210 --> 01:03:13,470
Så jag behöver en annan metod för
ladda upp bilder till en webbplats,

1357
01:03:13,470 --> 01:03:15,657
och den andra metoden kallas "post."

1358
01:03:15,657 --> 01:03:18,740
Men nu ska vi prata om
"Få", som är den enklare av de två.

1359
01:03:18,740 --> 01:03:21,100
Det sätter bara alla
användarinmatning i webbadressen.

1360
01:03:21,100 --> 01:03:22,830
>> Så här är formen jag skapar.

1361
01:03:22,830 --> 01:03:24,070
Jag vill ha en ingång.

1362
01:03:24,070 --> 01:03:24,820
Och vet du vad?

1363
01:03:24,820 --> 01:03:26,111
Jag kommer att ta en gissning här.

1364
01:03:26,111 --> 01:03:31,600
Jag kommer att minnas min
input "q" för "fråga."

1365
01:03:31,600 --> 01:03:34,970
Och jag tror att detta är en av de
ursprungliga mönster, kanske, från 1999.

1366
01:03:34,970 --> 01:03:39,560
Och sedan den typ av denna ingång
bara kommer att bli "text."

1367
01:03:39,560 --> 01:03:43,040
Och då jag kommer att ha en annan ingång
som inte behöver ett namn, som vi snart

1368
01:03:43,040 --> 01:03:45,120
se, den typ som är "skicka".

1369
01:03:45,120 --> 01:03:47,070
Och detta kommer att
ge mig en speciell knapp.

1370
01:03:47,070 --> 01:03:48,320
Och det är allt.

1371
01:03:48,320 --> 01:03:50,790
>> Så låt mig gå vidare och spara filen.

1372
01:03:50,790 --> 01:03:54,910
Jag kommer att gå tillbaka till min
webbläsare och gå till google.html.

1373
01:03:54,910 --> 01:03:56,140
Stiga på.

1374
01:03:56,140 --> 01:03:59,680
Och det är ganska gles
minst sagt.

1375
01:03:59,680 --> 01:04:03,110
Men låt mig gå vidare
och sök efter "katter."

1376
01:04:03,110 --> 01:04:06,510
Och märker jag för närvarande
Detta Cloud9 URL.

1377
01:04:06,510 --> 01:04:09,240
Men det ögonblick jag klickar på,
där ni hoppas jag kommer att sluta?

1378
01:04:09,240 --> 01:04:10,160
>> PUBLIK: Google.

1379
01:04:10,160 --> 01:04:11,118
>> DAVID J. MALAN: Google.

1380
01:04:11,118 --> 01:04:12,740
Så låt oss klicka på Skicka.

1381
01:04:12,740 --> 01:04:15,200
Och faktiskt jag har åter implementerat Google.

1382
01:04:15,200 --> 01:04:15,700
Höger?

1383
01:04:15,700 --> 01:04:16,480
Det är enklare.

1384
01:04:16,480 --> 01:04:17,120
Det är lättare.

1385
01:04:17,120 --> 01:04:20,350
Jag menar, min kod är klart bättre än
deras, från röran vi såg tidigare.

1386
01:04:20,350 --> 01:04:21,100
Och vet du vad?

1387
01:04:21,100 --> 01:04:22,610
Jag kommer att krydda upp detta lite.

1388
01:04:22,610 --> 01:04:23,860
Jag nämnde inte detta tidigare.

1389
01:04:23,860 --> 01:04:27,860
Det finns taggar som H1, för rubrik 1,
den viktigaste rubriken i en sida.

1390
01:04:27,860 --> 01:04:30,570
"Min Google," Jag kallar detta.

1391
01:04:30,570 --> 01:04:31,940
Låt mig ladda om.

1392
01:04:31,940 --> 01:04:33,772
Det ser lite bättre redan.

1393
01:04:33,772 --> 01:04:34,980
Och, faktiskt, vet du vad?

1394
01:04:34,980 --> 01:04:36,430
Jag har already-- jag ljög.

1395
01:04:36,430 --> 01:04:40,200
Jag sa att jag inte kommer att styla detta,
men jag ska styla detta som förut.

1396
01:04:40,200 --> 01:04:46,860
Och min kropp kommer att bli,
låt oss säga, text-align center.

1397
01:04:46,860 --> 01:04:48,800
Det ser mer ut som Google redan.

1398
01:04:48,800 --> 01:04:51,090
>> Jag behöver en radbrytning, men,
för att Skicka-knappen.

1399
01:04:51,090 --> 01:04:52,798
Och det visar sig, du
kan använda stycken,

1400
01:04:52,798 --> 01:04:57,320
eller så kan mer bokstavligen bara säga,
ge mig en radbrytning här-- br taggen.

1401
01:04:57,320 --> 01:04:59,319
Och om jag ladda om, nu går där.

1402
01:04:59,319 --> 01:05:01,610
Det är en lite ful, så jag
skulle kunna göra flera radbrytningar,

1403
01:05:01,610 --> 01:05:03,310
men låt oss inte bli för girig här.

1404
01:05:03,310 --> 01:05:06,430
Så nu ska vi se om det fungerar för "hundar".

1405
01:05:06,430 --> 01:05:08,640
Det verkar fungera för "hundar", liksom.

1406
01:05:08,640 --> 01:05:10,780
Så vad är tvingande takeaway här?

1407
01:05:10,780 --> 01:05:13,600
En-- var inte ett stort steg till
införa några fler taggar,

1408
01:05:13,600 --> 01:05:15,370
liknande form taggen i inmatnings taggen.

1409
01:05:15,370 --> 01:05:17,120
Men mer fundamentalt
är, är alla vi gör

1410
01:05:17,120 --> 01:05:20,610
är att utnyttja vår förståelse
HTTP och det faktum

1411
01:05:20,610 --> 01:05:24,900
som bildas i slutändan förändrar
vad som finns i webbadressen i webbläsaren,

1412
01:05:24,900 --> 01:05:28,540
och så, därför kan vi
tillhandahålla mekaniskt ingång till en server

1413
01:05:28,540 --> 01:05:33,600
genom att göra ett HTML-formulär och veta
att servern förstår HTTP,

1414
01:05:33,600 --> 01:05:36,890
precis som vår kropp förstår, liksom,
skaka min hand, samma protokoll,

1415
01:05:36,890 --> 01:05:40,920
och så får vi tillbaka svaret
att vi i slutändan förväntar sig.

1416
01:05:40,920 --> 01:05:44,050
>> Så låt oss försöka göra en
sista nu med mobil,

1417
01:05:44,050 --> 01:05:47,052
och jag ska make-- jag ska lägga
denna kod till bilderna.

1418
01:05:47,052 --> 01:05:49,760
Så om du vill att mixtra, du
kan säkert ta det därifrån.

1419
01:05:49,760 --> 01:05:51,551
Men jag kommer att gå
vidare och göra en sak.

1420
01:05:51,551 --> 01:05:54,120
Jag kommer att gå vidare och
öppna upp mitt index page--

1421
01:05:54,120 --> 01:05:59,030
min hej sida som tidigare, vilket
har en hel del av denna faux-latinsk text,

1422
01:05:59,030 --> 01:06:05,470
eller menings latinska texten, och has--
det ser ut så här på denna teckenstorlek.

1423
01:06:05,470 --> 01:06:07,850
Men låt mig gå vidare och göra det.

1424
01:06:07,850 --> 01:06:09,300
Jag kommer att gå in i Cloud9.

1425
01:06:09,300 --> 01:06:10,380
Och du behöver inte göra det här steget.

1426
01:06:10,380 --> 01:06:11,420
Jag ska bara göra det själv.

1427
01:06:11,420 --> 01:06:12,890
Jag kommer att klicka på Dela.

1428
01:06:12,890 --> 01:06:15,170
Och detta är en funktion
bara av Cloud9, varvid

1429
01:06:15,170 --> 01:06:17,710
Jag kan offentliggöra min omgivning.

1430
01:06:17,710 --> 01:06:20,240
>> Och bara för sakens skull
demonstration, låt mig göra detta.

1431
01:06:20,240 --> 01:06:22,870
Jag kommer att göra min offentliga ansökan.

1432
01:06:22,870 --> 01:06:25,230
Lägg märke till det varna mig, är
Jag säker på att jag vill göra detta,

1433
01:06:25,230 --> 01:06:28,438
eftersom detta kommer att göra alla
i världen, oavsett om de är här nu

1434
01:06:28,438 --> 01:06:33,560
eller titta på video senare på
Internet kan se vad jag ser.

1435
01:06:33,560 --> 01:06:34,440
Men det är OK.

1436
01:06:34,440 --> 01:06:37,870
Jag kommer att säga "Klar."

1437
01:06:37,870 --> 01:06:42,080
Och låt mig uppmuntra dig, om jag gjorde
detta correctly-- låt mig testa det först.

1438
01:06:42,080 --> 01:06:45,590
Gå vidare, om du inte mind--
i en webbläsare på datorn,

1439
01:06:45,590 --> 01:06:49,900
gå till denna URL, och förhoppningsvis
du ser min latinska texten.

1440
01:06:49,900 --> 01:06:52,820
Och för att vara tydlig, det är
körs inte på min laptop.

1441
01:06:52,820 --> 01:06:53,610
Det är i molnet.

1442
01:06:53,610 --> 01:06:58,120
Det är på Cloud9, bokstavligen, men
Jag har gjort min offentliga arbetsyta

1443
01:06:58,120 --> 01:07:03,450
så att vem som helst på internet
kan komma åt mitt latinska hemsida.

1444
01:07:03,450 --> 01:07:07,209
>> Gå till samma webbadress på
telefonen om du kunde.

1445
01:07:07,209 --> 01:07:09,750
Om det kommer att kosta dig, men du
kan bara titta på en axel.

1446
01:07:09,750 --> 01:07:40,688

1447
01:07:40,688 --> 01:07:42,467
PUBLIK: [OHÖRBART]

1448
01:07:42,467 --> 01:07:43,550
DAVID J. MALAN: Jag är ledsen?

1449
01:07:43,550 --> 01:07:45,390
PUBLIK: [OHÖRBART]

1450
01:07:45,390 --> 01:07:47,710
DAVID J. MALAN: Bara latinska ord.

1451
01:07:47,710 --> 01:07:48,210
Det är allt.

1452
01:07:48,210 --> 01:07:49,250
Men det är vad du bör se.

1453
01:07:49,250 --> 01:07:49,875
>> PUBLIK: Ja.

1454
01:07:49,875 --> 01:07:50,790
DAVID J. MALAN: Ja.

1455
01:07:50,790 --> 01:07:51,300
Ja.

1456
01:07:51,300 --> 01:07:51,540
OK.

1457
01:07:51,540 --> 01:07:53,530
Så kan jag hålla upp din
telefonen för en liten stund?

1458
01:07:53,530 --> 01:07:57,504
Så förhoppningsvis om du öppnar
det bör det ser nästan oläslig.

1459
01:07:57,504 --> 01:07:59,920
Det är still-- jag menar, det är
oläslig på grund av det latinska.

1460
01:07:59,920 --> 01:08:01,920
Men det är också oläslig
för vad andra skäl?

1461
01:08:01,920 --> 01:08:03,775
Liksom, vad misshagar dig om detta?

1462
01:08:03,775 --> 01:08:04,650
PUBLIK: Den är liten.

1463
01:08:04,650 --> 01:08:06,420
DAVID J. MALAN: Det är super, super liten.

1464
01:08:06,420 --> 01:08:07,920
Så hur kan vi åtgärda detta?

1465
01:08:07,920 --> 01:08:09,730
Det är super, super liten
på Victoria telefon

1466
01:08:09,730 --> 01:08:11,400
och, om du har dragit
den själv, antagligen

1467
01:08:11,400 --> 01:08:14,660
små på din telefon också, om du
har tillgänglighetsinställningar aktiverade.

1468
01:08:14,660 --> 01:08:15,530
Vad är det?

1469
01:08:15,530 --> 01:08:18,497
Du kan bara klämma och
zoom, vilket är genomförbart,

1470
01:08:18,497 --> 01:08:20,330
men då du bara se
några ord åt gången.

1471
01:08:20,330 --> 01:08:20,859
Så vänta en minut.

1472
01:08:20,859 --> 01:08:21,720
Jag vet hur man löser detta.

1473
01:08:21,720 --> 01:08:22,219
Höger?

1474
01:08:22,219 --> 01:08:26,130
Jag kunde använda CSS, och jag skulle kunna ändra
teckenstorlek 12 punkter till 24 punkter.

1475
01:08:26,130 --> 01:08:29,020
Men bieffekt av att
naturligtvis kommer att vara nu,

1476
01:08:29,020 --> 01:08:32,630
på en stationär eller bärbar dator,
nu texten är dubbelt så stor.

1477
01:08:32,630 --> 01:08:35,810
Och så skulle det slags vara trevligt
att skilja mellan enheter,

1478
01:08:35,810 --> 01:08:37,840
och det visar sig att det
är ett sätt att göra det.

1479
01:08:37,840 --> 01:08:39,590
Det finns flera
olika sätt, i själva verket,

1480
01:08:39,590 --> 01:08:44,189
varigenom användning av CSS och snyggare funktioner
att vi inte kommer att gå in i detalj,

1481
01:08:44,189 --> 01:08:46,960
Du kan i princip fråga
webbläsaren och säga,

1482
01:08:46,960 --> 01:08:51,550
om skärmen är mindre än detta
många pixlar använda teckenstorlek.

1483
01:08:51,550 --> 01:08:55,180
Om skärmen är större än detta
många pixlar använda andra teckenstorlek.

1484
01:08:55,180 --> 01:08:57,080
>> Du kan bli ännu finare fortfarande.

1485
01:08:57,080 --> 01:09:00,140
Om du någonsin har besökt en
webbsida som, på ett skrivbord,

1486
01:09:00,140 --> 01:09:04,404
har en stor meny kanske ut till
sida, och sedan allt innehåll

1487
01:09:04,404 --> 01:09:07,029
är att den sida av det menu--
det är lite av en gemensam paradigm.

1488
01:09:07,029 --> 01:09:09,670
Menyn till vänster, innehåll
på höger, eller vice versa.

1489
01:09:09,670 --> 01:09:13,569
Fungerar inte riktigt på mobilen när
Skärmen är bara så här många pixlar bred.

1490
01:09:13,569 --> 01:09:16,233
Så allt vanligare på mobilen är,
menyn kommer plötsligt får

1491
01:09:16,233 --> 01:09:18,399
kollapsade, och du måste
klicka på en knapp för att se det,

1492
01:09:18,399 --> 01:09:22,404
eller webbplatsen kommer att sätta på menyn
ovanför och sätta innehållet under den.

1493
01:09:22,404 --> 01:09:24,779
Och du kan genomföra dessa
saker på flera olika sätt, också.

1494
01:09:24,779 --> 01:09:28,340
Du kan be dina programmerare,
hej, lag, helst

1495
01:09:28,340 --> 01:09:34,450
du ser en HTTP-begäran från en Android
enhet, en Microsoft-enhet, en Google

1496
01:09:34,450 --> 01:09:39,930
enhet, en Apple-enhet, använda
teckenstorlek och använda denna meny layout,

1497
01:09:39,930 --> 01:09:42,670
annars använder denna standard större layout.

1498
01:09:42,670 --> 01:09:45,410
>> Nu, med hjälp av vad
grundläggande teknik idag

1499
01:09:45,410 --> 01:09:48,529
kunde ingenjörerna använda
att veta om det är

1500
01:09:48,529 --> 01:09:53,660
en iPhone, en Android-telefon, en bärbar dator,
en stationär besöker företagets server?

1501
01:09:53,660 --> 01:09:55,310
Vari de får den informationen?

1502
01:09:55,310 --> 01:09:56,080
>> PUBLIK: Header?

1503
01:09:56,080 --> 01:09:57,740
>> DAVID J. MALAN: Ja, HTTP-huvudet.

1504
01:09:57,740 --> 01:10:01,714
Så varje HTTP-begäran som kommer från
sina kunder till sina servrar

1505
01:10:01,714 --> 01:10:03,880
innefattar, inuti den virtuella
kuvert, en massa

1506
01:10:03,880 --> 01:10:08,260
av HTTP-huvuden, är en av dessa
webbläsaren och operativsystemet

1507
01:10:08,260 --> 01:10:10,290
även om du bryr dig att
att detaljnivå.

1508
01:10:10,290 --> 01:10:13,790
Nu är det ett kryptiskt utseende sträng, men
det finns programvara som bara

1509
01:10:13,790 --> 01:10:18,530
förenkla det, och du kan bara be
i programmerings code-- PHP, Java, C ++,

1510
01:10:18,530 --> 01:10:23,650
whatever-- vad telefonen är this--
vilken enhet är denna användare använder?

1511
01:10:23,650 --> 01:10:27,501
Och då kan man säga, visa dem här
version av webbplatsen om det är en telefon.

1512
01:10:27,501 --> 01:10:30,250
Visa dem den här versionen av
webbplats om det är en bärbar eller stationär.

1513
01:10:30,250 --> 01:10:32,316
Men du behöver inte ens
serversidan komplexitet.

1514
01:10:32,316 --> 01:10:33,940
Du kan göra även den enklaste saker.

1515
01:10:33,940 --> 01:10:34,815
>> Jag kommer att göra detta.

1516
01:10:34,815 --> 01:10:38,995
Jag kommer att gå vidare till
min Cloud9 miljö,

1517
01:10:38,995 --> 01:10:41,370
och jag kommer att lägga till en tagg
som du såg i Google innan.

1518
01:10:41,370 --> 01:10:42,770
Det heter metatagg.

1519
01:10:42,770 --> 01:10:45,520
Och jag minns aldrig här, så
Jag kommer att skriva om den här.

1520
01:10:45,520 --> 01:10:50,552
Meta name = "View" och sedan
content = "width = enhet bredd, intital

1521
01:10:50,552 --> 01:11:02,060
skala = 1 "och det är det.

1522
01:11:02,060 --> 01:11:06,230
>> Så det kan lika gärna vara
som en magisk besvärjelse.

1523
01:11:06,230 --> 01:11:11,300
Det är inte så tydlig, men det har
något att göra med visnings,

1524
01:11:11,300 --> 01:11:15,070
och visningsområdet är bara kroppen av en
webbsida, det rektangulära området som

1525
01:11:15,070 --> 01:11:16,690
definierar de flesta av sidan.

1526
01:11:16,690 --> 01:11:19,060
Och detta är bara berätta
webbläsaren, vet du vad?

1527
01:11:19,060 --> 01:11:22,589
Gör bredden på denna sida
effektivt är lika med bredden av enheten.

1528
01:11:22,589 --> 01:11:25,380
Med andra ord, inte anta att
du har typ av obegränsat utrymme.

1529
01:11:25,380 --> 01:11:29,920
Tänk dig att du bara har så mycket
utrymme som själva enheten är stor.

1530
01:11:29,920 --> 01:11:34,454
Och så nu, om jag ladda om
i min webbläsare, jag ser ingen förändring.

1531
01:11:34,454 --> 01:11:37,370
Men om jag gjorde detta correctly-- och
Låt mig passera min fingers-- om ni alla

1532
01:11:37,370 --> 01:11:42,920
ladda dina telefoner, gör du
se en övertygande förändring?

1533
01:11:42,920 --> 01:11:43,620
Ja, det är that--

1534
01:11:43,620 --> 01:11:45,067
>> PUBLIK: [OHÖRBART]

1535
01:11:45,067 --> 01:11:45,900
DAVID J. MALAN: Ja.

1536
01:11:45,900 --> 01:11:46,400
OK.

1537
01:11:46,400 --> 01:11:47,850
Så utan tvekan mer lättläst nu?

1538
01:11:47,850 --> 01:11:53,070
Fortfarande liten, för att vara rättvis, men inte
så liten att vara ohanterlig.

1539
01:11:53,070 --> 01:11:56,920
Och jag kan säkert åsidosätta detta
vidare med CSS eller på serversidan,

1540
01:11:56,920 --> 01:12:00,120
men allt vad du är
ser är fler och fler funktioner

1541
01:12:00,120 --> 01:12:02,900
läggs i
klientsidan environments--

1542
01:12:02,900 --> 01:12:06,530
JavaScript, som vi kommer att diskutera
i morgon, CSS och HTML-- så

1543
01:12:06,530 --> 01:12:09,190
att alla dessa frågor
kan göras på klienten

1544
01:12:09,190 --> 01:12:11,910
så bry
server en mycket mindre och inte

1545
01:12:11,910 --> 01:12:14,530
att behöva hänga med, för
Exempelvis den konstanta angrepp

1546
01:12:14,530 --> 01:12:17,210
nya operativsystemet
versioner, nya webbläsarversioner.

1547
01:12:17,210 --> 01:12:20,190
Du kan bara låta webbläsaren
frågar enheten, hur stor är du,

1548
01:12:20,190 --> 01:12:22,890
och sedan göra något logiskt
beslut baserat på det.

1549
01:12:22,890 --> 01:12:25,140
Men vi får se fler möjligheter
för logiska beslut

1550
01:12:25,140 --> 01:12:27,223
i morgon i samband
av ett programmeringsspråk.

1551
01:12:27,223 --> 01:12:29,800

1552
01:12:29,800 --> 01:12:32,760
>> Så, några frågor, då,
på webbutveckling?

1553
01:12:32,760 --> 01:12:36,130
Idag är inte webbprogrammering, per
se, eftersom det mesta vi gjorde

1554
01:12:36,130 --> 01:12:38,370
var mycket estetiskt, om man så vill.

1555
01:12:38,370 --> 01:12:41,750
Det finns ingen beslutsfattandet i
den kod som vi har skrivit,

1556
01:12:41,750 --> 01:12:44,990
och så det är därför HTML är ett märk
språket, inte ett programmeringsspråk.

1557
01:12:44,990 --> 01:12:47,140
Men i morgon vi tar
en snabb titt i slutändan,

1558
01:12:47,140 --> 01:12:49,340
vid JavaScript, vilket är
en verklig programmering

1559
01:12:49,340 --> 01:12:54,220
språk som låter oss göra lite mer.

1560
01:12:54,220 --> 01:12:56,800
>> Några frågor?

1561
01:12:56,800 --> 01:13:00,480
Nåväl, låt mig föreslå två
möjligheter tillval för läxor.

1562
01:13:00,480 --> 01:13:02,900
Man är-- dessa Cloud9
konton kommer inte ut.

1563
01:13:02,900 --> 01:13:04,669
Du är välkommen att använda
dem att mixtra med.

1564
01:13:04,669 --> 01:13:05,960
Det är den fria servicenivån.

1565
01:13:05,960 --> 01:13:08,754
Inse att om när du skapar
din arbetsyta, gjorde du det offentligt,

1566
01:13:08,754 --> 01:13:11,670
det betyder att vem som helst på
Internet kan se vad du skriver.

1567
01:13:11,670 --> 01:13:15,104
Så kanske bara överväga
inte pinsamt själv

1568
01:13:15,104 --> 01:13:18,020
om du lägger din första banan
sida ute offentligt misstag,

1569
01:13:18,020 --> 01:13:20,134
men ingen kommer att
vet att se det ändå.

1570
01:13:20,134 --> 01:13:23,760
>> Och two-- låt mig kasta
upp denna URL samt,

1571
01:13:23,760 --> 01:13:28,250
särskilt om du kom i dag ett
lite mindre bekväm än andra,

1572
01:13:28,250 --> 01:13:30,430
osäker på vad allt det här innebär.

1573
01:13:30,430 --> 01:13:36,780
Inser att mycket mer av denna video,
som är både ett bra sätt att somna

1574
01:13:36,780 --> 01:13:39,380
och även att skratta medan
att göra så, har också

1575
01:13:39,380 --> 01:13:44,300
en massa samhälls intressant
och säkerhetsrelevanta diskussioner

1576
01:13:44,300 --> 01:13:47,370
däri från John Oliver,
än en komiker.

1577
01:13:47,370 --> 01:13:55,456
>> Men om det inte finns några ytterligare frågor,
som leder oss till receptionen.

1578
01:13:55,456 --> 01:13:56,830
Så varför jag inte sätta på musiken.

1579
01:13:56,830 --> 01:13:58,610
Det bör finnas drycker
och snacks utanför.

1580
01:13:58,610 --> 01:14:00,220
Jag är glad att mingla så
länge folk vill,

1581
01:14:00,220 --> 01:14:01,600
svara på frågor mer en-mot-en.

1582
01:14:01,600 --> 01:14:03,330
Men annars är du välkommen
att ta bort när som helst,

1583
01:14:03,330 --> 01:14:05,740
och vi kommer att se dig igen
i morgon för lite mer.

1584
01:14:05,740 --> 01:14:07,290
Okej, tack.

1585
01:14:07,290 --> 01:14:10,428