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

2
00:00:00,127 --> 00:00:01,210
David J. MALAN: Lahat ng karapatan.

3
00:00:01,210 --> 00:00:02,160
Kami ay bumalik.

4
00:00:02,160 --> 00:00:05,810
Kaya, ang layunin ng mga ito huling sesyon
ay upang ipakilala ang ilang higit pang mga konsepto

5
00:00:05,810 --> 00:00:09,290
kundi pati na rin mabigyan ang lahat ng pagkakataon
sa uri ng mag-inat ang iyong mga daliri

6
00:00:09,290 --> 00:00:11,270
at talagang gawin ang isang bagay
isang maliit na hands-on.

7
00:00:11,270 --> 00:00:13,897
Ang layunin ay hindi upang i-on
sa amin ang lahat sa mga web developer

8
00:00:13,897 --> 00:00:16,230
sa anumang paraan ngunit talagang lamang
upang bigyan ka ng isang lasa ng ilang

9
00:00:16,230 --> 00:00:21,750
sa mga pangunahing constructs ng kung ano ang
napupunta sa web programming at ngayon web

10
00:00:21,750 --> 00:00:23,980
pag-unlad, kaya ang
static na bahagi ng bagay-

11
00:00:23,980 --> 00:00:26,660
walang logic, walang programming
wika, lamang static na nilalaman.

12
00:00:26,660 --> 00:00:29,660
At ito ay magbibigay sa amin ng pagkakataon
sa aktwal na makita kung ano ang isang web server ay,

13
00:00:29,660 --> 00:00:34,140
makita kung ano ang isang HTML file ay, masdan mo,
ito ay HTTP ay aktwal na paghahatid ng up.

14
00:00:34,140 --> 00:00:38,600
Ngunit bago namin sumisid sa, anumang nagdaan
mga katanungan tungkol sa ulap computing

15
00:00:38,600 --> 00:00:43,922
o seguridad o anumang bagay sa pagitan?

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

17
00:00:44,890 --> 00:00:47,181
O sige, well, sabihin
gawin ito, kung sakali

18
00:00:47,181 --> 00:00:49,680
ang proseso ng pag-sign up para sa
isang bagay ay tumatagal ng ilang minuto.

19
00:00:49,680 --> 00:00:51,221
Susubukan naming ipaalam sa gawin ito sa background.

20
00:00:51,221 --> 00:00:56,860
Sige, kung maaari mong,
sa ito URL here-- c9.io.

21
00:00:56,860 --> 00:01:02,810
Ito ay isang third-party service--
platform bilang isang serbisyo, kung will-- mo

22
00:01:02,810 --> 00:01:05,190
na ay pagpunta sa mag-imbita sa iyo
mag-sign up para sa isang account,

23
00:01:05,190 --> 00:01:08,650
at ito ay pagpunta sa magbibigay sa bawat isa sa inyo
isang account sa ang tinatawag na ulap

24
00:01:08,650 --> 00:01:11,330
sa ibang tao imprastraktura,
isang kumpanya na tinatawag Cloud9.

25
00:01:11,330 --> 00:01:13,350
Ngunit kung ano ang nice tungkol
ito ay na sila magbigay sa iyo

26
00:01:13,350 --> 00:01:15,990
isang pagtatantya ng isang
aktwal na pag-unlad sa totoong buhay

27
00:01:15,990 --> 00:01:18,530
kapaligiran, albeit sa
cloud at sa isang web browser,

28
00:01:18,530 --> 00:01:21,175
at gagamitin namin ito sa aktwal na
eksperimento ng kaunti ngayon.

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

30
00:01:27,116 --> 00:01:30,260
At pagkatapos ay sige at mag-navigate lamang
ang iyong paraan sa pag-sign-up process

31
00:01:30,260 --> 00:01:32,630
kung maaari mong.

32
00:01:32,630 --> 00:01:36,080
Kaya namin mangyari na gamitin ito sa klase
Turuan ko para sa lahat ng ating mga estudyante,

33
00:01:36,080 --> 00:01:39,140
pareho sa campus at off ngayon, at
ito ay pinalitan ano kasaysayan

34
00:01:39,140 --> 00:01:41,390
ay kung hindi man downloadable software.

35
00:01:41,390 --> 00:01:44,620
Kaya kung ano ang iyong pagkakaroon ng access sa
ay isa sa mga virtual machine,

36
00:01:44,620 --> 00:01:46,460
mahalagang, na aking inilarawan mas maaga.

37
00:01:46,460 --> 00:01:50,260
Kaya ito kumpanya Cloud9 marahil
rents mula sa isang third party-- katunayan

38
00:01:50,260 --> 00:01:52,760
sa kasong ito, Google-- isang buong
grupo ng mga virtual machine

39
00:01:52,760 --> 00:01:56,500
na sila kahit papaano tagain up sa
ang ilusyon ng mga indibidwal na mga server

40
00:01:56,500 --> 00:01:58,610
bawat isa sa atin ay may ganap na kontrol sa.

41
00:01:58,610 --> 00:02:01,640
Ito ay hindi masyadong tumpak na sabihin
na ang mga ito virtual machine,

42
00:02:01,640 --> 00:02:04,550
bagaman, dahil kung ano ang
Cloud9 aktwal na gumagamit

43
00:02:04,550 --> 00:02:07,570
ay isang medyo mas bagong teknolohiya
tinatawag containerization.

44
00:02:07,570 --> 00:02:13,150
At hayaan mo akong sunggaban this picture
dito upang ipinta ang larawang ito.

45
00:02:13,150 --> 00:02:16,540
>> Ang isang lalagyan ay, kung
isipin mo ang mga larawan

46
00:02:16,540 --> 00:02:19,900
mula sa mas maaga, isang maliit na mas magaan
timbang kaysa sa isang virtual machine.

47
00:02:19,900 --> 00:02:22,090
Sa katunayan, samantalang huling
oras usapan natin ang tungkol doon

48
00:02:22,090 --> 00:02:25,170
pagiging isang operating
system at isang hypervisor

49
00:02:25,170 --> 00:02:28,260
at pagkatapos ay guest operating system, guest
operating system, guest operating

50
00:02:28,260 --> 00:02:30,940
system, sa tuktok ng iyong
pisikal na hardware,

51
00:02:30,940 --> 00:02:33,740
ang pagkakaiba sa mga ito mas bagong
teknolohiya, containerization,

52
00:02:33,740 --> 00:02:37,290
ay na sila lahat sa paanuman ibahagi
ang parehong operating system.

53
00:02:37,290 --> 00:02:39,970
Ngunit sila pa rin lumikha
ang ilusyon ng lahat ng tao

54
00:02:39,970 --> 00:02:44,590
pagkakaroon ng kanyang sariling eksklusibong
karapatang pang-administratibo at mga file

55
00:02:44,590 --> 00:02:45,400
sa server.

56
00:02:45,400 --> 00:02:48,230
Ngunit mayroong mas mababa software sa
sa pagitan mo at ang mga hardware.

57
00:02:48,230 --> 00:02:52,260
Ang resulta ng kung saan ay, sa
teorya, ang isang mas mataas na pagganap,

58
00:02:52,260 --> 00:02:55,470
dahil gumagamit ka ng o
pag-aaksaya ng mas kaunting mga resources

59
00:02:55,470 --> 00:02:57,360
sa na tinatawag na virtualization layer.

60
00:02:57,360 --> 00:02:59,420
Kaya ito ay tinatawag na
containerization sa pamamagitan ng kalikasan

61
00:02:59,420 --> 00:03:02,920
sa pamamagitan ng paraan ng isang teknolohiya na tinatawag na manggagawa sa pantalan,
na kung saan ay very much na nanggagaling sa sarili nitong.

62
00:03:02,920 --> 00:03:05,086
At ito ay isang bagay na
inhinyero sa iyong kumpanya

63
00:03:05,086 --> 00:03:08,610
maaaring uri ng uri ng magsimulang makipag-usap
tungkol sa lalong madaling panahon kung sila ay may pa nagagawa,

64
00:03:08,610 --> 00:03:11,590
kahit na may tiyak na walang
dahilan upang tumalon sa anumang bandwagons.

65
00:03:11,590 --> 00:03:15,410
>> Kaya sa na sinabi, kung ano
ikaw ay malamang na makita ngayon

66
00:03:15,410 --> 00:03:22,670
ay isang screen na hitsura ng isang bit tulad nito.

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

68
00:03:23,170 --> 00:03:25,260
At lamang tumawag sa akin sa paglipas kung hindi.

69
00:03:25,260 --> 00:03:27,440
At kung so-- kukunin ko na dumating sa paglipas kung hindi.

70
00:03:27,440 --> 00:03:30,244
Sige at i-click na malaki
plus upang lumikha ng isang workspace,

71
00:03:30,244 --> 00:03:31,660
at makikita mo ang isang screen na tulad nito.

72
00:03:31,660 --> 00:03:35,020
Maaari mong tawagan ang workspace
pangalanan ang anumang nais mo para sa ngayon.

73
00:03:35,020 --> 00:03:38,660
At lamang ang tunay na para sa simple,
pumunta at- well, ang ilan sa inyo

74
00:03:38,660 --> 00:03:39,660
ay mayroon ng workspaces.

75
00:03:39,660 --> 00:03:47,050
Tumawag ito kahit anong want-- mong negosyo,
Harvard, Huwebes, kahit anong gusto mo.

76
00:03:47,050 --> 00:03:48,800
Hindi mo kailangan ng isang paglalarawan.

77
00:03:48,800 --> 00:03:52,380
Maaari mong iwan itong pribado, maliban kung ikaw
ay mayroon ng isang paglangkay-langkayin ng workspaces.

78
00:03:52,380 --> 00:03:55,280
Kung ikaw ay sapilitang upang gawin itong pampubliko,
na fine para sa mga layuning ngayon.

79
00:03:55,280 --> 00:03:56,750
Dito, masyadong, ay isa sa mga upsells.

80
00:03:56,750 --> 00:03:59,939
Makakakuha ka ng isang pribadong workspace sa pamamagitan
default. Ngunit kung nais mong higit pa,

81
00:03:59,939 --> 00:04:00,980
mayroon kang magbayad para sa karagdagang.

82
00:04:00,980 --> 00:04:02,870
Kung hindi man, lakas ka
upang gawin ang iyong trabaho publiko.

83
00:04:02,870 --> 00:04:05,600
Ngunit iyon lamang ang fine, dahil sila din
target na ito sa open-source komunidad

84
00:04:05,600 --> 00:04:07,700
upang hikayatin ang mga tao upang
aktwal na makipagtulungan.

85
00:04:07,700 --> 00:04:10,699
>> At ang huling bagay na mahalaga,
bagaman, ay, pagkatapos pumili ka ng isang pangalan

86
00:04:10,699 --> 00:04:17,140
at pagkatapos pinili mo pribado o publiko,
i-click ang HTML5, ang malaking icon orange

87
00:04:17,140 --> 00:04:22,430
pangalawa mula sa kaliwa, at
pagkatapos ay i-click ang Lumikha ng Workspace.

88
00:04:22,430 --> 00:04:24,580
At ito ay marahil
kumuha nang isang minuto o kaya,

89
00:04:24,580 --> 00:04:26,540
ngunit makikita mo pagkatapos magkaroon ng isang
kapaligiran, sa sandaling ikaw

90
00:04:26,540 --> 00:04:30,544
gawin iyon, na mukhang nakapagpapaalaala ng
mayroon ako sa screen dito ngayon.

91
00:04:30,544 --> 00:04:33,210
Ngunit, muli, maaari itong tumagal ng isang minuto
o higit pa upang makakuha ng sa screen na ito

92
00:04:33,210 --> 00:04:34,770
kapag nakalikha ka na nag-click Lumikha Workspace.

93
00:04:34,770 --> 00:04:37,936
Ngunit lamang bandila sa akin sa paglipas kung nais mong sa akin
na kumuha ng isang pagtingin sa anumang bagay o payuhan.

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

95
00:04:40,191 --> 00:04:40,690
Lahat tama.

96
00:04:40,690 --> 00:04:42,390
Kaya ako ng pagpunta sa background na ito para sa ngayon.

97
00:04:42,390 --> 00:04:44,260
Tumawag sa akin sa paglipas ng kung inaakala mong
pang teknikal na paghihirap.

98
00:04:44,260 --> 00:04:46,210
Ngunit, muli, maaaring tumagal ng isang
Medyo para sa na upang buksan.

99
00:04:46,210 --> 00:04:49,570
At sabihin sige at makipag-usap tungkol sa kung ano
ito ang tunay na ibig sabihin nito na gumawa ng isang web page,

100
00:04:49,570 --> 00:04:52,780
kung ano ang HTML ay, at kung paano ang lahat ng ito
ngayon interconnects bilang kami ay nagsisimula

101
00:04:52,780 --> 00:04:54,730
sa aktwal na gamitin ang ilan sa mga teknolohiya.

102
00:04:54,730 --> 00:04:58,310
Kaya ito lumiliko out na ko
pumunta sa aking maliit na Mac dito,

103
00:04:58,310 --> 00:05:01,650
buksan ang isang simpleng programa na tinatawag na
TextEdit, o sa Windows kaya kong

104
00:05:01,650 --> 00:05:04,480
bukas isang bagay na tinatawag Notepad.exe.

105
00:05:04,480 --> 00:05:08,260
At ako ay hindi lamang lamang gawin ang isang bagay
tulad this-- "hello, world."

106
00:05:08,260 --> 00:05:12,020
At pagkatapos ay maaari kong i-save ito bilang
hello.txt Kaya walang magic doon.

107
00:05:12,020 --> 00:05:15,200
Na ito ay walang kinalaman sa web
programming, walang kinalaman sa HTML.

108
00:05:15,200 --> 00:05:16,790
Just paglikha ng isang simpleng text file.

109
00:05:16,790 --> 00:05:20,600
Ngunit ito ay lumiliko out na ang isang web
page ay literal lamang na.

110
00:05:20,600 --> 00:05:24,020
Ito ay isang simpleng text file na naglalaman ng teksto
na maaari mong i-type sa iyong keyboard,

111
00:05:24,020 --> 00:05:30,070
ngunit ito ay karaniwang ngunit hindi palaging
nagtatapos sa hindi .txt ngunit .html o Htm.

112
00:05:30,070 --> 00:05:32,050
At hindi mo lang
type ang mga salita sa file.

113
00:05:32,050 --> 00:05:35,280
Ikaw ang tunay na kailangang gumamit ng mga bagay na tinatawag
mga tag o, mas pangkalahatang paraan, isang bagay

114
00:05:35,280 --> 00:05:37,190
tinatawag markup language.

115
00:05:37,190 --> 00:05:40,510
>> Kaya ako pagpunta sa masyadong mabilis-type
at pagkatapos ay ipaliwanag ang mga sumusunod.

116
00:05:40,510 --> 00:05:42,290
Pupunta ako sa unang
type ito, na nagsasabing,

117
00:05:42,290 --> 00:05:45,730
hey, browser, dito lumapit ang isang
web page na nakasulat sa HTML.

118
00:05:45,730 --> 00:05:51,850
At ang dalawang bagay na magkasama sabihin, hey,
browser, ang mga sumusunod ay sa katunayan HTML.

119
00:05:51,850 --> 00:05:55,790
Hey, browser, dito ay ang
ulo o sa tuktok ng aking pahina.

120
00:05:55,790 --> 00:05:59,900
Hey, browser, sa loob ng tuktok ng
aking pahina, ilagay ang isang pamagat na ay, "hello,

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

122
00:06:01,610 --> 00:06:08,370
Hey, browser, pagkatapos ng ulo ng aking
page, dito ay ang katawan ng aking pahina.

123
00:06:08,370 --> 00:06:12,170
At, hey, browser, ang katawan ng aking
pahina ay dapat ring sabihin, "kumusta mundo."

124
00:06:12,170 --> 00:06:15,500
Kaya ano ang mga kapansin-pansin na mga detalye dito?

125
00:06:15,500 --> 00:06:17,960
Ito ay kung ano ay karaniwang
tinatawag na isang doc-uri deklarasyon,

126
00:06:17,960 --> 00:06:20,190
at, lantaran, ito ay isang maliit
mahirap kabisaduhin ito sa unang.

127
00:06:20,190 --> 00:06:21,481
Ikaw lamang ang uri ng i-copy-paste ito.

128
00:06:21,481 --> 00:06:23,760
Ito ang pormal na paraan
na sabihing, hey, browser,

129
00:06:23,760 --> 00:06:28,030
Gumagamit ako ng HTML bersyon 5 na
ay dumating out medyo kamakailan.

130
00:06:28,030 --> 00:06:31,380
Ito ay isang mahiwagang bulong na ang ilang mga
mga kawani na tao na may isang mahinang kamalayan ng disenyo

131
00:06:31,380 --> 00:06:33,640
nagpasya na ilagay sa
pinakatuktok ng file.

132
00:06:33,640 --> 00:06:35,473
Kahit na ito ay isang
maliit arcane, na ang lahat

133
00:06:35,473 --> 00:06:38,250
ito means-- hey, browser, dito
lumapit kumuha bersyon 5 ng HTML.

134
00:06:38,250 --> 00:06:41,741
>> Ang magpahinga ng ito ay sa amin
para sa ilang oras na ngayon, kasaysayan,

135
00:06:41,741 --> 00:06:44,740
ngunit ito ay naging umuusbong, at ito ay
marahil ay nakakakuha ng kaunti mas simple.

136
00:06:44,740 --> 00:06:47,320
Pansinin ang ilang mga katangian
ng kung ano ang na-highlight ko.

137
00:06:47,320 --> 00:06:49,890
Mayroong mga bagay na ito na may angled
brackets-- kaliwa bracket

138
00:06:49,890 --> 00:06:51,040
at ang karapatan bracket.

139
00:06:51,040 --> 00:06:52,490
At mapansin ang mahusay na proporsyon dito.

140
00:06:52,490 --> 00:06:57,340
At sa pamamagitan ng mahusay na proporsyon, Ibig kong sabihin, kung ano ang aking
magkaroon ito start tag dito o isang bukas na tag

141
00:06:57,340 --> 00:07:01,560
kung ikaw ay, down na dito Mayroon akong isang
malapit na tag o isang dulo tag na

142
00:07:01,560 --> 00:07:06,460
iba't ibang lamang insofar bilang ito ay may ito
slash sa simula ng salita

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

144
00:07:07,360 --> 00:07:09,360
At maaari mong isipin
ito na gaya nang casually

145
00:07:09,360 --> 00:07:12,280
pagpapanukala bago, hey,
browser, dito ay ilang mga HTML.

146
00:07:12,280 --> 00:07:16,060
At, pasalungat, hey, browser, na ang dahilan
ito para sa HTML-- pagsisimula at pagtatapos.

147
00:07:16,060 --> 00:07:18,440
>> Samantala hey, browser, dito
pagdating sa ulo ng aking pahina.

148
00:07:18,440 --> 00:07:20,140
Hey, browser, na ito para sa ulo.

149
00:07:20,140 --> 00:07:22,240
Hey, browser, dito ay
ang katawan ng aking pahina.

150
00:07:22,240 --> 00:07:24,020
Hey, browser, na ito para sa katawan.

151
00:07:24,020 --> 00:07:26,940
At sa loob ng na ang ilang mga
arbitrary text para sa ngayon.

152
00:07:26,940 --> 00:07:30,520
At sa loob ng ulo, samantala,
ilang arbitrary ngunit-tag,

153
00:07:30,520 --> 00:07:34,410
kaya na magsalita, text na nagsasabing, ang pamagat
ng aking pahina ay magiging "hello, world."

154
00:07:34,410 --> 00:07:37,470
Ngayon, para sa ngayon, maaari kang
ipalagay na browser

155
00:07:37,470 --> 00:07:41,762
Mayroon only-- o, sa halip, mga pahina ng web ay may
lamang ng dalawang parts-- ang ulo at ang katawan.

156
00:07:41,762 --> 00:07:44,220
At ang pangulo ay karaniwang lamang
tulad ng mga bar menu, mga bagay-bagay

157
00:07:44,220 --> 00:07:45,510
talagang lamang sa pinakatuktok.

158
00:07:45,510 --> 00:07:48,910
At ang katawan ay ang lakas ng loob ng mga pahina,
lahat ng bagay sa na malaki rectangle

159
00:07:48,910 --> 00:07:50,239
na pumupuno sa screen.

160
00:07:50,239 --> 00:07:51,780
Kaya ako pagpunta sa sige at gawin ito.

161
00:07:51,780 --> 00:07:54,400
Ako pagpunta sa sige at
i-click ang I-save, File I-save.

162
00:07:54,400 --> 00:07:58,580
At ako pagpunta upang i-save
ito bilang hello.html,

163
00:07:58,580 --> 00:08:00,870
at ako lamang ang pagpunta sa
ilagay ito sa aking desktop.

164
00:08:00,870 --> 00:08:03,520
At ako pagpunta sa pumunta
magpatuloy at i-click ang I-save.

165
00:08:03,520 --> 00:08:05,806
At notice-- aking Mac sa
hindi bababa sa ay yelling sa akin.

166
00:08:05,806 --> 00:08:07,180
Sigurado ka bang gusto mong gawin ito?

167
00:08:07,180 --> 00:08:08,710
At ako pagpunta sa sabihin, oo, gamitin ang mga HTML.

168
00:08:08,710 --> 00:08:10,400
alam ko mas mahusay na sa kasong ito.

169
00:08:10,400 --> 00:08:14,686
At ngayon ako pagpunta sa pumunta sa aking desktop
kung saan mayroon akong ang file na ito bigla.

170
00:08:14,686 --> 00:08:16,060
At ako pagpunta upang i-double-click ito.

171
00:08:16,060 --> 00:08:18,268
At mapapansin mo na, sa pamamagitan ng
default, Chrome binuksan up.

172
00:08:18,268 --> 00:08:19,996
Iyan ay dahil na
aking default browser.

173
00:08:19,996 --> 00:08:21,370
At ito lamang ang nagsasabing, "hello, world."

174
00:08:21,370 --> 00:08:23,078
Ngunit ito says "hello,
world "sa dalawang lugar.

175
00:08:23,078 --> 00:08:23,979
Pansinin kaliwang tuktok.

176
00:08:23,979 --> 00:08:25,020
Pretty mahirap na makaligtaan na.

177
00:08:25,020 --> 00:08:26,180
Ito ay malaki at naka-bold.

178
00:08:26,180 --> 00:08:30,690
At kung saan pa ang mukhang ito
na kailangang sabihin, "hello, world"?

179
00:08:30,690 --> 00:08:31,470
>> Madla: tab Ang.

180
00:08:31,470 --> 00:08:33,100
>> David J. MALAN: Oo, ang tab mismo.

181
00:08:33,100 --> 00:08:35,159
Kaya kapag sinabi ko ang ulo ng
pahina ay lahat ng bagay up top--

182
00:08:35,159 --> 00:08:36,367
at sa katunayan ito ay ang pamagat.

183
00:08:36,367 --> 00:08:37,710
Ito ay lamang sa tab dito.

184
00:08:37,710 --> 00:08:40,320
At maaari kong hilahin ang tab na ito
out sa gayon ay hindi upang lituhin.

185
00:08:40,320 --> 00:08:43,360
Ito ay lamang ng isang solong tab ngayon,
at sa katunayan nakita namin "hello, world"

186
00:08:43,360 --> 00:08:45,970
up dito at "hello, world" down dito.

187
00:08:45,970 --> 00:08:47,160
Kaya medyo tapat.

188
00:08:47,160 --> 00:08:49,050
Ngunit ito ay din medyo simple.

189
00:08:49,050 --> 00:08:50,440
At, talaga, naka-zoom ko in.

190
00:08:50,440 --> 00:08:53,272
Maaari ko bang baguhin ang laki ng font lang
upang palakihin para sa accessibility.

191
00:08:53,272 --> 00:08:56,830
Ngunit sabihin ngayon gawin ang isang bagay
isang maliit na mas kawili-wiling.

192
00:08:56,830 --> 00:08:59,760
>> Pupunta ako sa go-- Whoops, sabihin
ako makabalik sa aking text file.

193
00:08:59,760 --> 00:09:02,400
Pupunta ako pabalik sa aking
text file, at ako pagpunta

194
00:09:02,400 --> 00:09:06,320
upang baguhin ito at sabihin
"Hello, Disney World."

195
00:09:06,320 --> 00:09:07,970
I-save ang.

196
00:09:07,970 --> 00:09:10,919
At bumalik sa aking
browser at i-click I-reload.

197
00:09:10,919 --> 00:09:12,710
At ngayon, siyempre, ito
nagsasabing "Disney World."

198
00:09:12,710 --> 00:09:15,500
At ako pagpunta upang artipisyal na mag-zoom
sa loob lamang kaya mas madaling makita.

199
00:09:15,500 --> 00:09:19,012
Kaya ngayon, sa kasamaang-palad, ako uri ng gusto
to-- talaga, na ay isang tampok Mac.

200
00:09:19,012 --> 00:09:21,720
Gusto kong mag-click sa Disney World
at pumunta sa isang lugar tulad ng disney.com,

201
00:09:21,720 --> 00:09:23,290
ngunit na ay hindi gumagana.

202
00:09:23,290 --> 00:09:26,850
Kaya isang pangunahing doktrina ng web ay
hyperlinks, mga link na pumunta sa ibang dako.

203
00:09:26,850 --> 00:09:28,390
Kaya kung paano ang gagawin ko na?

204
00:09:28,390 --> 00:09:34,690
Well, hindi ko na lang sabihin,
"Hello, http://www.disney.com."

205
00:09:34,690 --> 00:09:36,110
I-save ito.

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

207
00:09:37,620 --> 00:09:39,400
Ngunit ito masyadong, hindi naki-click.

208
00:09:39,400 --> 00:09:42,930
At kung ano ang magaling dito, kahit na
ito ay hindi functional pa,

209
00:09:42,930 --> 00:09:45,930
ay na ito tila na ang mga
browser ay literal lamang

210
00:09:45,930 --> 00:09:46,950
kung ano ako sabihin ito sa gagawin.

211
00:09:46,950 --> 00:09:50,110
Kaya kung ako i-type lamang ng isang URL na tulad nito,
lamang ito ay pagpunta upang ipakita sa akin ang URL.

212
00:09:50,110 --> 00:09:54,270
Kailangan ko bang gamitin ang mga tag o markup
wika upang talagang sabihin

213
00:09:54,270 --> 00:09:55,621
ang browser para gumawa nang mas.

214
00:09:55,621 --> 00:09:57,870
Kaya ako pagpunta sa sige at
tanggalin ito para sa isang sandali.

215
00:09:57,870 --> 00:10:00,980
At ako pagpunta sa sabihin, hey,
browser, simulan ang isang anchor dito,

216
00:10:00,980 --> 00:10:02,650
isang link kaya na magsalita.

217
00:10:02,650 --> 00:10:07,500
At ang hyper-reference, ang patutunguhan
ng anchor na, ay dapat na URL na ito.

218
00:10:07,500 --> 00:10:08,750
At mapansin ang aking quotes.

219
00:10:08,750 --> 00:10:11,590
maaari ko bang gamitin single quote, masyadong,
ngunit mayroon kang upang maging pare-pareho,

220
00:10:11,590 --> 00:10:14,270
at ako ay pangkaraniwang lamang gamitin
double quotes upang panatilihin ito simple.

221
00:10:14,270 --> 00:10:16,820
Pansinin Ako pagpunta upang isara ang tag.

222
00:10:16,820 --> 00:10:21,160
At pagkatapos dito ako pagpunta
na kailangang sabihin, "Disney World."

223
00:10:21,160 --> 00:10:26,890
At ngayon kailangan ko ng ilang symmetry--
bukas bracket, / a, sarado bracket.

224
00:10:26,890 --> 00:10:28,090
>> So anong aking ipinakilala?

225
00:10:28,090 --> 00:10:30,100
Kami ay nagkaroon ng ilang mga tag na.

226
00:10:30,100 --> 00:10:32,410
HTML, Head, Pamagat, katawan,
ay ang lahat ng mga tag, kaya na magsalita,

227
00:10:32,410 --> 00:10:34,280
may bukas at closed counterparts.

228
00:10:34,280 --> 00:10:36,530
Ngunit paunawa, ito ay isang uri
ng sa panimula naiiba.

229
00:10:36,530 --> 00:10:39,140
Ito ay kung ano ang makikita namin tumawag
sa HTML isang katangian.

230
00:10:39,140 --> 00:10:41,451
At isang katangian ay
lamang ng isang key-value pares.

231
00:10:41,451 --> 00:10:43,950
Ito ay isang pangkaraniwang bagay sa
key-value pares ng computer science--.

232
00:10:43,950 --> 00:10:45,770
Ito ay uri ng tool ng kalakalan.

233
00:10:45,770 --> 00:10:47,040
Ang isang pangunahing at isang halaga.

234
00:10:47,040 --> 00:10:49,390
Ang isang salita at pagkatapos ng ilang
iba pang mga salita o mga salita.

235
00:10:49,390 --> 00:10:53,790
At sa kasong ito, ang susi ay href,
at ang halaga ay na buong URL.

236
00:10:53,790 --> 00:10:57,890
At kung ano ang isang katangian nito ay ito
impluwensya ang pag-uugali ng isang tag.

237
00:10:57,890 --> 00:11:01,010
At sa kasong ito, kailangan namin upang maka-impluwensya
ang pag-uugali ng anchor tag,

238
00:11:01,010 --> 00:11:04,140
dahil kailangan namin upang anchor
ang link na ito sa isang lugar.

239
00:11:04,140 --> 00:11:06,960
At kung paano mo gawin iyon ay
sa pamamagitan ng paraan ng attribute.

240
00:11:06,960 --> 00:11:08,970
>> Kaya ako pagpunta sa sige
at i-save ang file na ngayon.

241
00:11:08,970 --> 00:11:11,300
Bumalik sa aking browser at reload.

242
00:11:11,300 --> 00:11:14,580
At, voila, mayroon kaming ngayon ang
Beginnings ng isang lehitimong web page.

243
00:11:14,580 --> 00:11:18,420
Super-simple, ngunit kung mag-hover ko sa paglipas ng
this-- notice sa ilalim-kaliwang sulok,

244
00:11:18,420 --> 00:11:19,830
ito ay super-maliit.

245
00:11:19,830 --> 00:11:21,730
Ngunit mo nakikita www.disney.com.

246
00:11:21,730 --> 00:11:27,076
At kung nag-click ko, sa katunayan na ito
whisks ninyo ako sa disney.com.

247
00:11:27,076 --> 00:11:29,380
Ngayon, ang hindi pangkaraniwang bagay
dito ay na ito ay hindi

248
00:11:29,380 --> 00:11:33,940
ang best-- ang pinaka mabenta URL, ngunit
na fine dahil ang file na ito ay hindi

249
00:11:33,940 --> 00:11:35,360
umiiral sa World Wide Web.

250
00:11:35,360 --> 00:11:39,740
Ito ay umiiral bilang isang lokal na file sa malas
aking Users directory-- / jharvard--

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

252
00:11:41,890 --> 00:11:42,634
Ngunit ito ay may isang URL.

253
00:11:42,634 --> 00:11:43,800
Ito lamang ang mangyayari sa maging lokal.

254
00:11:43,800 --> 00:11:47,050
Sa kasamaang palad, ang sinoman sa inyo ay maaaring bisitahin
ito, dahil kung type mo ang URL na ito,

255
00:11:47,050 --> 00:11:49,980
gusto mo ay nagsasabi sa iyong browser,
hitsura para sa isang file na tinatawag na hello.html

256
00:11:49,980 --> 00:11:50,772
sa iyong hard drive.

257
00:11:50,772 --> 00:11:53,271
At, siyempre, maliban na sa iyo
ay sumusunod na kasama ng manwal,

258
00:11:53,271 --> 00:11:54,530
hindi ito ay pagpunta sa pag-umiiral doon.

259
00:11:54,530 --> 00:11:55,190
>> Kaya na fine.

260
00:11:55,190 --> 00:11:57,815
kailangan pa rin namin ng isang paraan, sa huli,
upang makakuha ng ang file na ito sa web,

261
00:11:57,815 --> 00:12:01,180
ngunit sabihin manunudyo bukod sa isang pares ng
implikasyon sa seguridad ng kung ano lang namin

262
00:12:01,180 --> 00:12:04,850
Nakita at itali ito pabalik sa mas maaga
discussion na ito mula sa umaga.

263
00:12:04,850 --> 00:12:08,200
Ito ay lumiliko out na, kung ang isang
browser ay literal lamang

264
00:12:08,200 --> 00:12:12,560
kung ano ako sabihin dito na gawin, at ito ay tila
upang maging ang kaso na ang isang anchor tag ay

265
00:12:12,560 --> 00:12:17,380
naiimpluwensyahan ng ang halaga ng
ang katangiang ito na tinatawag href

266
00:12:17,380 --> 00:12:20,810
ngunit ito ay nagpapakita na ito
teksto, ito ay tila

267
00:12:20,810 --> 00:12:26,520
upang magpahiwatig na maaari ko bang ilagay ang URL
sa parehong mga lugar at pagkatapos ay i-reload

268
00:12:26,520 --> 00:12:29,100
at ngayon makita ang URL at pumunta sa URL.

269
00:12:29,100 --> 00:12:32,680
Pansinin n'yo, kung mag-hover ko sa ibabaw ng ilalim-kaliwa,
sa katunayan ako pagpunta pa rin upang disney.com.

270
00:12:32,680 --> 00:12:38,340
>> Kaya kung sakaling kayo ay
phished-- P-H-I-S-H-E-D--

271
00:12:38,340 --> 00:12:42,820
sa isa sa mga bogus emails
mula sa tulad ng PayPal iyong bangko,

272
00:12:42,820 --> 00:12:46,470
marahil mo na tapat na paraan mga link sa loob
ng email na iyong binabasa na

273
00:12:46,470 --> 00:12:49,970
nagsasabi mong i-click dito upang pumunta kumpirmahin
ang iyong password o kumpirmahin ang iyong petsa ng kapanganakan

274
00:12:49,970 --> 00:12:53,840
o panlipunan o isang bagay socially
engineering mong ibunyag

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

276
00:12:54,920 --> 00:12:57,625
Well, maaari ko bang uri ng kumuha
samantalahin ng mga ito, maaari hindi ko?

277
00:12:57,625 --> 00:13:01,240
kaya kong sabihin ng isang bagay
tulad ng, www.paypal.com.

278
00:13:01,240 --> 00:13:11,340
At sa halip na disney.com, ako
maaaring pumunta sa, tulad ng, badguy.com.

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

280
00:13:12,850 --> 00:13:16,620
At kung paano madaling ito ay upang lokohin,
lalo na ang isang di-teknikal na reader

281
00:13:16,620 --> 00:13:20,649
o isang cursorily pagbabasa
reader kaysa upang i-click ang

282
00:13:20,649 --> 00:13:23,940
isang link na tulad nito, na kung nag-click ako it--
Ako tunay hindi nais na pumunta badguy.com.

283
00:13:23,940 --> 00:13:25,398
Hindi ko alam kung ano ang aktwal na doon.

284
00:13:25,398 --> 00:13:30,080
Kaya paypal.com, paunawa, ay
kung ano ito says ito ay pagpunta sa,

285
00:13:30,080 --> 00:13:33,210
pero siyempre, kung titingnan ko pababa
super-mababa, ito ay isang maliit na malabo,

286
00:13:33,210 --> 00:13:34,230
ngunit ito says badguy.com.

287
00:13:34,230 --> 00:13:38,644
Iyan ay ang tanging magsasabi ngayon
na ako ng pagpunta sa maling lugar.

288
00:13:38,644 --> 00:13:41,560
At kapag sinabi ko mas maaga na ang mga bangko
talagang hindi dapat hinihikayat o tren

289
00:13:41,560 --> 00:13:44,510
mga gumagamit sa pag-click ng mga link, ito
ay isa lamang manipestasyon nito.

290
00:13:44,510 --> 00:13:45,430
At ito ay na simple.

291
00:13:45,430 --> 00:13:48,120
Ikaw ay isang kaaway kung
gawin mo ng isang bagay tulad nito

292
00:13:48,120 --> 00:13:51,000
at subukan upang linlangin ang isang gumagamit
sa pagbisita sa iyong website.

293
00:13:51,000 --> 00:13:53,320
Ngunit sa ngayon, itinatago namin sa
mga bagay na maganda at malinis.

294
00:13:53,320 --> 00:13:55,640
Kami ay pagpunta sa sige
at rewind mga pagbabagong ito.

295
00:13:55,640 --> 00:13:56,530
I-reload ang pahina.

296
00:13:56,530 --> 00:13:57,740
At pumunta ako pabalik sa disney.com.

297
00:13:57,740 --> 00:14:00,660
>> Sabihin makita kung hindi namin maaaring manunudyo
ito bukod ng kaunti pa.

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

299
00:14:04,160 --> 00:14:05,950
Pupunta ako sa sabihin pababa dito.

300
00:14:05,950 --> 00:14:08,220
Siguro ako pagpunta sa gumawa ng ilang mga kuwarto.

301
00:14:08,220 --> 00:14:12,730
"Umaasa kami na masiyahan kayo sa inyong pamamalagi!"

302
00:14:12,730 --> 00:14:13,830
I-save ang.

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

304
00:14:15,850 --> 00:14:19,010
Hindi ito rea-- iyan ay hindi
kung ano ako inilaan, right?

305
00:14:19,010 --> 00:14:21,870
Ibig kong sabihin, kung ako pagpapagamot ng aking text
maghain tulad ng isang word processor,

306
00:14:21,870 --> 00:14:24,894
ano ang pag-asa mo ang mangyayari dito?

307
00:14:24,894 --> 00:14:27,060
Yeah, sa tingin ko doon
ay dapat na isang line break dito,

308
00:14:27,060 --> 00:14:28,799
kaya nararamdaman maraming surot sa ilang mga paraan.

309
00:14:28,799 --> 00:14:31,090
Ngunit iyon lamang ang talagang sinadya,
dahil tulad ng dati,

310
00:14:31,090 --> 00:14:33,381
ang browser ay lamang ang pagpunta sa
gawin kung ano ang sabihin mo ito gawin.

311
00:14:33,381 --> 00:14:34,806
Hindi ko pa sinabi ito sa break na linya.

312
00:14:34,806 --> 00:14:37,930
hindi ko na sinabi ito upang ilipat pababa, kahit
bagaman, intuitively, Pakiramdam ko ay tulad ng ginawa ko.

313
00:14:37,930 --> 00:14:39,805
Kaya ito lumiliko out na kailangan namin
ng kaunti pa markup,

314
00:14:39,805 --> 00:14:41,390
at ako pagpunta upang ayusin ito tulad ng sumusunod.

315
00:14:41,390 --> 00:14:46,160
Ako pagpunta sa lagyan ng paunang salita na ito unang kumusta
sa kung ano ang tinatawag na isang talata tag.

316
00:14:46,160 --> 00:14:48,920
At pagkatapos ay ako pagpunta sa sige
at balutin ito ng iba pang pangungusap

317
00:14:48,920 --> 00:14:54,370
sa ibang talata tag, kahit na
ang mga ito ay super-maikling talata.

318
00:14:54,370 --> 00:14:55,930
Ngayon ako pagpunta sa i-save.

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

320
00:14:57,160 --> 00:14:59,070
At ngayon kami ay may na
space, at hindi na namin uri ng

321
00:14:59,070 --> 00:15:01,680
kung ang semantika ng
dalawang magkahiwalay na mga talata.

322
00:15:01,680 --> 00:15:05,290
>> Iyon lang ang multa at mabuti, ngunit gagawin ito
maging mabait sa magdagdag ng isang imahe sa pahinang ito,

323
00:15:05,290 --> 00:15:08,710
kaya ako pagpunta sa pumunta hitsura para sa
Mickey Mouse sa Google Images.

324
00:15:08,710 --> 00:15:12,830
At katuwaan lang, ako
pagpunta sa grab ang larawang ito.

325
00:15:12,830 --> 00:15:15,350
Ako pagpunta sa sige ngayon at
grab ang URL ng ang larawan na ito,

326
00:15:15,350 --> 00:15:16,510
kahit na may iba't ibang
mga paraan upang gawin ito.

327
00:15:16,510 --> 00:15:18,520
Para sa ngayon, tingin lang ako pagpunta sa kopyahin ang URL.

328
00:15:18,520 --> 00:15:24,770
Pupunta ako sa bumalik sa aking text
file, at ako pagpunta sa sabihin dito,

329
00:15:24,770 --> 00:15:31,160
img src = quote magpanipi
na URL, super-haba.

330
00:15:31,160 --> 00:15:34,580
At pagkatapos ay ang paniwala ng isang
imahe ay isang maliit na naiiba.

331
00:15:34,580 --> 00:15:38,640
Mayroon talagang walang paniwala ng panimulang
isang imahe at nagtatapos ng isang imahe,

332
00:15:38,640 --> 00:15:40,630
tulad ng isang start-tag ang isang dulo tag.

333
00:15:40,630 --> 00:15:43,840
Kaya ito nararamdaman ng isang maliit na kakaiba sa
ako semantically upang gawin ito,

334
00:15:43,840 --> 00:15:45,390
na magkaroon ng isang close-image tag.

335
00:15:45,390 --> 00:15:46,780
Ito ay hindi tama.

336
00:15:46,780 --> 00:15:48,840
Ito ay ganap na tama,
at ito ay hinihikayat,

337
00:15:48,840 --> 00:15:50,870
ngunit mayroong shorthand notation.

338
00:15:50,870 --> 00:15:53,780
Maaari kong uri ng sabay-sabay
buksan at isara ang parehong tag,

339
00:15:53,780 --> 00:15:55,510
at na ito at gumawa ng browser masaya.

340
00:15:55,510 --> 00:15:56,950
Kaya ito ay lamang ng isang maliit
mas maikli at malinaw para sa mga bagay

341
00:15:56,950 --> 00:15:59,408
na conceptually talagang hindi
magkaroon ng kahulugan sa simula at wakas.

342
00:15:59,408 --> 00:16:01,190
Sila lang ang naroon, o ang mga ito ay hindi.

343
00:16:01,190 --> 00:16:06,020
>> Kaya ako pagpunta sa i-save ito at bumalik
sa aking "hello, world" na pahina at i-reload.

344
00:16:06,020 --> 00:16:09,880
At ito ay isang maliit na sa labas ng kontrol,
dahil na imahe ay talagang

345
00:16:09,880 --> 00:16:12,210
isang maliit na malaki, ngunit iyan ay OK.

346
00:16:12,210 --> 00:16:13,710
kaya kong baguhin ang laki nito sa isang programa.

347
00:16:13,710 --> 00:16:14,900
O alam mo kung ano.

348
00:16:14,900 --> 00:16:17,350
Lamang upang ipakita, ako
pagpunta sa talagang sabihin

349
00:16:17,350 --> 00:16:21,760
na ang lapad ng ang bagay na ito ay dapat
lamang maging 200 pixels, 200 na tuldok.

350
00:16:21,760 --> 00:16:24,360
Hayaan akong sige at i-save
at i-reload, at ngayon ang page

351
00:16:24,360 --> 00:16:25,690
hitsura ng isang maliit na mas makatwirang.

352
00:16:25,690 --> 00:16:27,260
Ngunit mapansin ang pattern.

353
00:16:27,260 --> 00:16:30,030
Well, ako ay uri ng itinuro sa iyo ang lahat
ng HTML sa ilang mga kahulugan, hindi bababa sa

354
00:16:30,030 --> 00:16:33,531
conceptually, dahil ang lahat ay HTML ay
mga tags-- open tags, sarado mga tag,

355
00:16:33,531 --> 00:16:35,280
at mga katangian na
baguhin ang kanilang pag-uugali.

356
00:16:35,280 --> 00:16:38,380
At, tila, ang bawat
tag ay maaaring magkaroon ng zero o isa

357
00:16:38,380 --> 00:16:43,005
o dalawa o higit pang mga katangian, ang bawat isa
na kung saan ay isang bagay ng kaunti naiiba.

358
00:16:43,005 --> 00:16:44,380
Ngayon, paano ko malalaman mo kung ano ang umiiral?

359
00:16:44,380 --> 00:16:46,800
Mo lamang makinig sa isang tao
tulad ng sa akin sabihin sa iyo kung ano ang umiiral,

360
00:16:46,800 --> 00:16:50,860
o mo lamang Google paligid para sa isang tutorial
sa HTML, at ito ay tunay na ito simple.

361
00:16:50,860 --> 00:16:54,030
>> Truly, kapag ako ay isang undergrad
taon na ang nakakaraan at natutunan HTML,

362
00:16:54,030 --> 00:16:56,530
isa sa aking mga math pagtuturo
assistants lamang na ginugol

363
00:16:56,530 --> 00:16:59,600
isang maliit na piraso ng oras pagtuturo sa akin
para sa tulad ng kalahating oras, isang oras,

364
00:16:59,600 --> 00:17:00,660
at pagkatapos ay ako ay sa aking paraan.

365
00:17:00,660 --> 00:17:03,300
Ako ay sa aking paraan patungo sa paggawa ng
ang pinaka-kahindik-hindik na mga website kailanman,

366
00:17:03,300 --> 00:17:05,549
na kung saan, tila, mayroon akong hindi
talagang progressed lampas.

367
00:17:05,549 --> 00:17:09,849
Ngunit ang punto ay na, sa sandaling ikaw
maunawaan ang mga simpleng ideas--

368
00:17:09,849 --> 00:17:13,450
kung arcane text-- ngunit ang mga simpleng
ideya ng simula ng isang pag-iisip

369
00:17:13,450 --> 00:17:15,960
at pagsasara ng isang pag-iisip, nang pinapanatili
ang lahat ng bagay mabuti balanced,

370
00:17:15,960 --> 00:17:19,150
naghahanap ng isang bagay up, ang pagbabago ng
pag-uugali ng tag na, na talagang lahat

371
00:17:19,150 --> 00:17:20,079
doon ay upang ito.

372
00:17:20,079 --> 00:17:28,140
At sa katunayan, kung namin ngayon pumunta sa
isang bagay tulad ng google.com-- talaga,

373
00:17:28,140 --> 00:17:31,920
hana isang lugar ng kaunti pa
reasonable-- stanford.edu.

374
00:17:31,920 --> 00:17:37,800
At ako pagpunta sa pumunta sa View,
Developer, View Source.

375
00:17:37,800 --> 00:17:41,400
Ito ay pangit, ngunit notice--
at kukunin ko na mag-zoom in notice

376
00:17:41,400 --> 00:17:43,432
ilang bagay-bagay na pamilyar na.

377
00:17:43,432 --> 00:17:45,140
Mayroong ito up dito,
kung saan ay isang browser.

378
00:17:45,140 --> 00:17:46,800
Dito lumapit HTML5.

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

380
00:17:47,634 --> 00:17:49,550
Sa malas, mayroong isang
attribute na ako ay hindi

381
00:17:49,550 --> 00:17:51,540
gamitin na tumutukoy sa
wika ng mga pahina,

382
00:17:51,540 --> 00:17:54,380
at ito ay maaaring makatulong na may awtomatikong
pagsasalin at bagay-bagay tulad na.

383
00:17:54,380 --> 00:17:55,546
Narito ang ulo ng pahina.

384
00:17:55,546 --> 00:17:57,790
Narito ang pamagat ng pahina Stanford.

385
00:17:57,790 --> 00:17:59,832
May isang tag ako ay hindi
makipag-usap tungkol yet-- Meta tag.

386
00:17:59,832 --> 00:18:01,540
Ito ay lamang ng isang uri ng
background na impormasyon.

387
00:18:01,540 --> 00:18:04,210
Ito ay tumutulong sa SEO, o
Search Engine Optimization,

388
00:18:04,210 --> 00:18:06,320
o Google-search mga resulta o mga katulad.

389
00:18:06,320 --> 00:18:09,029
Ngunit kung tinutupad natin kayong mapagmasid, manatiling
naghahanap, narito ang Body tag.

390
00:18:09,029 --> 00:18:11,570
At mayroong bunches ng iba pang mga
tags hindi kami nagsasalita pa tungkol sa.

391
00:18:11,570 --> 00:18:13,750
Ngunit Div ay isa para sa isang
division ng pahina.

392
00:18:13,750 --> 00:18:16,680
Ito ay tulad ng isang invisible na parihaba
kung ikaw uri ng nais na pag-iisip

393
00:18:16,680 --> 00:18:20,160
hatiin ang iyong pahina sa
iba't ibang mga unit online.

394
00:18:20,160 --> 00:18:22,650
At pagkatapos ng maraming mga divs ko
makita, isang bagay na tinatawag Class,

395
00:18:22,650 --> 00:18:24,440
ngunit kami ay bumalik sa na.

396
00:18:24,440 --> 00:18:26,200
>> Ito ang interesting-- Forms.

397
00:18:26,200 --> 00:18:27,730
Forms ay ang lahat ng dako ng web.

398
00:18:27,730 --> 00:18:30,310
Anumang box para sa paghahanap na ikaw ay
kailanman ginamit ay isang form.

399
00:18:30,310 --> 00:18:31,490
At, kaya, sabihin aktwal na makita.

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

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

402
00:18:33,910 --> 00:18:37,660
Ang aksyon ng form na ito, para sa anumang
makasaysayang dahilan, ay na URL.

403
00:18:37,660 --> 00:18:38,840
Paraan ay "post."

404
00:18:38,840 --> 00:18:44,060
Lumiliko out na HTTP kahilingan ay maaaring gumamit ng
ang verb "makakuha ng," tulad ng nakita natin dati,

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

406
00:18:45,070 --> 00:18:47,030
At makita ang isang pagkakaiba
ng mga ito sa ilang sandali.

407
00:18:47,030 --> 00:18:48,363
Natin ang aktwal na makita kung ano ito ay.

408
00:18:48,363 --> 00:18:49,830
Hayaan akong bumalik sa pahina ng Stanford.

409
00:18:49,830 --> 00:18:53,330
Ano ang anyo ang mga ito ay pakikipag-usap
tungkol sa, sa tingin ninyo?

410
00:18:53,330 --> 00:18:54,485
Ano jumps out sa iyo?

411
00:18:54,485 --> 00:18:54,970
>> Madla: Search box.

412
00:18:54,970 --> 00:18:55,845
>> David J. MALAN: Oo.

413
00:18:55,845 --> 00:18:58,410
Kaya up sa kanang tuktok
dito ay ito Hanapin box.

414
00:18:58,410 --> 00:19:02,441
At na kung paano sila ay ipinatupad it-- isang
tag na literal open-bracket form.

415
00:19:02,441 --> 00:19:03,940
At pagkatapos ay sabihin sa paghahanap para sa isang bagay.

416
00:19:03,940 --> 00:19:09,220
ni maghanap para sa isang buddy Hayaan
ng mine-- "Nick Parlante."

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

418
00:19:11,380 --> 00:19:13,750
At syempre, ito napunta sa
isang bahagyang kakaibang URL.

419
00:19:13,750 --> 00:19:15,140
Hayaan akong bumalik dito.

420
00:19:15,140 --> 00:19:18,960
ni maghanap para sa Hayaan ang "kurso."

421
00:19:18,960 --> 00:19:19,460
Mapapahamak ang mga ito.

422
00:19:19,460 --> 00:19:20,484
Nagpunta sa isang iba't ibang mga URL.

423
00:19:20,484 --> 00:19:23,400
Kaya, Stanford ni pagdagdag ng ilang mga magic
na hindi sila ay pagkuha sa akin sa URL

424
00:19:23,400 --> 00:19:25,820
na nakita natin sa
pagkilos attribute doon.

425
00:19:25,820 --> 00:19:32,480
Ngunit ang form na ito dito ay ipinatupad pulos
sa pamamagitan ng paraan ng markup na ito dito, ang mga tag.

426
00:19:32,480 --> 00:19:35,710
Sa katunayan, narito ang input para sa
ang uri ng paghahanap na gusto mo.

427
00:19:35,710 --> 00:19:38,940
Narito ang input para sa
isa pang uri ng paghahanap.

428
00:19:38,940 --> 00:19:41,960
Narito ang input para sa string mismo.

429
00:19:41,960 --> 00:19:45,394
At kaya ang layunin ay hindi upang balutin
ang aming mga isip sa paligid ng lahat ng mga tag

430
00:19:45,394 --> 00:19:46,060
ngunit lamang upang makita.

431
00:19:46,060 --> 00:19:48,300
Lamang Ito ay pagbubukas at pagsasara
tag at naghahanap ng mga bagay up.

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

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

434
00:19:48,920 --> 00:19:49,795
>> Madla: [hindi marinig]

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

436
00:19:51,925 --> 00:19:53,550
David J. MALAN: Iyan ay isang mahusay na tanong.

437
00:19:53,550 --> 00:19:54,660
Iyan ay isang maliit na trickier upang makita.

438
00:19:54,660 --> 00:19:56,300
Hayaan akong bumalik sa na
tanong sa loob lamang ng ilang minuto

439
00:19:56,300 --> 00:19:59,000
kapag tinitingnan namin ang isang bagay na tinatawag
CSS, o cascading style sheet,

440
00:19:59,000 --> 00:20:02,500
at maaari naming subukan upang magpakilala
ng mas maraming mula sa pahina.

441
00:20:02,500 --> 00:20:08,090
Kaya kung namin ngayon bistahan google.com,
sabihin makita kung ano ang kanilang mga pahina ay ganito ang hitsura.

442
00:20:08,090 --> 00:20:09,840
Gusto mong they're-- na maganda ngayon.

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
Tapos na.

446
00:20:13,690 --> 00:20:15,260
O sige, kaya View Source.

447
00:20:15,260 --> 00:20:19,590
Gusto mong isipin ang Google ay may
talagang maganda source code.

448
00:20:19,590 --> 00:20:24,970
Kaya, tila, kung ano ang nangyayari dito?

449
00:20:24,970 --> 00:20:27,880
At sa katunayan, ito ay hindi kahit na HTML.

450
00:20:27,880 --> 00:20:30,930
Ito ay isang bagay na tinatawag na JavaScript.

451
00:20:30,930 --> 00:20:32,344
At sabihin panatilihin ang pagpunta at pagpunta.

452
00:20:32,344 --> 00:20:34,010
Hindi ko kahit na alam kung saan ang pahina ay nagsisimula.

453
00:20:34,010 --> 00:20:37,240
Ako pagpunta sa gamitin Command
F, bukas bracket HTML.

454
00:20:37,240 --> 00:20:38,200
O sige, may ito ay.

455
00:20:38,200 --> 00:20:44,150
Natagpuan ko ang simula ng pahina, at
diyan ay pagayon marami mga bagay-bagay in dito.

456
00:20:44,150 --> 00:20:45,310
>> Ano ang tunay na nangyayari?

457
00:20:45,310 --> 00:20:47,460
Well, alam mo kung ano,
maaari naming linisin ito up.

458
00:20:47,460 --> 00:20:52,109
Kung sa halip pumunta ako sa ito Siyasatin
toolbar, ang mga espesyal na diagnostic tool,

459
00:20:52,109 --> 00:20:54,150
at huwag kang lumakad sa Network,
kung saan panatilihin namin ang pagpunta sa ngayon,

460
00:20:54,150 --> 00:20:56,420
ngunit kung pumunta ako sa Sangkap,
kung ano ang tunay na ganda

461
00:20:56,420 --> 00:20:59,990
ay na ang isang browser ay may isang pulutong
magkano ang mas mahusay mata kaysa sa akin.

462
00:20:59,990 --> 00:21:02,670
At ang browser ay maaaring basahin
na gulo ng isang web page,

463
00:21:02,670 --> 00:21:04,700
na HTML mail kami lang
ay tumingin sa, at kaya nito

464
00:21:04,700 --> 00:21:08,340
parse ito o basahin at
aralan ito at reformat ito

465
00:21:08,340 --> 00:21:09,910
sa isang masarap na tao-friendly na paraan.

466
00:21:09,910 --> 00:21:11,740
Kaya kung ano ang ko na nakikita ngayon
sa ganitong screen dito

467
00:21:11,740 --> 00:21:15,470
ilalim Elements, ang eksaktong parehong nilalaman,
ngunit sila na naka-indent lahat ng bagay,

468
00:21:15,470 --> 00:21:18,140
sila na colorized, pero
ito ay ang eksaktong parehong teksto

469
00:21:18,140 --> 00:21:19,620
na-download ko mula sa server.

470
00:21:19,620 --> 00:21:23,630
>> At kung ano ang magaling ngayong Maaari ko bang makita
sa katawan, para instance-- paunawa,

471
00:21:23,630 --> 00:21:26,480
ang pahina ay pa rin binubuo
na lamang ng isang ulo at isang katawan,

472
00:21:26,480 --> 00:21:28,660
at maaari ba akong hierarchically sumisid in dito.

473
00:21:28,660 --> 00:21:32,420
Pansinin na ang Google tila sa may
upang divs-- ang isang ito at ang isang ito.

474
00:21:32,420 --> 00:21:33,310
maaari kong palawakin iyon.

475
00:21:33,310 --> 00:21:35,370
Mayroong isang buong bungkos ng iba pang divs.

476
00:21:35,370 --> 00:21:36,900
Kaya ito ay isang maliit na mahirap unawain.

477
00:21:36,900 --> 00:21:37,400
Ngunit sandali.

478
00:21:37,400 --> 00:21:40,970
Ito ay tila kaya marami pang iba
nababasa, medyo, kaysa ito.

479
00:21:40,970 --> 00:21:43,840
Bakit Google nakakahiya
mismo sa pamamagitan lamang ng pagpapadala

480
00:21:43,840 --> 00:21:50,400
ito malaking gulo ng code ng ilang mga
uri lamang upang ipatupad ang isang bagay

481
00:21:50,400 --> 00:21:53,640
na mukhang sobrang simple sa unang tingin?

482
00:21:53,640 --> 00:21:55,270
Like, bakit hindi sila magdagdag ng higit pang mga puwang?

483
00:21:55,270 --> 00:21:56,811
Bakit hindi nila pindutin ang Enter tulad ng ginawa ko?

484
00:21:56,811 --> 00:21:59,110
Hanapin kung paano mabuting ako ay
sa pagsulat ng isang web page.

485
00:21:59,110 --> 00:22:00,680
I pindutin ang Enter upang diligently.

486
00:22:00,680 --> 00:22:03,760
yupi ko kaya lahat ng bagay
ay kaya medyo at nababasa.

487
00:22:03,760 --> 00:22:08,463
Bakit ang Google ay hindi pagsasanay sa parehong?

488
00:22:08,463 --> 00:22:11,409
>> Madla: [hindi marinig]

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

490
00:22:12,305 --> 00:22:13,180
David J. MALAN: Good.

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

492
00:22:14,270 --> 00:22:16,650
Hindi nila magkaroon ng ilang mga
tao sa Google nang manu-mano

493
00:22:16,650 --> 00:22:18,160
pag-update ng home page anymore.

494
00:22:18,160 --> 00:22:20,010
Ito ay hindi 1999 anymore.

495
00:22:20,010 --> 00:22:21,140
Kaya mayroon silang software.

496
00:22:21,140 --> 00:22:25,397
Ang mga ito ay iba pang mga tool na
bumuo dynamic na ang mga ito HTML.

497
00:22:25,397 --> 00:22:27,480
Of course, na ang code mismo
ay isinulat ng mga tao,

498
00:22:27,480 --> 00:22:30,220
ngunit ang katotohanan ay,
ito ay lubos na makatarungan sa sabihin,

499
00:22:30,220 --> 00:22:33,340
ang browser ay tiyak ay hindi
aalaga kung paano makalat ang code ay.

500
00:22:33,340 --> 00:22:35,940
Subalit mayroong isang mas
nakakahimok teknikal na dahilan

501
00:22:35,940 --> 00:22:42,580
na ang Google namamahagi kanilang HTML
code sa tulad ng isang nanggigitata, tila baga

502
00:22:42,580 --> 00:22:48,350
napakalaki paraan ang lahat nakaimpake magkasama
na may tunay maliit way-- napakakaunting

503
00:22:48,350 --> 00:22:51,274
sa paraan ng pag-format tulad ng ginawa ko.

504
00:22:51,274 --> 00:22:52,570
>> Madla: [hindi marinig]

505
00:22:52,570 --> 00:22:53,528
>> David J. MALAN: Mas mabilis?

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

507
00:22:54,040 --> 00:22:55,680
At ano ang sinabi mo, Lydia?

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

509
00:22:56,240 --> 00:22:57,281
Bakit mas mabilis?

510
00:22:57,281 --> 00:22:58,156
Madla: [hindi marinig]

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

512
00:23:00,522 --> 00:23:02,230
David J. MALAN: May
walang puwang na basahin.

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

514
00:23:02,730 --> 00:23:04,560
Kaya sa tingin tungkol sa kung ano ang isang puwang ay.

515
00:23:04,560 --> 00:23:08,394
Kaya ang bawat character sa keyboard ay tumatagal
ilang mga halaga ng space upang kumatawan,

516
00:23:08,394 --> 00:23:10,560
alinman sa pisikal, tulad nito
tumatagal ng up na marami space,

517
00:23:10,560 --> 00:23:13,250
o sa anumang paraan sa ilalim ng
hood, na nangangailangan ng memory.

518
00:23:13,250 --> 00:23:15,740
At bilang isang aside-- at kami
makipag-usap nang higit pa tungkol tomorrow-- ito

519
00:23:15,740 --> 00:23:19,930
bawat karakter sa keyboard
karaniwang nangangailangan ng 8 bits, o isang byte.

520
00:23:19,930 --> 00:23:23,360
Kaya ang isang pattern ng 8 mga zero o
bago, o lamang ng 1 byte, bilang namin

521
00:23:23,360 --> 00:23:24,720
mga kawani na tao ay karaniwang sabihin.

522
00:23:24,720 --> 00:23:27,690
Kaya na ang maliit, ngunit
ito ay pa rin non-zero.

523
00:23:27,690 --> 00:23:29,940
Ito ay pa rin ang ilang mga halaga ng space.

524
00:23:29,940 --> 00:23:36,082
Kaya kung ang isang engineer o Google hits
ang space bar nang isang beses lamang, at ipagpalagay

525
00:23:36,082 --> 00:23:38,540
Google-- ito ay super-popular--
Ipagpalagay na ang isang bilyong katao

526
00:23:38,540 --> 00:23:40,780
bisitahin ang kanilang home page sa isang araw,
o ilang bilang ng mga tao

527
00:23:40,780 --> 00:23:43,290
bisitahin ang home page ng isang
bilyong beses sa isang araw,

528
00:23:43,290 --> 00:23:48,890
kung gaano karaming mga karagdagang bytes ay may na
software engineer lamang gastos Google

529
00:23:48,890 --> 00:23:51,310
sa pamamagitan ng paghagupit ang kanyang space bar isang beses?

530
00:23:51,310 --> 00:23:52,692
>> Madla: [hindi marinig]

531
00:23:52,692 --> 00:23:54,150
David J. MALAN: Hindi masyadong na masama.

532
00:23:54,150 --> 00:23:57,070
Lamang ng isang byte beses sa isang bilyon.

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

534
00:23:57,871 --> 00:23:59,120
Madla: 8 bilyon gigabytes.

535
00:23:59,120 --> 00:24:00,370
David J. MALAN: Hindi 8 bilyon.

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

537
00:24:01,240 --> 00:24:02,410
Ngunit 1 gigabyte.

538
00:24:02,410 --> 00:24:04,080
1 gigabyte ay ang yunit ng pagsukat.

539
00:24:04,080 --> 00:24:08,240
Kung siya ay dalawang
puwang, 2 gigabytes.

540
00:24:08,240 --> 00:24:09,030
Tatlong gigabytes.

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

542
00:24:09,530 --> 00:24:11,860
Ito kaliskis expensively.

543
00:24:11,860 --> 00:24:16,150
At kaya sa mga kaso tulad ng Google,
na kung saan, sa ipinagkaloob, ay matinding kaso,

544
00:24:16,150 --> 00:24:21,450
may mga iba pang mga isyu na lumabas dahil lamang
sa pamamagitan ng paggawa napaka-makatwirang desisyon

545
00:24:21,450 --> 00:24:25,744
o pagkuha ng napaka-simpleng tao pagkilos,
dahil ito ay may ito Pinalaking epekto.

546
00:24:25,744 --> 00:24:27,660
Kaya isa sa mga dahilan
ito hitsura kaya compressed

547
00:24:27,660 --> 00:24:30,660
ay eksakto tulad ng Victoria said-- ito ay
lamang na nabuo sa pamamagitan ng mga computer pa rin.

548
00:24:30,660 --> 00:24:31,900
Kaya hindi sang-ayon.

549
00:24:31,900 --> 00:24:33,309
Hayaan ang mga browser tayahin ito lumitaw.

550
00:24:33,309 --> 00:24:35,350
Ngunit ito rin ay sadyang
Wala magkano ang space,

551
00:24:35,350 --> 00:24:36,766
dahil ang puwang ay hindi kinakailangan.

552
00:24:36,766 --> 00:24:38,250
At ang mga araw talagang gastos ng pera.

553
00:24:38,250 --> 00:24:40,670
>> Ito ay alinman gastos pagkakataon,
dahil lamang na itulak

554
00:24:40,670 --> 00:24:44,670
na mas data sa labas ng
headquarters ni google.com lamang

555
00:24:44,670 --> 00:24:47,710
ay nakuha na kumuha ng ilang mga halaga ng
oras, kahit na ito ay milliseconds

556
00:24:47,710 --> 00:24:51,190
o microseconds, ngunit na nagdaragdag ng hanggang
paglipas ng sa gayon maraming mga gumagamit, o mas malamang,

557
00:24:51,190 --> 00:24:52,270
ito marahil gastos ng pera.

558
00:24:52,270 --> 00:24:54,690
Google marahil nag-uugnay sa
ibang tao sa mundo, isa

559
00:24:54,690 --> 00:24:56,398
sa mga peering
puntos, at kung mayroon silang

560
00:24:56,398 --> 00:24:59,880
ng ilang mga uri ng mga pinansiyal na relasyon
kung saan ang kanilang data gastos ng pera,

561
00:24:59,880 --> 00:25:01,730
maaaring sila pati na rin
mabawasan kung magkano ang data

562
00:25:01,730 --> 00:25:04,530
sila ay pagsigam out sa
ang kanilang mga koneksyon sa internet.

563
00:25:04,530 --> 00:25:07,630
>> Kaya ang nakakatawa bagay, bagaman, sa huli,
o marahil ang reassuring bagay,

564
00:25:07,630 --> 00:25:11,030
ay na kahit na ito mukhang masyado
napakalaki, sa dulo ng araw,

565
00:25:11,030 --> 00:25:16,750
ito ay pa rin ang parehong prinsipyo bilang
ang napaka-simpleng pahina dito ng isang HTML

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

567
00:25:17,390 --> 00:25:20,610
Kaya lang sa maikling pangungusap at sa gayon ay ikaw
magkaroon ng isang canonical na bersyon kung ikaw ay hindi

568
00:25:20,610 --> 00:25:25,900
pagsunod sa kahabaan sa pamamagitan ng pagpili dito, dito
ay maaaring ang pinaka-simple ng mga web page,

569
00:25:25,900 --> 00:25:28,240
kaya ng isang bagay upang i-play na may marahil mamaya.

570
00:25:28,240 --> 00:25:30,790
>> Well, sabihin ipakilala ang isang
pares ng mga iba pang mga ideya ngayon.

571
00:25:30,790 --> 00:25:33,420
Kami ay tungkol sa upang ipakilala
isang bagay na tinatawag ng isang estilo tag.

572
00:25:33,420 --> 00:25:38,110
Maaari naming stylize ang pahinang ito
sa mas maraming mga kagiliw-giliw na paraan.

573
00:25:38,110 --> 00:25:40,860
Kaya samantalang HTML email
ay ang lahat ng tungkol sa pagmamarka ng up

574
00:25:40,860 --> 00:25:44,470
ang data, uri ng pagtukoy sa isang
browser kung paano sa istraktura ng data,

575
00:25:44,470 --> 00:25:48,110
kung saan upang ilagay ito, CSS, o
cascading style sheet,

576
00:25:48,110 --> 00:25:52,640
ay isang pangalawang wika na
sa pangkalahatan ay makakakuha commingled sa HTML

577
00:25:52,640 --> 00:25:55,670
dahil kakailanganin namin see-- ngunit maaari naming linisin
na hanggang sa isang moment-- na tumatagal

578
00:25:55,670 --> 00:25:59,850
ito ang huling milya, at ito stylizes ito.

579
00:25:59,850 --> 00:26:02,460
Ito ay makakakuha ng mga kulay lamang karapatan,
ang laki ng font lamang karapatan,

580
00:26:02,460 --> 00:26:03,860
ang pagpoposisyon lamang kanan.

581
00:26:03,860 --> 00:26:06,510
Lahat ng ito ay tungkol sa aesthetics
o pag-format, hindi tungkol sa

582
00:26:06,510 --> 00:26:08,330
sa pangunahing mga data mismo.

583
00:26:08,330 --> 00:26:11,390
At ang pinakamadaling paraan upang ipakita ang
ito ay marahil sa pamamagitan ng halimbawa.

584
00:26:11,390 --> 00:26:15,320
Kaya ako ng pagpunta sa pumunta sa ibabaw
sa aking simpleng text file.

585
00:26:15,320 --> 00:26:17,970
At sa loob lamang ng isang sandali, kukunin ko
maglakad sa amin sa pamamagitan ng proseso

586
00:26:17,970 --> 00:26:19,360
ng paggawa nito sa ating sarili.

587
00:26:19,360 --> 00:26:23,310
>> Pupunta ako sa bumalik sa aking file
dito at i-reload ang pahina lamang

588
00:26:23,310 --> 00:26:25,800
upang kumpirmahin kung ano ang mukhang.

589
00:26:25,800 --> 00:26:27,190
Iyon ang dahilan kung nasaan na tayo ngayon.

590
00:26:27,190 --> 00:26:31,170
Pakiramdam ko ay tulad ng mga bata ay mga bisita
pagkakaroon ng ilang mga kulay sa web page na ito.

591
00:26:31,170 --> 00:26:34,480
Kaya ako pagpunta sa pumunta up dito
sa ulo ng pahina.

592
00:26:34,480 --> 00:26:38,130
At ako pagpunta sa gawin style, / style.

593
00:26:38,130 --> 00:26:44,060
At pagkatapos ay sa loob ng mga ito, ako pagpunta
upang sabihin ang katawan ng aking page--

594
00:26:44,060 --> 00:26:46,870
at ito formatting ay, sa
unang tingin, marahil ng kaunti

595
00:26:46,870 --> 00:26:49,400
kakaiba ngunit maginoo.

596
00:26:49,400 --> 00:26:55,010
Pupunta ako sa sabihin na ang background
kulay ng pahinang ito ay dapat na green.

597
00:26:55,010 --> 00:26:57,960
At ito ay sa kasamaang-palad
uri ng hindi ang pinakamahusay na disenyo.

598
00:26:57,960 --> 00:27:00,710
Pansinin na dati
sa mundo ng HTML,

599
00:27:00,710 --> 00:27:03,190
sinabi ko na katangian
ay ang mga ito ng key-value pares.

600
00:27:03,190 --> 00:27:05,760
Something ay katumbas quote
magpanipi "ng isang bagay."

601
00:27:05,760 --> 00:27:08,810
Sa mundo ng CSS, na kung saan ay
dinisenyo sa pamamagitan ng ilang iba't-ibang mga tao,

602
00:27:08,810 --> 00:27:11,020
sila ay nagpasya na, sa kanilang
mundo, key-value pairs

603
00:27:11,020 --> 00:27:13,920
ay magiging salita colon isang bagay.

604
00:27:13,920 --> 00:27:15,220
Kaya ito ay ang parehong ideya, bagaman.

605
00:27:15,220 --> 00:27:18,620
Ito ay pag-uugnay ang halaga ng isang
na may ilang mga susi na sa paanuman

606
00:27:18,620 --> 00:27:20,330
impluwensya ang pag-uugali ng pahinang ito.

607
00:27:20,330 --> 00:27:21,901
>> At maaari mong marahil hulaan.

608
00:27:21,901 --> 00:27:24,150
Ano ito marahil pagpunta
na gawin kahit na kung ikaw ay hindi kailanman

609
00:27:24,150 --> 00:27:27,867
tumingin sa HTML o CSS bago?

610
00:27:27,867 --> 00:27:29,450
Madla: Baguhin ang kulay ng background.

611
00:27:29,450 --> 00:27:30,560
David J. MALAN: Oo,
baguhin ang kulay ng background.

612
00:27:30,560 --> 00:27:33,280
At partikular ang
kulay ng background ng katawan.

613
00:27:33,280 --> 00:27:36,290
Ngunit insofar bilang ang
katawan para sa ngayon ay ang web

614
00:27:36,290 --> 00:27:38,870
page-- ito ay ang tanging bagay
sa ibaba ng pamagat bar really--

615
00:27:38,870 --> 00:27:40,870
marahil ito ay pagpunta sa
iimpluwensya ng parehong bagay.

616
00:27:40,870 --> 00:27:41,430
Kaya sabihin makita.

617
00:27:41,430 --> 00:27:42,490
I-save ito Hayaan.

618
00:27:42,490 --> 00:27:44,310
Pumunta dito at i-reload.

619
00:27:44,310 --> 00:27:46,140
Ito ay medyo kahindik-hindik.

620
00:27:46,140 --> 00:27:48,070
At kung ano ang nangyayari
dito ay isang side effect.

621
00:27:48,070 --> 00:27:49,850
Ko na lang pinili ang larawang ito nang sapalaran.

622
00:27:49,850 --> 00:27:53,305
Bakit ang green hindi
permeating likod Mickey?

623
00:27:53,305 --> 00:27:54,180
Madla: [hindi marinig]

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

625
00:27:56,880 --> 00:27:57,880
David J. MALAN: Mismong.

626
00:27:57,880 --> 00:28:01,750
Ito ay lumiliko out na ang mga imahe, pretty
magkano lahat ng mga imahe upang tayo'y gamitin,

627
00:28:01,750 --> 00:28:03,670
ay ang lahat ng rectangles-- ng parihaba.

628
00:28:03,670 --> 00:28:07,710
Kahit na Mickey ay may ilang mga curves
sa kanyang sarili at may isang background,

629
00:28:07,710 --> 00:28:09,330
na background ay upang maging isang bagay.

630
00:28:09,330 --> 00:28:10,280
Ito ay upang maging puti.

631
00:28:10,280 --> 00:28:11,910
Ito ay upang maging itim o iba pang dahilan.

632
00:28:11,910 --> 00:28:13,650
Maaari itong maging transparent.

633
00:28:13,650 --> 00:28:16,100
At sa katunayan, kaya kong
buksan Mickey Mouse dito

634
00:28:16,100 --> 00:28:18,590
sa isang programa na tinatawag na Photoshop
o isang bagay na katulad

635
00:28:18,590 --> 00:28:21,176
at baguhin ang lahat ng mga puting na
background na transparent,

636
00:28:21,176 --> 00:28:22,550
kaya ang green ay lumiwanag sa pamamagitan ng.

637
00:28:22,550 --> 00:28:25,980
Ngunit iyon lamang ang isang bagay na gusto ko kailangan
na humingi sa aking sarili o ng isang graphic artist

638
00:28:25,980 --> 00:28:28,130
o isang taga-disenyo sa aking
kumpanya, halimbawa,

639
00:28:28,130 --> 00:28:31,490
na gawin, lalo na dahil ako lamang
hiniram ang isang ito mula sa internet.

640
00:28:31,490 --> 00:28:33,030
Ngunit iyon ang dahilan kung bakit ito ay nangyayari.

641
00:28:33,030 --> 00:28:34,980
>> Kaya ano pa ang maaaring gusto naming gawin?

642
00:28:34,980 --> 00:28:41,040
Well, baka gusto naming sinasabi namin
talagang umaasa masiyahan kayo sa inyong pamamalagi.

643
00:28:41,040 --> 00:28:44,150
At para sa diin, gusto kong
upang gawin ang malakas,

644
00:28:44,150 --> 00:28:48,310
at iba pa Sasabihin kong bukas malakas at
isara malakas at pagkatapos ay i-reload.

645
00:28:48,310 --> 00:28:50,320
At ito ay isang maliit na mahirap
upang makita sa projector

646
00:28:50,320 --> 00:28:53,250
ngunit marahil talagang ngayon
jumps out sa iyo ng kaunti pa.

647
00:28:53,250 --> 00:28:56,180
Kaya maaari kang magdagdag italics sa ito
paraan, bold nakaharap sa ganitong paraan.

648
00:28:56,180 --> 00:28:57,500
Maaari naming baguhin ang mga kulay.

649
00:28:57,500 --> 00:29:01,610
Sa katunayan, lamang sa mga kicks, ako
pagpunta sa sige at gawin ito.

650
00:29:01,610 --> 00:29:05,120
Hindi ko talaga gusto kung paano ang aking
talata ay ito malapit magkasama,

651
00:29:05,120 --> 00:29:06,870
ano pa't siya'y aking gawin ang isang bagay tulad nito.

652
00:29:06,870 --> 00:29:13,310
Pupunta ako sa sabihin sa browser,
baguhin ang bawat talata tag na magkaroon,

653
00:29:13,310 --> 00:29:16,952
sabihin say-- talaga, alam mo kung ano,
sabihin align ito text-align, center.

654
00:29:16,952 --> 00:29:19,410
At muli, alam ko na ito lamang
dahil may itinuro ito sa akin

655
00:29:19,410 --> 00:29:21,118
o ako ay tumingin ito sa loob ng
isang online na reference.

656
00:29:21,118 --> 00:29:22,450
Kaya hayaan mo akong i-save ito.

657
00:29:22,450 --> 00:29:25,070
At, ah, ngayon na ako
nakasentro ang imahe doon.

658
00:29:25,070 --> 00:29:28,490
At talagang, alam mo kung ano, kung
ilipat ko ang aking larawan sa isang talata

659
00:29:28,490 --> 00:29:34,510
tag-- kaya isang ikatlong talata,
kahit na ito ay hindi mag-text.

660
00:29:34,510 --> 00:29:36,917
ni-save na at i-reload Hayaan.

661
00:29:36,917 --> 00:29:40,000
Ngayon ang pahina ay nagsisimula upang tumingin uri
of-- Ibig kong sabihin, ito ay pa rin medyo mainit ang ulo,

662
00:29:40,000 --> 00:29:43,180
ngunit hindi bababa sa ito ay ganito ang hitsura ko na ginugol
dalawang minuto sa halip ng isang minuto

663
00:29:43,180 --> 00:29:43,950
ginagawa itong.

664
00:29:43,950 --> 00:29:47,200
>> At sa gayon, incrementally, maaari naming gumawa ng
mga aesthetic pagbabago ngayon sa page?

665
00:29:47,200 --> 00:29:50,860
Hindi ko na talagang nagbago ang data sa mga
mga pahina maliban sa pagdaragdag ng salita really.

666
00:29:50,860 --> 00:29:52,650
Nagdagdag ako ng metadata, kung ikaw ay.

667
00:29:52,650 --> 00:29:54,830
Hey, browser, gumawa ng
salitang "tunay" bold.

668
00:29:54,830 --> 00:29:56,940
Ngunit ang data ay hindi malakas.

669
00:29:56,940 --> 00:29:57,830
Iyan ay metadata.

670
00:29:57,830 --> 00:29:59,410
Ang data ay "talaga."

671
00:29:59,410 --> 00:30:02,200
Kaya pa rin namin ang ilan sa mga
ang parehong konsepto tulad ng dati.

672
00:30:02,200 --> 00:30:05,990
Ngayon, siyempre, ito ay hindi sa web,
kaya ako pagpunta sa gawin ang isa huling hakbang dito.

673
00:30:05,990 --> 00:30:10,300
>> Pupunta ako sa pumunta sa hello.html
at lamang i-highlight at kopyahin ito.

674
00:30:10,300 --> 00:30:12,285
At ngayon ako pagpunta sa
pumunta sa Cloud9, na kung saan

675
00:30:12,285 --> 00:30:13,910
makikita ba akong maglakad sa iyo sa pamamagitan sa loob lamang ng ilang sandali.

676
00:30:13,910 --> 00:30:17,080
At logro ay makikita mo sa lalong madaling panahon, kung
hindi pa, sa isang screen na tulad nito.

677
00:30:17,080 --> 00:30:21,080
At hayaan mo akong lamang magbibigay sa iyo ng isang mabilis na
tour ng kung ano Cloud9 talaga.

678
00:30:21,080 --> 00:30:26,590
Kaya muli ulap 9 ay
ang serbisyong ito sa cloud-based

679
00:30:26,590 --> 00:30:30,580
na nagbibigay sa iyo at sa akin ang ilusyon
ng pagkakaroon ng aming sariling mga virtual machine

680
00:30:30,580 --> 00:30:33,090
sa ulap, technically
isang lalagyan sa ulap,

681
00:30:33,090 --> 00:30:35,160
na kami ay may ganap na
administrative pribilehiyo sa.

682
00:30:35,160 --> 00:30:37,130
Kaya sa teorya, walang sinuman
sino pa ang paririto sa mundo ay may

683
00:30:37,130 --> 00:30:39,152
access sa screen ako
pagtingin sa ngayon,

684
00:30:39,152 --> 00:30:40,860
maliban siguro ang mga tao
na patakbuhin ang site,

685
00:30:40,860 --> 00:30:43,470
dahil technically mayroon silang
pisikal na access at iba pa.

686
00:30:43,470 --> 00:30:44,740
>> Kaya kung ano ang nakikita natin sa environment na ito?

687
00:30:44,740 --> 00:30:46,230
Pupunta ako upang mag-zoom out,
dahil ito ay isang maliit na maliit.

688
00:30:46,230 --> 00:30:48,104
At hayaan mo akong ituro sa ibabaw
dito para sa sandali lamang.

689
00:30:48,104 --> 00:30:53,210
Sa kaliwang gilid ng aking at ang iyong
screen, may isang file browser sa kaliwa.

690
00:30:53,210 --> 00:30:55,362
Kaya katulad sa espiritu
sa Mac OS at Windows.

691
00:30:55,362 --> 00:30:57,070
Ito ang lahat ng
mga file sa aking account.

692
00:30:57,070 --> 00:30:59,250
At sa pamamagitan ng default, kung ang iyong
account ay tulad ng minahan,

693
00:30:59,250 --> 00:31:05,090
makikita mo makita o madaling makita
helloworld.html at readme.md.

694
00:31:05,090 --> 00:31:07,950
Sa paglipas dito sa kanan, ito ay
kung saan ang aking text file ay pagpunta sa pumunta.

695
00:31:07,950 --> 00:31:11,620
Kung kailanman na iyong ginamit Microsoft
Word o Notepad o TextEdit,

696
00:31:11,620 --> 00:31:14,100
ito ay salitang aking pag-edit
ng mga file ay pagpunta sa pumunta.

697
00:31:14,100 --> 00:31:16,540
At pagkatapos ay ang pinaka-arcane
tampok ng environment na ito

698
00:31:16,540 --> 00:31:20,100
na hindi talaga namin ay kailangan na gumamit ay
pababa dito na tinatawag na isang Terminal Window.

699
00:31:20,100 --> 00:31:23,390
Kung nakagamit ka na DOS mula
nakalipas na panahon, ito ay ang Linux

700
00:31:23,390 --> 00:31:25,450
o ang Linux katumbas ng DOS.

701
00:31:25,450 --> 00:31:28,190
Ito ay isang text-based interface--
walang mouse mga pag-click, walang pag-drag.

702
00:31:28,190 --> 00:31:30,770
Ang lahat ng maaari mong gawin ay i-type
utos, ngunit ang mga utos

703
00:31:30,770 --> 00:31:34,400
maaaring lumikha ng mga file, ilipat ang mga file, buksan ang
directories, malapit directories,

704
00:31:34,400 --> 00:31:35,740
gawin ang anumang bilang ng mga bagay.

705
00:31:35,740 --> 00:31:38,060
Ngunit sa ngayon, kami ay makikita lamang
gastusin ang aming oras dito.

706
00:31:38,060 --> 00:31:39,050
>> At kaya sabihin gawin ito.

707
00:31:39,050 --> 00:31:41,008
Kung ikaw ay sa ito
kapaligiran, na dapat mong

708
00:31:41,008 --> 00:31:45,900
maging kung lumikha ka ng workspace
na, sige at pumunta lamang up

709
00:31:45,900 --> 00:31:48,690
sa File, New sa sangdali lamang.

710
00:31:48,690 --> 00:31:51,740
At na ay magbibigay sa iyo ng isang bagong
tab dito mismo sa gitna.

711
00:31:51,740 --> 00:31:54,250
At just-- ko at sabihin
sige, at gawin ito.

712
00:31:54,250 --> 00:31:59,910
Sabihin sige at ngayon ay File, I-save
at sige at tawagan ito hello.html,

713
00:31:59,910 --> 00:32:02,740
hindi dapat malito sa
helloworld.html, na kung saan

714
00:32:02,740 --> 00:32:06,910
kasama ng iyong bagong libreng account,
na kung saan ay lamang ng isang sample file.

715
00:32:06,910 --> 00:32:11,020
Makikita mo ito biglang lumitaw,
pinaka-malamang sa kaliwang gilid,

716
00:32:11,020 --> 00:32:12,810
at ang tab na ay pa rin bukas.

717
00:32:12,810 --> 00:32:21,300
At hayaan mo akong hinihikayat ka ngayon upang muling likhain
ang file na ito o ang ilang mga variants nito.

718
00:32:21,300 --> 00:32:24,607
At kung hindi mo pa masyadong maaaring makita ito sa
screen, ito ay kapareho ng mga slide

719
00:32:24,607 --> 00:32:26,190
na ikaw ay malamang na magkaroon sa ibang tab.

720
00:32:26,190 --> 00:32:29,296
>> Kaya sa maikling salita, gumawa ng iyong unang web page,
i-save ito, at pagkatapos ay sa loob lamang ng isang sandali,

721
00:32:29,296 --> 00:32:31,170
Kukunin ko maipakita sa iyo kung paano mo
maaaring aktwal na tingnan ito.

722
00:32:31,170 --> 00:32:32,970
Ngunit baguhin hindi bababa sa isang bagay.

723
00:32:32,970 --> 00:32:35,400
Baguhin helloworld sa
isang bagay ng iyong sariling mga pagpipilian,

724
00:32:35,400 --> 00:32:39,821
nang sa gayon ay ikaw ay kumbinsido na ito ay ang iyong
maghain at hindi ang isa ko lang ginawa.

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

726
00:32:40,320 --> 00:32:43,804
At kapag kayo ay ready-- walang
rush-- kapag ikaw ay handa na,

727
00:32:43,804 --> 00:32:46,220
sige, at i-save ang file
isang beses na ginawa ang mga pagbabagong ito.

728
00:32:46,220 --> 00:32:49,540
At kung nag-click ang
Patakbuhin button up tuktok, ito

729
00:32:49,540 --> 00:32:53,610
dapat magbukas ng bagong tab na magsasabi
iyo kung ano ang URL na maaari mong bisitahin ang iyong file sa,

730
00:32:53,610 --> 00:32:56,380
ngunit ito ay maaaring tumagal ng ilang sandali upang
quote magpanipi "simulan Apache," na

731
00:32:56,380 --> 00:32:58,820
ay ang pangalan ng web server.

732
00:32:58,820 --> 00:33:02,430
Kaya mag-ingat upang gawin eksakto
kung ano ang sa file sa huli.

733
00:33:02,430 --> 00:33:04,610
Kaya ngayon, kukunin ko na mag-zoom in.

734
00:33:04,610 --> 00:33:07,780
Kung sisimulan ko ang pag-type
open-bracket HTML, notice

735
00:33:07,780 --> 00:33:09,650
ito ay pagdikta sa akin upang tapusin ang aking pag-iisip.

736
00:33:09,650 --> 00:33:13,750
At kung natapos ko ang aking pag-iisip, ito
awtomatikong nagbibigay sa akin ng closing na tag.

737
00:33:13,750 --> 00:33:17,190
Nguni't ang pagasa ay pagkatapos ay kukunin ko hit
Ipasok, at pagkatapos ay ilipat sa loob doon

738
00:33:17,190 --> 00:33:21,180
at huwag magtungo sa loob at
pagkatapos ay gawin ko katawan sa loob.

739
00:33:21,180 --> 00:33:24,430
At ito ay isang maliit na kakaiba sa una,
dahil sa ito ay paggawa ng trabaho para sa iyo,

740
00:33:24,430 --> 00:33:27,110
ngunit mapagtanto na ganap
ito makakatipid sa iyo keystroke.

741
00:33:27,110 --> 00:33:30,500
At sa katunayan, isang napaka-pangkaraniwang katangian ng
programming kapaligiran mga araw na ito

742
00:33:30,500 --> 00:33:33,260
parehong para sa web development tulad
na ito at aktwal na mga programa,

743
00:33:33,260 --> 00:33:36,960
na kung saan namin makipag-usap tungkol sa bukas,
ay ang mga auto-complete tampok,

744
00:33:36,960 --> 00:33:39,710
bagay na lamang payagan ang isang
programmer o isang taga-disenyo

745
00:33:39,710 --> 00:33:42,010
mag-type ng mas kaunting mga keystroke upang
tuparin ang mga parehong bagay.

746
00:33:42,010 --> 00:33:43,176
Minsan ito ay mabuti, bagaman.

747
00:33:43,176 --> 00:33:44,560
Minsan ito ay lamang nakakainis.

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

749
00:33:49,290 --> 00:33:54,010
At, muli, sa oras na iyong na-transcribe
ang slide o ilang variant nito,

750
00:33:54,010 --> 00:33:57,360
maaari mong i-click ang pindutan ng Run up tuktok.

751
00:33:57,360 --> 00:33:59,910
At pagkatapos ay sa ibaba
window, ipapaalam sa iyo

752
00:33:59,910 --> 00:34:04,290
sa kung ano ang URL na maaari mong bisitahin ang iyong web page.

753
00:34:04,290 --> 00:34:08,790
Mine, halimbawa, ay
business-daharvard.c9users.io

754
00:34:08,790 --> 00:34:11,480
at iba pa.

755
00:34:11,480 --> 00:34:14,580
O sige, kaya, hayaan me-- anumang mga katanungan?

756
00:34:14,580 --> 00:34:19,460
Anumang iba pang mga katanungan tungkol sa lamang sa pagkuha ng
ito gumagana bago namin magdagdag ng mga tampok?

757
00:34:19,460 --> 00:34:21,692
At hayaan mo akong imungkahi, lamang
upang makakuha ng folks comfortable--

758
00:34:21,692 --> 00:34:24,400
dahil sa ito ay isang bagay na lamang
kopya-dikit nang walang taros kung ano ang nagawa ko.

759
00:34:24,400 --> 00:34:27,177
Ngunit lamang upang ang folks makipagbuno
na may hindi bababa sa isang to-do,

760
00:34:27,177 --> 00:34:28,510
Pupunta ako sa i-on ang ilang musika.

761
00:34:28,510 --> 00:34:32,630
Pupunta ako sa ipanukala ang isang listahan ng mga
mga bagay na maaari kang potensyal na idagdag.

762
00:34:32,630 --> 00:34:34,086
At maaari mong tiyak na gamitin ang Google.

763
00:34:34,086 --> 00:34:36,210
At bakit hindi namin lamang
imungkahi na subukan mo upang malutas

764
00:34:36,210 --> 00:34:38,710
hindi bababa sa isang partikular na problema dito.

765
00:34:38,710 --> 00:34:45,090
Kaya sa mga tuntunin ng mga tag,
hayaan mo akong muling gamitin ito dito.

766
00:34:45,090 --> 00:34:48,280
>> Sa totoo lang, hayaan mo akong ilagay
ito sa isang tekstuwal form.

767
00:34:48,280 --> 00:35:02,380
Sabihin natin na kabilang sa mga tags baka namin
gamitin narito ang ilang mga tag sa paglipas dito.

768
00:35:02,380 --> 00:35:06,090
Nakita namin ang talata tag.

769
00:35:06,090 --> 00:35:07,850
Ngayon ito ay pagpunta sa auto-complete.

770
00:35:07,850 --> 00:35:12,220
Talata tag, anchor tag.

771
00:35:12,220 --> 00:35:15,250
Ipagpalagay natin na nais mong
gumawa ng isang bagay na mas malaki,

772
00:35:15,250 --> 00:35:19,480
kaya maaaring ikaw like--
ang span tag ay maaaring makatulong.

773
00:35:19,480 --> 00:35:23,010
Well, maaaring kailangan mo ng ilang tulong
para sa na sa loob lamang ng ilang sandali.

774
00:35:23,010 --> 00:35:24,830
Nakita namin ang div.

775
00:35:24,830 --> 00:35:26,170
Makikita mo ang mayroong table.

776
00:35:26,170 --> 00:35:27,928
May isang bagay na tinatawag 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
Ay bumalik sa na sa isang sandali.

780
00:35:34,770 --> 00:35:36,590
Ano pa ang maaaring maging madaling-magamit?

781
00:35:36,590 --> 00:35:38,310
May strong.

782
00:35:38,310 --> 00:35:43,640
May diin, o sa halip em.

783
00:35:43,640 --> 00:35:50,110
There's-- ano pa
maaaring Fancy mo dito?

784
00:35:50,110 --> 00:35:51,930
Well, kami ay kumuha ng isang
tumingin sa na sama-sama.

785
00:35:51,930 --> 00:35:53,230
Form, na nasaksihan namin.

786
00:35:53,230 --> 00:35:54,130
May form.

787
00:35:54,130 --> 00:35:56,500
May input at ng ilang mga iba.

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

789
00:35:58,924 --> 00:36:00,090
O sige, kaya sabihin gawin ito.

790
00:36:00,090 --> 00:36:02,330
Upang sumagot ng Victoria
tanong, hayaan mo akong unang

791
00:36:02,330 --> 00:36:05,020
siguraduhin na ang lahat ay lamang
magagawang upang makuha ang kanilang kumusta pagtatrabaho.

792
00:36:05,020 --> 00:36:06,900
Pagkatapos hayaan mo akong ipakilala
ng ilang iba pang mga ideya.

793
00:36:06,900 --> 00:36:09,209
Pagkatapos kami ay ipaalam sa folks malutas
ilang mga problema sa kanilang sarili.

794
00:36:09,209 --> 00:36:11,500
Pagkatapos kami ay talagang bumalik
sa na paniwala ng isang form,

795
00:36:11,500 --> 00:36:14,950
at hindi na namin makikita ang tunay na muling ipatupad
magkasama ang front-end interface,

796
00:36:14,950 --> 00:36:16,450
kaya na magsalita, para sa Google mismo.

797
00:36:16,450 --> 00:36:19,700
Gagamitin namin ang Google bilang ang back end at ipaalam
ang mga ito gawin ang mahirap na trabaho, ang searching,

798
00:36:19,700 --> 00:36:22,760
ngunit kami ay muling likhain ang front end
ng Google at ang search form

799
00:36:22,760 --> 00:36:24,520
na mayroon sila sa kanilang sariling home page.

800
00:36:24,520 --> 00:36:27,050
At kaya kami ay bumalik sa
mga tag sa loob lamang ng ilang sandali.

801
00:36:27,050 --> 00:36:30,270
>> Kaya ito ay kung ano ako
iminungkahi ng isang sandali lamang ang nakalipas.

802
00:36:30,270 --> 00:36:33,940
Maaari naming idagdag ang estilisasyon sa isang
pahina sa loob ng mga ito estilo tag,

803
00:36:33,940 --> 00:36:36,950
at maaari naming stylize background
kulay, ang pagkakahanay ng teksto,

804
00:36:36,950 --> 00:36:39,000
maging ito man ay center o pakaliwa o pakanan.

805
00:36:39,000 --> 00:36:41,630
Ngunit masyadong mabilis ng ginagawa mo
mahanap o isang web designer

806
00:36:41,630 --> 00:36:44,060
ay makita na ito
ay nagiging isang maliit na mahirap gamitin,

807
00:36:44,060 --> 00:36:48,330
dahil ikaw ay gumagawa kung ano ang
tinatawag paghahalo nilalaman

808
00:36:48,330 --> 00:36:50,120
sa pagtatanghal hinggil doon.

809
00:36:50,120 --> 00:36:53,756
Ikaw ay paghahalo ng iyong data
at ang aesthetics niyaon.

810
00:36:53,756 --> 00:36:56,380
At sa katunayan, kung isaalang-alang mo
ano ang pagpunta sa mangyayari sa paglipas ng time--

811
00:36:56,380 --> 00:36:58,350
ito ay isang napakaliit na
web page, siyempre.

812
00:36:58,350 --> 00:37:01,590
Ngunit kung ako magdadagdag ng nilalaman sa pahinang ito
at idagdag ko style sa pahinang ito,

813
00:37:01,590 --> 00:37:04,650
pahina nang masyadong mabilis ay makakakuha
mas mahaba at mas mahaba at mas mahaba.

814
00:37:04,650 --> 00:37:07,510
At ipagpalagay na gusto kong
magkaroon ng isang pangalawang pahina ng web na

815
00:37:07,510 --> 00:37:09,010
nagbabahagi ang ilan sa mga katangian.

816
00:37:09,010 --> 00:37:12,350
Ipagpalagay aking ikalawang pahina ng web para sa aking
site-- din, gusto ko lahat ng bagay center,

817
00:37:12,350 --> 00:37:14,960
at ako din gusto lahat ng bagay
may isang kulay berdeng background.

818
00:37:14,960 --> 00:37:17,940
Ako medyo marami pagpunta sa may sa
kopyahin at i-paste ang ilan sa mga linyang ito

819
00:37:17,940 --> 00:37:20,730
sa na pangalawang file, na kung saan nararamdaman fine.

820
00:37:20,730 --> 00:37:22,030
Ito ay malutas ang problema.

821
00:37:22,030 --> 00:37:26,060
>> Ngunit paano kung gusto ko ang isang ikatlong pahina
o isang ika-30 pahina o isang ika-40 na pahina?

822
00:37:26,060 --> 00:37:28,730
Ngayon ako pagpunta sa ay pagkopya at
pag-paste ng isang pulutong ng mga dobleng code

823
00:37:28,730 --> 00:37:30,430
sa iba't-ibang mga file.

824
00:37:30,430 --> 00:37:32,600
At kaya ipagpalagay na
nagpasya akong o ako sinabi,

825
00:37:32,600 --> 00:37:34,780
hey, hindi namin gumagamit ka ng isang
green background anymore.

826
00:37:34,780 --> 00:37:36,380
Kami ay pagpunta upang simulan ang paggamit orange.

827
00:37:36,380 --> 00:37:38,690
Ano ang kailangan mong baguhin?

828
00:37:38,690 --> 00:37:42,900
Well, ikaw ay may upang baguhin na style
mula sa berdeng sa orange sa kung gaano karaming mga lugar?

829
00:37:42,900 --> 00:37:44,920
Tulad ng 30 o 40 mga lugar.

830
00:37:44,920 --> 00:37:45,900
Ito ay nakakapagod.

831
00:37:45,900 --> 00:37:47,039
Ito ay madaling kapitan ng sakit sa error.

832
00:37:47,039 --> 00:37:49,580
Mayroong isang bilang ng mga kadahilanan
kung saan hindi mo nais na nais upang mang-upat

833
00:37:49,580 --> 00:37:51,840
na uri ng sakit para sa iyong sarili.

834
00:37:51,840 --> 00:37:54,760
At kaya hindi magiging maganda
kung maaari naming kumuha ng kung ano ko na lang

835
00:37:54,760 --> 00:37:58,240
ilagay sa pagitan ng dalawang dilaw
mga tag, mga estilo ng mga tag,

836
00:37:58,240 --> 00:38:04,050
kadahilanan ito, at ilagay ang lahat ng aking
estilisasyon sa isa central file

837
00:38:04,050 --> 00:38:08,470
na ang lahat ng 30 o 40 ng aking iba pang mga file
humiram mula sa o sa anumang paraan isangguni,

838
00:38:08,470 --> 00:38:11,640
hindi hindi katulad ng networking
diagram aming ginagawa bago?

839
00:38:11,640 --> 00:38:15,030
>> Kaya kung pumunta ako sa dito, ako
pagpunta sa aktwal na imungkahi

840
00:38:15,030 --> 00:38:17,880
na palitan namin ang
style tag na may isang bagay

841
00:38:17,880 --> 00:38:21,620
na tinatawag na ang link na tag, na kung saan
ay horribly, horribly pinangalanan,

842
00:38:21,620 --> 00:38:24,370
dahil hindi mo na gamitin ang
link tag upang lumikha ng kung ano ang

843
00:38:24,370 --> 00:38:26,380
namin ang mga tao malaman bilang isang link sa isang pahina ng web.

844
00:38:26,380 --> 00:38:29,750
Para sa na, gamitin mo na tag?

845
00:38:29,750 --> 00:38:31,464
Paano mo lumikha ng isang link sa isang pahina ng web?

846
00:38:31,464 --> 00:38:32,130
Madla: a Ang.

847
00:38:32,130 --> 00:38:34,870
David J. MALAN: a-dagat, o anchor
tag, na napunta sa Disney bago.

848
00:38:34,870 --> 00:38:39,090
Ang link tag dito ay sinasabi
this-- link sa isang file na tinatawag na

849
00:38:39,090 --> 00:38:44,350
styles.css, ang relasyon na kung saan ang
ay pagpunta sa maging na ito ay ang aking stylesheet.

850
00:38:44,350 --> 00:38:48,290
Kaya ito ay isa sa mga S sa
CSS-- cascading style sheet.

851
00:38:48,290 --> 00:38:50,490
Style sheet-- dalawa sa S sa CSS.

852
00:38:50,490 --> 00:38:52,550
Cascading style sheet.

853
00:38:52,550 --> 00:38:58,640
Ito lamang ay nangangahulugan, hey, browser, pumunta
mahanap styles.css sa mga lokal na server

854
00:38:58,640 --> 00:39:01,870
at gamitin ito bilang iyong stylesheet,
na nangangahulugan sa loob ng file na

855
00:39:01,870 --> 00:39:05,310
ay pagpunta sa maging ang lahat ng mga
stylizations na lang nagawa namin.

856
00:39:05,310 --> 00:39:07,396
At kaya kung ano ang file na iyon
maaaring magmukhang ay na ito.

857
00:39:07,396 --> 00:39:10,020
At kukunin ko na lang gawin ito ay isang mabilis na
Halimbawa, dahil hindi namin kailangan

858
00:39:10,020 --> 00:39:12,000
upang makakuha ng masyadong maraming sa mga damo dito.

859
00:39:12,000 --> 00:39:17,840
Ngunit kung kopyahin ko ito, kung ano ako pagpapanukala
ay na ang isang programmer lumikha ng isang bagong file,

860
00:39:17,840 --> 00:39:24,450
i-paste sa mga lines--
whoops-- i-paste sa mga linya,

861
00:39:24,450 --> 00:39:32,270
save ito bilang styles.css, at pagkatapos, sa
ang iba pang mga file, tanggalin ang lahat ng na

862
00:39:32,270 --> 00:39:35,450
at palitan ito sa halip
sa link na ito tag.

863
00:39:35,450 --> 00:39:43,090
Kaya na kung i-link ko href = "styles.css",
ang relasyon ay magiging "stylesheet"

864
00:39:43,090 --> 00:39:44,170
malapit na tag.

865
00:39:44,170 --> 00:39:45,250
I-save ito.

866
00:39:45,250 --> 00:39:47,000
Bumalik sa aking helloworld.

867
00:39:47,000 --> 00:39:48,690
Reload.

868
00:39:48,690 --> 00:39:51,290
>> Literal wala ay nangyari.

869
00:39:51,290 --> 00:39:54,710
Iyon ay isang magandang bagay, dahil ito
nangangahulugan na ito ay tunay na ang lahat ng trabaho.

870
00:39:54,710 --> 00:39:58,860
Upang patunayan ng mas maraming, ipagpalagay gumawa ako ng isang
typo, at tawagan ko ito "styles.css"

871
00:39:58,860 --> 00:40:03,080
na may malaking titik S, na kung saan ay
hindi tama, at pagkatapos ay i-reload.

872
00:40:03,080 --> 00:40:05,470
Ngayon ay maaari mong makita ang mga ito lamang ay hindi gumagana.

873
00:40:05,470 --> 00:40:06,362
Ngayon, bakit?

874
00:40:06,362 --> 00:40:08,070
Well, sabihin gumamit ng isang
diskarteng mula sa mas maaga.

875
00:40:08,070 --> 00:40:10,153
Hayaan akong sige at, sa
aking browser, sa Chrome, ako

876
00:40:10,153 --> 00:40:12,900
pagpunta upang buksan up sa espesyal na
tab network tulad ng dati,

877
00:40:12,900 --> 00:40:15,560
at hayaan mo akong i-reload ang pahina.

878
00:40:15,560 --> 00:40:19,341
Ano ang hindi ikaw mabigla upang makita ngayon?

879
00:40:19,341 --> 00:40:20,840
O siguro ikaw ay mabigla upang makita ito.

880
00:40:20,840 --> 00:40:23,225
Alinman sa dalawa, ano ang nakikita mo ngayon?

881
00:40:23,225 --> 00:40:24,100
Madla: [hindi marinig]

882
00:40:24,100 --> 00:40:24,770
David J. MALAN: Ito ay hindi natagpuan.

883
00:40:24,770 --> 00:40:25,680
Bakit hindi ito matatagpuan?

884
00:40:25,680 --> 00:40:28,480
Well, Styles.css-- capital
S-- ay hindi umiiral.

885
00:40:28,480 --> 00:40:29,230
I misnamed ito.

886
00:40:29,230 --> 00:40:30,430
Simple typo.

887
00:40:30,430 --> 00:40:33,816
Ngunit ko natatanggap understandably ngayon ng isang
404, dahil ang server ay sinasabi, hey,

888
00:40:33,816 --> 00:40:34,440
ito ay hindi natagpuan.

889
00:40:34,440 --> 00:40:36,300
Literal, hindi ko alam kung
kung saan ang file na iyon ay.

890
00:40:36,300 --> 00:40:38,880
Kaya bilang isang resulta, ang browser
Ipinapakita sa iyo kung ano ito ay maaaring,

891
00:40:38,880 --> 00:40:42,860
ang raw nilalaman ng pahina,
kung saan ay isang 200, ang HTML,

892
00:40:42,860 --> 00:40:45,390
ngunit ang estilisasyon hindi maaari
idadagdag pagkatapos noon.

893
00:40:45,390 --> 00:40:47,120
At ito ay kung ano ay sinadya sa pamamagitan ng cascading.

894
00:40:47,120 --> 00:40:49,070
Maaari mong uri ng idagdag ito
pagkatapos, at ito uri ng

895
00:40:49,070 --> 00:40:50,874
refines ang aesthetics ng web page.

896
00:40:50,874 --> 00:40:53,790
At maaari ka ring i-override ang mga
estilo na may isa iba pang mga file stylesheet

897
00:40:53,790 --> 00:40:54,700
kung gusto mo.

898
00:40:54,700 --> 00:40:57,780
Ito ay hindi natagpuan, bagaman, sa kasong ito,
dahil siyempre, misnamed ko ito.

899
00:40:57,780 --> 00:41:00,330
Kaya Gusto ko ay may upang ayusin na muna.

900
00:41:00,330 --> 00:41:04,667
>> Kaya sabihin sige at
imungkahi ang mga sumusunod.

901
00:41:04,667 --> 00:41:07,410

902
00:41:07,410 --> 00:41:11,140
Sabihin sige at gawin ito.

903
00:41:11,140 --> 00:41:14,220
Na nagsisimula sa marahil
iyong helloworld file,

904
00:41:14,220 --> 00:41:17,740
ipaalam sa akin lamang mag-imbita ng ilang
ng tampok na mga mungkahi.

905
00:41:17,740 --> 00:41:20,400
Kaya, Victoria, mo nais na
gumawa ng ilang mga teksto ng mas malaki, right?

906
00:41:20,400 --> 00:41:24,555
O sige, upang maaari naming
huwag gumawa ng teksto ng mas malaki.

907
00:41:24,555 --> 00:41:26,860
At makikita natin ang bawat umaagaw sa mga dukha
lamang ng isang problema upang malutas.

908
00:41:26,860 --> 00:41:30,867
Gumawa text mas malaki.

909
00:41:30,867 --> 00:41:32,700
Hindi ako pagpunta sa pag-abala
pagsulat na ito kapag kami

910
00:41:32,700 --> 00:41:35,600
may bullet teknolohiya karapatan sa paglipas dito.

911
00:41:35,600 --> 00:41:39,970
Kaya ang ilang mga problema.

912
00:41:39,970 --> 00:41:44,670
Kaya kami ay pagpunta sa subukan
upang gumawa ng text na mas malaki.

913
00:41:44,670 --> 00:41:45,170
Lahat tama.

914
00:41:45,170 --> 00:41:48,360
Ano pa ang gusto ng isang tao imungkahi?

915
00:41:48,360 --> 00:41:50,332
Ano pa ang maaaring nais naming
na maaaring gawin sa isang web page?

916
00:41:50,332 --> 00:41:52,040
ni magkaroon ng isang Hayaan
maikling listahan ng mga bagay

917
00:41:52,040 --> 00:41:55,366
at pagkatapos delegado sa
grupo upang tayahin ito lumitaw.

918
00:41:55,366 --> 00:41:56,270
>> Madla: [hindi marinig]

919
00:41:56,270 --> 00:42:02,251
>> David J. MALAN: OK, posisyon text
sa iba't ibang panig ng pahina?

920
00:42:02,251 --> 00:42:02,750
Lahat tama.

921
00:42:02,750 --> 00:42:04,620
Iba pa.

922
00:42:04,620 --> 00:42:05,784
>> Madla: [hindi marinig]

923
00:42:05,784 --> 00:42:06,700
David J. MALAN: Ito ay.

924
00:42:06,700 --> 00:42:08,720
Kaya ang isang gif ay lamang ng isang
iba't ibang mga format ng file.

925
00:42:08,720 --> 00:42:12,830
Lang namin na ginamit, kung ano, isang
png o isang jpg marahil?

926
00:42:12,830 --> 00:42:14,480
Ginamit namin ang isang jpg.

927
00:42:14,480 --> 00:42:16,780
Kung ikaw ay kakaiba, ang isang labis na
sagot sa iyong katanungan

928
00:42:16,780 --> 00:42:19,404
ay isang jpg ay karaniwang ginagamit para
litrato, dahil ito ay sumusuporta sa

929
00:42:19,404 --> 00:42:21,500
milyon-milyong mga kulay o 24-bit na kulay.

930
00:42:21,500 --> 00:42:26,930
A gif ay karaniwang ginagamit para sa, tulad ng,
internet memes mga days-- animation,

931
00:42:26,930 --> 00:42:28,810
tulad ng animated gifs.

932
00:42:28,810 --> 00:42:32,320
Ngunit ito ang mangyayari na gumamit ng isang mas maliit na kulay
palette, lamang 256 posibleng mga kulay,

933
00:42:32,320 --> 00:42:35,230
ngunit ito ay sumusuporta
transparency at animation.

934
00:42:35,230 --> 00:42:40,330
At pagkatapos ay mayroong png, na sumusuporta sa
transparency at higit pang mga kulay

935
00:42:40,330 --> 00:42:41,300
ngunit hindi animation.

936
00:42:41,300 --> 00:42:42,133
Kaya ito ay isang kalakalan-off.

937
00:42:42,133 --> 00:42:44,144

938
00:42:44,144 --> 00:42:46,060
Kaya pagdaragdag ng isang gif, bagaman,
ay magiging functionally

939
00:42:46,060 --> 00:42:48,396
katumbas ng pagdagdag ng isang png o isang jpg.

940
00:42:48,396 --> 00:42:49,110
Yeah.

941
00:42:49,110 --> 00:42:50,550
Image pinagmulan katumbas.

942
00:42:50,550 --> 00:42:51,590
Kaya ang isang bagay sino pa ang paririto.

943
00:42:51,590 --> 00:42:57,288
ni magkaroon ng isang bagay hayaan na
na ipinadala namin sa Victoria na gawin dito.

944
00:42:57,288 --> 00:42:59,209
>> Madla: Magdagdag ng mga pindutan para sa isang form.

945
00:42:59,209 --> 00:43:00,000
David J. MALAN: OK.

946
00:43:00,000 --> 00:43:02,179
Kaya magdagdag ng mga pindutan para sa isang form.

947
00:43:02,179 --> 00:43:03,470
At gagawin namin ang isa na magkasama.

948
00:43:03,470 --> 00:43:07,220
Sa gayon ay makikita maging isang perpektong segue
karapatan pagkatapos hamong ito.

949
00:43:07,220 --> 00:43:10,357
Ano pa?

950
00:43:10,357 --> 00:43:11,440
Ano ang maaaring gusto mong gawin?

951
00:43:11,440 --> 00:43:14,040

952
00:43:14,040 --> 00:43:16,516
Ang web na nararamdaman tunay underwhelming
kung ito ay ang lahat ng maaari naming gawin.

953
00:43:16,516 --> 00:43:18,140
Madla: Baguhin ang kulay ng teksto.

954
00:43:18,140 --> 00:43:19,500
David J. MALAN: Baguhin ang ano?

955
00:43:19,500 --> 00:43:20,666
Madla: Kulay ng teksto.

956
00:43:20,666 --> 00:43:22,311
David J. MALAN: Baguhin ang kulay ng teksto.

957
00:43:22,311 --> 00:43:22,810
Lahat tama.

958
00:43:22,810 --> 00:43:23,790
Kaya, sabihin gawin ito.

959
00:43:23,790 --> 00:43:27,209
Just muli kaya na ikaw ay hindi, lamang
sa pamamagitan ng ulit, paggawa ng eksakto kung ano ako ng paggawa,

960
00:43:27,209 --> 00:43:29,500
Pupunta ako sa i-on ang musika
para siguro limang minuto dito.

961
00:43:29,500 --> 00:43:30,450
Ikaw ay malugod na gamitin Google.

962
00:43:30,450 --> 00:43:33,130
tuloy po kayo upang hilingin sa akin, at
Kukunin ko ibulong isang pahiwatig sa iyong tainga.

963
00:43:33,130 --> 00:43:35,171
tuloy po kayo upang tumingin
higit sa ibang mga balikat.

964
00:43:35,171 --> 00:43:37,340
Ngunit malutas lamang ang isa sa mga problemang ito.

965
00:43:37,340 --> 00:43:40,190
Ngunit kami ay gawin ang huling isa, ang
bumubuo ng isa, kung magagawa namin, sama-sama.

966
00:43:40,190 --> 00:43:42,790
Kaya limang minuto upang malutas
anumang isa sa mga problema

967
00:43:42,790 --> 00:43:46,780
gamit ang Google, intuwisyon, o anumang
iba pang paraan na magagamit mo.

968
00:43:46,780 --> 00:43:48,630
>> [MUSIC nagpe-play]

969
00:43:48,630 --> 00:43:49,130
Lahat tama.

970
00:43:49,130 --> 00:43:50,838
Huwag mag-alala kung nais mong
upang panatilihin tinkering,

971
00:43:50,838 --> 00:43:53,880
ngunit Kukunin ko palayawin isang pares
ng mga sagot.

972
00:43:53,880 --> 00:43:57,986
Kaya ang unang mungkahi mula
Victoria ay upang gumawa ng text na mas malaki.

973
00:43:57,986 --> 00:43:59,360
Kaya mayroong ilang mga paraan upang gawin ito.

974
00:43:59,360 --> 00:44:01,530
kasalukuyan ko na naibalik
aking screen sa ito laki,

975
00:44:01,530 --> 00:44:04,310
bagaman ko na naka-zoom in
artificially lamang upang makita ang mga bagay.

976
00:44:04,310 --> 00:44:07,470
At sabihin gawin ito.

977
00:44:07,470 --> 00:44:11,380
Hayaan akong sige at grab
ang ilang mga pangkaraniwang text Latin

978
00:44:11,380 --> 00:44:19,540
lamang kaya mayroon kaming isang bagay na magtrabaho sa.

979
00:44:19,540 --> 00:44:20,715
Kaya bigyan ako ng isa lang sandali.

980
00:44:20,715 --> 00:44:21,840
Magtatagal ako gumawa ng tatlong talata.

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
Ito ay magiging isang mas mahusay na halimbawa.

984
00:44:55,560 --> 00:44:57,840
Kaya para sa curious, sa
aking hello.html, ako lang

985
00:44:57,840 --> 00:45:01,645
ilagay tatlong walang saysay
Latin talata

986
00:45:01,645 --> 00:45:03,270
lamang kaya kami ay may ilang mga teksto upang gumana sa.

987
00:45:03,270 --> 00:45:06,720
At ni Victoria layunin ay upang
gumawa ng ilang ng ang teksto ng mas malaki.

988
00:45:06,720 --> 00:45:09,879
Kaya ko maaaring, tulad ng dati, pumunta sa dito.

989
00:45:09,879 --> 00:45:11,170
At hayaan mo akong gawin ito sa tamang paraan.

990
00:45:11,170 --> 00:45:13,253
Ako pagpunta sa magkaroon ng isang link
tag na ang mga puntos sa isang file

991
00:45:13,253 --> 00:45:20,560
tinatawag na "styles.css," ang relasyon
ng kung saan ay muli "stylesheet."

992
00:45:20,560 --> 00:45:25,221
At pagkatapos ay ako pagpunta sa i-save na
at buksan up na ito "styles.css."

993
00:45:25,221 --> 00:45:28,940
>> Kaya, tulad ng dati, ako ang
kakayahan sa ito CSS file

994
00:45:28,940 --> 00:45:31,569
upang aktwal na i-override ang default
aesthetics ng isang web page,

995
00:45:31,569 --> 00:45:33,860
at ang default na aesthetics,
siyempre, ay medyo mapurol.

996
00:45:33,860 --> 00:45:36,943
Ito ay uri ng normal na laki ng font, itim
text, puting background, at iba pa.

997
00:45:36,943 --> 00:45:39,440
Kaya ipagpalagay Gusto kong gumawa ng
lahat ng tekstong ito na mas malaki.

998
00:45:39,440 --> 00:45:40,460
kaya kong gawin ang ilang mga bagay.

999
00:45:40,460 --> 00:45:43,750
Sa aking styles.css file, ako
baka iyong sabihin, alam mo kung ano,

1000
00:45:43,750 --> 00:45:46,950
mag-aplay ang mga sumusunod sa
ang katawan ng aking pahina.

1001
00:45:46,950 --> 00:45:51,390
Sige at gumawa ng mga
laki ng font 24 points,

1002
00:45:51,390 --> 00:45:54,130
na kung saan ay isang bilang baka ako
gamitin sa Microsoft Word.

1003
00:45:54,130 --> 00:45:57,620
Hayaan akong bumalik sa aking web
pahina dito at i-reload,

1004
00:45:57,620 --> 00:45:59,640
at maaari mong makita na
ito ay mayroon magkano ang mas malaking.

1005
00:45:59,640 --> 00:46:02,223
At maaari naming makakuha ng isang maliit na mabaliw,
tulad ng aming makakaya sa isang desktop--

1006
00:46:02,223 --> 00:46:03,670
gawin itong 96 puntos.

1007
00:46:03,670 --> 00:46:04,950
Reload.

1008
00:46:04,950 --> 00:46:07,610
At ito ay nakakakuha ng kaunti
mahirap gamitin sa puntong ito.

1009
00:46:07,610 --> 00:46:09,500
>> Ngunit maaari kong maging isang maliit na mas tiyak.

1010
00:46:09,500 --> 00:46:14,530
Sa halip na nag-aaplay na ito
stylesheet sa katawan ng aking pahina,

1011
00:46:14,530 --> 00:46:21,740
ano pa ang maaaring kong ilapat ito sa halip,
ano ang iba pang tag na maaaring pa rin

1012
00:46:21,740 --> 00:46:25,445
function sa parehong paraan?

1013
00:46:25,445 --> 00:46:26,444
>> Madla: Ang p tag?

1014
00:46:26,444 --> 00:46:27,360
David J. MALAN: P tag.

1015
00:46:27,360 --> 00:46:29,350
Kaya ang ulo ay hindi magiging
tama, dahil ang ulo,

1016
00:46:29,350 --> 00:46:31,300
hindi mo magagawa talaga
kontrolin ang aesthetics ng.

1017
00:46:31,300 --> 00:46:32,700
May mag-text doon o hindi.

1018
00:46:32,700 --> 00:46:36,760
Ngunit ang p tag-- maaari kong sumisid sa isang maliit na
mas malalim, kaya na magsalita, sa talata

1019
00:46:36,760 --> 00:46:37,350
mga tag.

1020
00:46:37,350 --> 00:46:41,600
At kahit na may tatlong,
na ay ganap na ganap pagmultahin, dahil sa CSS,

1021
00:46:41,600 --> 00:46:44,900
kapag ko lang sabihin "p," ito
nangangahulugan ilapat ang sumusunod na

1022
00:46:44,900 --> 00:46:48,300
sa anumang tag na tumutugma ito
selector, ang selector lamang

1023
00:46:48,300 --> 00:46:49,430
pagiging ang pangalan ng tag.

1024
00:46:49,430 --> 00:46:52,350
Kaya kahit saan nakikita mo ang isang
"P," mag-aplay ang laki ng font,

1025
00:46:52,350 --> 00:46:55,222
at sabihin gawin itong mas
makatwirang again-- 24 point.

1026
00:46:55,222 --> 00:46:56,930
At alam mo kung ano,
lamang para sa mabuting pamamaraan,

1027
00:46:56,930 --> 00:46:59,810
sabihin gawin ang mga kulay
red lamang para sa sandaling ito.

1028
00:46:59,810 --> 00:47:03,740
At ngayon, kung i-reload ko, ngayon kami
makita ang tatlong pangit talata.

1029
00:47:03,740 --> 00:47:07,180
>> Ngunit ngayon ipagpalagay na ako uri
of-- gusto ko ang unang talata

1030
00:47:07,180 --> 00:47:08,210
upang tumalon out sa user.

1031
00:47:08,210 --> 00:47:11,150
Hindi ko nais upang madagdagan lamang
ang laki ng font ng lahat.

1032
00:47:11,150 --> 00:47:16,105
At kaya ko talagang nais na makilala o
makilala sa mga ito talata.

1033
00:47:16,105 --> 00:47:18,730
Kaya sabihin makakuha ng alisan ng pula,
dahil iyon lang ang uri ng kaakit-akit,

1034
00:47:18,730 --> 00:47:23,885
at sabihin sige at gawin ang mga
laki ng font 12-point sa pamamagitan ng default,

1035
00:47:23,885 --> 00:47:26,260
nang sa gayon ay hindi namin pabalik sa isang bagay
isang maliit na mas makatwirang.

1036
00:47:26,260 --> 00:47:29,190
At ngayon ako lamang ang nais na dagdagan ang
laki ng font ng unang talata.

1037
00:47:29,190 --> 00:47:31,440
maaari kong gawin ito sa loob ng ilang
paraan, ngunit isang paraan na

1038
00:47:31,440 --> 00:47:37,180
marahil pinaka-edukasyonal sa
sandaling ito ay upang gawin ang mga sumusunod.

1039
00:47:37,180 --> 00:47:43,280
Hayaan akong sige at sabihin, ito
talata ay may isang natatanging ID ng "unang."

1040
00:47:43,280 --> 00:47:45,000
kaya kong itawag sa kahit ano ang gusto ko.

1041
00:47:45,000 --> 00:47:46,874
kaya kong itawag sa "foo"
o anumang iba pang mga salita,

1042
00:47:46,874 --> 00:47:49,290
ngunit ako pagpunta sa bigyan ito ng ilang
semantically makabuluhang pangalan

1043
00:47:49,290 --> 00:47:50,320
tulad ng "unang."

1044
00:47:50,320 --> 00:47:54,790
Ito ang natatanging identifier,
ang ID, para sa aking unang talata.

1045
00:47:54,790 --> 00:47:59,360
>> Ano ang maaari kong gawin ngayon sa aking stylesheet
ay maging isang maliit na mas tiyak.

1046
00:47:59,360 --> 00:48:02,330
Sa halip na sabihing, ilapat
ang mga sumusunod sa p tag,

1047
00:48:02,330 --> 00:48:04,890
maaari kong sabihin ang following--
mag-aplay ang mga sumusunod,

1048
00:48:04,890 --> 00:48:11,000
o piliin, ang HTML element
na may isang natatanging ID ng "unang."

1049
00:48:11,000 --> 00:48:12,350
Ano ang gusto kong mag-apply sa mga ito?

1050
00:48:12,350 --> 00:48:15,250
A laki ng font ng 24-point.

1051
00:48:15,250 --> 00:48:16,640
Kaya Mayroon akong dalawang tagapili ngayon.

1052
00:48:16,640 --> 00:48:19,690
Ang isa ay gumagawa ng lahat ng mga
talata 12-point.

1053
00:48:19,690 --> 00:48:24,960
Ngunit ang isang ito, lalo na dahil ito ay dumating
second-- pagdating huling sa file--

1054
00:48:24,960 --> 00:48:27,090
ito ay may isang cascading epekto.

1055
00:48:27,090 --> 00:48:30,200
Lamang ko na ginawa ang lahat ng aking
tag talata 12-point,

1056
00:48:30,200 --> 00:48:34,350
ngunit ito ngayon cascades at
Ino-override na para sa anumang mga elemento

1057
00:48:34,350 --> 00:48:38,800
sa pahina, ang anumang mga tag na ito sa pahina na kung saan ang
natatanging ID ay quote magpanipi "unang."

1058
00:48:38,800 --> 00:48:41,720
At ang hashtag sa kontekstong
lamang ay nangangahulugan "natatanging identifier."

1059
00:48:41,720 --> 00:48:43,750
Hindi ko ilagay ito sa HTML file.

1060
00:48:43,750 --> 00:48:46,880
Ko, sa paglipas dito, sabihin lang
quote magpanipi "unang."

1061
00:48:46,880 --> 00:48:48,470
>> Kaya hayaan mo akong i-reload.

1062
00:48:48,470 --> 00:48:49,919
At ngayon nakikita ko, ah, OK.

1063
00:48:49,919 --> 00:48:51,710
Ibig kong sabihin, ito ay hindi na
pretty, ngunit ito ay uri

1064
00:48:51,710 --> 00:48:53,600
ng tulad ng paunang salita sa isang
libro o isang bagay tulad na,

1065
00:48:53,600 --> 00:48:55,100
kung saan ang unang talata ay mas malaki.

1066
00:48:55,100 --> 00:48:57,933
Puwede maging kahit na mas tumpak na may
lamang ang unang titik, ngunit hindi bababa sa

1067
00:48:57,933 --> 00:48:59,110
I exercised na karagdagang kontrol.

1068
00:48:59,110 --> 00:49:04,760
Ngayon maybe-- baka gusto kong gawin ito
paminsan-minsan para sa anumang dahilan,

1069
00:49:04,760 --> 00:49:09,010
at kaya hindi ko nais ito sa
mag-apply sa isa lamang HTML tag.

1070
00:49:09,010 --> 00:49:15,110
Sa halip, sabihin say-- sabihin
ring gawin ang mga sumusunod.

1071
00:49:15,110 --> 00:49:18,810
Class = "import."

1072
00:49:18,810 --> 00:49:23,970
Sapagkat ang isang ID ay ginagamit upang katangi-tangi
makilala ang isang bagay, isang tag,

1073
00:49:23,970 --> 00:49:30,190
sa iyong web page, isang klase ay sinadya upang maging
magamit sa anumang bilang ng mga elemento o mga tag

1074
00:49:30,190 --> 00:49:30,950
sa iyong web page.

1075
00:49:30,950 --> 00:49:31,710
Kaya ito ay magagamit muli.

1076
00:49:31,710 --> 00:49:33,090
Isang ID ay hindi magagamit muli.

1077
00:49:33,090 --> 00:49:34,450
Ang isang klase ay magagamit muli.

1078
00:49:34,450 --> 00:49:37,830
>> At alam mo kung ano, para sa anumang
philosophical reasons--

1079
00:49:37,830 --> 00:49:40,180
Hindi ko tapusin ang aking
Akala ko na pagpunta sa sabihin

1080
00:49:40,180 --> 00:49:44,300
na ang unang talata at ang
pangalawang talata ay mahalaga.

1081
00:49:44,300 --> 00:49:48,600
Kaya ako ng pagpunta upang ilapat ang klase na tinatawag na
"Mahalaga," na, kung-save ang aking file

1082
00:49:48,600 --> 00:49:51,510
at i-reload, ay walang
functional epekto pa.

1083
00:49:51,510 --> 00:49:53,780
Ngunit ako ay nagdagdag ng ilang mga
metadata sa file,

1084
00:49:53,780 --> 00:49:56,610
uri ng isang bagay na hiwalay
mula sa mga core data ng file,

1085
00:49:56,610 --> 00:50:02,300
kaya na ngayon sa aking stylesheet, kung ako
sa halip sabihin ".important" - alam mo,

1086
00:50:02,300 --> 00:50:07,110
anumang bagay na mahalaga, ako
pagpunta sa gumawa ng font-kulay, red--

1087
00:50:07,110 --> 00:50:09,930
o sa halip hindi font-kulay, lamang ang kulay.

1088
00:50:09,930 --> 00:50:12,930
Mayroong inconsistencies
sa CSS kasamaang-palad.

1089
00:50:12,930 --> 00:50:14,120
At i-reload.

1090
00:50:14,120 --> 00:50:17,640
Ngayon pansinin ang unang
dalawang talata ay pula

1091
00:50:17,640 --> 00:50:20,880
ngunit hindi ang third, dahil ako lamang
inilapat ang klase ng "mahalaga"

1092
00:50:20,880 --> 00:50:25,020
sa unang dalawang ng mga bagay na ito.

1093
00:50:25,020 --> 00:50:28,030
>> Kaya sa mga ID, ikaw ay may kakayahan
upang tukuyin very tumpak.

1094
00:50:28,030 --> 00:50:30,110
Sa mga klase, mayroon kang reusability.

1095
00:50:30,110 --> 00:50:33,800
Ngunit sa parehong mga kaso, pansinin ang
uri ng magandang-disenyo prinsipyo

1096
00:50:33,800 --> 00:50:39,072
kung saan ako isinasali ang lahat ng mga
aesthetics sa aking styles.css file.

1097
00:50:39,072 --> 00:50:40,280
Kaya walang messiness dito.

1098
00:50:40,280 --> 00:50:44,490
Walang pagbanggit ng pula o
bold nakaharap o laki ng font sa file na ito.

1099
00:50:44,490 --> 00:50:49,430
Sa halip mayroon akong semantically,
may nailalarawan aking data bilang,

1100
00:50:49,430 --> 00:50:51,240
dito ay ang ilang mahalagang data.

1101
00:50:51,240 --> 00:50:52,800
Narito ang ilang higit pang mga mahalagang data.

1102
00:50:52,800 --> 00:50:56,500
Bukod dito, dito ay ang
"First" ng aking mga mahalagang data.

1103
00:50:56,500 --> 00:51:01,050
Kaya HTML ay tungkol sa uri
ng pag-tag, literal, mga salita

1104
00:51:01,050 --> 00:51:05,270
at mga talata at constructs sa iyong
pahina na may mga maliit na mga pahiwatig, kung ikaw

1105
00:51:05,270 --> 00:51:07,640
ay, na maaari mong
paanuman pagkilos gamit

1106
00:51:07,640 --> 00:51:10,880
iba pang mga pamamaraan tulad ng CSS sa ganitong paraan.

1107
00:51:10,880 --> 00:51:14,760
>> Kaya sa sagot sa tanong na ni Victoria,
maaari naming gumawa ng text na mas malaki sa na paraan.

1108
00:51:14,760 --> 00:51:18,380
May mga kaya maraming iba pang mga paraan, ngunit
ang font tag-- bukas bracket "font" -

1109
00:51:18,380 --> 00:51:19,770
ay talagang ilang taong gulang.

1110
00:51:19,770 --> 00:51:21,410
At ito ay ang problema,
masyadong, na may pag-asa lamang

1111
00:51:21,410 --> 00:51:23,485
sa online resources--
malamang sila na maging lipas na sa panahon.

1112
00:51:23,485 --> 00:51:26,110
At sa katunayan, na na hindi na ginagamit,
dahil ang mundo natanto,

1113
00:51:26,110 --> 00:51:28,970
ano ibig sabihin ng "font-size = 7" ibig sabihin nito?

1114
00:51:28,970 --> 00:51:29,670
Ito ay hindi.

1115
00:51:29,670 --> 00:51:32,770
At kaya para sa maraming taon at upang
ito day-- isa sa mga side

1116
00:51:32,770 --> 00:51:36,060
tala dito ay na ito ay talagang
incredibly masakit pa rin minsan

1117
00:51:36,060 --> 00:51:38,900
upang bumuo ng mga site para sa
web, dahil Microsoft

1118
00:51:38,900 --> 00:51:44,220
at ng Google at Mozilla at
iba ay kalimitang hindi nagkakasundo sa kung paano

1119
00:51:44,220 --> 00:51:47,480
sa kahulugan ng isang pagtutukoy tulad ng HTML.

1120
00:51:47,480 --> 00:51:52,490
>> May isang rulebook para sa HTML na
pangkalahatan sinasabi kung ano ibig sabihin ng bawat tag.

1121
00:51:52,490 --> 00:51:55,690
Ngunit minsan ito ay kaliwa upang ang
pagpapasya ng pagpapatupad,

1122
00:51:55,690 --> 00:51:57,290
Microsoft pagpapasya at Google.

1123
00:51:57,290 --> 00:52:00,000
At kaya makikita mo napakadalas
makita sa isang website ng isang bagay

1124
00:52:00,000 --> 00:52:04,954
asta naiiba sa isang PC
kaysa ginagawa nito sa isang Mac,

1125
00:52:04,954 --> 00:52:06,995
at iyon talaga dahil,
sa pagtatapos ng araw,

1126
00:52:06,995 --> 00:52:08,891
hindi nila subukan ito
mahusay sa parehong mga platform.

1127
00:52:08,891 --> 00:52:11,390
Ngunit ito ay din dahil makatwirang,
matalino na mga tao ay hindi sumasang-ayon

1128
00:52:11,390 --> 00:52:14,970
at mga kumpanya ay hindi sumasang-ayon, at iba pa
isa sa mga hamon ng programming

1129
00:52:14,970 --> 00:52:16,980
para sa web o pagdidisenyo
bagay para sa web

1130
00:52:16,980 --> 00:52:21,700
ay sumusulat ng iyong website sa isang paraan
na gumagana sa bawat web browser.

1131
00:52:21,700 --> 00:52:23,410
Ngunit kahit na hindi makatwiran, right?

1132
00:52:23,410 --> 00:52:27,807
May mga kaya maraming mga bersyon ng mga kaya maraming
browser out doon na, sa isang punto,

1133
00:52:27,807 --> 00:52:30,890
ikaw ay mayroon din na gumawa ng isang paghatol na tawag
at ikaw ay may upang magpasya bilang isang kumpanya,

1134
00:52:30,890 --> 00:52:33,082
lalo na para sa e-commerce-style
site kung saan ikaw ay

1135
00:52:33,082 --> 00:52:36,290
sinusubukan mong gamitin ang pinakabagong at pinakadakilang
teknolohiya upang magbigay ng isang tunay na magandang user

1136
00:52:36,290 --> 00:52:37,110
karanasan.

1137
00:52:37,110 --> 00:52:41,019
Ngunit ang ilang mga porsyento ng iyong mga gumagamit maaaring
pa rin gamit ang Internet Explorer 6 o 7

1138
00:52:41,019 --> 00:52:43,810
o 8, lalo na depende sa
bansang iyon sila nagmumula.

1139
00:52:43,810 --> 00:52:46,760
>> At kaya napaka-karaniwang
konsulta ay isang bagay

1140
00:52:46,760 --> 00:52:50,920
tulad ng "mga istatistika ng web browser."

1141
00:52:50,920 --> 00:52:56,560
At kung pumunta kami to-- sabihin makita Wikipedia
at makita kung paano up-to-date ang tsart na ito ay

1142
00:52:56,560 --> 00:52:59,320
kung diyan ay isa.

1143
00:52:59,320 --> 00:53:02,420
Kaya dito maaari mong makita
kung saan browser talagang

1144
00:53:02,420 --> 00:53:06,160
ay, ayon sa Disyembre 2015,
ayon sa US Government.

1145
00:53:06,160 --> 00:53:11,170
Chrome ay 42% market share, na sinusundan
sa pamamagitan ng IE sa kalakhan sa corporate setting

1146
00:53:11,170 --> 00:53:14,490
o mga setting ng PC, siyempre,
sinundan sa pamamagitan ng Firefox,

1147
00:53:14,490 --> 00:53:17,440
pagkatapos Safari, pagkatapos Opera ay hindi
gawin ang mga mapa dito para sa ilang mga dahilan,

1148
00:53:17,440 --> 00:53:18,210
at pagkatapos ay iba.

1149
00:53:18,210 --> 00:53:19,500
Siguro ito ay sa ilalim ng Iba.

1150
00:53:19,500 --> 00:53:27,700
Ngunit mas may problemang kaysa is--
sabihin makita kung Wikipedia din itong

1151
00:53:27,700 --> 00:53:35,194
mga bersyon ng mga browser version--

1152
00:53:35,194 --> 00:53:36,160

1153
00:53:36,160 --> 00:53:39,190
>> Natin pumunta sa mga istatistika browser.

1154
00:53:39,190 --> 00:53:40,680
IE.

1155
00:53:40,680 --> 00:53:42,030
Kahit na hindi sapat.

1156
00:53:42,030 --> 00:53:44,854
istatistika Browser.

1157
00:53:44,854 --> 00:53:45,353
Aking bersyon.

1158
00:53:45,353 --> 00:53:48,980

1159
00:53:48,980 --> 00:53:50,540
Iyan ay hindi pagpunta sa maging tama.

1160
00:53:50,540 --> 00:53:53,414
makita ang mga bersyon Hayaan.

1161
00:53:53,414 --> 00:53:54,830
Browser market share.

1162
00:53:54,830 --> 00:53:57,110
Tingnan natin kung ito ay dumating up Hayaan.

1163
00:53:57,110 --> 00:53:57,610
OK.

1164
00:53:57,610 --> 00:54:00,010
Ngayon na ito ay nakakakuha ng
isang maliit na mas kapaki-pakinabang.

1165
00:54:00,010 --> 00:54:04,870
Kaya dito, mapapansin na mayroon kaming lahat
iba't ibang mga bersyon ng mga browser.

1166
00:54:04,870 --> 00:54:09,887
At, ang aking diyos, kung look-- mo ang Chrome
48, Chrome 47, Chrome 31, Chrome 45.

1167
00:54:09,887 --> 00:54:12,970
Ibig kong sabihin, mga browser unting ina-update,
at kung minsan ang ilan sa mga pagbabagong iyon

1168
00:54:12,970 --> 00:54:16,430
ay makabuluhang sa
mga tuntunin ng pag-andar.

1169
00:54:16,430 --> 00:54:20,630
At kaya sa ilang mga punto, ang
managers produkto o ang mga inhinyero

1170
00:54:20,630 --> 00:54:23,620
kailangan upang makagawa ng isang decision-- mo
alam kung ano, lamang ng 1% ng mundo

1171
00:54:23,620 --> 00:54:24,740
ay pa rin gamit IE 7.

1172
00:54:24,740 --> 00:54:25,490
Upang impiyerno na may ito.

1173
00:54:25,490 --> 00:54:27,470
Lamang kami hindi pagpunta sa
suporta na browser.

1174
00:54:27,470 --> 00:54:28,740
At kung ano ang ibig sabihin na hindi sinusuportahan?

1175
00:54:28,740 --> 00:54:31,170
Ito ay maaaring nangangahulugan na pindutan
ay hindi gumagana sa iyong web page,

1176
00:54:31,170 --> 00:54:33,050
o maaari itong ibig sabihin ng
format ay ganap na off.

1177
00:54:33,050 --> 00:54:35,091
O baka kailangan mong gumawa ng
na parehong tawag paghatol

1178
00:54:35,091 --> 00:54:39,089
sa mobile mga araw na ito, kung saan, hindi namin
hindi pagpunta upang suportahan ang iOS 5 anymore.

1179
00:54:39,089 --> 00:54:40,380
Kaya mga tao na lang ay upang i-upgrade ang.

1180
00:54:40,380 --> 00:54:45,850
O kaya hindi kami ay pagpunta upang suportahan Cupcake
sa Android OS para sa mga Android device,

1181
00:54:45,850 --> 00:54:48,629
dahil bilang ang world-- bilang ang
tech mundo ay nais na sumulong,

1182
00:54:48,629 --> 00:54:51,170
ito uri ng ay nais na i-drag ang
mundo na may ito upang hindi sila

1183
00:54:51,170 --> 00:54:53,295
kung patuloy na maging
backwards compatible kaya sila

1184
00:54:53,295 --> 00:54:54,920
maaaring mag-alok ng bago at mahusay na mga tampok.

1185
00:54:54,920 --> 00:54:57,878
Ito ay sa katunayan isa sa mga dahilan
bakit kaya maraming mga kumpanya ay lumiligid out

1186
00:54:57,878 --> 00:55:01,440
awtomatikong pag-update at pag-uuri ng pagpilit
ang pinakabagong bersyon ng software sa amin.

1187
00:55:01,440 --> 00:55:04,010
At kahit na mga kompanya ng
tulad ng Apple ay ayusin ng

1188
00:55:04,010 --> 00:55:07,280
pilitin mong halos o pilitin
iyo sa mga tuntunin ng mga pwersa ng merkado

1189
00:55:07,280 --> 00:55:11,164
upang bumili ng isang bagong telepono dahil sila lamang
Hindi maa-update ang iyong lumang telepono anymore.

1190
00:55:11,164 --> 00:55:13,330
Kaya miss ka out sa
pinakabago at pinakamahusay na mga tampok,

1191
00:55:13,330 --> 00:55:17,520
dahil ito ay magastos sa mga ito bilang isang
kumpanya upang mapanatili ang mas matanda, arguably

1192
00:55:17,520 --> 00:55:19,330
bulok na bersyon ng software.

1193
00:55:19,330 --> 00:55:23,660
Ngunit ang net effect ay na
amin namang binabata ito pati na rin.

1194
00:55:23,660 --> 00:55:26,550
>> Kaya ipaalam sa tumagal ng isang pagtingin sa lamang
isang pares ng mga huling mga bagay dito.

1195
00:55:26,550 --> 00:55:29,740
ni magpatumba real mabilis ang ilan sa Hayaan
mga iba pang mga bullets, kung curious.

1196
00:55:29,740 --> 00:55:33,440
Kaya't kung ikaw ay sinusubukan upang,
halimbawa, posisyon

1197
00:55:33,440 --> 00:55:36,420
ang teksto sa iba't ibang panig ng
page, ako pagpunta sa gawin ang isa mabilis na paraan,

1198
00:55:36,420 --> 00:55:38,360
ngunit mayroong iba't ibang
paraan ng paggawa nito.

1199
00:55:38,360 --> 00:55:42,610
Hayaan akong sige at eliminate--
gawing simple ito tulad ng sumusunod.

1200
00:55:42,610 --> 00:55:45,330
Hayaan akong pumunta lamang pabalik sa aking
simple, simple talata.

1201
00:55:45,330 --> 00:55:47,760
Hayaan akong bumalik sa aking styles.css.

1202
00:55:47,760 --> 00:55:51,040
At ako lamang ang pagpunta sa gamitin ang simple--
na maaaring nakakita ka sa Google

1203
00:55:51,040 --> 00:55:54,430
o isipin ang mula earlier--
text-align ng tama.

1204
00:55:54,430 --> 00:55:56,220
At i-reload ang pahinang ito.

1205
00:55:56,220 --> 00:55:58,470
Ngayon ang lahat ay tila
na maging right-nakahanay,

1206
00:55:58,470 --> 00:56:00,770
bilang maaari mong makita sa overhead dito.

1207
00:56:00,770 --> 00:56:04,470
>> Maaari naming gawin itong tumingin ng kaunti pa
libro-like, at maaari naming sabihin ang "pawalang-sala"

1208
00:56:04,470 --> 00:56:05,640
at i-reload.

1209
00:56:05,640 --> 00:56:09,870
Ngayon ay maganda at square sa magkabilang
panig, na kung saan ay uri ng nice.

1210
00:56:09,870 --> 00:56:12,220
Ang isa pang layunin na nagkaroon kami dito
ay baguhin ang kulay ng teksto.

1211
00:56:12,220 --> 00:56:13,650
Kaya nakita natin na sa aking red text.

1212
00:56:13,650 --> 00:56:15,630
At ngayon magdagdag ng mga pindutan para sa isang form.

1213
00:56:15,630 --> 00:56:19,390
Kaya bakit hindi namin subukan na gawin eksakto na ito?

1214
00:56:19,390 --> 00:56:23,656
Ngunit unang hayaan mo akong pumunta sa isang site na
karamihan sa atin gamitin ang bawat day-- Google.

1215
00:56:23,656 --> 00:56:25,780
At ipaalam sa tumagal ng isang pagtingin sa
kung paano ang Google ay talagang gumagana.

1216
00:56:25,780 --> 00:56:26,821
Ngunit ako pagpunta sa gawin ito.

1217
00:56:26,821 --> 00:56:31,930
Unang hayaan mo akong gawin ito in-- yep,
hayaan mo akong pumunta sa Google sa unang.

1218
00:56:31,930 --> 00:56:34,530
Ako pagpunta sa may sa pumunta
sa Mga Setting ng Google,

1219
00:56:34,530 --> 00:56:40,660
dahil gusto kong i-disable
isang bagay na tinatawag Instant Resulta.

1220
00:56:40,660 --> 00:56:43,580
>> Kaya maaari mong napansin sa
Google mga days-- hayaan mo akong bumalik

1221
00:56:43,580 --> 00:56:44,850
at i-on ito sa.

1222
00:56:44,850 --> 00:56:47,900
Kaya kung sisimulan ko na naghahanap
para sa "cats" tulad nito,

1223
00:56:47,900 --> 00:56:50,120
mapansin na hindi lamang gawin
nakukuha ko auto-makumpleto up

1224
00:56:50,120 --> 00:56:54,520
top, ang lahat ng isang biglaang, ang pahina mismo
tila upang baguhin medyo mabilis pati na rin,

1225
00:56:54,520 --> 00:56:58,750
at iyon ang Google gamit ang isang wika
tinatawag JavaScript sinusubukan na maging helpful.

1226
00:56:58,750 --> 00:57:01,540
Ngunit sa kasamaang palad, ito uri
ng messes up ang aming discussion

1227
00:57:01,540 --> 00:57:04,010
ng kung ano ang tunay na nangyayari
sa ilalim ng hood dito.

1228
00:57:04,010 --> 00:57:09,070
Kaya ako lang ang uri ng mabilis
i-off instant resulta.

1229
00:57:09,070 --> 00:57:11,510
At ako pagpunta sa i-click ang I-save.

1230
00:57:11,510 --> 00:57:13,930
At ngayon ako pagpunta upang buksan
na diagnostic toolbar na ako

1231
00:57:13,930 --> 00:57:16,150
panatilihin ang pagbubukas sa ilalim ng tab na Network.

1232
00:57:16,150 --> 00:57:17,720
Kaya sabihin gawin ito.

1233
00:57:17,720 --> 00:57:21,960
Hayaan me-- whoops--
mag-scroll ito pababa sa isang bit.

1234
00:57:21,960 --> 00:57:24,410
At hayaan mo akong maghanap para sa "cats."

1235
00:57:24,410 --> 00:57:26,790
>> At ngayon notice-- talaga,
ito ay isang magandang pagkakataon

1236
00:57:26,790 --> 00:57:28,840
upang talakayin sa sangdali lamang.

1237
00:57:28,840 --> 00:57:32,460
Pansinin ang sandali type-- ko ihinto ito.

1238
00:57:32,460 --> 00:57:35,250
Itigil mo yan.

1239
00:57:35,250 --> 00:57:35,790
OK.

1240
00:57:35,790 --> 00:57:40,870
Pansinin ang sandali-type ko ang sulat
C, panoorin ang ibaba ng screen.

1241
00:57:40,870 --> 00:57:48,600
A- T- S. Ano ang bottom
ng screen na ito, ang aking tab Network,

1242
00:57:48,600 --> 00:57:53,320
iminumungkahi ang nangyayari sa bawat
oras na ako mag-type ng sulat?

1243
00:57:53,320 --> 00:57:57,700
Sa kasamaang palad, ang palaka ay napaka
distracting ngayon o ang halaman ng semrok

1244
00:57:57,700 --> 00:58:00,339
o ano pa man siya ay.

1245
00:58:00,339 --> 00:58:01,880
Ano ang nangyayari sa bawat oras na ako nag-type?

1246
00:58:01,880 --> 00:58:04,230
At hayaan mo akong i-clear ang
buffer at i-type ito muli.

1247
00:58:04,230 --> 00:58:06,580
So-- Whoops.

1248
00:58:06,580 --> 00:58:13,280
Sa bawat oras na nagta-type ako ng isang sulat, C- A- T--
kaya ng isang bagong hilera nang walang alinlangan ay nagpapanatili sa paglitaw.

1249
00:58:13,280 --> 00:58:16,530
Ano ang sinasabi ng mga hilera ay kumakatawan,
batay sa kung ano ko na nakita at napag-usapan namin

1250
00:58:16,530 --> 00:58:17,339
ganiyang kalayo?

1251
00:58:17,339 --> 00:58:18,130
Madla: Ang isang search?

1252
00:58:18,130 --> 00:58:21,770
David J. MALAN: Ang isang paghahanap, o
pa generically, isang HTTP request

1253
00:58:21,770 --> 00:58:23,125
mula sa aking browser sa server.

1254
00:58:23,125 --> 00:58:29,090
Well, kung bakit ay ang aking browser paggawa ng isang HTTP
humiling sa bawat oras na i-type ako ng sulat?

1255
00:58:29,090 --> 00:58:30,502
>> Madla: [hindi marinig]

1256
00:58:30,502 --> 00:58:33,210
David J. MALAN: Oo, ito ay nagbibigay
harap ko nitong auto-ang buong resulta.

1257
00:58:33,210 --> 00:58:35,190
Like, kung saan gagawin ang mga
mga resulta ng paghahanap mula sa darating?

1258
00:58:35,190 --> 00:58:38,120
Well, sa tuwing ako mag-type ng
sulat, Google ay nagpapadala ng higit

1259
00:58:38,120 --> 00:58:40,460
at higit pa at higit pa sa
ang salita ako type.

1260
00:58:40,460 --> 00:58:41,040
Bakit?

1261
00:58:41,040 --> 00:58:44,540
Dahil gusto nilang bigyan ako ng isang
mas mahusay at mas mahusay, mas mahusay na mga mungkahi,

1262
00:58:44,540 --> 00:58:48,880
isang listahan ng mga mungkahi, para sa kung ano salita
Sinusubukan ko upang aktwal na kumpleto na.

1263
00:58:48,880 --> 00:58:53,030
Kaya ito ay upang sabihin literal bawat
karakter nagta-type ka sa Google

1264
00:58:53,030 --> 00:58:56,900
ay ipinadadala, huli sa
bulk, kundi pati na rin kung minsan ang isa

1265
00:58:56,900 --> 00:59:00,620
sa isang pagkakataon upang ipatupad
mga auto-complete tampok kapag

1266
00:59:00,620 --> 00:59:03,000
ang data ay, siyempre, sa web.

1267
00:59:03,000 --> 00:59:08,780
>> Ngayon, sabihin tumagal ng isang pagtingin sa kung ano ang tunay na
ang mangyayari kapag nag-click ako Google Search.

1268
00:59:08,780 --> 00:59:10,420
At pagkatapos ay gagamitin namin pagkilos na ito sa ating sarili.

1269
00:59:10,420 --> 00:59:15,320
Kaya kung mag-scroll ko pababa ngayon sa pinakadulo
unang kahilingan na lamang ang nangyari.

1270
00:59:15,320 --> 00:59:17,130
Pansinin ang mga sumusunod.

1271
00:59:17,130 --> 00:59:25,550
Ito ay ipinadala sa isang medyo matagal na URL--
https://www.google.com/search?

1272
00:59:25,550 --> 00:59:27,100
at pagkatapos ng isang buong grupo ng mga bagay-bagay.

1273
00:59:27,100 --> 00:59:29,620
Natin makita ito aktwal na ngayon
sa tab ng browser mismo.

1274
00:59:29,620 --> 00:59:31,310
Sabihin makakuha ng alisan ng toolbar dito.

1275
00:59:31,310 --> 00:59:33,140
Narito ang pahina ng mga resulta ng paghahanap.

1276
00:59:33,140 --> 00:59:34,790
At pansinin narito ang URL.

1277
00:59:34,790 --> 00:59:37,430
Ngayon, maaari mong marahil hulaan
kung ano ang nangyayari dito sa bahagi.

1278
00:59:37,430 --> 00:59:39,090
Kaya una sa lahat, ang isang kahulugan.

1279
00:59:39,090 --> 00:59:42,570
Ito tila ay ang patutunguhan
kung saan ang form ay isinumite.

1280
00:59:42,570 --> 00:59:44,910
Kaya kapag ako nag-type sa
mga salitang "pusa" at pindutin ang Enter,

1281
00:59:44,910 --> 00:59:48,460
tila ipinadala Google
aking text input sa URL na ito

1282
00:59:48,460 --> 00:59:50,770
na ko na naka-highlight
doon, slash paghahanap.

1283
00:59:50,770 --> 00:59:56,530
Lumiliko out, sa isang URL, ang anumang bagay na
ang mangyayari pagkatapos ng isang tandang pananong ay,

1284
00:59:56,530 --> 01:00:01,270
habang sinusunod natin na sinasabi, isang key-value pares
na nai-type sa form o sa anumang paraan

1285
01:00:01,270 --> 01:00:04,500
ipinadala mula sa
browser sa server.

1286
01:00:04,500 --> 01:00:07,180
>> Kaya anumang oras nagta-type ka input
sa isang form sa web

1287
01:00:07,180 --> 01:00:10,000
at ito ay ipinadala bilang na namin
tinatalakay, sa pamamagitan ng isang makakuha ng,

1288
01:00:10,000 --> 01:00:12,400
isa sa mga ito virtual
envelopes, ang mga nilalaman

1289
01:00:12,400 --> 01:00:15,510
ng na envelope-- yes, panatilihin
pagkuha ng pinalamanan pisikal

1290
01:00:15,510 --> 01:00:19,010
sa sobre sa klase
ngayon, ngunit technologically

1291
01:00:19,010 --> 01:00:21,110
tunay na ito ay ilagay sa URL.

1292
01:00:21,110 --> 01:00:22,940
Kaya sa katunayan, hayaan mo akong suriing mabuti sa pamamagitan na ito.

1293
01:00:22,940 --> 01:00:25,010
Saan mo nakikita ang user input?

1294
01:00:25,010 --> 01:00:27,490
Saan mo nakikita ang isang bagay
na ako mismo nag-type up dito?

1295
01:00:27,490 --> 01:00:32,100

1296
01:00:32,100 --> 01:00:33,491
Oo, kaya "cats."

1297
01:00:33,491 --> 01:00:33,990
Right?

1298
01:00:33,990 --> 01:00:36,380
Kaya hayaan mo akong magdistila ito
sa isang bagay na mas simple.

1299
01:00:36,380 --> 01:00:39,917
Ako pagpunta sa tanggalin ang lahat ng bagay tungkol
ang URL na ito na hindi ko maintindihan,

1300
01:00:39,917 --> 01:00:42,250
at tingin lang ako sa pagpunta sa umalis
ito bilang this-- / paghahanap? q = cats.

1301
01:00:42,250 --> 01:00:45,640

1302
01:00:45,640 --> 01:00:47,890
Susubukan naming makita kung saan q
ay mula sa isang sandali,

1303
01:00:47,890 --> 01:00:51,220
ngunit na nararamdaman tulad ng minimum
halaga ng impormasyon na ibinigay ko.

1304
01:00:51,220 --> 01:00:53,050
At ngayon ako pagpunta sa pindutin ang Enter.

1305
01:00:53,050 --> 01:00:55,520
At mapansin ito pa rin gumagana.

1306
01:00:55,520 --> 01:00:57,950
Kami ay pa rin makakuha ng likod ng isang buong grupo ng mga pusa.

1307
01:00:57,950 --> 01:01:00,340
Kaya Google ay may interes
kaysa ito mga araw na ito.

1308
01:01:00,340 --> 01:01:01,934
Ito ay 2016, hindi 1999.

1309
01:01:01,934 --> 01:01:04,600
Kaya mayroong iba pang mga bagay-bagay na ang aking
browser ay nagpapadala sa server.

1310
01:01:04,600 --> 01:01:07,100
Ngunit ito ay minimally
lahat na ay kinakailangan.

1311
01:01:07,100 --> 01:01:08,380
>> Kaya kung ano kaya ang nangyari?

1312
01:01:08,380 --> 01:01:14,320
Well, unang hayaan mo akong magpatuloy at pumunta
pabalik sa Cloud9 at hayaan mo akong magpatuloy

1313
01:01:14,320 --> 01:01:15,620
at isara ang aking mga tab nang mas maaga.

1314
01:01:15,620 --> 01:01:18,230
At kukunin ko na gawin ito sa aking
nagmamay-ari lamang para sa isang sandali.

1315
01:01:18,230 --> 01:01:20,730
Ako pagpunta sa sige
at lumikha ng bagong file.

1316
01:01:20,730 --> 01:01:23,739
At ako pagpunta upang i-save ito bilang google.html.

1317
01:01:23,739 --> 01:01:26,280
At ako pagpunta sa napaka quickly--
Ako pagpunta sa magnakaw, talaga,

1318
01:01:26,280 --> 01:01:28,510
ang ilan sa mga tekstong ito lamang upang makatipid ng oras.

1319
01:01:28,510 --> 01:01:30,610
Pupunta ako sa i-paste ito sa dito.

1320
01:01:30,610 --> 01:01:33,850
Hindi ako pagpunta sa abala sa
anumang estilisasyon oras na ito.

1321
01:01:33,850 --> 01:01:38,340
Kami ay pagpunta sa tawag na ito "My Google."

1322
01:01:38,340 --> 01:01:41,230
At ako pagpunta sa kumuha alisan
ng lahat ng bagay sa katawan.

1323
01:01:41,230 --> 01:01:42,740
At ako pagpunta sa gawin ang mga sumusunod.

1324
01:01:42,740 --> 01:01:45,690
Hayaan akong mag-zoom in.

1325
01:01:45,690 --> 01:01:50,620
Bumuo action-- at bilang ako sa madaling sabi nabanggit
earlier-- whoops-- bilang ako sa madaling sabi

1326
01:01:50,620 --> 01:01:54,130
nabanggit mas maaga, ang pagkilos ng isang
form ay kung saan mo ipadala ang data sa.

1327
01:01:54,130 --> 01:01:56,620
Kaya google.com/search.

1328
01:01:56,620 --> 01:01:59,390
At ang paraan na gusto kong gamitin
maaaring isa sa dalawang bagay.

1329
01:01:59,390 --> 01:02:02,870
Puwede kang mag-Ito ay magiging "makakuha ng," kapag sinusunod natin
tatalakayin, o maaari itong maging "post."

1330
01:02:02,870 --> 01:02:05,340
Para sa ngayon, ang mga pundamental na
pagkakaiba ay, kung gumamit ka ng "makakuha ng,"

1331
01:02:05,340 --> 01:02:09,590
ang lahat ng mga impormasyon na ang
user ay nagbibigay makakakuha ng ipinadala sa URL.

1332
01:02:09,590 --> 01:02:13,530
>> Iyon ay mahusay para sa mga bagay tulad ng paghahanap
engine at ng ilang mga iba pang mga application,

1333
01:02:13,530 --> 01:02:17,080
ngunit sa kung ano ang pangyayari gagawin
hindi mo nais na punan ang isang form

1334
01:02:17,080 --> 01:02:21,620
at ang impormasyon ay end up ang
URL, tulad ng sa address bar ng iyong browser?

1335
01:02:21,620 --> 01:02:25,470

1336
01:02:25,470 --> 01:02:26,605
Anong klaseng mga form gawin you--

1337
01:02:26,605 --> 01:02:27,480
Madla: [hindi marinig]

1338
01:02:27,480 --> 01:02:28,450
David J. MALAN: Oo, tulad ng kung ano?

1339
01:02:28,450 --> 01:02:29,270
Madla: Ang mga password.

1340
01:02:29,270 --> 01:02:31,936
David J. MALAN: Oo, kaya mong mag-log
in sa Facebook o ilang website.

1341
01:02:31,936 --> 01:02:34,395
Iyon ang dahilan user input mula sa
isang anyo, ang isang text box,

1342
01:02:34,395 --> 01:02:37,020
ngunit ikaw marahil ay hindi nais na ito
sa paglitaw sa URL ng browser.

1343
01:02:37,020 --> 01:02:38,121
Bakit?

1344
01:02:38,121 --> 01:02:40,870
Ibig kong sabihin, siguro mayroong ilang mga
implikasyon sa seguridad sa network,

1345
01:02:40,870 --> 01:02:44,830
ngunit more-- gusto, mas lamang, paano kung
iyong kasama sa kuwarto, ang iyong mga makabuluhang iba pang,

1346
01:02:44,830 --> 01:02:47,710
ang iyong mga anak, ang iyong asawa ay mukhang
sa pamamagitan ng iyong kasaysayan ng browser?

1347
01:02:47,710 --> 01:02:50,762
Hayan ang inyong password karapatan
doon sa history ng iyong browser.

1348
01:02:50,762 --> 01:02:52,220
Iyan ay hindi pakiramdam tulad ng magandang disenyo.

1349
01:02:52,220 --> 01:02:54,500
O kahit na mas technically,
Ipagpalagay na sinusubukan

1350
01:02:54,500 --> 01:02:59,180
upang mag-upload ng isang larawan sa Flickr
o Facebook o wherever--

1351
01:02:59,180 --> 01:03:03,010
iyon ay user input, kahit na
ito ay isang maliit na mas interesting-- paano

1352
01:03:03,010 --> 01:03:05,530
ako magsiksik mga terap at nasa bar URL?

1353
01:03:05,530 --> 01:03:06,730
Ikaw uri ng uri ng ay hindi.

1354
01:03:06,730 --> 01:03:07,396
Maaari mong uri ng.

1355
01:03:07,396 --> 01:03:10,210
Ngunit, talaga, ako hard-pinindot
na isipin paggawa na.

1356
01:03:10,210 --> 01:03:13,470
Kaya kailangan ko ng isa pang paraan para sa
upload ng mga larawan sa isang website,

1357
01:03:13,470 --> 01:03:15,657
at na ang ibang paraan ay tinatawag na "post."

1358
01:03:15,657 --> 01:03:18,740
Ngunit sa ngayon, kami na lang makipag-usap tungkol
"Makakuha ng," kung saan ay ang mas simple ng dalawa.

1359
01:03:18,740 --> 01:03:21,100
Ito lamang inilalagay ang lahat ng
user input sa URL.

1360
01:03:21,100 --> 01:03:22,830
>> Kaya narito ang anyo Lumilikha ako.

1361
01:03:22,830 --> 01:03:24,070
Gusto ko ng isang input.

1362
01:03:24,070 --> 01:03:24,820
At alam mo kung ano?

1363
01:03:24,820 --> 01:03:26,111
Ako pagpunta sa kumuha ng isang hula dito.

1364
01:03:26,111 --> 01:03:31,600
Pupunta ako sa pagpapabalik aking
input "q" para sa "query."

1365
01:03:31,600 --> 01:03:34,970
At sa tingin ko ito ay isa sa mga
orihinal na disenyo, marahil, mula sa 1999.

1366
01:03:34,970 --> 01:03:39,560
At pagkatapos ay ang uri ng input na ito
ay lamang pagpunta sa maging "text."

1367
01:03:39,560 --> 01:03:43,040
At pagkatapos ay ako pagpunta sa magkaroon ng isa pang input
na hindi kailangan ng isang pangalan, bilang namin makikita sa lalong madaling panahon

1368
01:03:43,040 --> 01:03:45,120
makita, ang uri ng kung saan ay ang "ipasok."

1369
01:03:45,120 --> 01:03:47,070
At ito ay pagpunta sa
bigyan ako ng isang espesyal na pindutan.

1370
01:03:47,070 --> 01:03:48,320
At na ito.

1371
01:03:48,320 --> 01:03:50,790
>> Kaya hayaan mo akong magpatuloy at i-save ang file na ito.

1372
01:03:50,790 --> 01:03:54,910
Pupunta ako sa bumalik sa aking
browser at pumunta sa google.html.

1373
01:03:54,910 --> 01:03:56,140
Enter.

1374
01:03:56,140 --> 01:03:59,680
At ito ay uri ng hiwa-hiwalay
upang sabihin ang hindi bababa sa.

1375
01:03:59,680 --> 01:04:03,110
Ngunit ipaalam sa akin sige
at hanapin ang "cats."

1376
01:04:03,110 --> 01:04:06,510
At mapansin Ako ay kasalukuyang
sa URL na ito Cloud9.

1377
01:04:06,510 --> 01:04:09,240
Ngunit sa sandaling nag-click ako ito,
kung saan ang inaasahan mong makikita ko end up?

1378
01:04:09,240 --> 01:04:10,160
>> Madla: Google.

1379
01:04:10,160 --> 01:04:11,118
>> David J. MALAN: Google.

1380
01:04:11,118 --> 01:04:12,740
Kaya sabihin i-click ang Isumite.

1381
01:04:12,740 --> 01:04:15,200
At sa katunayan ko na muling ipinatupad Google.

1382
01:04:15,200 --> 01:04:15,700
Right?

1383
01:04:15,700 --> 01:04:16,480
Ito ay mas simple.

1384
01:04:16,480 --> 01:04:17,120
Ito ay mas magaan.

1385
01:04:17,120 --> 01:04:20,350
Ibig kong sabihin, ang aking code ay malinaw na mas mahusay kaysa sa
kanila, mula sa gulo ng nakita natin mas maaga.

1386
01:04:20,350 --> 01:04:21,100
At alam mo kung ano?

1387
01:04:21,100 --> 01:04:22,610
Pupunta ako upang pagandahin ito up ng isang maliit na bit.

1388
01:04:22,610 --> 01:04:23,860
hindi ko banggitin ito nang mas maaga.

1389
01:04:23,860 --> 01:04:27,860
May mga tag tulad ng H1, para Heading 1,
ang pinaka-mahalagang heading sa isang page.

1390
01:04:27,860 --> 01:04:30,570
"Ang aking Google," Tatawag ako ito.

1391
01:04:30,570 --> 01:04:31,940
Hayaan akong i-reload.

1392
01:04:31,940 --> 01:04:33,772
Ito ay naghahanap ng kaunti mas mahusay na.

1393
01:04:33,772 --> 01:04:34,980
At, talaga, alam mo kung ano?

1394
01:04:34,980 --> 01:04:36,430
Na ako already-- ko lied.

1395
01:04:36,430 --> 01:04:40,200
Sinabi ko hindi ako ay pagpunta sa estilo na ito,
ngunit ako pagpunta sa estilo na ito tulad ng dati.

1396
01:04:40,200 --> 01:04:46,860
At ang aking katawan ay pagpunta sa maging,
sabihin nating, text-align center.

1397
01:04:46,860 --> 01:04:48,800
Ito ay naghahanap ng mas maraming tulad ng Google na.

1398
01:04:48,800 --> 01:04:51,090
>> Kailangan ko ng isang line break, bagaman,
para sa na Isumite button.

1399
01:04:51,090 --> 01:04:52,798
At ito ay lumiliko out, ikaw
maaaring gumamit ng mga talata,

1400
01:04:52,798 --> 01:04:57,320
o maaari mong mas literal lamang sabihin,
bigyan ako ng isang line break here-- ang br tag.

1401
01:04:57,320 --> 01:04:59,319
At kung i-reload ko ito, ngayon ito napupunta doon.

1402
01:04:59,319 --> 01:05:01,610
Ito ay isang maliit na pangit, kaya ako
maaaring gawin ang maramihang mga linya ng break,

1403
01:05:01,610 --> 01:05:03,310
ngunit sabihin hindi makakuha ng masyadong matakaw dito.

1404
01:05:03,310 --> 01:05:06,430
Kaya ngayon sabihin makita kung ito ay gumagana para sa "aso."

1405
01:05:06,430 --> 01:05:08,640
Ito tila sa trabaho para sa "aso," pati na rin.

1406
01:05:08,640 --> 01:05:10,780
Kaya kung ano ang nag-uudyok na takeaway dito?

1407
01:05:10,780 --> 01:05:13,600
One-- ay hindi isang malaking tumalon sa
ipakilala ng ilang higit pang mga tag,

1408
01:05:13,600 --> 01:05:15,370
tulad ng mga form na tag sa input tag.

1409
01:05:15,370 --> 01:05:17,120
Ngunit higit pa sa panimula
ay, ang lahat kami ay gumagawa ng

1410
01:05:17,120 --> 01:05:20,610
ay leveraging aming pagkakaunawa
ng HTTP at ang katotohanan

1411
01:05:20,610 --> 01:05:24,900
na anyo sa huli baguhin
kung ano ang sa URL ng browser,

1412
01:05:24,900 --> 01:05:28,540
at iba pa, samakatuwid, maaari naming
wala sa loob magbigay ng input sa isang server

1413
01:05:28,540 --> 01:05:33,600
sa pamamagitan ng paggawa ng isang HTML form at pag-alam
na ang server nauunawaan HTTP,

1414
01:05:33,600 --> 01:05:36,890
gusto lamang ang aming katawan nauunawaan, tulad ng,
nanginginig ang aking kamay, na parehong protocol,

1415
01:05:36,890 --> 01:05:40,920
at kaya kami ay bumalik ang mga tugon
na namin sa huli inaasahan.

1416
01:05:40,920 --> 01:05:44,050
>> Kaya sabihin subukan upang gawin ang isa
huling bagay na ngayon na may mobile,

1417
01:05:44,050 --> 01:05:47,052
at kukunin ko na make-- kukunin ko na magdagdag
ang code na ito sa mga slide.

1418
01:05:47,052 --> 01:05:49,760
Kaya kung nais mong i-manghihinang, ikaw
maaari tiyak na dalhin ito mula doon.

1419
01:05:49,760 --> 01:05:51,551
Ngunit ako pagpunta sa pumunta
magpatuloy at gawin ang isang bagay.

1420
01:05:51,551 --> 01:05:54,120
Ako pagpunta sa sige at
buksan ang aking index page--

1421
01:05:54,120 --> 01:05:59,030
aking kumusta page tulad ng dati, na kung saan
ay may maraming mga tekstong ito faux-Latin,

1422
01:05:59,030 --> 01:06:05,470
o walang kahulugan Latin teksto, at has--
ito ganito ang hitsura nito sa laki ng font na ito.

1423
01:06:05,470 --> 01:06:07,850
Ngunit ipaalam sa akin sige at gawin ito.

1424
01:06:07,850 --> 01:06:09,300
Pupunta ako sa pumunta sa Cloud9.

1425
01:06:09,300 --> 01:06:10,380
At hindi mo na kailangang gumawa ng hakbang na ito.

1426
01:06:10,380 --> 01:06:11,420
kukunin ko na lang gawin ito sa aking sarili.

1427
01:06:11,420 --> 01:06:12,890
Pupunta ako sa i-click ang Ibahagi.

1428
01:06:12,890 --> 01:06:15,170
At ito ay isang tampok
lamang sa Cloud9, kung saan

1429
01:06:15,170 --> 01:06:17,710
ko mapapalitaw ang aking kapaligiran publiko.

1430
01:06:17,710 --> 01:06:20,240
>> At lamang para sa kapakanan ng
demonstration, hayaan mo akong gawin ito.

1431
01:06:20,240 --> 01:06:22,870
Pupunta ako sa gumawa ng aking application publiko.

1432
01:06:22,870 --> 01:06:25,230
Pansinin ito ay babala sa akin, ako
Ako sigurado na gusto kong gawin ito,

1433
01:06:25,230 --> 01:06:28,438
dahil ito ay pagpunta sa gumawa ng lahat
sa mundo, kung ang mga ito dito ngayon

1434
01:06:28,438 --> 01:06:33,560
o nanonood ng video sa ibang pagkakataon sa
internet upang makita kung ano ang nakikita ko.

1435
01:06:33,560 --> 01:06:34,440
Ngunit iyon lamang ang OK.

1436
01:06:34,440 --> 01:06:37,870
Ako pagpunta sa sabihin ang "Tapos na."

1437
01:06:37,870 --> 01:06:42,080
At hayaan mo akong hinihikayat ka, kung ako ay
ito correctly-- hayaan mo akong subukan muna ito.

1438
01:06:42,080 --> 01:06:45,590
Sige, kung hindi mo mind--
sa isang browser sa iyong computer,

1439
01:06:45,590 --> 01:06:49,900
pumunta sa URL na ito, at sana
makikita mo ang aking Latin text.

1440
01:06:49,900 --> 01:06:52,820
At upang maging malinaw, ito ay
tumatakbo hindi sa aking laptop.

1441
01:06:52,820 --> 01:06:53,610
Ito ay sa cloud.

1442
01:06:53,610 --> 01:06:58,120
Ito ay sa Cloud9, literal, ngunit
Ginawa ko ang aking workspace pampublikong

1443
01:06:58,120 --> 01:07:03,450
upang ang sinuman sa internet
maaaring ma-access ang aking Latin home page.

1444
01:07:03,450 --> 01:07:07,209
>> Pumunta sa parehong URL sa
iyong telepono, kung maaari mong.

1445
01:07:07,209 --> 01:07:09,750
Kung ito ay gastos sa iyo, bagaman, ikaw
maaari lamang tumingin sa loob ng isang balikat.

1446
01:07:09,750 --> 01:07:40,688

1447
01:07:40,688 --> 01:07:42,467
Madla: [hindi marinig]

1448
01:07:42,467 --> 01:07:43,550
David J. MALAN: Sorry?

1449
01:07:43,550 --> 01:07:45,390
Madla: [hindi marinig]

1450
01:07:45,390 --> 01:07:47,710
David J. MALAN: Just Latin salita.

1451
01:07:47,710 --> 01:07:48,210
Iyon lang.

1452
01:07:48,210 --> 01:07:49,250
Ngunit iyon lamang ang kung ano ang dapat mong makita.

1453
01:07:49,250 --> 01:07:49,875
>> Madla: Oo.

1454
01:07:49,875 --> 01:07:50,790
David J. MALAN: Oo.

1455
01:07:50,790 --> 01:07:51,300
Yeah.

1456
01:07:51,300 --> 01:07:51,540
OK.

1457
01:07:51,540 --> 01:07:53,530
Kaya ang maaari kong i-hold up ang iyong
telepono para sa isang sandali lamang?

1458
01:07:53,530 --> 01:07:57,504
Kaya, inaasahan namin na, kung ikaw ay sa pag-access
ito, dapat itong magmukhang halos hindi mabasa.

1459
01:07:57,504 --> 01:07:59,920
Walang still-- ibig sabihin ko, ito ay
hindi mabasa dahil sa Latin.

1460
01:07:59,920 --> 01:08:01,920
Ngunit ito ay hindi mabasa din
para sa kung ano ang iba pang dahilan?

1461
01:08:01,920 --> 01:08:03,775
Like, kung ano ang inaakala mong masama tungkol dito?

1462
01:08:03,775 --> 01:08:04,650
Madla: Ito ay maliit.

1463
01:08:04,650 --> 01:08:06,420
David J. MALAN: Ito ay sobrang, sobrang maliit.

1464
01:08:06,420 --> 01:08:07,920
Kaya kung paano namin maaaring ayusin ito?

1465
01:08:07,920 --> 01:08:09,730
Ito ay sobrang, sobrang maliit na
sa Victoria phone

1466
01:08:09,730 --> 01:08:11,400
at, kung ikaw ay nakuha
ito up ang iyong sarili, marahil

1467
01:08:11,400 --> 01:08:14,660
maliit na sa iyong telepono pati na rin, maliban kung ikaw
may mga setting ng accessibility pinagana.

1468
01:08:14,660 --> 01:08:15,530
Ano yan?

1469
01:08:15,530 --> 01:08:18,497
Maaari mo lamang kurutin at
zoom, na kung saan ay maisasagawa,

1470
01:08:18,497 --> 01:08:20,330
ngunit pagkatapos ay mo lamang makita
ng ilang mga salita sa isang pagkakataon.

1471
01:08:20,330 --> 01:08:20,859
Kaya maghintay ng isang minuto.

1472
01:08:20,859 --> 01:08:21,720
alam ko kung paano ayusin ito.

1473
01:08:21,720 --> 01:08:22,219
Right?

1474
01:08:22,219 --> 01:08:26,130
maaari ko bang gamitin CSS, at ako ay maaaring baguhin ang mga
laki ng font mula sa 12-point sa 24-point.

1475
01:08:26,130 --> 01:08:29,020
Ngunit ang pangalawang epekto ng na,
siyempre, ay pagpunta sa maging ngayon,

1476
01:08:29,020 --> 01:08:32,630
sa isang desktop o isang laptop,
ngayon ang teksto ay dalawang beses na malaki.

1477
01:08:32,630 --> 01:08:35,810
At kaya ito ay uri ng maging nice
upang makilala sa pagitan ng mga aparato,

1478
01:08:35,810 --> 01:08:37,840
at ito ay lumiliko out doon
mga paraan ng paggawa na.

1479
01:08:37,840 --> 01:08:39,590
Mayroong ilang mga
iba't ibang paraan, sa katunayan,

1480
01:08:39,590 --> 01:08:44,189
kung saan gamit ang CSS at may interes tampok
na hindi namin ay pumunta sa sa mahusay na detalye,

1481
01:08:44,189 --> 01:08:46,960
maaari kang mahalagang query
ang browser at sabihin,

1482
01:08:46,960 --> 01:08:51,550
kung ang iyong screen ay mas maliit kaysa sa na ito
maraming pixels, gamitin ang laki ng font.

1483
01:08:51,550 --> 01:08:55,180
Kung ang iyong screen ay mas malaki kaysa ito
maraming pixels, gamitin ang iba pang mga laki ng font.

1484
01:08:55,180 --> 01:08:57,080
>> Maaari kang maging kahit na may interes pa rin.

1485
01:08:57,080 --> 01:09:00,140
Kung kailanman na iyong binisita ng isang
web page na iyon, sa isang desktop,

1486
01:09:00,140 --> 01:09:04,404
ay may isang malaking menu siguro off sa
side, at pagkatapos ang lahat ng mga nilalaman

1487
01:09:04,404 --> 01:09:07,029
ay sa bahagi ng na menu--
iyon ang uri ng isang pangkaraniwang paradaym.

1488
01:09:07,029 --> 01:09:09,670
Menu sa kaliwa, nilalaman
sa kanan, o vice versa.

1489
01:09:09,670 --> 01:09:13,569
Hindi talaga gumagana sa mobile kapag ang iyong
screen ay lamang na ito maraming pixels wide.

1490
01:09:13,569 --> 01:09:16,233
Kaya mas karaniwan sa mga mobile ay,
iyong menu ay biglang makakakuha

1491
01:09:16,233 --> 01:09:18,399
gumuho, at mayroon kang upang
i-click ang isang pindutan upang makita ito,

1492
01:09:18,399 --> 01:09:22,404
o ang website ay ilagay ang menu
itaas ito at ilagay ang nilalaman sa ibaba nito.

1493
01:09:22,404 --> 01:09:24,779
At maaari mong ipatupad ang mga
bagay sa maraming paraan, masyadong.

1494
01:09:24,779 --> 01:09:28,340
Maaari mong tanungin ang iyong mga programmers,
hey, team, anumang oras

1495
01:09:28,340 --> 01:09:34,450
makikita mo ang isang HTTP request mula sa isang Android
aparato, ang isang Microsoft aparato, ang isang Google

1496
01:09:34,450 --> 01:09:39,930
device, isang aparatong Apple, gamitin ang
laki ng font at gamitin ang menu layout,

1497
01:09:39,930 --> 01:09:42,670
o kung hindi gamitin ang default mas malaking layout.

1498
01:09:42,670 --> 01:09:45,410
>> Ngayon, gamit ang kung ano
pangunahing pamamaraan ngayon

1499
01:09:45,410 --> 01:09:48,529
maaaring ang mga inhinyero gamitin
upang malaman kung ito ay

1500
01:09:48,529 --> 01:09:53,660
isang iPhone, ang isang Android phone, isang laptop,
isang desktop pagbisita server ng kumpanya?

1501
01:09:53,660 --> 01:09:55,310
Sa ano sila makakuha ng impormasyon?

1502
01:09:55,310 --> 01:09:56,080
>> Madla: Header?

1503
01:09:56,080 --> 01:09:57,740
>> David J. MALAN: Oo, ang HTTP header.

1504
01:09:57,740 --> 01:10:01,714
Kaya ang bawat HTTP kahilingan na nagmumula sa
ang kanilang mga customer sa kanilang mga server

1505
01:10:01,714 --> 01:10:03,880
kabilang ang, sa loob na virtual
sobre, ang maramihang

1506
01:10:03,880 --> 01:10:08,260
ng HTTP header, isa rito ay
ang browser at ang mga operating system

1507
01:10:08,260 --> 01:10:10,290
kahit na, kung mahalaga sa iyo upang
na antas ng detalye.

1508
01:10:10,290 --> 01:10:13,790
Ngayon, ito ay isang misteriyoso-mukhang string, ngunit
may umiiral na software na ay lamang

1509
01:10:13,790 --> 01:10:18,530
gawing simple na iyon, at maaari mo lamang hilingin
sa programming code-- PHP, Java, C ++,

1510
01:10:18,530 --> 01:10:23,650
whatever-- ano ang telepono ay this--
kung ano ang aparato ay ang user na ito ginagamit?

1511
01:10:23,650 --> 01:10:27,501
At pagkatapos ay maaari mong sabihin, ipakita ang mga ito na ito
na bersyon ng website kung ito ay isang phone.

1512
01:10:27,501 --> 01:10:30,250
Ipakita ang mga ito ang bersyong ito ng
website kung ito ay isang laptop o desktop.

1513
01:10:30,250 --> 01:10:32,316
Ngunit hindi mo kahit na kailangan
server-side kumplikado.

1514
01:10:32,316 --> 01:10:33,940
Maaari mong gawin kahit na ang pinakasimpleng ng mga bagay.

1515
01:10:33,940 --> 01:10:34,815
>> Pupunta ako upang gawin ito.

1516
01:10:34,815 --> 01:10:38,995
Ako pagpunta sa sige sa
aking Cloud9 kapaligiran,

1517
01:10:38,995 --> 01:10:41,370
at pupuntahan ko upang magdagdag ng isang tag
na nakita mo sa Google bago.

1518
01:10:41,370 --> 01:10:42,770
Ito ay tinatawag na metatag.

1519
01:10:42,770 --> 01:10:45,520
At hindi ko matandaan ang isang ito, kaya
Ako pagpunta sa isalin sa ibang papel ito dito.

1520
01:10:45,520 --> 01:10:50,552
Meta pangalan = "viewport" at pagkatapos ay
content = "width = lapad device, intital

1521
01:10:50,552 --> 01:11:02,060
scale = 1 "at na ang lahat.

1522
01:11:02,060 --> 01:11:06,230
>> Kaya ito ay maaaring pati na rin maging
tulad ng isang mahiwagang bulong.

1523
01:11:06,230 --> 01:11:11,300
Ito ay hindi lahat na malinaw, ngunit ito ay may
bagay na gawin sa ang viewport,

1524
01:11:11,300 --> 01:11:15,070
at ang viewport ay lamang ang katawan ng isang
web page, ang hugis-parihaba rehiyon na iyon

1525
01:11:15,070 --> 01:11:16,690
tumutukoy ang karamihan sa mga pahina.

1526
01:11:16,690 --> 01:11:19,060
At ito ay lamang na nagsasabi sa
ang browser, alam mo kung ano?

1527
01:11:19,060 --> 01:11:22,589
Gawin ang lapad ng pahinang ito
epektibo katumbas ng lapad aparato.

1528
01:11:22,589 --> 01:11:25,380
Sa ibang salita, huwag ipagpalagay na
mayroon kang uri ng walang limitasyong space.

1529
01:11:25,380 --> 01:11:29,920
Ipagpalagay na mayroon ka lamang ng mas maraming
espasyo bilang ang aparato mismo ay malaki.

1530
01:11:29,920 --> 01:11:34,454
At kaya ngayon, kung i-reload ko ito
sa aking browser, nakikita ko walang pagbabago.

1531
01:11:34,454 --> 01:11:37,370
Ngunit kung ako did ito correctly-- at
hayaan mo akong i-cross ang aking fingers-- kung mo ang lahat

1532
01:11:37,370 --> 01:11:42,920
reload ang iyong mga telepono, gawin mo
makita ang isang nag-uudyok na pagbabago?

1533
01:11:42,920 --> 01:11:43,620
Yeah, ay na-

1534
01:11:43,620 --> 01:11:45,067
>> Madla: [hindi marinig]

1535
01:11:45,067 --> 01:11:45,900
David J. MALAN: Oo.

1536
01:11:45,900 --> 01:11:46,400
OK.

1537
01:11:46,400 --> 01:11:47,850
Kaya arguably mas nababasa ngayon?

1538
01:11:47,850 --> 01:11:53,070
Still maliit, upang maging makatarungan, ngunit hindi
kaya maliit na maliit na bilang na maging makunat.

1539
01:11:53,070 --> 01:11:56,920
At maaari ko tiyak override ito
karagdagang sa CSS o sa gilid ng server,

1540
01:11:56,920 --> 01:12:00,120
ngunit increasingly ano ang ikaw ay
nakakakita ay higit pa at mas maraming mga tampok

1541
01:12:00,120 --> 01:12:02,900
bilang idinagdag sa
client-side environments--

1542
01:12:02,900 --> 01:12:06,530
JavaScript, bilang namin talakayin
bukas, CSS, at HTML-- kaya

1543
01:12:06,530 --> 01:12:09,190
na ang lahat ng mga query
ay maaaring gawin sa client

1544
01:12:09,190 --> 01:12:11,910
sa gayon ay upang mag-abala ang
server ng maraming mas mababa at hindi

1545
01:12:11,910 --> 01:12:14,530
sa may sa panatilihin up sa, para sa
Halimbawa, ang hindi nagbabagong mabangis na pagsalakay

1546
01:12:14,530 --> 01:12:17,210
ng mga bagong operating-system
bersyon, ang mga bagong bersyon ng browser.

1547
01:12:17,210 --> 01:12:20,190
Maaari mo lamang hayaan ang browser
tanungin ang aparato, kung paano malaki ikaw ay,

1548
01:12:20,190 --> 01:12:22,890
at pagkatapos ay gawin medyo lohikal
desisyon batay sa na.

1549
01:12:22,890 --> 01:12:25,140
Ngunit kami ay makita ang karagdagang mga pagkakataon
para sa lohikal na desisyon

1550
01:12:25,140 --> 01:12:27,223
bukas sa konteksto
ng isang programming language.

1551
01:12:27,223 --> 01:12:29,800

1552
01:12:29,800 --> 01:12:32,760
>> Kaya, ang anumang mga katanungan, at pagkatapos,
sa web development?

1553
01:12:32,760 --> 01:12:36,130
Ngayon ay hindi web programming, per
se, dahil ang karamihan ng lahat ng bagay ginawa namin

1554
01:12:36,130 --> 01:12:38,370
ay napaka-aesthetic, kung ikaw ay.

1555
01:12:38,370 --> 01:12:41,750
Walang paggawa ng desisyon sa
ang code na namin ang nakasulat,

1556
01:12:41,750 --> 01:12:44,990
at sa gayon ay ang dahilan kung bakit HTML ay isang markup
wika, hindi isang programming language.

1557
01:12:44,990 --> 01:12:47,140
Ngunit bukas isasaalang-alang namin
isang mabilis na pagtingin, sa huli,

1558
01:12:47,140 --> 01:12:49,340
sa JavaScript, na kung saan ay
isang aktwal na programming

1559
01:12:49,340 --> 01:12:54,220
wika na nagbibigay-daan sa amin gawin ang isang bit more.

1560
01:12:54,220 --> 01:12:56,800
>> May tanong?

1561
01:12:56,800 --> 01:13:00,480
Well, hayaan mo akong magpanukala dalawang
pagkakataon opsyonal para sa araling-bahay.

1562
01:13:00,480 --> 01:13:02,900
One is-- mga Cloud9
mga account na hindi mawawalan ng bisa.

1563
01:13:02,900 --> 01:13:04,669
Ikaw ay malugod na gamitin
ang mga ito upang latero sa.

1564
01:13:04,669 --> 01:13:05,960
Ito ay ang libreng antas ng serbisyo.

1565
01:13:05,960 --> 01:13:08,754
Napag-alaman na, kung kapag lumilikha
iyong workspace, na ginawa mo ito sa publiko,

1566
01:13:08,754 --> 01:13:11,670
na ang ibig sabihin na ang sinuman sa
internet ay maaaring makita kung ano ang iyong tina-type.

1567
01:13:11,670 --> 01:13:15,104
Kaya siguro lamang isaalang-alang
Hindi nakakahiya ang iyong sarili

1568
01:13:15,104 --> 01:13:18,020
kung ikaw ay paglalagay ng iyong unang web
page out doon sa publiko sinasadyang,

1569
01:13:18,020 --> 01:13:20,134
ngunit walang isa ay pagpunta sa
malaman upang tumingin doon pa rin.

1570
01:13:20,134 --> 01:13:23,760
>> At two-- hayaan mo akong siklutin
up ang URL na ito pati na rin,

1571
01:13:23,760 --> 01:13:28,250
lalo na kung ikaw ay dumating sa araw na ito ang
maliit na mas mababa kumportable kaysa sa iba,

1572
01:13:28,250 --> 01:13:30,430
hindi sigurado kung ano nangangahulugan na ang lahat mga bagay-bagay na ito.

1573
01:13:30,430 --> 01:13:36,780
Napag-alaman na mas higit pa sa video na ito,
kung saan ay parehong isang mahusay na paraan upang makatulog

1574
01:13:36,780 --> 01:13:39,380
at din upang tumawa habang
paggawa nito, mayroon ding

1575
01:13:39,380 --> 01:13:44,300
isang pulutong ng mga kagiliw-giliw na societally
at seguridad-kaugnay na mga talakayan

1576
01:13:44,300 --> 01:13:47,370
doon mula sa John Oliver,
kahit na isang komedyante.

1577
01:13:47,370 --> 01:13:55,456
>> Ngunit kung walang mga karagdagang katanungan,
na nagdudulot sa amin sa reception.

1578
01:13:55,456 --> 01:13:56,830
Kaya bakit hindi ko i-on ang musika.

1579
01:13:56,830 --> 01:13:58,610
May ay dapat na inumin
at meryenda sa labas.

1580
01:13:58,610 --> 01:14:00,220
Ikinagagalak kong makisalamuha sapagka't kung paanong ako'y
hangga't folks nais,

1581
01:14:00,220 --> 01:14:01,600
sagutin ang mga katanungan ng mas maraming one-on-one.

1582
01:14:01,600 --> 01:14:03,330
Ngunit, sa kabilang banda, tuloy po kayo
upang mag-alis sa anumang punto,

1583
01:14:03,330 --> 01:14:05,740
at kami makita kang muli
bukas ng umaga para sa isang bit higit pa.

1584
01:14:05,740 --> 01:14:07,290
O sige, thanks.

1585
01:14:07,290 --> 01:14:10,428