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

2
00:00:00,127 --> 00:00:01,210
David J. MALAN: Rendben.

3
00:00:01,210 --> 00:00:02,160
Visszajöttünk.

4
00:00:02,160 --> 00:00:05,810
Tehát a cél ennek a záró ülésén
kell bevezetni néhány fogalom

5
00:00:05,810 --> 00:00:09,290
hanem hogy mindenki egy esélyt
hogy milyen nyúlik ujjaival

6
00:00:09,290 --> 00:00:11,270
és valóban tenni valamit
egy kis kéz-on.

7
00:00:11,270 --> 00:00:13,897
A cél nem az, hogy kapcsolja
mindannyiunkat webfejlesztők

8
00:00:13,897 --> 00:00:16,230
bármilyen eszközzel, de tényleg csak
hogy adjak egy kis ízelítőt néhány

9
00:00:16,230 --> 00:00:21,750
Az alapvető konstrukciók, hogy mi
bemegy webes programozás és a mai web

10
00:00:21,750 --> 00:00:23,980
fejlesztés, így a
statikus oldala things--

11
00:00:23,980 --> 00:00:26,660
nincs logika, nem programozás
nyelv, csak statikus tartalmat.

12
00:00:26,660 --> 00:00:29,660
És ez ad nekünk egy lehetőséget
hogy ténylegesen mi a web szerver,

13
00:00:29,660 --> 00:00:34,140
hogy milyen egy HTML fájl, milyen
ez HTTP ténylegesen szolgálja ki.

14
00:00:34,140 --> 00:00:38,600
De mielőtt tovább olvasna, visszamenőleges
kérdések a számítási felhő

15
00:00:38,600 --> 00:00:43,922
vagy biztonsági, vagy bármi a kettő között?

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

17
00:00:44,890 --> 00:00:47,181
Rendben, nos,
Ehhez, csak abban az esetben

18
00:00:47,181 --> 00:00:49,680
A folyamat feliratkozás
valami néhány percet vesz igénybe.

19
00:00:49,680 --> 00:00:51,221
Majd hagyjuk, hogy csináld a háttérben.

20
00:00:51,221 --> 00:00:56,860
Menj előre, ha lehetne,
erre az URL here-- c9.io.

21
00:00:56,860 --> 00:01:02,810
Ez egy harmadik fél service--
platform mint szolgáltatás, ha will--

22
00:01:02,810 --> 00:01:05,190
hogy megy, hogy meghívjuk Önt
regisztrál egy fiókot,

23
00:01:05,190 --> 00:01:08,650
és ez meg fog adni minden van
egy számlát az úgynevezett cloud

24
00:01:08,650 --> 00:01:11,330
valaki másnak az infrastruktúra,
nevű cég Cloud9.

25
00:01:11,330 --> 00:01:13,350
De mi szép a
ez az, hogy kapsz

26
00:01:13,350 --> 00:01:15,990
közelítése az
tényleges valós fejlesztési

27
00:01:15,990 --> 00:01:18,530
környezet, bár a
felhő és egy web böngésző,

28
00:01:18,530 --> 00:01:21,175
és fogjuk használni ezt a tulajdonképpen
kísérlet egy kicsit ma.

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

30
00:01:27,116 --> 00:01:30,260
És akkor megy előre, és csak navigáljon
az utat a regisztrációs folyamat

31
00:01:30,260 --> 00:01:32,630
ha tudnál.

32
00:01:32,630 --> 00:01:36,080
Így történhet meg, hogy használja ezt az osztályban
Tanítok minden diákunk,

33
00:01:36,080 --> 00:01:39,140
mind az egyetemen, és most már le, és
cserélődik, amit történelmileg

34
00:01:39,140 --> 00:01:41,390
egyébként letölthető szoftver.

35
00:01:41,390 --> 00:01:44,620
Tehát mit jutását
Ezek egyike a virtuális gépek,

36
00:01:44,620 --> 00:01:46,460
lényegében azt leírtam korábban.

37
00:01:46,460 --> 00:01:50,260
Tehát ez a cég Cloud9 valószínűleg
bérleti díjak egy harmadik party-- valóban

38
00:01:50,260 --> 00:01:52,760
Ebben az esetben a Google-- egy egész
csomó virtuális gépek

39
00:01:52,760 --> 00:01:56,500
hogy valahogy vágjuk fel
Az illúzió az egyes kiszolgálók

40
00:01:56,500 --> 00:01:58,610
hogy mindannyiunknak van teljes ellenőrzése alatt.

41
00:01:58,610 --> 00:02:01,640
Ez nem egészen pontosan megmondani
hogy ők a virtuális gépek,

42
00:02:01,640 --> 00:02:04,550
mégis, mert mi
Cloud9 ténylegesen használja

43
00:02:04,550 --> 00:02:07,570
egy kissé újabb technológia
nevezett tárolási.

44
00:02:07,570 --> 00:02:13,150
És hadd fogd ezt a képet
Itt festeni ezt a képet.

45
00:02:13,150 --> 00:02:16,540
>> A konténer, ha
felidézni a képet

46
00:02:16,540 --> 00:02:19,900
A korábbi, egy kicsit könnyebb
súlya van, mint egy virtuális gép.

47
00:02:19,900 --> 00:02:22,090
Sőt, mivel az elmúlt
időben beszéltünk ott

48
00:02:22,090 --> 00:02:25,170
hogy a működési
rendszer és egy hypervisor

49
00:02:25,170 --> 00:02:28,260
majd a vendég operációs rendszer, a vendég
operációs rendszer, a vendég operációs

50
00:02:28,260 --> 00:02:30,940
rendszer, a tetején a
fizikai hardver,

51
00:02:30,940 --> 00:02:33,740
A különbség ez újabb
technológia, tárolási,

52
00:02:33,740 --> 00:02:37,290
az, hogy minden valahogy osztani
ugyanazt az operációs rendszert.

53
00:02:37,290 --> 00:02:39,970
De még így is létre
az illúziót mindenki

54
00:02:39,970 --> 00:02:44,590
amelynek saját kizárólagos
közigazgatási jog és fájlok

55
00:02:44,590 --> 00:02:45,400
a szerveren.

56
00:02:45,400 --> 00:02:48,230
De van kisebb szoftver
közted és a hardver.

57
00:02:48,230 --> 00:02:52,260
Az eredmény, amely, a
Elméletben egy nagyobb teljesítményű,

58
00:02:52,260 --> 00:02:55,470
mert még a jó vagy
pazarlás kevesebb erőforrást

59
00:02:55,470 --> 00:02:57,360
on, hogy az úgynevezett virtualizációs réteg.

60
00:02:57,360 --> 00:02:59,420
Ezért hívják
tárolási természet

61
00:02:59,420 --> 00:03:02,920
útján egy technológia az úgynevezett Docker,
ami nagyon jön be a saját.

62
00:03:02,920 --> 00:03:05,086
És ez az, amit
mérnökök a cég

63
00:03:05,086 --> 00:03:08,610
Lehet ilyen fajta elkezd beszélni
mintegy hamarosan, ha még nem tette meg,

64
00:03:08,610 --> 00:03:11,590
bár biztosan nem
ok ugrik bármilyen bandwagons.

65
00:03:11,590 --> 00:03:15,410
>> Tehát, hogy azt mondta, hogy mi
akkor talán most látni

66
00:03:15,410 --> 00:03:22,670
egy képernyő, amely úgy néz ki, egy kicsit olyan, mint ez.

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

68
00:03:23,170 --> 00:03:25,260
És csak hívj át, ha nem.

69
00:03:25,260 --> 00:03:27,440
És ha so-- átjövök, ha nem.

70
00:03:27,440 --> 00:03:30,244
Menj előre, és kattintson, hogy a nagy
plusz, hogy hozzon létre egy munkaterületet,

71
00:03:30,244 --> 00:03:31,660
és meglátja a képernyőn, mint ez.

72
00:03:31,660 --> 00:03:35,020
Akkor hívja a munkaterület
Íme, amit akarsz most.

73
00:03:35,020 --> 00:03:38,660
És csak tényleg az egyszerűség kedvéért,
megy és-- is, néhányan

74
00:03:38,660 --> 00:03:39,660
Már munkaterületeket.

75
00:03:39,660 --> 00:03:47,050
Nevezzük amit want-- üzleti,
Harvard, csütörtök, amit szeretne.

76
00:03:47,050 --> 00:03:48,800
Nem kell a leírást.

77
00:03:48,800 --> 00:03:52,380
Akkor hagyja magán, ha nem
Már van egy csomó munkaterületeket.

78
00:03:52,380 --> 00:03:55,280
Ha kénytelen legyen nyilvános,
ez rendben van a mai célra.

79
00:03:55,280 --> 00:03:56,750
Itt is az egyik upsells.

80
00:03:56,750 --> 00:03:59,939
Kapsz egy saját munkaterületet
alapértelmezett. De ha többet szeretne,

81
00:03:59,939 --> 00:04:00,980
meg kell fizetni több.

82
00:04:00,980 --> 00:04:02,870
Ellenkező esetben, erőt,
hogy a munka nyilvános.

83
00:04:02,870 --> 00:04:05,600
De ez rendben van, mert ők is
célozza ezt a nyílt forráskódú közösség

84
00:04:05,600 --> 00:04:07,700
ösztönözni az embereket,
ténylegesen együtt.

85
00:04:07,700 --> 00:04:10,699
>> És az utolsó dolog, ami fontos,
bár ez után úgy dönt, egy név

86
00:04:10,699 --> 00:04:17,140
és miután kiválasztotta a magán- vagy az állami,
kattintson HTML5, a nagy narancssárga ikon

87
00:04:17,140 --> 00:04:22,430
balról a második, és a
majd a Create munkaterület.

88
00:04:22,430 --> 00:04:24,580
És ez valószínűleg
hogy egy perc múlva,

89
00:04:24,580 --> 00:04:26,540
de akkor majd egy
környezet, ha egyszer

90
00:04:26,540 --> 00:04:30,544
csinálni, hogy úgy néz ki, emlékeztető
amim van a képernyőn itt.

91
00:04:30,544 --> 00:04:33,210
De ismét, ez eltarthat egy percig
vagy annál több, hogy ezt a képernyőt

92
00:04:33,210 --> 00:04:34,770
Miután rákattintottál létrehozása munkaterület.

93
00:04:34,770 --> 00:04:37,936
De csak jelölj engem, ha szeretnéd,
hogy megnézzük semmit, vagy tanácsot.

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

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

96
00:04:40,690 --> 00:04:42,390
Így fogok háttér ezt most.

97
00:04:42,390 --> 00:04:44,260
Hívj át, ha úgy tűnik, hogy
bármilyen technikai nehézségeket.

98
00:04:44,260 --> 00:04:46,210
De ismét, ez eltart egy
kicsit arra, hogy nyissa ki.

99
00:04:46,210 --> 00:04:49,570
És menjünk előre, és beszélni, hogy mit
ez valójában azt jelenti, hogy egy weboldal,

100
00:04:49,570 --> 00:04:52,780
ami a HTML, és hogy mindez hogyan
most összeköti a kezdünk

101
00:04:52,780 --> 00:04:54,730
hogy ténylegesen használni bizonyos technológiával.

102
00:04:54,730 --> 00:04:58,310
Így kiderül, hogy tudok
menj az én kis Mac ide,

103
00:04:58,310 --> 00:05:01,650
nyit egy egyszerű program neve
TextEdit vagy a Windows tudnék

104
00:05:01,650 --> 00:05:04,480
nyitott egy úgynevezett Notepad.exe.

105
00:05:04,480 --> 00:05:08,260
És én is csak egyszerűen csinálni valamit
Így-- "hello, world".

106
00:05:08,260 --> 00:05:12,020
És akkor tudtam menteni ezt
hello.txt Tehát nem varázslat van.

107
00:05:12,020 --> 00:05:15,200
Ennek semmi köze a web
programozás, semmi köze a HTML.

108
00:05:15,200 --> 00:05:16,790
Csak létre egy egyszerű szöveges fájl.

109
00:05:16,790 --> 00:05:20,600
De kiderül, hogy a web
oldal szó, hogy csak.

110
00:05:20,600 --> 00:05:24,020
Ez egy egyszerű szöveges fájl, amely a szöveg
hogy lehet gépelni a billentyűzeten,

111
00:05:24,020 --> 00:05:30,070
de általában, de nem mindig
végződik nem .txt, hanem .html vagy .htm.

112
00:05:30,070 --> 00:05:32,050
És nem csak
típus szó a fájlban.

113
00:05:32,050 --> 00:05:35,280
Te tényleg kell használni a dolgokat az úgynevezett
címkék vagy általánosabban, valami

114
00:05:35,280 --> 00:05:37,190
nevezett jelölőnyelv.

115
00:05:37,190 --> 00:05:40,510
>> Úgyhogy nagyon gyorsan írja
majd magyarázza a következő.

116
00:05:40,510 --> 00:05:42,290
Megyek az első
írja ezt, amely azt mondja,

117
00:05:42,290 --> 00:05:45,730
hé, böngészője, itt jön egy
weboldal írt HTML.

118
00:05:45,730 --> 00:05:51,850
És ez a két dolog együtt mondják, hé,
böngésző, a következő valóban HTML.

119
00:05:51,850 --> 00:05:55,790
Hé, böngészője, itt jön a
fej vagy a felső oldalam.

120
00:05:55,790 --> 00:05:59,900
Hé, böngészője, belsejében a felső
Az oldalam, hogy egy cím, hogy "hello,

121
00:05:59,900 --> 00:06:01,610
világ."

122
00:06:01,610 --> 00:06:08,370
Hé, böngészője, miután a fejét az én
oldal, itt jön a test oldalam.

123
00:06:08,370 --> 00:06:12,170
És, hé, a böngésző, a test az én
oldal is mondani, hogy "hello world".

124
00:06:12,170 --> 00:06:15,500
Tehát mi a legjellemzőbb részleteket itt?

125
00:06:15,500 --> 00:06:17,960
Ez az, amit általában
úgynevezett doc-típusú nyilatkozatot,

126
00:06:17,960 --> 00:06:20,190
és őszintén szólva, ez egy kicsit
Nehéz megjegyezni ezt először.

127
00:06:20,190 --> 00:06:21,481
Csak ilyen copy-paste is.

128
00:06:21,481 --> 00:06:23,760
Ez a hivatalos utat
mondván, hé, böngészője,

129
00:06:23,760 --> 00:06:28,030
Én használ HTML 5-ös verzió, amely
kijött az utóbbi időben némileg.

130
00:06:28,030 --> 00:06:31,380
Ez egy mágikus ráolvasás, hogy néhány
emberekben a rossz értelemben vett tervezés

131
00:06:31,380 --> 00:06:33,640
úgy döntött, hogy a
legtetején a fájlt.

132
00:06:33,640 --> 00:06:35,473
Annak ellenére, hogy ez egy
kis misztikus, ennyi az egész

133
00:06:35,473 --> 00:06:38,250
ez means-- hé, böngészője, itt
jön 5. verzió HTML.

134
00:06:38,250 --> 00:06:41,741
>> A többi ezt már velünk
egy ideje már, történelmileg,

135
00:06:41,741 --> 00:06:44,740
de ez már fejlődik, és ez
Valószínűleg már kezd egy kicsit egyszerűbb.

136
00:06:44,740 --> 00:06:47,320
Figyeljük meg néhány jellemzői
Az, amit én kiemelve.

137
00:06:47,320 --> 00:06:49,890
Vannak ezek a dolgok hajlított
brackets-- a bal oldali zárójel

138
00:06:49,890 --> 00:06:51,040
és a megfelelő tartót.

139
00:06:51,040 --> 00:06:52,490
És észre a szimmetria.

140
00:06:52,490 --> 00:06:57,340
És szimmetria, úgy értem, ahogy én
ezt kezdőcímke itt vagy nyitott tag

141
00:06:57,340 --> 00:07:01,560
ha úgy tetszik, itt lent van egy
A záró tag vagy zárócímkét ez

142
00:07:01,560 --> 00:07:06,460
különböző csak annyiban van ez
perjel elején a szó

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

144
00:07:07,360 --> 00:07:09,360
És azt lehet gondolni
ezt én véletlenül

145
00:07:09,360 --> 00:07:12,280
javasolja előtt, hé,
böngésző, itt jön néhány HTML.

146
00:07:12,280 --> 00:07:16,060
És megfordítva, hé, a böngésző, az
azt a HTML-- kezdetét és végét.

147
00:07:16,060 --> 00:07:18,440
>> Eközben hé, böngészője, itt
jön a fej oldalam.

148
00:07:18,440 --> 00:07:20,140
Hé, a böngésző, hogy ez az a fej.

149
00:07:20,140 --> 00:07:22,240
Hé, böngészője, itt van
a test oldalam.

150
00:07:22,240 --> 00:07:24,020
Hé, böngésző, ez a szervezet számára.

151
00:07:24,020 --> 00:07:26,940
És aztán az valami
tetszőleges szöveget most.

152
00:07:26,940 --> 00:07:30,520
És belül a fej, eközben
valami önkényes, de címkézett,

153
00:07:30,520 --> 00:07:34,410
hogy úgy mondjam, a szöveg, amely azt mondja, a cím
Az oldalam legyen "hello, world".

154
00:07:34,410 --> 00:07:37,470
Most, most, akkor
Feltételezzük, hogy a böngészők

155
00:07:37,470 --> 00:07:41,762
Van only-- vagy inkább, web oldalak
csak két részre osztódik, a fej és a test.

156
00:07:41,762 --> 00:07:44,220
És a fej általában csak
mint például a menü, a cucc

157
00:07:44,220 --> 00:07:45,510
tényleg csak a legtetején.

158
00:07:45,510 --> 00:07:48,910
És a test a beleket az oldal,
mindent, hogy a nagy téglalap

159
00:07:48,910 --> 00:07:50,239
amely kitölti a képernyőt.

160
00:07:50,239 --> 00:07:51,780
Így fogok menni előre, és erre a célra.

161
00:07:51,780 --> 00:07:54,400
Fogok menni előre, és
Mentés gombra kattint, a Fájl mentése.

162
00:07:54,400 --> 00:07:58,580
És én fogom megmenteni
ezt hello.html,

163
00:07:58,580 --> 00:08:00,870
és én csak megy
tedd az asztalon.

164
00:08:00,870 --> 00:08:03,520
És én megyek
előre, és kattintson a Mentés gombra.

165
00:08:03,520 --> 00:08:05,806
És notice-- a Mac át
Legalább ordít rám.

166
00:08:05,806 --> 00:08:07,180
Biztos, hogy akarja ezt?

167
00:08:07,180 --> 00:08:08,710
És én fogom mondani, igen, használj HTML.

168
00:08:08,710 --> 00:08:10,400
Tudom, jobb ebben az esetben.

169
00:08:10,400 --> 00:08:14,686
És most fogok menni az asztalon
hol van ez a fájl hirtelen.

170
00:08:14,686 --> 00:08:16,060
És megyek, dupla kattintással meg.

171
00:08:16,060 --> 00:08:18,268
És észre fogod venni, hogy a
Chrome alapértelmezés megnyílt.

172
00:08:18,268 --> 00:08:19,996
Azért, mert ez az,
az alapértelmezett böngésző.

173
00:08:19,996 --> 00:08:21,370
És ez csak mondja, "hello, világ".

174
00:08:21,370 --> 00:08:23,078
De azt mondja, "hello,
világ "két helyen.

175
00:08:23,078 --> 00:08:23,979
Figyeljük meg a bal felső sarokban.

176
00:08:23,979 --> 00:08:25,020
Elég nehéz nem észrevenni, hogy az.

177
00:08:25,020 --> 00:08:26,180
Ez nagy és merész.

178
00:08:26,180 --> 00:08:30,690
És hol máshol nem tűnik
mondani, hogy "hello, világ"?

179
00:08:30,690 --> 00:08:31,470
>> KÖZÖNSÉG: a lap.

180
00:08:31,470 --> 00:08:33,100
>> David J. MALAN: Igen, a fület.

181
00:08:33,100 --> 00:08:35,159
Tehát amikor azt mondta a fejét a
oldal mindent top--

182
00:08:35,159 --> 00:08:36,367
és valóban ez a címe.

183
00:08:36,367 --> 00:08:37,710
Ez csak a lap itt.

184
00:08:37,710 --> 00:08:40,320
És tudom húzni ezt a lapot
ki oly módon, hogy ne keverjük össze.

185
00:08:40,320 --> 00:08:43,360
Ez csak egyetlen lap most,
és valóban látni a "hello, világ"

186
00:08:43,360 --> 00:08:45,970
itt és a "hello, world" idelent.

187
00:08:45,970 --> 00:08:47,160
Tehát nagyon egyszerű.

188
00:08:47,160 --> 00:08:49,050
De ez is elég egyszerű.

189
00:08:49,050 --> 00:08:50,440
És valóban, én nagyított.

190
00:08:50,440 --> 00:08:53,272
Meg tudom változtatni a betűméretet csak
felmagasztalni a hozzáférhetőség.

191
00:08:53,272 --> 00:08:56,830
De nézzük most tenni valamit
egy kicsit érdekes.

192
00:08:56,830 --> 00:08:59,760
>> Megyek go-- Hoppá, hadd
térjek vissza a szöveges fájl.

193
00:08:59,760 --> 00:09:02,400
Megyek vissza a
szöveges fájl, és megyek

194
00:09:02,400 --> 00:09:06,320
hogy ez megváltozzon, és azt mondják
"Hello, Disney World."

195
00:09:06,320 --> 00:09:07,970
Mentés.

196
00:09:07,970 --> 00:09:10,919
És menj vissza a
böngészőt, és kattintson újratöltése.

197
00:09:10,919 --> 00:09:12,710
És most, persze,
azt mondja: "Disney World."

198
00:09:12,710 --> 00:09:15,500
És fogok mesterségesen zoom
mindössze így könnyebb látni.

199
00:09:15,500 --> 00:09:19,012
Tehát most, sajnos, azt a fajta akar
alábbiakra: valóban, ez egy Mac funkciót.

200
00:09:19,012 --> 00:09:21,720
Azt akarom, hogy kattintson a Disney World
és valahol, mint disney.com,

201
00:09:21,720 --> 00:09:23,290
de ez nem működik.

202
00:09:23,290 --> 00:09:26,850
Tehát egy alap tétele a web
hivatkozások, linkek, menjen máshová.

203
00:09:26,850 --> 00:09:28,390
Tehát hogyan tudom ezt?

204
00:09:28,390 --> 00:09:34,690
Nos, én is csak azt mondom,
"Hello, http://www.disney.com."

205
00:09:34,690 --> 00:09:36,110
Mentése.

206
00:09:36,110 --> 00:09:37,620
Újratöltése.

207
00:09:37,620 --> 00:09:39,400
De ez is, nem lehet rákattintani.

208
00:09:39,400 --> 00:09:42,930
És mi szép itt, bár
ez nem működik még,

209
00:09:42,930 --> 00:09:45,930
az, hogy úgy tűnik, hogy a
böngésző szó csak azt teszi,

210
00:09:45,930 --> 00:09:46,950
amit mondok, hogy igen.

211
00:09:46,950 --> 00:09:50,110
Tehát, ha én csak írjon be egy URL, mint ez,
ez csak megy, hogy mutassa meg az URL-t.

212
00:09:50,110 --> 00:09:54,270
Azt kell használni tag vagy kijelölés
nyelv valójában mondani

213
00:09:54,270 --> 00:09:55,621
A böngésző, hogy még többet.

214
00:09:55,621 --> 00:09:57,870
Így fogok menni előre, és
törölni ezt egy pillanatra.

215
00:09:57,870 --> 00:10:00,980
És én fogom mondani, hé,
böngésző, amikor egy horgony itt,

216
00:10:00,980 --> 00:10:02,650
egy linket úgy mondjam.

217
00:10:02,650 --> 00:10:07,500
És a hiper-referencia, a cél
Az, hogy a rögzített, legyen ez az URL.

218
00:10:07,500 --> 00:10:08,750
És észre a idézetek.

219
00:10:08,750 --> 00:10:11,590
Jól jönne aposztrófot is
de van, hogy legyen következetes,

220
00:10:11,590 --> 00:10:14,270
és én általában csak használ
idézőjelek között, hogy ez egyszerű.

221
00:10:14,270 --> 00:10:16,820
Figyeljük meg fogom zárni a címkét.

222
00:10:16,820 --> 00:10:21,160
És akkor itt fogok
mondani, hogy "a Disney World."

223
00:10:21,160 --> 00:10:26,890
És most kell egy kis symmetry--
nyitva tartó, / a, zárt tartót.

224
00:10:26,890 --> 00:10:28,090
>> Tehát mit tettem be?

225
00:10:28,090 --> 00:10:30,100
Már volt egy pár tag már.

226
00:10:30,100 --> 00:10:32,410
HTML, Head, cím, test,
mind címke, hogy úgy mondjam,

227
00:10:32,410 --> 00:10:34,280
nyitott és zárt társaik.

228
00:10:34,280 --> 00:10:36,530
De észre, ez a fajta
az alapvetően eltérő.

229
00:10:36,530 --> 00:10:39,140
Ez az, amit fogjuk hívni
HTML attribútum.

230
00:10:39,140 --> 00:10:41,451
És egy attribútum
Csak egy kulcs-érték pár.

231
00:10:41,451 --> 00:10:43,950
Ez egy gyakori dolog
számítógép tudomány-kulcsértékpárhoz.

232
00:10:43,950 --> 00:10:45,770
Ez a fajta a szerszám a kereskedelemben.

233
00:10:45,770 --> 00:10:47,040
A kulcs és az érték.

234
00:10:47,040 --> 00:10:49,390
Egy szó, majd néhány
szót vagy szavakat.

235
00:10:49,390 --> 00:10:53,790
És ebben az esetben, a kulcs href,
és ez az érték, hogy a teljes URL-t.

236
00:10:53,790 --> 00:10:57,890
És mi az az attribútum nem ez
befolyásolja a viselkedését egy tag.

237
00:10:57,890 --> 00:11:01,010
És ebben az esetben van szükség, hogy befolyásolja
viselkedését a horgony tag,

238
00:11:01,010 --> 00:11:04,140
mert szükségünk van a horgonyt
ezt a linket valahol.

239
00:11:04,140 --> 00:11:06,960
És hogy te, hogy az
útján az attribútumot.

240
00:11:06,960 --> 00:11:08,970
>> Így fogok menni előre
és mentse a fájlt most.

241
00:11:08,970 --> 00:11:11,300
Menj vissza a böngésző és reload.

242
00:11:11,300 --> 00:11:14,580
És íme, most már a
kezdetei jogos weboldal.

243
00:11:14,580 --> 00:11:18,420
Szuper-egyszerű, de ha fölé viszi
this-- értesítést a bal alsó sarokban,

244
00:11:18,420 --> 00:11:19,830
ez szuper kicsi.

245
00:11:19,830 --> 00:11:21,730
De te látni www.disney.com.

246
00:11:21,730 --> 00:11:27,076
És ha rákattintasz, akkor valóban ez
habverők el engem a disney.com.

247
00:11:27,076 --> 00:11:29,380
Most, a furcsa dolog
itt az, hogy nem

248
00:11:29,380 --> 00:11:33,940
A best-- a leginkább piacképes URL, de
ez rendben van, mert a fájl nem

249
00:11:33,940 --> 00:11:35,360
létezik a World Wide Web.

250
00:11:35,360 --> 00:11:39,740
Létezik egy helyi fájlt látszólag
én Felhasználók directory-- / jharvard--

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

252
00:11:41,890 --> 00:11:42,634
De van egy URL-t.

253
00:11:42,634 --> 00:11:43,800
Ez most történik, hogy a helyi.

254
00:11:43,800 --> 00:11:47,050
Sajnos, sem akkor látogasson
ezt, mert ha beírja ezt az URL,

255
00:11:47,050 --> 00:11:49,980
akkor lenne elmondja a böngésző,
keresse meg a fájlt úgynevezett hello.html

256
00:11:49,980 --> 00:11:50,772
a merevlemezen.

257
00:11:50,772 --> 00:11:53,271
És, persze, kivéve, ha
követte végig kézzel,

258
00:11:53,271 --> 00:11:54,530
ez nem fog létezni ott.

259
00:11:54,530 --> 00:11:55,190
>> Tehát ez rendben van.

260
00:11:55,190 --> 00:11:57,815
Kell még egy út, végül,
hogy ezt a fájlt a web,

261
00:11:57,815 --> 00:12:01,180
de nézzük ugratni egymástól pár
biztonsági vonatkozásai, amit most

262
00:12:01,180 --> 00:12:04,850
látta, és kösse vissza a korábbi
vita a ma reggeli.

263
00:12:04,850 --> 00:12:08,200
Kiderült, hogy ha egy
böngésző szó szerint csak igen

264
00:12:08,200 --> 00:12:12,560
amit mondok, hogy ezt, és úgy tűnik,
hogy ez a helyzet, hogy egy horgony tag

265
00:12:12,560 --> 00:12:17,380
befolyásolja az értékét
Az attribútum nevezett href

266
00:12:17,380 --> 00:12:20,810
de akkor a kijelző a
szöveg, ez tűnik

267
00:12:20,810 --> 00:12:26,520
jelenti azt, hogy én is fel az URL-t
mindkét helyen, majd töltse be újra

268
00:12:26,520 --> 00:12:29,100
és most látni az URL-t és menj a URL-t.

269
00:12:29,100 --> 00:12:32,680
Figyelmeztetés, ha az egérmutatót a bal alsó,
Én valóban ezt még disney.com.

270
00:12:32,680 --> 00:12:38,340
>> Tehát, ha valaha is
phished-- P-H-I-S-H-E-D--

271
00:12:38,340 --> 00:12:42,820
az egyik ilyen hamis e-mailek
re, mint a PayPal a bank,

272
00:12:42,820 --> 00:12:46,470
akkor már valószínűleg ütött linkeket belül
Az e-mail, hogy olvasod, hogy

273
00:12:46,470 --> 00:12:49,970
azt mondja, hogy ide kattintva erősítse
a jelszót, vagy hagyja jóvá a születési

274
00:12:49,970 --> 00:12:53,840
társadalmi vagy valami szociálisan
mérnöki, hogy hozzák nyilvánosságra

275
00:12:53,840 --> 00:12:54,920
információ.

276
00:12:54,920 --> 00:12:57,625
Nos, talán egyfajta venni
Előnye ennek is, nem igaz?

277
00:12:57,625 --> 00:13:01,240
Mondhatnám valamit
mint, www.paypal.com.

278
00:13:01,240 --> 00:13:11,340
És ahelyett, hogy disney.com, I
Lehet menni, mint a badguy.com.

279
00:13:11,340 --> 00:13:12,850
Újratöltése.

280
00:13:12,850 --> 00:13:16,620
És milyen egyszerű ez, hogy balek,
különösen a nem műszaki olvasó

281
00:13:16,620 --> 00:13:20,649
vagy felületesen olvas
olvasó, mint kattintani

282
00:13:20,649 --> 00:13:23,940
egy linket, ami ha rákattintok it--
Igazából nem akar menni badguy.com.

283
00:13:23,940 --> 00:13:25,398
Nem tudom, hogy mi van ott valójában.

284
00:13:25,398 --> 00:13:30,080
Tehát paypal.com, értesítést, az
mit mond ez fog,

285
00:13:30,080 --> 00:13:33,210
de persze, ha lenézek
rendkívül alacsony, ez egy kicsit homályos,

286
00:13:33,210 --> 00:13:34,230
de azt mondja badguy.com.

287
00:13:34,230 --> 00:13:38,644
Ez az egyetlen mondani most
hogy megyek a rossz helyen.

288
00:13:38,644 --> 00:13:41,560
És amikor azt mondta korábban, hogy a bankok
tényleg nem ösztönözheti vagy vonattal

289
00:13:41,560 --> 00:13:44,510
felhasználókat kattintva kapcsolatokkal rendelkező
csak egy megnyilvánulása is.

290
00:13:44,510 --> 00:13:45,430
És ez ilyen egyszerű.

291
00:13:45,430 --> 00:13:48,120
Ön most egy ellenség, ha
teszel valamit, mint ez

292
00:13:48,120 --> 00:13:51,000
és megpróbálják becsapni a felhasználó
a látogató a honlapon.

293
00:13:51,000 --> 00:13:53,320
De most fogjuk tartani
dolgokat, szép és tiszta.

294
00:13:53,320 --> 00:13:55,640
Megyünk, hogy menjen előre
és visszatekerés ezeket a változásokat.

295
00:13:55,640 --> 00:13:56,530
Az oldal újratöltődik.

296
00:13:56,530 --> 00:13:57,740
És megyek vissza disney.com.

297
00:13:57,740 --> 00:14:00,660
>> Lássuk, mi nem kötekedik
ezt leszámítva még egy kicsit.

298
00:14:00,660 --> 00:14:04,160
Tehát a "hello, Disney World."

299
00:14:04,160 --> 00:14:05,950
Azt fogom mondani itt.

300
00:14:05,950 --> 00:14:08,220
Talán megyek, hogy néhány szoba.

301
00:14:08,220 --> 00:14:12,730
"Reméljük, hogy jó szórakozást!"

302
00:14:12,730 --> 00:14:13,830
Mentés.

303
00:14:13,830 --> 00:14:15,850
Újratöltése.

304
00:14:15,850 --> 00:14:19,010
Ez nem rea-- ez nem
amit akartam, nem?

305
00:14:19,010 --> 00:14:21,870
Úgy értem, ha én kezelésére én szöveges
fájlt, mint egy szövegszerkesztő,

306
00:14:21,870 --> 00:14:24,894
mit remélsz fog történni itt?

307
00:14:24,894 --> 00:14:27,060
Igen, úgy érzem, ott
legyen sortörés van,

308
00:14:27,060 --> 00:14:28,799
ezért úgy érzi, hibás valamilyen módon.

309
00:14:28,799 --> 00:14:31,090
De ez valójában szándékos,
mert csak, mint korábban,

310
00:14:31,090 --> 00:14:33,381
A böngésző csak akkor fog
nem amit mondani, hogy igen.

311
00:14:33,381 --> 00:14:34,806
Nem mondtam azt, hogy megtörje vonalak.

312
00:14:34,806 --> 00:14:37,930
Már nem mondta, hogy mozog lefelé, akár
bár, ösztönösen, úgy érzem, mint én.

313
00:14:37,930 --> 00:14:39,805
Így kiderül, szükségünk van
egy kicsit több jelölés,

314
00:14:39,805 --> 00:14:41,390
és megyek, hogy erősít ez a következő.

315
00:14:41,390 --> 00:14:46,160
Megyek előszavában ezt először szia
A mi úgynevezett paragrafus.

316
00:14:46,160 --> 00:14:48,920
Aztán megyek előre
és csavarja a másik mondat

317
00:14:48,920 --> 00:14:54,370
egy másik paragrafus, noha
ők szuper-rövid bekezdések.

318
00:14:54,370 --> 00:14:55,930
Most fogom menteni.

319
00:14:55,930 --> 00:14:57,160
Újratöltése.

320
00:14:57,160 --> 00:14:59,070
És most, hogy
tér, és mi fajta

321
00:14:59,070 --> 00:15:01,680
van szemantikája
két külön bekezdésben.

322
00:15:01,680 --> 00:15:05,290
>> Ez mind szép és jó, de ez
Jó lehet hozzáadni egy képet az oldalon

323
00:15:05,290 --> 00:15:08,710
így fogok menni keresni
Mickey Mouse on Google Images.

324
00:15:08,710 --> 00:15:12,830
És csak a móka kedvéért, én
fog megragadni ezt a képet.

325
00:15:12,830 --> 00:15:15,350
Megyek, hogy menjen előre, és most
megragad az URL ennek a képnek,

326
00:15:15,350 --> 00:15:16,510
bár van más
módon lehet megtenni.

327
00:15:16,510 --> 00:15:18,520
Egyelőre én csak fog másolni az URL.

328
00:15:18,520 --> 00:15:24,770
Megyek, hogy menjen vissza a saját szöveges
fájlt, és fogok mondani itt,

329
00:15:24,770 --> 00:15:31,160
img src = idézet idézőjel bezárva
hogy az URL, szuper hosszú.

330
00:15:31,160 --> 00:15:34,580
És akkor a fogalom egy
A kép egy kicsit más.

331
00:15:34,580 --> 00:15:38,640
Már tényleg nincs fogalma kiindulási
egy képet, és szüntesse meg a képet,

332
00:15:38,640 --> 00:15:40,630
mint egy kezdőcímke zárócímkét.

333
00:15:40,630 --> 00:15:43,840
Tehát úgy érzi, egy kicsit furcsa, hogy
nekem szemantikailag Ehhez

334
00:15:43,840 --> 00:15:45,390
hogy van egy közeli kép tag.

335
00:15:45,390 --> 00:15:46,780
Ez nem hibás.

336
00:15:46,780 --> 00:15:48,840
Ez teljesen korrekt,
és ez ösztönözte,

337
00:15:48,840 --> 00:15:50,870
de van rövidített jelölése.

338
00:15:50,870 --> 00:15:53,780
Tudok a fajta egyszerre
nyitni és zárni ugyanazt a címkét,

339
00:15:53,780 --> 00:15:55,510
és teszi a böngésző boldog.

340
00:15:55,510 --> 00:15:56,950
Tehát ez csak egy kicsit
tömörebb dolgok

341
00:15:56,950 --> 00:15:59,408
hogy fogalmilag tényleg nem
értelme kezdetét és végét.

342
00:15:59,408 --> 00:16:01,190
Ők csak ott van, vagy ők nem.

343
00:16:01,190 --> 00:16:06,020
>> Így fogok menteni ezt, és menjen vissza
az én "hello, world" oldalra, és reload.

344
00:16:06,020 --> 00:16:09,880
És ez egy kicsit az ellenőrzés,
mert ez a kép valójában

345
00:16:09,880 --> 00:16:12,210
egy kicsit nagy, de ez rendben van.

346
00:16:12,210 --> 00:16:13,710
Tudtam átméretezni egy programban.

347
00:16:13,710 --> 00:16:14,900
Vagy tudod mit.

348
00:16:14,900 --> 00:16:17,350
Csak bizonyítani, én
fog tulajdonképpen azt mondják

349
00:16:17,350 --> 00:16:21,760
hogy a szélessége ezt a dolgot kellene
csak 200 pixel, 200 pont.

350
00:16:21,760 --> 00:16:24,360
Hadd menjek előre, és mentse
és töltse be újra, és most az oldalt

351
00:16:24,360 --> 00:16:25,690
úgy néz ki, egy kicsit ésszerűbb.

352
00:16:25,690 --> 00:16:27,260
De észre a mintát.

353
00:16:27,260 --> 00:16:30,030
Nos, a fajta tanított meg minden
HTML bizonyos értelemben, legalábbis

354
00:16:30,030 --> 00:16:33,531
fogalmilag, mert minden HTML van
ezek tags-- nyitott tag, zárt címkék,

355
00:16:33,531 --> 00:16:35,280
és attribútumok
módosítani a viselkedésüket.

356
00:16:35,280 --> 00:16:38,380
És úgy tűnik, minden
tag lehet nulla vagy egy

357
00:16:38,380 --> 00:16:43,005
vagy két vagy több attribútum mindegyik
amely nem egy kicsit más.

358
00:16:43,005 --> 00:16:44,380
Most, hogy tudod, hogy mi van?

359
00:16:44,380 --> 00:16:46,800
Te csak figyelj, hogy valaki
mint én megmondom, mit létezik,

360
00:16:46,800 --> 00:16:50,860
vagy ha csak a Google körül egy bemutató
HTML, és ez tényleg ilyen egyszerű.

361
00:16:50,860 --> 00:16:54,030
>> Valóban, amikor én egyetemista
évvel ezelőtt, és tanult HTML,

362
00:16:54,030 --> 00:16:56,530
az egyik matematika tanítás
asszisztensek most töltött

363
00:16:56,530 --> 00:16:59,600
Egy kis idő tutori nekem
a hasonló fél óra, egy óra,

364
00:16:59,600 --> 00:17:00,660
majd én utamat.

365
00:17:00,660 --> 00:17:03,300
Én utamon felé, hogy
legborzalmasabb honlapok valaha,

366
00:17:03,300 --> 00:17:05,549
amely, úgy tűnik, én nem
igazán haladt túl.

367
00:17:05,549 --> 00:17:09,849
De a lényeg az, hogy ha egyszer
megérteni ezeket az egyszerű ideái

368
00:17:09,849 --> 00:17:13,450
ha misztikus text-- de ezek egyszerű
ötletek a kezdő gondolat

369
00:17:13,450 --> 00:17:15,960
és a záró gondolat, tartása
Mindent szépen egyensúlyban,

370
00:17:15,960 --> 00:17:19,150
keres valamit, módosításával
viselkedése, hogy a tag, hogy tényleg minden

371
00:17:19,150 --> 00:17:20,079
van rá.

372
00:17:20,079 --> 00:17:28,140
És valóban, ha most megy
valami hasonló google.com-- valójában,

373
00:17:28,140 --> 00:17:31,920
menjünk a hely egy kicsit
reasonable-- stanford.edu.

374
00:17:31,920 --> 00:17:37,800
És fogok menni megtekintése,
Fejlesztő, Forrás megtekintése.

375
00:17:37,800 --> 00:17:41,400
Ez csúnya, de notice--
és én nagyítás nyilatkozat

376
00:17:41,400 --> 00:17:43,432
Néhány dolog, ami már ismerős lehet.

377
00:17:43,432 --> 00:17:45,140
Van ez itt,
amely egy böngésző.

378
00:17:45,140 --> 00:17:46,800
Itt jön HTML5.

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

380
00:17:47,634 --> 00:17:49,550
Úgy tűnik, van egy
attribútum, amit én nem

381
00:17:49,550 --> 00:17:51,540
használja, hogy meghatározza a
oldal nyelve,

382
00:17:51,540 --> 00:17:54,380
és ez segít az automatikus
fordítás és ilyesmi.

383
00:17:54,380 --> 00:17:55,546
Itt a fejét az oldal.

384
00:17:55,546 --> 00:17:57,790
Itt a címe Stanford oldalon.

385
00:17:57,790 --> 00:17:59,832
Van egy tag nem tettem
beszélni rákattintani Meta tag.

386
00:17:59,832 --> 00:18:01,540
Ez csak egyfajta
háttér-információ.

387
00:18:01,540 --> 00:18:04,210
Segít a SEO, vagy
Keresőoptimalizáció,

388
00:18:04,210 --> 00:18:06,320
vagy a Google-találatokat, vagy hasonlók.

389
00:18:06,320 --> 00:18:09,029
De ha folyamatosan keresi, folyamatosan
keres, itt a Body tag.

390
00:18:09,029 --> 00:18:11,570
És van fürtök egyéb
címkék már nem beszéltünk még.

391
00:18:11,570 --> 00:18:13,750
De Div egyike a
felosztása az oldalt.

392
00:18:13,750 --> 00:18:16,680
Ez olyan, mint egy láthatatlan téglalap
ha a fajta szeretne mentálisan

393
00:18:16,680 --> 00:18:20,160
osztani az oldalt
különböző egységek az interneten.

394
00:18:20,160 --> 00:18:22,650
Aztán sok divs I
lásd úgynevezett osztály,

395
00:18:22,650 --> 00:18:24,440
de majd jön vissza, hogy a.

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

397
00:18:26,200 --> 00:18:27,730
Az űrlapok az egész weben.

398
00:18:27,730 --> 00:18:30,310
Bármilyen keresőmező te
valaha egy formája.

399
00:18:30,310 --> 00:18:31,490
És így, nézzük valóban látni.

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

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

402
00:18:33,910 --> 00:18:37,660
Az akció ebben a formában, bármilyen
Történelmi okokból az, hogy URL-t.

403
00:18:37,660 --> 00:18:38,840
Módszer "üzenet."

404
00:18:38,840 --> 00:18:44,060
Kiderült, hogy a HTTP kérések használhatja
Az ige "kap", mint láttuk korábban,

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

406
00:18:45,070 --> 00:18:47,030
És látni fogja a különbséget
E egy pillanatra.

407
00:18:47,030 --> 00:18:48,363
Nézzük valóban látni, hogy mi ez.

408
00:18:48,363 --> 00:18:49,830
Térjünk vissza a Stanford oldalon.

409
00:18:49,830 --> 00:18:53,330
Milyen formában ők beszélnek
kb, mit gondolsz?

410
00:18:53,330 --> 00:18:54,485
Mi ugrik ki rád?

411
00:18:54,485 --> 00:18:54,970
>> KÖZÖNSÉG: Keresés mezőbe.

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

413
00:18:55,845 --> 00:18:58,410
Tehát fel a jobb felső
Itt van ez a Keresés mezőbe.

414
00:18:58,410 --> 00:19:02,441
És ez hogyan hajtják végre it-- egy
címke, ami a szó szoros értelmében a nyílt konzol formában.

415
00:19:02,441 --> 00:19:03,940
És akkor nézzük keresni valamit.

416
00:19:03,940 --> 00:19:09,220
Keressünk egy haver
A mine-- "Nick Parlante."

417
00:19:09,220 --> 00:19:11,380
Belép.

418
00:19:11,380 --> 00:19:13,750
És persze, hogy elment a
egy kicsit más URL-t.

419
00:19:13,750 --> 00:19:15,140
Térjünk vissza ide.

420
00:19:15,140 --> 00:19:18,960
Keressünk "képzések".

421
00:19:18,960 --> 00:19:19,460
A fenébe is.

422
00:19:19,460 --> 00:19:20,484
Elmentem egy másik URL-t.

423
00:19:20,484 --> 00:19:23,400
Tehát, a Stanford hozzá néhány mágikus
hogy ők nem viszel az URL

424
00:19:23,400 --> 00:19:25,820
hogy láttuk a
akció attribútum van.

425
00:19:25,820 --> 00:19:32,480
De ebben a formában itt végre tisztán
Ez által jelölés van, ezeket a címkéket.

426
00:19:32,480 --> 00:19:35,710
Sőt, itt a bemenet
a keresés típusát, amit akar.

427
00:19:35,710 --> 00:19:38,940
Itt van a bemenet
más típusú keresést.

428
00:19:38,940 --> 00:19:41,960
Itt van a bemenet a húr is.

429
00:19:41,960 --> 00:19:45,394
És így a cél nem az, hogy lezárja
elménket körül az összes ilyen tag

430
00:19:45,394 --> 00:19:46,060
de csak látni.

431
00:19:46,060 --> 00:19:48,300
Ez csak nyitó és záró
címkék és keresi a dolgokat.

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

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

434
00:19:48,920 --> 00:19:49,795
>> KÖZÖNSÉG: [hallható]

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

436
00:19:51,925 --> 00:19:53,550
David J. MALAN: Ez egy jó kérdés.

437
00:19:53,550 --> 00:19:54,660
Ez egy kicsit trükkösebb látni.

438
00:19:54,660 --> 00:19:56,300
Hadd jöjjön vissza, hogy a
kérdés mindössze néhány perc alatt

439
00:19:56,300 --> 00:19:59,000
ha megnézzük egy úgynevezett
CSS, vagy a Cascading Style Sheets,

440
00:19:59,000 --> 00:20:02,500
és próbáljuk meg kikövetkeztetni
annyi az oldalról.

441
00:20:02,500 --> 00:20:08,090
Tehát, ha most megnézzük google.com,
lássuk, mi a lap néz ki.

442
00:20:08,090 --> 00:20:09,840
Azt they're-- ez aranyos ma.

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

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

445
00:20:12,990 --> 00:20:13,690
Minden kész.

446
00:20:13,690 --> 00:20:15,260
Rendben, tehát Forrás megtekintése.

447
00:20:15,260 --> 00:20:19,590
Azt gondolnánk, a Google
nagyon szép forráskód.

448
00:20:19,590 --> 00:20:24,970
Tehát úgy tűnik, hogy mi folyik itt?

449
00:20:24,970 --> 00:20:27,880
És valóban, ez nem is a HTML.

450
00:20:27,880 --> 00:20:30,930
Ez egy úgynevezett JavaScript.

451
00:20:30,930 --> 00:20:32,344
És maradjunk megy és megy.

452
00:20:32,344 --> 00:20:34,010
Azt sem tudom, hol az oldalt kezd.

453
00:20:34,010 --> 00:20:37,240
Azt fogom használni Command
F, nyitó zárójel HTML.

454
00:20:37,240 --> 00:20:38,200
Rendben, ez van.

455
00:20:38,200 --> 00:20:44,150
Találtam kezdete az oldal, és
van annyi dolog van itt.

456
00:20:44,150 --> 00:20:45,310
>> Mi történt valójában?

457
00:20:45,310 --> 00:20:47,460
Nos, tudod mit,
mi is tiszta ezt fel.

458
00:20:47,460 --> 00:20:52,109
Ha ehelyett megy ez Ellenőrizzük
eszköztár, ez a különleges diagnosztikai eszköz,

459
00:20:52,109 --> 00:20:54,150
és nem megy a hálózat,
ahol folyamatosan megy ma,

460
00:20:54,150 --> 00:20:56,420
de ha elmegyek Elements,
ami igazán szép

461
00:20:56,420 --> 00:20:59,990
az, hogy a böngésző egy csomó
sokkal jobb szeme, mint én.

462
00:20:59,990 --> 00:21:02,670
És a böngésző tudja olvasni
hogy rendetlenség a weboldal,

463
00:21:02,670 --> 00:21:04,700
hogy a HTML mail mi csak
nézett, és azt is

464
00:21:04,700 --> 00:21:08,340
feldolgozni, vagy olvassa el és
elemezze és formázza meg

465
00:21:08,340 --> 00:21:09,910
egy szép ember-barát módon.

466
00:21:09,910 --> 00:21:11,740
Tehát, amit látok most
Ezen a képernyőn ide

467
00:21:11,740 --> 00:21:15,470
alatt Elements, pontosan ugyanazt a tartalmat,
de már behúzott mindent,

468
00:21:15,470 --> 00:21:18,140
ők már színezett, de
ez pontosan ugyanaz a szöveg

469
00:21:18,140 --> 00:21:19,620
amit letöltöttem a szerverről.

470
00:21:19,620 --> 00:21:23,630
>> És mi szép most látok
a szervezetben, az instance-- értesítést,

471
00:21:23,630 --> 00:21:26,480
Az oldal még mindig áll
A csak egy fej és egy test,

472
00:21:26,480 --> 00:21:28,660
és én is hierarchikusan merülés itt.

473
00:21:28,660 --> 00:21:32,420
Figyeljük meg, hogy a Google úgy tűnik, hogy
hogy divs-- ez és ez.

474
00:21:32,420 --> 00:21:33,310
Azt lehet bővíteni, hogy.

475
00:21:33,310 --> 00:21:35,370
Van egy csomó más divs.

476
00:21:35,370 --> 00:21:36,900
Tehát ez egy kicsit bonyolult.

477
00:21:36,900 --> 00:21:37,400
De várj.

478
00:21:37,400 --> 00:21:40,970
Ez úgy tűnik, hogy sokkal
olvasható, viszonylag, mint ez.

479
00:21:40,970 --> 00:21:43,840
Miért Google kínos
magát elküldésének

480
00:21:43,840 --> 00:21:50,400
ez a hatalmas rendetlenség a kódex egyes
sort, csak hogy végre valami

481
00:21:50,400 --> 00:21:53,640
hogy úgy néz ki, egyszerű, első pillantásra?

482
00:21:53,640 --> 00:21:55,270
Mint, miért nem hozzá több hely?

483
00:21:55,270 --> 00:21:56,811
Miért nem nyomja meg az Enter, mint én?

484
00:21:56,811 --> 00:21:59,110
Nézd, milyen jó voltam
írási egy internetes oldalon.

485
00:21:59,110 --> 00:22:00,680
Azt hit Enter oly szorgalmasan.

486
00:22:00,680 --> 00:22:03,760
Azt behúzva, így minden
olyan szép és olvasható.

487
00:22:03,760 --> 00:22:08,463
A Google miért nem gyakorolják az ugyanaz?

488
00:22:08,463 --> 00:22:11,409
>> KÖZÖNSÉG: [hallható]

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

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

491
00:22:13,180 --> 00:22:14,270
Nagyon szép.

492
00:22:14,270 --> 00:22:16,650
Nem kell valamilyen
személy Google kézzel

493
00:22:16,650 --> 00:22:18,160
frissítése a honlapon már.

494
00:22:18,160 --> 00:22:20,010
Ez nem 1999 már.

495
00:22:20,010 --> 00:22:21,140
Tehát ezek szoftver.

496
00:22:21,140 --> 00:22:25,397
Vannak más eszközök
generál dinamikusan ők HTML.

497
00:22:25,397 --> 00:22:27,480
Persze, hogy a kód maga
írta emberek,

498
00:22:27,480 --> 00:22:30,220
de a valóság az,
ez elég elmondhatjuk,

499
00:22:30,220 --> 00:22:33,340
A böngésző biztosan nem
érdekel, hogy rendetlen a kód.

500
00:22:33,340 --> 00:22:35,940
De van egy még
kényszerítő technikai ok

501
00:22:35,940 --> 00:22:42,580
hogy a Google forgalmazza a HTML
kódot egy ilyen hanyag, látszólag

502
00:22:42,580 --> 00:22:48,350
nyomasztó módon minden összezsúfolva
nagyon kevés way-- nagyon kevés

503
00:22:48,350 --> 00:22:51,274
ahogy a formázás, mint én.

504
00:22:51,274 --> 00:22:52,570
>> KÖZÖNSÉG: [hallható]

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

506
00:22:53,528 --> 00:22:54,040
Miért?

507
00:22:54,040 --> 00:22:55,680
És mit mondott, Lydia?

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

509
00:22:56,240 --> 00:22:57,281
Miért gyorsabb?

510
00:22:57,281 --> 00:22:58,156
KÖZÖNSÉG: [hallható]

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

512
00:23:00,522 --> 00:23:02,230
David J. MALAN: Van
nincs hely, hogy olvassa el.

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

514
00:23:02,730 --> 00:23:04,560
Tehát úgy gondolja, hogy mi az a hely.

515
00:23:04,560 --> 00:23:08,394
Így minden karaktert a billentyűzeten tart
bizonyos mennyiségű helyet, hogy képviselje,

516
00:23:08,394 --> 00:23:10,560
akár fizikailag, akár tetszik,
vesz fel, hogy sok helyet,

517
00:23:10,560 --> 00:23:13,250
vagy valahogy alatt
motorháztető, amely előírja, hogy a memória.

518
00:23:13,250 --> 00:23:15,740
És mint aside-- és mi
még beszélni ezt tomorrow--

519
00:23:15,740 --> 00:23:19,930
minden karaktert a billentyűzeten
tipikusan 8 bit, vagy egy bájt.

520
00:23:19,930 --> 00:23:23,360
Tehát a minta 8 nullát vagy
is, vagy csak 1 byte, mint mi

521
00:23:23,360 --> 00:23:24,720
emberek jellemzően mondani.

522
00:23:24,720 --> 00:23:27,690
Tehát ez a kicsi, de
ez még mindig nem nulla.

523
00:23:27,690 --> 00:23:29,940
Ez még mindig egy kis mennyiségű helyet.

524
00:23:29,940 --> 00:23:36,082
Tehát, ha egy mérnök vagy Google találat
a szóköz csak egyszer, és tegyük fel,

525
00:23:36,082 --> 00:23:38,540
Google számára ez a szuper-popular--
Tegyük fel, hogy egy milliárd ember

526
00:23:38,540 --> 00:23:40,780
látogasson el a honlapon egy nap,
vagy valamilyen emberek száma

527
00:23:40,780 --> 00:23:43,290
keresse fel a honlap egy
milliárd alkalommal egy nap,

528
00:23:43,290 --> 00:23:48,890
hány további bájt van, hogy
szoftvermérnök csak költség Google

529
00:23:48,890 --> 00:23:51,310
ütő ő szóköz egyszer?

530
00:23:51,310 --> 00:23:52,692
>> KÖZÖNSÉG: [hallható]

531
00:23:52,692 --> 00:23:54,150
David J. MALAN: nem elég, hogy rossz.

532
00:23:54,150 --> 00:23:57,070
Csak egy byte-szor egy milliárd.

533
00:23:57,070 --> 00:23:57,871
Tehát egy--

534
00:23:57,871 --> 00:23:59,120
KÖZÖNSÉG: 8000000000 gigabájt.

535
00:23:59,120 --> 00:24:00,370
David J. MALAN: Nem 8000000000.

536
00:24:00,370 --> 00:24:01,240
8000000000 bájt.

537
00:24:01,240 --> 00:24:02,410
De 1 gigabájt.

538
00:24:02,410 --> 00:24:04,080
1 gigabájt lesz a mértékegység.

539
00:24:04,080 --> 00:24:08,240
Ha ő nem két
terek, 2 gigabájt.

540
00:24:08,240 --> 00:24:09,030
Három gigabájt.

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

542
00:24:09,530 --> 00:24:11,860
Ez mérlegek drágán.

543
00:24:11,860 --> 00:24:16,150
És az olyan esetekben, mint a Google,
amelyek megadják, szélsőséges esetekben,

544
00:24:16,150 --> 00:24:21,450
vannak más kérdések merülnek fel, csak
azáltal, hogy nagyon ésszerű döntéseket

545
00:24:21,450 --> 00:24:25,744
vagy vesz nagyon egyszerű emberi tevékenységek,
mert nagyított hatása.

546
00:24:25,744 --> 00:24:27,660
Tehát az egyik oka
ez úgy néz ki, sűrített

547
00:24:27,660 --> 00:24:30,660
pontosan úgy, ahogy Victoria said-- volt
Csak generált számítógépek egyébként.

548
00:24:30,660 --> 00:24:31,900
Tehát nem nagy ügy.

549
00:24:31,900 --> 00:24:33,309
Hagyja, hogy a böngésző kitalálni.

550
00:24:33,309 --> 00:24:35,350
De ez is tudatosan
nincs sok hely,

551
00:24:35,350 --> 00:24:36,766
mert a tér nem szükséges.

552
00:24:36,766 --> 00:24:38,250
És a tér valóban pénzbe kerül.

553
00:24:38,250 --> 00:24:40,670
>> Ez sem kerül időben,
mert csak, hogy álljon

554
00:24:40,670 --> 00:24:44,670
hogy sokkal több adatot ki
google.com székhelye csak

555
00:24:44,670 --> 00:24:47,710
kapott, hogy bizonyos mennyiségű
idő, akkor is, ha ez ezredmásodperc

556
00:24:47,710 --> 00:24:51,190
vagy ezredmásodperc, de összeadódik
mint oly sok felhasználó, vagy ami valószínűbb,

557
00:24:51,190 --> 00:24:52,270
valószínűleg pénzbe.

558
00:24:52,270 --> 00:24:54,690
A Google valószínűleg csatlakozik
valaki a világon, az egyik

559
00:24:54,690 --> 00:24:56,398
e hajol
pontokat, és ha van

560
00:24:56,398 --> 00:24:59,880
valamilyen pénzügyi kapcsolat
amelyben ezek az adatok pénzbe,

561
00:24:59,880 --> 00:25:01,730
Lehet, valamint
minimalizálása, hogy mennyi adatot

562
00:25:01,730 --> 00:25:04,530
ők kiköpte a
az internetes kapcsolat.

563
00:25:04,530 --> 00:25:07,630
>> Tehát az a vicces, de végül,
vagy talán a megnyugtató dolog,

564
00:25:07,630 --> 00:25:11,030
az, hogy bár ez úgy néz ki szörnyen
nyomasztó, a végén a nap,

565
00:25:11,030 --> 00:25:16,750
ez még mindig pontosan ugyanolyan elvek
ezt a nagyon egyszerű oldalt itt egy HTML

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

567
00:25:17,390 --> 00:25:20,610
Tehát csak összefoglalni, és így
Van egy kanonikus verzió, ha nem

568
00:25:20,610 --> 00:25:25,900
következő mentén választás itt, itt
lehet a legegyszerűbb weboldalak,

569
00:25:25,900 --> 00:25:28,240
így valami játszani talán később.

570
00:25:28,240 --> 00:25:30,790
>> Nos, nézzük bevezetni
pár más ötletek most.

571
00:25:30,790 --> 00:25:33,420
Azon vagyunk, hogy vezessenek
egy úgynevezett stílus tag.

572
00:25:33,420 --> 00:25:38,110
Mi stilizálhatja ezt az oldalt
több érdekes módon.

573
00:25:38,110 --> 00:25:40,860
Tehát míg a HTML e-mail
arról szól megjelöléséről

574
00:25:40,860 --> 00:25:44,470
Az adatok egyfajta meghatározva a
böngésző hogyan strukturálják az adatokat,

575
00:25:44,470 --> 00:25:48,110
hová tegye, CSS, vagy
Cascading Style Sheets,

576
00:25:48,110 --> 00:25:52,640
egy második nyelv,
általában kap keveredni HTML

577
00:25:52,640 --> 00:25:55,670
mivel mi see-- de mi is tiszta
hogy akár egy moment-- vevő

578
00:25:55,670 --> 00:25:59,850
ez az utolsó mérföld, és stilizálja azt.

579
00:25:59,850 --> 00:26:02,460
Ez lesz a megfelelő szín,
A betűméret csak jobb,

580
00:26:02,460 --> 00:26:03,860
A helymeghatározás csak jobb.

581
00:26:03,860 --> 00:26:06,510
Ez az egész arról az esztétika
vagy formázza, és nem a

582
00:26:06,510 --> 00:26:08,330
Az alapvető adatok is.

583
00:26:08,330 --> 00:26:11,390
És a legegyszerűbb módja, hogy mutassa
ez talán jó példával.

584
00:26:11,390 --> 00:26:15,320
Szóval megyek át
az én egyszerű szöveges fájl.

585
00:26:15,320 --> 00:26:17,970
És csak egy pillanatra, én
séta minket a folyamat

586
00:26:17,970 --> 00:26:19,360
Az ezt magunkat.

587
00:26:19,360 --> 00:26:23,310
>> Fogok menni vissza a fájlt
Itt és újratölti az oldalt csak

588
00:26:23,310 --> 00:26:25,800
megerősíteni, amit úgy néz ki.

589
00:26:25,800 --> 00:26:27,190
Ez itt tartunk most.

590
00:26:27,190 --> 00:26:31,170
Úgy érzem, a gyerekek élvezni fogják
némi színt a weboldalon.

591
00:26:31,170 --> 00:26:34,480
Így fogok menni ide
a fej az oldal.

592
00:26:34,480 --> 00:26:38,130
És én fogom csinálni stílus / stílus.

593
00:26:38,130 --> 00:26:44,060
És akkor belsejében ez, megyek
mondani a test az én page--

594
00:26:44,060 --> 00:26:46,870
és ez a formázás, a
Első pillantásra talán egy kicsit

595
00:26:46,870 --> 00:26:49,400
Furcsa, de a hagyományos.

596
00:26:49,400 --> 00:26:55,010
Azt fogom mondani, hogy a háttérben
színes oldal zöldnek kell lennie.

597
00:26:55,010 --> 00:26:57,960
És ez sajnos
fajta nem a legjobb design.

598
00:26:57,960 --> 00:27:00,710
Figyeljük meg, hogy a korábban
a HTML világában,

599
00:27:00,710 --> 00:27:03,190
Azt mondta, hogy attribútumok
ezek kulcsértékpárok.

600
00:27:03,190 --> 00:27:05,760
Valami egyenlő idézet
idézet vége "valami".

601
00:27:05,760 --> 00:27:08,810
A világ a CSS, ami
Ajánlott néhány különböző emberek,

602
00:27:08,810 --> 00:27:11,020
úgy határozott, hogy a
világ, kulcsértékpárok

603
00:27:11,020 --> 00:27:13,920
lenne szó kettőspont valamit.

604
00:27:13,920 --> 00:27:15,220
Tehát ugyanaz a gondolat, mégis.

605
00:27:15,220 --> 00:27:18,620
Ez tömörítő érték
néhány kulcsfontosságú, hogy valahogy

606
00:27:18,620 --> 00:27:20,330
befolyásolja a viselkedését ezen az oldalon.

607
00:27:20,330 --> 00:27:21,901
>> És akkor talán kitalálni.

608
00:27:21,901 --> 00:27:24,150
Mi ez valószínűleg fog
hogy még ha soha nem

609
00:27:24,150 --> 00:27:27,867
látott HTML vagy CSS előtt?

610
00:27:27,867 --> 00:27:29,450
KÖZÖNSÉG: változtassa meg a háttér színét.

611
00:27:29,450 --> 00:27:30,560
David J. MALAN: Igen,
változtatni a háttér színét.

612
00:27:30,560 --> 00:27:33,280
És különösen a
háttér színe a test.

613
00:27:33,280 --> 00:27:36,290
De amennyiben az
testület most a web

614
00:27:36,290 --> 00:27:38,870
page-- ez az egyetlen dolog,
a címsor alatt really--

615
00:27:38,870 --> 00:27:40,870
ez valószínűleg a
befolyásolják ugyanezt.

616
00:27:40,870 --> 00:27:41,430
Tehát lássuk.

617
00:27:41,430 --> 00:27:42,490
Mentsük ezt.

618
00:27:42,490 --> 00:27:44,310
Menj ide, és töltse be újra.

619
00:27:44,310 --> 00:27:46,140
Elég undorító.

620
00:27:46,140 --> 00:27:48,070
És mi a helyzet
itt van egy mellékhatás.

621
00:27:48,070 --> 00:27:49,850
Én csak úgy döntött, ez a kép véletlenszerűen.

622
00:27:49,850 --> 00:27:53,305
Miért van a zöld nem
átható mögött Mickey?

623
00:27:53,305 --> 00:27:54,180
KÖZÖNSÉG: [hallható]

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

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

626
00:27:57,880 --> 00:28:01,750
Kiderül, hogy a képek, szép
sok minden kép, amit lehet használni,

627
00:28:01,750 --> 00:28:03,670
mind rectangles-- téglalapok.

628
00:28:03,670 --> 00:28:07,710
Még ha Mickey vannak görbék
magában, és a háttérben,

629
00:28:07,710 --> 00:28:09,330
Ebben az összefüggésben kell lennie valaminek.

630
00:28:09,330 --> 00:28:10,280
Meg kell fehér.

631
00:28:10,280 --> 00:28:11,910
Azt, hogy fekete, vagy valami mást.

632
00:28:11,910 --> 00:28:13,650
Ez lehet átlátszó.

633
00:28:13,650 --> 00:28:16,100
És valóban, én is
nyissa Mickey Mouse ide

634
00:28:16,100 --> 00:28:18,590
a program neve Photoshop
vagy valami hasonló

635
00:28:18,590 --> 00:28:21,176
és a változás az összes, hogy a fehér
háttér átlátható,

636
00:28:21,176 --> 00:28:22,550
így a zöld lenne ragyog rajta.

637
00:28:22,550 --> 00:28:25,980
De ez olyasmi, amit kellene
kérni magam, vagy egy grafikus

638
00:28:25,980 --> 00:28:28,130
vagy a tervező az én
cég, például,

639
00:28:28,130 --> 00:28:31,490
tenni, különösen azért, mert én csak
kölcsönzött ez az interneten.

640
00:28:31,490 --> 00:28:33,030
De hogy ez miért történik.

641
00:28:33,030 --> 00:28:34,980
>> Tehát mi mást akarunk csinálni?

642
00:28:34,980 --> 00:28:41,040
Nos, érdemes lehet mondjuk
Nagyon remélem, élvezni az üdülés.

643
00:28:41,040 --> 00:28:44,150
És hangsúlyt szeretnék
hogy ez az erős,

644
00:28:44,150 --> 00:28:48,310
és így azt mondom nyitott erős és
zárja erős, majd töltse be újra.

645
00:28:48,310 --> 00:28:50,320
És ez egy kicsit nehéz
hogy a kivetítő

646
00:28:50,320 --> 00:28:53,250
de talán most tényleg
ugrik ki téged egy kicsit.

647
00:28:53,250 --> 00:28:56,180
Így hozzá dőlt ebben
módon, félkövér néző ezen a módon.

648
00:28:56,180 --> 00:28:57,500
Mi lehet változtatni a színeket.

649
00:28:57,500 --> 00:29:01,610
Sőt, csak a hecc kedvéért, én
fog menni előre, és erre a célra.

650
00:29:01,610 --> 00:29:05,120
Nem igazán tetszik, hogy én
bekezdések ez közel vannak egymáshoz,

651
00:29:05,120 --> 00:29:06,870
úgyhogy lehet ilyesmire.

652
00:29:06,870 --> 00:29:13,310
Azt fogom mondani a böngésző,
változás minden paragrafus van,

653
00:29:13,310 --> 00:29:16,952
nézzük say-- valójában, tudod mit,
nézzük igazítsa text-align, központ.

654
00:29:16,952 --> 00:29:19,410
És ismét, tudom, hogy ez csak
mert valaki tanított meg rá

655
00:29:19,410 --> 00:29:21,118
vagy Utánanéztem a
egy online referencia.

656
00:29:21,118 --> 00:29:22,450
Szóval hadd mentse el ezt.

657
00:29:22,450 --> 00:29:25,070
És, ah, most már
középre a kép ott.

658
00:29:25,070 --> 00:29:28,490
És valóban, tudod mit, ha
Mozgok én képet egy bekezdés

659
00:29:28,490 --> 00:29:34,510
tag-- így egy harmadik bekezdésben
annak ellenére, hogy nem a szövegre.

660
00:29:34,510 --> 00:29:36,917
Nézzük meg, de ekkor és újra.

661
00:29:36,917 --> 00:29:40,000
Most a oldal kezdi meg kedves
of-- Úgy értem, ez még mindig elég csúnya,

662
00:29:40,000 --> 00:29:43,180
de legalább úgy néz ki, mint én töltöttem
Két perc helyett egy perc

663
00:29:43,180 --> 00:29:43,950
így.

664
00:29:43,950 --> 00:29:47,200
>> És így, fokozatosan, tehetjük
ezek esztétikai változtatásokat most az oldalt?

665
00:29:47,200 --> 00:29:50,860
Már nem igazán változott az adatokat a
oldal kivételével hozzáadjuk a szó valóban.

666
00:29:50,860 --> 00:29:52,650
Adtam metaadatokat, ha úgy tetszik.

667
00:29:52,650 --> 00:29:54,830
Hé, a böngésző, hogy a
szó "igazán" merész.

668
00:29:54,830 --> 00:29:56,940
De az adatok nem erős.

669
00:29:56,940 --> 00:29:57,830
Ez metaadatokat.

670
00:29:57,830 --> 00:29:59,410
Az adatok "igazán."

671
00:29:59,410 --> 00:30:02,200
Tehát még mindig van néhány
ugyanazokat a fogalmakat, mint korábban.

672
00:30:02,200 --> 00:30:05,990
Most, persze, ez nem az interneten,
így fogok tenni egy utolsó lépés itt.

673
00:30:05,990 --> 00:30:10,300
>> Megyek menni hello.html
és csak kiemelni, és másolja ezt.

674
00:30:10,300 --> 00:30:12,285
És most megyek
bemegy Cloud9, amely

675
00:30:12,285 --> 00:30:13,910
Majd végigvezeti csak egy pillanatra.

676
00:30:13,910 --> 00:30:17,080
És esély akkor hamarosan, ha
nem tette meg, a képernyőn, mint ez.

677
00:30:17,080 --> 00:30:21,080
És hadd adjak egy gyors
bemutatjuk a Cloud9 valójában.

678
00:30:21,080 --> 00:30:26,590
Így ismét felhő 9
ez a felhő-alapú szolgáltatás

679
00:30:26,590 --> 00:30:30,580
hogy megadja neked és nekem az illúzió
, amelyek a saját virtuális gép

680
00:30:30,580 --> 00:30:33,090
a felhő, technikailag
egy tartályt a felhő,

681
00:30:33,090 --> 00:30:35,160
hogy teljes mértékben
adminisztrátori jogosultsággal.

682
00:30:35,160 --> 00:30:37,130
Így elméletileg senki
máshol a világon

683
00:30:37,130 --> 00:30:39,152
Belépés a képernyőn vagyok
nézi most,

684
00:30:39,152 --> 00:30:40,860
kivéve talán az emberek
aki fut a helyén,

685
00:30:40,860 --> 00:30:43,470
mert technikailag vannak
fizikai hozzáférés és így tovább.

686
00:30:43,470 --> 00:30:44,740
>> Tehát mit látunk ebben a környezetben?

687
00:30:44,740 --> 00:30:46,230
Megyek kicsinyítéshez
mert ez egy kicsit kicsi.

688
00:30:46,230 --> 00:30:48,104
És hadd pont felett
Itt csak egy pillanatra.

689
00:30:48,104 --> 00:30:53,210
A bal oldali az én és a
képernyőn, van egy fájl böngésző bal oldalon.

690
00:30:53,210 --> 00:30:55,362
Tehát hasonló szellemben
Mac OS és a Windows.

691
00:30:55,362 --> 00:30:57,070
Ezek mind a
fájlok számlám.

692
00:30:57,070 --> 00:30:59,250
És alapértelmezés szerint, ha a
figyelembe, mint az enyém,

693
00:30:59,250 --> 00:31:05,090
látni fogja, vagy hamarosan látni
helloworld.html és readme.md.

694
00:31:05,090 --> 00:31:07,950
Több mint itt a jobb oldalon, ez
ahol a szöveges fájlok fognak menni.

695
00:31:07,950 --> 00:31:11,620
Ha valaha is használt Microsoft
Szó vagy Notepad vagy TextEdit

696
00:31:11,620 --> 00:31:14,100
ez szó én szerkesztése
fájlok fog menni.

697
00:31:14,100 --> 00:31:16,540
És akkor a legnagyobb misztikus
jellemzője ennek a környezet

698
00:31:16,540 --> 00:31:20,100
hogy nem igazán kell használni az
idelent úgynevezett terminál ablakot.

699
00:31:20,100 --> 00:31:23,390
Ha már használt DOS
yesteryear, ez a Linux

700
00:31:23,390 --> 00:31:25,450
vagy a Linux egyenértékű DOS.

701
00:31:25,450 --> 00:31:28,190
Ez egy szöveg-alapú interface--
nincs kattintással, nem húzzuk.

702
00:31:28,190 --> 00:31:30,770
Minden, amit tehetünk, hogy írja
parancsokat, de a parancsokat

703
00:31:30,770 --> 00:31:34,400
létrehozhat fájlokat, a fájlok áthelyezése, nyílt
könyvtárak, közel könyvtárak,

704
00:31:34,400 --> 00:31:35,740
do tetszőleges számú dolog.

705
00:31:35,740 --> 00:31:38,060
De most, akkor csak
töltjük az időnket ide.

706
00:31:38,060 --> 00:31:39,050
>> És így csináljuk.

707
00:31:39,050 --> 00:31:41,008
Ha ebben a
környezet, amely be

708
00:31:41,008 --> 00:31:45,900
lehet, ha létre egy munkaterületet
már, megy előre, és csak megy felfelé

709
00:31:45,900 --> 00:31:48,690
File, New egy pillanatra.

710
00:31:48,690 --> 00:31:51,740
És, hogy kapsz egy új
fül itt a közepén.

711
00:31:51,740 --> 00:31:54,250
És én csak-- és menjünk
megy előre, és erre a célra.

712
00:31:54,250 --> 00:31:59,910
Menjünk előre, és most már fájlba mentése
és megy előre, és hívja meg hello.html,

713
00:31:59,910 --> 00:32:02,740
Nem tévesztendő össze a
helloworld.html, amely

714
00:32:02,740 --> 00:32:06,910
jött az új ingyenes fiókot,
amely csak egy minta fájlt.

715
00:32:06,910 --> 00:32:11,020
Látni fogja, hogy hirtelen megjelenik,
valószínűleg a bal oldali,

716
00:32:11,020 --> 00:32:12,810
és a lap továbbra is nyitott.

717
00:32:12,810 --> 00:32:21,300
És hadd javasoljuk, most, hogy újra
ez a fájl, vagy néhány variánsai.

718
00:32:21,300 --> 00:32:24,607
És ha nem elég látni a
képernyő, ez megegyezik a diákat

719
00:32:24,607 --> 00:32:26,190
hogy valószínűleg van egy másik lapon.

720
00:32:26,190 --> 00:32:29,296
>> Tehát röviden, hogy az első weboldalt,
mentse el, majd egy pillanat,

721
00:32:29,296 --> 00:32:31,170
Majd én megmutatom, hogyan
ténylegesen megtekintéséhez.

722
00:32:31,170 --> 00:32:32,970
De a változás legalább egy dolgot.

723
00:32:32,970 --> 00:32:35,400
Változás helloworld a
valamit a saját választása,

724
00:32:35,400 --> 00:32:39,821
így meg van győződve, hogy ez a
fájlt, és nem az, aki az imént létrehozott.

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

726
00:32:40,320 --> 00:32:43,804
És ha nem ready--
rush--, ha készen áll,

727
00:32:43,804 --> 00:32:46,220
megy előre, és mentse el a fájlt
ha már elvégezte ezeket a változásokat.

728
00:32:46,220 --> 00:32:49,540
És ha rákattint a
Run gomb fel tetején, ezt

729
00:32:49,540 --> 00:32:53,610
kell nyitni egy új lapot, amely megmondja,
mit URL, akkor látogasson el a fájlt,

730
00:32:53,610 --> 00:32:56,380
de lehet, hogy egy pillanatra
idézet idézőjel bezárva "start Apache", amely

731
00:32:56,380 --> 00:32:58,820
a neve a webszerver.

732
00:32:58,820 --> 00:33:02,430
Ezért legyünk óvatosak, hogy pontosan
mi van a fájlban végül.

733
00:33:02,430 --> 00:33:04,610
Tehát most, én nagyítás.

734
00:33:04,610 --> 00:33:07,780
Ha elkezd gépelni
nyílt konzol HTML, értesítés

735
00:33:07,780 --> 00:33:09,650
ez arra kéri, hogy befejezzem a gondolatot.

736
00:33:09,650 --> 00:33:13,750
És ha végeztem a gondolat, hogy
automatikusan ad nekem a záró tag.

737
00:33:13,750 --> 00:33:17,190
De az elvárás aztán majd nyomja
Enter, majd mozgassa odabenn

738
00:33:17,190 --> 00:33:21,180
és ne fej és belül
akkor én test belsejében.

739
00:33:21,180 --> 00:33:24,430
És ez egy kicsit furcsa először,
mert ez ezzel a munka az Ön számára,

740
00:33:24,430 --> 00:33:27,110
de észre, hogy végül
takarít meg karakternél.

741
00:33:27,110 --> 00:33:30,500
És valóban, egy nagyon gyakori jellemzője
programozási környezet manapság

742
00:33:30,500 --> 00:33:33,260
mind a webes fejlesztés, mint a
ez és a tényleges programozás,

743
00:33:33,260 --> 00:33:36,960
amely fogunk beszélni holnap,
ezek automatikus teljes funkciók,

744
00:33:36,960 --> 00:33:39,710
dolog, hogy csak lehetővé teszi a
programozó vagy tervező

745
00:33:39,710 --> 00:33:42,010
hogy írja kevesebb billentyűket
elérni ugyanazt a dolgot.

746
00:33:42,010 --> 00:33:43,176
Néha jó, mégis.

747
00:33:43,176 --> 00:33:44,560
Néha csak bosszantó.

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

749
00:33:49,290 --> 00:33:54,010
És újra, ha már átírt
A dia vagy valamilyen variánsa,

750
00:33:54,010 --> 00:33:57,360
akkor kattintson a Futtatás gombra fel tetején.

751
00:33:57,360 --> 00:33:59,910
És akkor az alsó
ablak, akkor tájékoztatni kell

752
00:33:59,910 --> 00:34:04,290
hogy milyen URL meglátogathatja a weboldal.

753
00:34:04,290 --> 00:34:08,790
Az enyém például, a
business-daharvard.c9users.io

754
00:34:08,790 --> 00:34:11,480
és így tovább.

755
00:34:11,480 --> 00:34:14,580
Rendben, igen, legyen me-- bármilyen kérdése?

756
00:34:14,580 --> 00:34:19,460
Bármilyen további kérdése van csak arra, hogy
ez működik, mielőtt új funkciókat?

757
00:34:19,460 --> 00:34:21,692
És hadd javasolni, csak
hogy emberek comfortable--

758
00:34:21,692 --> 00:34:24,400
mert ez az egyik dolog, hogy csak
copy-paste vakon, amit tettem.

759
00:34:24,400 --> 00:34:27,177
De csak azért, hogy az emberek birkózni
legalább egy to-do,

760
00:34:27,177 --> 00:34:28,510
Megyek, hogy bekapcsolja a zenét.

761
00:34:28,510 --> 00:34:32,630
Megyek javasolt jegyzékét,
dolog, amit esetleg hozzá.

762
00:34:32,630 --> 00:34:34,086
És akkor biztosan a Google.

763
00:34:34,086 --> 00:34:36,210
És miért nem megyünk
javaslom, hogy próbálja megoldani

764
00:34:36,210 --> 00:34:38,710
legalább egy különleges problémát.

765
00:34:38,710 --> 00:34:45,090
Így tekintve címkék
hadd újra ezt itt.

766
00:34:45,090 --> 00:34:48,280
>> Valójában, hadd tegye
ez egy szöveges formában.

767
00:34:48,280 --> 00:35:02,380
Tegyük fel, hogy többek között a címkék talán
használja itt van néhány tag itt.

768
00:35:02,380 --> 00:35:06,090
Láttuk a paragrafus.

769
00:35:06,090 --> 00:35:07,850
Most ez lesz az automatikus kitöltés.

770
00:35:07,850 --> 00:35:12,220
Paragrafus, a horgony tag.

771
00:35:12,220 --> 00:35:15,250
Tegyük fel, hogy azt szeretnénk, hogy
hogy valami nagyobb,

772
00:35:15,250 --> 00:35:19,480
így előfordulhat, így:
A span címke segítségével.

773
00:35:19,480 --> 00:35:23,010
Nos, lehet, hogy kell egy kis segítség
az, hogy csak egy pillanatra.

774
00:35:23,010 --> 00:35:24,830
Láttuk div.

775
00:35:24,830 --> 00:35:26,170
Meglátod van táblázatot.

776
00:35:26,170 --> 00:35:27,928
Van egy úgynevezett 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
Gyere vissza, hogy egy pillanat alatt.

780
00:35:34,770 --> 00:35:36,590
Mi mást lehet praktikus?

781
00:35:36,590 --> 00:35:38,310
Van erős.

782
00:35:38,310 --> 00:35:43,640
Van hangsúly, vagy inkább em.

783
00:35:43,640 --> 00:35:50,110
There's-- mi mást
Lehet kedve van?

784
00:35:50,110 --> 00:35:51,930
Nos, vessünk egy
nézd, hogy együtt.

785
00:35:51,930 --> 00:35:53,230
Form, amit valaha láttam.

786
00:35:53,230 --> 00:35:54,130
Van formában.

787
00:35:54,130 --> 00:35:56,500
Van bemenet és egy pár mások.

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

789
00:35:58,924 --> 00:36:00,090
Rendben, csináljuk.

790
00:36:00,090 --> 00:36:02,330
Hogy válaszoljak a Victoria
kérdés, először hadd

791
00:36:02,330 --> 00:36:05,020
Csak győződjön meg róla, hogy mindenki
tudja, hogy a halló dolgozik.

792
00:36:05,020 --> 00:36:06,900
Akkor hadd mutassam be
Pár más ötlete.

793
00:36:06,900 --> 00:36:09,209
Akkor hagyja emberek megoldani
Néhány probléma a saját.

794
00:36:09,209 --> 00:36:11,500
Aztán tényleg jön vissza
hogy ez a fogalom a forma,

795
00:36:11,500 --> 00:36:14,950
és mi valóban újra végrehajtani
együtt a front-end felület,

796
00:36:14,950 --> 00:36:16,450
hogy úgy mondjam, a Google is.

797
00:36:16,450 --> 00:36:19,700
Használni fogjuk a Google a hátsó, és hagyja
őket nem a kemény munka, a keresés,

798
00:36:19,700 --> 00:36:22,760
de majd újra az elülső
A Google és a keresési forma

799
00:36:22,760 --> 00:36:24,520
hogy azok a saját honlapján.

800
00:36:24,520 --> 00:36:27,050
És így fogunk térni
ezeket a címkéket csak egy pillanatra.

801
00:36:27,050 --> 00:36:30,270
>> Tehát ez volt az, amit én
javasolt Egy perce.

802
00:36:30,270 --> 00:36:33,940
Mi adhat a stilizáció egy
oldal belsejében ez a stílus tag,

803
00:36:33,940 --> 00:36:36,950
és mi lehet stilizált háttér
szín, a szöveg igazítás,

804
00:36:36,950 --> 00:36:39,000
hogy ez központ vagy balra vagy jobbra.

805
00:36:39,000 --> 00:36:41,630
De nagyon gyorsan tenné
találni, vagy egy web designer

806
00:36:41,630 --> 00:36:44,060
azt találjuk, hogy ez a
lesz egy kicsit nehézkes,

807
00:36:44,060 --> 00:36:48,330
mert te mit csinál
úgynevezett keverési tartalom

808
00:36:48,330 --> 00:36:50,120
prezentációs képezik.

809
00:36:50,120 --> 00:36:53,756
Te keverés adatait
és az esztétika cikke.

810
00:36:53,756 --> 00:36:56,380
És valóban, ha figyelembe vesszük,
mi fog történni át time--

811
00:36:56,380 --> 00:36:58,350
ez egy nagyon kicsi
weboldal, természetesen.

812
00:36:58,350 --> 00:37:01,590
De ha új tartalommal ezen az oldalon
és stílusossá ezt az oldalt,

813
00:37:01,590 --> 00:37:04,650
Az oldal nagyon gyorsan jelentkeznek
hosszabb és hosszabb és hosszabb.

814
00:37:04,650 --> 00:37:07,510
És tegyük fel, hogy szeretnék
Van egy másik weboldal, amely

815
00:37:07,510 --> 00:37:09,010
osztja néhány ilyen attribútumokat.

816
00:37:09,010 --> 00:37:12,350
Tegyük fel, hogy a második weboldal az én
site-- is, azt akarom, hogy minden központban,

817
00:37:12,350 --> 00:37:14,960
és azt is akarom, hogy minden
egy zöld háttér előtt.

818
00:37:14,960 --> 00:37:17,940
Én elég sok lesz, hogy
másolás és beillesztés néhány ezeket a sorokat

819
00:37:17,940 --> 00:37:20,730
figyelembe, hogy a második fájl, amely úgy érzi, rendben van.

820
00:37:20,730 --> 00:37:22,030
Ez megoldja a problémát.

821
00:37:22,030 --> 00:37:26,060
>> De mi van, ha szeretnék egy harmadik oldal
vagy 30. oldal, vagy egy 40. oldalon?

822
00:37:26,060 --> 00:37:28,730
Most megyek, hogy a másolás és
beillesztés egy csomó kettős kód

823
00:37:28,730 --> 00:37:30,430
több fájl.

824
00:37:30,430 --> 00:37:32,600
És így tegyük fel, hogy
Úgy döntök, vagy én mondtam,

825
00:37:32,600 --> 00:37:34,780
hé, mi nem használjuk a
zöld háttér többé.

826
00:37:34,780 --> 00:37:36,380
Fogunk kezdeni a narancs.

827
00:37:36,380 --> 00:37:38,690
Mit kell változtatni?

828
00:37:38,690 --> 00:37:42,900
Nos, meg kell változtatni, hogy a stílus
zöldről narancsra hány helyen?

829
00:37:42,900 --> 00:37:44,920
Mint 30 vagy 40 férőhelyes.

830
00:37:44,920 --> 00:37:45,900
Ez unalmas.

831
00:37:45,900 --> 00:37:47,039
Ez a hibalehetőség.

832
00:37:47,039 --> 00:37:49,580
Van számos oka
ahol nem szeretne indukálni

833
00:37:49,580 --> 00:37:51,840
ezt a fájdalmat magad.

834
00:37:51,840 --> 00:37:54,760
És így nem lenne jó
ha tudnánk venni, amit most

835
00:37:54,760 --> 00:37:58,240
tegye a két sárga
címkék, ezek stílusú címkék

836
00:37:58,240 --> 00:38:04,050
faktort ki, és tegye az összes az én
stilizáció egy központi fájlba

837
00:38:04,050 --> 00:38:08,470
hogy mind a 30 vagy 40 az én más fájlokat
hitelt vagy valahogy hivatkozás,

838
00:38:08,470 --> 00:38:11,640
Nem ellentétben a hálózati
ábrák csinálunk előtt?

839
00:38:11,640 --> 00:38:15,030
>> Tehát, ha megyek itt vagyok
fog ténylegesen javasolni

840
00:38:15,030 --> 00:38:17,880
hogy cserélje ki a
stíluscímke valami

841
00:38:17,880 --> 00:38:21,620
az úgynevezett link tag, amely
szörnyen, rettenetesen nevű,

842
00:38:21,620 --> 00:38:24,370
mert nem használja a
link tag létrehozni, amit

843
00:38:24,370 --> 00:38:26,380
mi emberek tudjuk, mint egy link egy internetes oldalon.

844
00:38:26,380 --> 00:38:29,750
Az, hogy használható, amely tag?

845
00:38:29,750 --> 00:38:31,464
Hogyan hozható létre egy linket egy weboldalon?

846
00:38:31,464 --> 00:38:32,130
Közönség: a a.

847
00:38:32,130 --> 00:38:34,870
David J. MALAN: A egy, vagy horgony
tag, hogy elment a Disney előtt.

848
00:38:34,870 --> 00:38:39,090
A link tag itt azt mondja,
this-- linket nevű fájl

849
00:38:39,090 --> 00:38:44,350
styles.css a kapcsolatot, amelyre
lesz, hogy ez az én stíluslapot.

850
00:38:44,350 --> 00:38:48,290
Tehát ez az egyik az S In
CSS-- Cascading Style Sheets.

851
00:38:48,290 --> 00:38:50,490
Stílus sheet-- két S CSS.

852
00:38:50,490 --> 00:38:52,550
CSS.

853
00:38:52,550 --> 00:38:58,640
Ez csak azt jelenti, hé, a böngészőt, menjen
megtalálni styles.css a helyi kiszolgálón

854
00:38:58,640 --> 00:39:01,870
és használja az ott megadott stíluslapot,
ami azt jelenti, hogy a fájl belsejében

855
00:39:01,870 --> 00:39:05,310
lesz az összes
stylizations, hogy már csak tenni.

856
00:39:05,310 --> 00:39:07,396
És akkor mi van, hogy a fájl
nézhet ez.

857
00:39:07,396 --> 00:39:10,020
És én csak ezt egy gyors
Például azért, mert nem kell

858
00:39:10,020 --> 00:39:12,000
hogy túl sok a gyom itt.

859
00:39:12,000 --> 00:39:17,840
De ha másolni ezt, amit én javaslatot
az, hogy a programozó új fájlt hoz létre,

860
00:39:17,840 --> 00:39:24,450
illessze azokban lines--
whoops-- illessze be ezeket a sorokat,

861
00:39:24,450 --> 00:39:32,270
mentse el styles.css, majd a
A másik fájl, törölje az összes, hogy

862
00:39:32,270 --> 00:39:35,450
és cserélje ki helyette
ezzel link tag.

863
00:39:35,450 --> 00:39:43,090
Tehát ha én link href = "styles.css"
A jogviszony "stylesheet"

864
00:39:43,090 --> 00:39:44,170
A záró tag.

865
00:39:44,170 --> 00:39:45,250
Mentsd el.

866
00:39:45,250 --> 00:39:47,000
Menj vissza a helloworld.

867
00:39:47,000 --> 00:39:48,690
Újratöltése.

868
00:39:48,690 --> 00:39:51,290
>> Szó szerint semmi sem történt.

869
00:39:51,290 --> 00:39:54,710
Ez egy jó dolog, mert
azt jelenti, hogy tulajdonképpen az összes dolgozó.

870
00:39:54,710 --> 00:39:58,860
Annak bizonyítására, annyi, tegyük fel, hogy egy
typo, és én ezt "styles.css"

871
00:39:58,860 --> 00:40:03,080
nagybetűvel kezdve, ami
hibás, majd töltse be újra.

872
00:40:03,080 --> 00:40:05,470
Most láthatjuk, hogy egyszerűen nem működik.

873
00:40:05,470 --> 00:40:06,362
Most, hogy miért?

874
00:40:06,362 --> 00:40:08,070
Nos, vegyünk egy
technika a korábbi.

875
00:40:08,070 --> 00:40:10,153
Hadd menjek előre, és
a böngésző, a Chrome, én

876
00:40:10,153 --> 00:40:12,900
fog nyitni, hogy a különleges
hálózat lapon, mint korábban,

877
00:40:12,900 --> 00:40:15,560
és hadd töltse be újra az oldalt.

878
00:40:15,560 --> 00:40:19,341
Mit nem meglepő, hogy most?

879
00:40:19,341 --> 00:40:20,840
Vagy talán te meglepett, hogy azt.

880
00:40:20,840 --> 00:40:23,225
Akárhogy is, mit látsz most?

881
00:40:23,225 --> 00:40:24,100
KÖZÖNSÉG: [hallható]

882
00:40:24,100 --> 00:40:24,770
David J. MALAN: Ez nem találtak.

883
00:40:24,770 --> 00:40:25,680
Miért nem találtak?

884
00:40:25,680 --> 00:40:28,480
Nos, Styles.css-- tőke
S- nem létezik.

885
00:40:28,480 --> 00:40:29,230
Azt misnamed azt.

886
00:40:29,230 --> 00:40:30,430
Egyszerű elírás.

887
00:40:30,430 --> 00:40:33,816
De kapok érthetően most
404, mert a szerver azt mondja, hé,

888
00:40:33,816 --> 00:40:34,440
ez nem található.

889
00:40:34,440 --> 00:40:36,300
Szó szerint, nem tudom,
hol van a fájl.

890
00:40:36,300 --> 00:40:38,880
Tehát ennek eredményeként, a böngésző
megmutatja, mit tud,

891
00:40:38,880 --> 00:40:42,860
A nyers az oldal tartalmát,
ami egy 200, a HTML,

892
00:40:42,860 --> 00:40:45,390
de a stilizálás nem
egészül ki ezután.

893
00:40:45,390 --> 00:40:47,120
És ez az, ami azt jelentette, lépcsőzetes.

894
00:40:47,120 --> 00:40:49,070
Akkor valami hozzá
után, és ez a fajta

895
00:40:49,070 --> 00:40:50,874
finomítja az esztétika a weboldalt.

896
00:40:50,874 --> 00:40:53,790
És akkor még felülbírálják
stílusok mégis más stíluslap fájlt

897
00:40:53,790 --> 00:40:54,700
ha akarod.

898
00:40:54,700 --> 00:40:57,780
Ez nem talált, bár ebben az esetben,
mert persze, én misnamed meg.

899
00:40:57,780 --> 00:41:00,330
Tehát azt kell rögzíteni, hogy az első.

900
00:41:00,330 --> 00:41:04,667
>> Szóval menjünk előre, és
javaslatot tesz a következő.

901
00:41:04,667 --> 00:41:07,410

902
00:41:07,410 --> 00:41:11,140
Menjünk előre, és erre a célra.

903
00:41:11,140 --> 00:41:14,220
Kezdve talán
A helloworld fájlt,

904
00:41:14,220 --> 00:41:17,740
hadd meghívja egy pár
A funkció javaslatokat.

905
00:41:17,740 --> 00:41:20,400
Tehát, Victoria, te akartad
hogy néhány szöveg nagyobb, igaz?

906
00:41:20,400 --> 00:41:24,555
Rendben, így tudjuk
nem teszik szöveg nagyobb.

907
00:41:24,555 --> 00:41:26,860
És mi minden tépni ki
Csak egy probléma megoldására.

908
00:41:26,860 --> 00:41:30,867
A szöveg nagyobb.

909
00:41:30,867 --> 00:41:32,700
Nem fogom zavarni
írom ezt, amikor

910
00:41:32,700 --> 00:41:35,600
van golyó technológia jobb itt.

911
00:41:35,600 --> 00:41:39,970
Tehát néhány probléma.

912
00:41:39,970 --> 00:41:44,670
Így megyünk próbálni
hogy a szöveg nagyobb.

913
00:41:44,670 --> 00:41:45,170
Rendben.

914
00:41:45,170 --> 00:41:48,360
Mi mást valaki javasolni?

915
00:41:48,360 --> 00:41:50,332
Mi mást lehet akarunk
itt a weblapon?

916
00:41:50,332 --> 00:41:52,040
Nézzük felér egy
rövid lista azokról a dolgokról

917
00:41:52,040 --> 00:41:55,366
majd átruházhatja a
csoport kitaláljuk.

918
00:41:55,366 --> 00:41:56,270
>> KÖZÖNSÉG: [hallható]

919
00:41:56,270 --> 00:42:02,251
>> David J. MALAN: OK, álláspont szövege
különböző oldalára?

920
00:42:02,251 --> 00:42:02,750
Rendben.

921
00:42:02,750 --> 00:42:04,620
Valami más.

922
00:42:04,620 --> 00:42:05,784
>> KÖZÖNSÉG: [hallható]

923
00:42:05,784 --> 00:42:06,700
David J. MALAN: Így van.

924
00:42:06,700 --> 00:42:08,720
Tehát egy gif csak egy
más formátumban.

925
00:42:08,720 --> 00:42:12,830
Mi csak használni, amit egy
png vagy jpg talán?

926
00:42:12,830 --> 00:42:14,480
Mi egy jpg.

927
00:42:14,480 --> 00:42:16,780
Ha kíváncsi, túlzott
válaszolni a kérdésre

928
00:42:16,780 --> 00:42:19,404
egy jpg általában használt
fényképek, mert támogatja

929
00:42:19,404 --> 00:42:21,500
millió szín vagy 24 bites színmélység.

930
00:42:21,500 --> 00:42:26,930
A gif általánosan használt, mint például,
internetes mém ezek days-- animációk,

931
00:42:26,930 --> 00:42:28,810
mint animált gif.

932
00:42:28,810 --> 00:42:32,320
De előfordul, hogy egy kisebb színes
paletta, mindössze 256 lehetséges szín,

933
00:42:32,320 --> 00:42:35,230
de támogatja
átláthatóság és az animáció.

934
00:42:35,230 --> 00:42:40,330
És akkor ott van png, amely támogatja
átláthatóságot és több színben

935
00:42:40,330 --> 00:42:41,300
de nem animáció.

936
00:42:41,300 --> 00:42:42,133
Tehát ez egy trade-off.

937
00:42:42,133 --> 00:42:44,144

938
00:42:44,144 --> 00:42:46,060
Így hozzá egy gif, bár,
lenne funkcionálisan

939
00:42:46,060 --> 00:42:48,396
egyenértékű azzal, mintha a png vagy jpg.

940
00:42:48,396 --> 00:42:49,110
Igen.

941
00:42:49,110 --> 00:42:50,550
Kép forrása megegyezik.

942
00:42:50,550 --> 00:42:51,590
Tehát valami mást.

943
00:42:51,590 --> 00:42:57,288
Nézzük elér valamit,
küldtünk Victoria köze van.

944
00:42:57,288 --> 00:42:59,209
>> KÖZÖNSÉG: Gombok hozzáadása formában.

945
00:42:59,209 --> 00:43:00,000
David J. MALAN: OK.

946
00:43:00,000 --> 00:43:02,179
Így add gombok formája.

947
00:43:02,179 --> 00:43:03,470
És mi nem, hogy az egyik együtt.

948
00:43:03,470 --> 00:43:07,220
Tehát ez lesz a tökéletes váltása
után ezt a kihívást.

949
00:43:07,220 --> 00:43:10,357
Akármi más?

950
00:43:10,357 --> 00:43:11,440
Mi lehet szeretsz csinálni?

951
00:43:11,440 --> 00:43:14,040

952
00:43:14,040 --> 00:43:16,516
A web úgy érzi, nagyon underwhelming
ha ez minden, amit tehetünk.

953
00:43:16,516 --> 00:43:18,140
KÖZÖNSÉG: színének megváltoztatása a szöveg.

954
00:43:18,140 --> 00:43:19,500
David J. MALAN: Változás az mi?

955
00:43:19,500 --> 00:43:20,666
Közönség: a szöveg színét.

956
00:43:20,666 --> 00:43:22,311
David J. MALAN: Változás a szöveg színét.

957
00:43:22,311 --> 00:43:22,810
Rendben.

958
00:43:22,810 --> 00:43:23,790
Nos, nézzük ezt.

959
00:43:23,790 --> 00:43:27,209
Csak ismét úgy, hogy te nem, csak
gépiesen, csinál pontosan mit csinálok,

960
00:43:27,209 --> 00:43:29,500
Megyek bekapcsolja a zenét
A talán öt percig itt.

961
00:43:29,500 --> 00:43:30,450
Nyugodtan használja a Google.

962
00:43:30,450 --> 00:43:33,130
Nyugodtan kérdezd, és
Majd suttogva egy csipetnyi a füledbe.

963
00:43:33,130 --> 00:43:35,171
Nyugodtan nézd
több mint a másik vállán.

964
00:43:35,171 --> 00:43:37,340
De megoldani csak az egyik ezeket a problémákat.

965
00:43:37,340 --> 00:43:40,190
De mi nem az utolsó, a
alkot egy, ha lehet, együtt.

966
00:43:40,190 --> 00:43:42,790
Tehát öt perc alatt megoldani
valamelyik ezeket a problémákat

967
00:43:42,790 --> 00:43:46,780
A Google, az intuíció, vagy bármilyen
más módon áll az Ön rendelkezésére.

968
00:43:46,780 --> 00:43:48,630
>> [ZENE]

969
00:43:48,630 --> 00:43:49,130
Rendben.

970
00:43:49,130 --> 00:43:50,838
Nem gond, ha azt szeretné,
tartani bütyköl,

971
00:43:50,838 --> 00:43:53,880
de én elrontani egy pár
A válaszok.

972
00:43:53,880 --> 00:43:57,986
Tehát az első javaslatot a
Victoria volt, hogy a szöveg nagyobb.

973
00:43:57,986 --> 00:43:59,360
Tehát van néhány módja erre.

974
00:43:59,360 --> 00:44:01,530
Már jelenleg felújított
a képernyő, hogy ezt a méretet,

975
00:44:01,530 --> 00:44:04,310
bár már nagyított
mesterségesen, csak hogy lásd a dolgokat.

976
00:44:04,310 --> 00:44:07,470
És csináljuk.

977
00:44:07,470 --> 00:44:11,380
Hadd menjek előre, és megragad
néhány általános latin szöveg

978
00:44:11,380 --> 00:44:19,540
Csak így van valami, hogy működjön együtt.

979
00:44:19,540 --> 00:44:20,715
Így adj csak egy pillanatra.

980
00:44:20,715 --> 00:44:21,840
Csinálok három bekezdést.

981
00:44:21,840 --> 00:44:53,430

982
00:44:53,430 --> 00:44:53,930
RENDBEN.

983
00:44:53,930 --> 00:44:55,560
Ez lesz a jobb példa.

984
00:44:55,560 --> 00:44:57,840
Tehát a kíváncsi, a
én hello.html, csak

985
00:44:57,840 --> 00:45:01,645
beillesztett három értelmetlen
Latin bekezdések

986
00:45:01,645 --> 00:45:03,270
Csak így van némi szöveget dolgozni.

987
00:45:03,270 --> 00:45:06,720
És Victoria célja az volt, hogy
hogy néhány, a szöveg nagyobb.

988
00:45:06,720 --> 00:45:09,879
Így tudtam, mint korábban, megy itt.

989
00:45:09,879 --> 00:45:11,170
És hadd ez a helyes út.

990
00:45:11,170 --> 00:45:13,253
Megyek egy linket
címke, ami rámutat egy fájlba

991
00:45:13,253 --> 00:45:20,560
az úgynevezett "styles.css", a kapcsolat
amelyek ismét "stylesheet".

992
00:45:20,560 --> 00:45:25,221
És akkor fogok, hogy megtartsa,
és nyissa ki ezt a "styles.css."

993
00:45:25,221 --> 00:45:28,940
>> Tehát, mint korábban, már a
képesség ebben CSS fájlban

994
00:45:28,940 --> 00:45:31,569
hogy ténylegesen felülírja az alapértelmezett
esztétika egy internetes oldal,

995
00:45:31,569 --> 00:45:33,860
és az alapértelmezett esztétika,
Természetesen elég unalmas.

996
00:45:33,860 --> 00:45:36,943
Ez a fajta normál betűméret, fekete
szöveg, fehér háttér, és így tovább.

997
00:45:36,943 --> 00:45:39,440
Tegyük fel, hogy azt szeretnénk, hogy
mindezt szöveg nagyobb.

998
00:45:39,440 --> 00:45:40,460
Tudtam csinálni egy pár dolgot.

999
00:45:40,460 --> 00:45:43,750
Az én styles.css fájlba,
mondhatnánk, tudod mit,

1000
00:45:43,750 --> 00:45:46,950
alkalmazza a következőket
a test oldalam.

1001
00:45:46,950 --> 00:45:51,390
Menj előre, és a
betűméret 24 pont,

1002
00:45:51,390 --> 00:45:54,130
amely számos talán
használja a Microsoft Word.

1003
00:45:54,130 --> 00:45:57,620
Hadd menjen vissza a web
oldal itt és újratölteni,

1004
00:45:57,620 --> 00:45:59,640
és láthatjuk, hogy a
ez már sokkal nagyobb.

1005
00:45:59,640 --> 00:46:02,223
És tudjuk, hogy egy kicsit őrült,
mint tudjuk a desktop--

1006
00:46:02,223 --> 00:46:03,670
hogy ez a 96 pont.

1007
00:46:03,670 --> 00:46:04,950
Újratöltése.

1008
00:46:04,950 --> 00:46:07,610
És ez kezd egy kicsit
ormótlan ezen a ponton.

1009
00:46:07,610 --> 00:46:09,500
>> De lehet, hogy egy kicsit pontosabb.

1010
00:46:09,500 --> 00:46:14,530
Ahelyett alkalmazó
stíluslapját a test oldalam,

1011
00:46:14,530 --> 00:46:21,740
mi mást én alkalmazza azt a helyett,
milyen egyéb címke, hogy talán még

1012
00:46:21,740 --> 00:46:25,445
funkció ugyanúgy?

1013
00:46:25,445 --> 00:46:26,444
>> Közönség: a 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
Tehát a fej nem lenne
helyes, mert a fej,

1016
00:46:29,350 --> 00:46:31,300
akkor valójában nem
ellenőrzik az esztétika.

1017
00:46:31,300 --> 00:46:32,700
Van vagy szöveges, vagy sem.

1018
00:46:32,700 --> 00:46:36,760
De a p tag-- tudok merülni egy kicsit
mélyebb, hogy úgy mondjam, a bekezdés

1019
00:46:36,760 --> 00:46:37,350
címkék.

1020
00:46:37,350 --> 00:46:41,600
És bár van három,
ez tökéletesen megfelel, mert a CSS,

1021
00:46:41,600 --> 00:46:44,900
amikor azt mondjuk, "p", ez
azt jelenti, alkalmazza az alábbi

1022
00:46:44,900 --> 00:46:48,300
bármely tag, amelyek megfelelnek a
választó, a választó csak

1023
00:46:48,300 --> 00:46:49,430
hogy a neve a tag.

1024
00:46:49,430 --> 00:46:52,350
Így bárhol látsz
"P" alkalmazza a betűméret,

1025
00:46:52,350 --> 00:46:55,222
és tegyük több
ésszerű again-- 24 pont.

1026
00:46:55,222 --> 00:46:56,930
És tudod mit,
Csak a jó intézkedés,

1027
00:46:56,930 --> 00:46:59,810
tegyük a szín
piros csak a pillanat.

1028
00:46:59,810 --> 00:47:03,740
És most, ha látsz, most
lásd három csúnya bekezdések.

1029
00:47:03,740 --> 00:47:07,180
>> De most tegyük fel, hogy én vagyok a fajta
of-- szeretnék az első bekezdésben

1030
00:47:07,180 --> 00:47:08,210
ugrik ki a felhasználó.

1031
00:47:08,210 --> 00:47:11,150
Nem akarom, hogy csak növeli
A betűméret mindent.

1032
00:47:11,150 --> 00:47:16,105
És így valóban szeretné azonosítani, vagy
különbséget ezek között bekezdések.

1033
00:47:16,105 --> 00:47:18,730
Tehát lássuk megszabadulni a piros,
mert ez csak egyfajta ragacsos,

1034
00:47:18,730 --> 00:47:23,885
és menjünk előre, és a
betűméret 12 pontos alapértelmezés szerint

1035
00:47:23,885 --> 00:47:26,260
így mi vissza valamit
egy kicsit ésszerűbb.

1036
00:47:26,260 --> 00:47:29,190
És most már csak azt szeretném, hogy növelje a
betűméret az első bekezdés.

1037
00:47:29,190 --> 00:47:31,440
Meg tudom csinálni egy pár
módon, de az egyik módja, hogy az

1038
00:47:31,440 --> 00:47:37,180
talán a legtöbb oktató a
pillanat, hogy tegye a következőket.

1039
00:47:37,180 --> 00:47:43,280
Hadd menjek előre, és azt mondják, ez a
bekezdésben van egy egyedi azonosítója "első".

1040
00:47:43,280 --> 00:47:45,000
Nevezhetném ezt, amit csak akarok.

1041
00:47:45,000 --> 00:47:46,874
Nevezhetném ezt "valami"
vagy bármilyen más szóval,

1042
00:47:46,874 --> 00:47:49,290
de fogok, hogy ez némi
szemantikailag értelmes név

1043
00:47:49,290 --> 00:47:50,320
mint "első".

1044
00:47:50,320 --> 00:47:54,790
Ez az egyedi azonosító,
Az azonosító az első bekezdésben.

1045
00:47:54,790 --> 00:47:59,360
>> Amit most itt az én stíluslap
ez egy kicsit pontosabb.

1046
00:47:59,360 --> 00:48:02,330
Ahelyett, hogy alkalmazzák
A következő a p tag,

1047
00:48:02,330 --> 00:48:04,890
Azt lehet mondani, a following--
alkalmazni a következő,

1048
00:48:04,890 --> 00:48:11,000
vagy válasszuk a HTML elem
hogy van egy egyedi azonosítója "első".

1049
00:48:11,000 --> 00:48:12,350
Mit akarok hatálya alá?

1050
00:48:12,350 --> 00:48:15,250
A betűméret 24 pont.

1051
00:48:15,250 --> 00:48:16,640
Szóval van két szelektor most.

1052
00:48:16,640 --> 00:48:19,690
Egy teszi az összes
pontját 12 pontot.

1053
00:48:19,690 --> 00:48:24,960
De ez, főleg, mert jön
second-- jön utoljára a file--

1054
00:48:24,960 --> 00:48:27,090
ez egy lépcsőzetes hatás.

1055
00:48:27,090 --> 00:48:30,200
Most mindent az én
bekezdés tag 12 pont,

1056
00:48:30,200 --> 00:48:34,350
de ez most zuhatag,
felülbírálja, hogy minden elem

1057
00:48:34,350 --> 00:48:38,800
Az oldal bármely tag az oldalon, amelynek
egyedi azonosító idézet idézőjel bezárva "első".

1058
00:48:38,800 --> 00:48:41,720
És a hashtag ebben az összefüggésben
Csak azt jelenti, "egyedi azonosító".

1059
00:48:41,720 --> 00:48:43,750
Azt ne tedd a HTML fájlban.

1060
00:48:43,750 --> 00:48:46,880
Én több, mint itt, csak azt mondják,
idézet idézőjel bezárva "első".

1061
00:48:46,880 --> 00:48:48,470
>> Tehát hadd váljanak.

1062
00:48:48,470 --> 00:48:49,919
És most látom, ah, OK.

1063
00:48:49,919 --> 00:48:51,710
Úgy értem, ez nem olyan
szép, de ez a fajta

1064
00:48:51,710 --> 00:48:53,600
hasonló az előszót a
könyv, vagy valami ilyesmi,

1065
00:48:53,600 --> 00:48:55,100
ahol az első bekezdésben is nagyobb.

1066
00:48:55,100 --> 00:48:57,933
Lehet, hogy még pontosabb és
csak az első betű, de legalább

1067
00:48:57,933 --> 00:48:59,110
Már gyakorolni nagyobb ellenőrzést.

1068
00:48:59,110 --> 00:49:04,760
Most maybe-- talán szeretnék ezt
esetenként bármilyen okból,

1069
00:49:04,760 --> 00:49:09,010
és így nem akarom, hogy ez
alkalmazni, hogy csak egy HTML tag.

1070
00:49:09,010 --> 00:49:15,110
Inkább nézzük say-- nézzük
is tegye a következőket.

1071
00:49:15,110 --> 00:49:18,810
Class = "import".

1072
00:49:18,810 --> 00:49:23,970
Mivel egy azonosítót, amellyel egyénileg
azonosítani egy dolog, az egyik tag,

1073
00:49:23,970 --> 00:49:30,190
a weboldal, egy osztály célja, hogy
Használható bármilyen számú elem vagy tag

1074
00:49:30,190 --> 00:49:30,950
a weboldal.

1075
00:49:30,950 --> 00:49:31,710
Tehát újrahasznosítható.

1076
00:49:31,710 --> 00:49:33,090
Az azonosító nem használható újra.

1077
00:49:33,090 --> 00:49:34,450
Egy osztály újrahasznosítható.

1078
00:49:34,450 --> 00:49:37,830
>> És tudod mit, bármilyen
filozófiai reasons--

1079
00:49:37,830 --> 00:49:40,180
Nem befejezni az
thought-- fogok mondani

1080
00:49:40,180 --> 00:49:44,300
hogy az első bekezdés és a
második bekezdés fontosak.

1081
00:49:44,300 --> 00:49:48,600
Így fogok alkalmazni a nevű osztályt
"Fontos", hogy ha menteni a fájlt,

1082
00:49:48,600 --> 00:49:51,510
és újratölteni, nincs
funkcionális hatás még.

1083
00:49:51,510 --> 00:49:53,780
De én már hozzá néhány
metaadatokat a fájl,

1084
00:49:53,780 --> 00:49:56,610
izével külön
Az alapadatok a fájl,

1085
00:49:56,610 --> 00:50:02,300
így most az én stíluslap, ha
ahelyett, hogy ".important" - tudod,

1086
00:50:02,300 --> 00:50:07,110
bármit, ami fontos, én
megy, hogy font-color, red--

1087
00:50:07,110 --> 00:50:09,930
vagy inkább nem font-szín, csak színes.

1088
00:50:09,930 --> 00:50:12,930
Van következetlenségek
CSS sajnos.

1089
00:50:12,930 --> 00:50:14,120
És újra.

1090
00:50:14,120 --> 00:50:17,640
Most észre az első
két bekezdés piros

1091
00:50:17,640 --> 00:50:20,880
de nem a harmadik, mert csak
alkalmazva az osztály a "fontos"

1092
00:50:20,880 --> 00:50:25,020
az első két olyan dolog.

1093
00:50:25,020 --> 00:50:28,030
>> Tehát azonosítók, megvan a képessége,
megadásához nagyon pontosan.

1094
00:50:28,030 --> 00:50:30,110
Az osztályok, akkor újrafelhasználhatóságot.

1095
00:50:30,110 --> 00:50:33,800
De mindkét esetben észre a
fajta jó tervezés elve

1096
00:50:33,800 --> 00:50:39,072
ahol tényezőként ki az összes
esztétika az én styles.css fájlt.

1097
00:50:39,072 --> 00:50:40,280
Tehát nincs messiness itt.

1098
00:50:40,280 --> 00:50:44,490
Nincs említés vörös vagy
félkövér néző vagy betűméret ebben a fájlban.

1099
00:50:44,490 --> 00:50:49,430
Inkább azt kell szemantikailag
értelmesen jellemzi én adatokat,

1100
00:50:49,430 --> 00:50:51,240
itt van néhány fontos adat.

1101
00:50:51,240 --> 00:50:52,800
Itt van néhány további fontos adatokat.

1102
00:50:52,800 --> 00:50:56,500
Sőt, itt van a
"Első" az én fontos adatokat.

1103
00:50:56,500 --> 00:51:01,050
Tehát HTML szól fajta
tagging, szó, szó

1104
00:51:01,050 --> 00:51:05,270
és bekezdések és konstrukciót a
oldal ezekkel a kis tippeket, ha

1105
00:51:05,270 --> 00:51:07,640
lesz, hogy akkor
valahogy tőkeáttétel segítségével

1106
00:51:07,640 --> 00:51:10,880
más technikák, mint a CSS ezen a módon.

1107
00:51:10,880 --> 00:51:14,760
>> Tehát válaszolva Victoria kérdésére,
tudjuk, hogy a szöveg nagyobb az említett módon.

1108
00:51:14,760 --> 00:51:18,380
Vannak sok más módon, de
a betűtípus tag-- nyitva tartó "font" -

1109
00:51:18,380 --> 00:51:19,770
valójában több éves.

1110
00:51:19,770 --> 00:51:21,410
És ez a probléma,
is, a hagyatkoznának

1111
00:51:21,410 --> 00:51:23,485
online resources--
hajlamosak elavult.

1112
00:51:23,485 --> 00:51:26,110
És valóban, hogy a már elavult,
mert a világ rájött,

1113
00:51:26,110 --> 00:51:28,970
mit jelent a "font-size = 7" kifejezés?

1114
00:51:28,970 --> 00:51:29,670
Ez nem.

1115
00:51:29,670 --> 00:51:32,770
És így sok év, és a
ez day-- egyik oldalsó

1116
00:51:32,770 --> 00:51:36,060
megjegyzi, itt az, hogy valójában
hihetetlenül fájdalmas is néha

1117
00:51:36,060 --> 00:51:38,900
hogy dolgozzon helyszínek
web, mert a Microsoft

1118
00:51:38,900 --> 00:51:44,220
A Google és a Mozilla és az
mások gyakran nem értenek egyet abban, hogy milyen

1119
00:51:44,220 --> 00:51:47,480
értelmezni a specifikáció, mint a HTML.

1120
00:51:47,480 --> 00:51:52,490
>> Van egy szabálykönyv HTML
általában azt mondja, amit minden tag jelent.

1121
00:51:52,490 --> 00:51:55,690
De néha ez marad a
végrehajtás saját belátása szerint,

1122
00:51:55,690 --> 00:51:57,290
A Microsoft és a Google belátása.

1123
00:51:57,290 --> 00:52:00,000
És így akkor nagyon gyakran
lásd a honlapon valami

1124
00:52:00,000 --> 00:52:04,954
másképp néz ki a PC-n
mint ez a Mac,

1125
00:52:04,954 --> 00:52:06,995
és ez igazán, mert
a nap végén,

1126
00:52:06,995 --> 00:52:08,891
ők nem teszteltem
valamint mindkét platformon.

1127
00:52:08,891 --> 00:52:11,390
De ez azért is, mert az ésszerű,
okos emberek nem értenek egyet

1128
00:52:11,390 --> 00:52:14,970
és a vállalatok nem értenek egyet, és így
az egyik kihívás a programozás

1129
00:52:14,970 --> 00:52:16,980
az interneten, vagy tervezés
dolgokat az interneten

1130
00:52:16,980 --> 00:52:21,700
az írás a honlapon olyan módon
hogy működik minden böngészőben.

1131
00:52:21,700 --> 00:52:23,410
De még ez ésszerűtlen, nem igaz?

1132
00:52:23,410 --> 00:52:27,807
Olyan sok változata annyi
böngészők arra nézve, hogy egy bizonyos ponton,

1133
00:52:27,807 --> 00:52:30,890
akkor is van, hogy az ítélet hívást
és el kell döntenie, mint egy vállalat,

1134
00:52:30,890 --> 00:52:33,082
különösen az e-kereskedelem-style
webhelyet, ahol a

1135
00:52:33,082 --> 00:52:36,290
akarják használni a legújabb és legnagyobb
technológiákat, hogy egy igazán jó felhasználói

1136
00:52:36,290 --> 00:52:37,110
tapasztalat.

1137
00:52:37,110 --> 00:52:41,019
De néhány százaléka a gondozottak
még az Internet Explorer 6 vagy 7

1138
00:52:41,019 --> 00:52:43,810
vagy 8, különösen attól függően, hogy a
ország, hogy ők jönnek.

1139
00:52:43,810 --> 00:52:46,760
>> És így nagyon gyakran
megkérdezett valami

1140
00:52:46,760 --> 00:52:50,920
mint a "böngésző statisztika."

1141
00:52:50,920 --> 00:52:56,560
És ha megyünk az alábbiakra: lássuk Wikipedia
és hogyan up-to-date A táblázatban

1142
00:52:56,560 --> 00:52:59,320
ha van ilyen.

1143
00:52:59,320 --> 00:53:02,420
Tehát itt láthatjuk
ahol böngészők tulajdonképpen

1144
00:53:02,420 --> 00:53:06,160
amelyek szerint a 2015. december
szerint az amerikai kormány.

1145
00:53:06,160 --> 00:53:11,170
Chrome 42% -os piaci részesedéssel, ezt követi
IE nagyrészt vállalati környezetben

1146
00:53:11,170 --> 00:53:14,490
vagy PC beállításait, persze,
majd a Firefox,

1147
00:53:14,490 --> 00:53:17,440
akkor Safari, Opera, akkor nem
hogy a térkép itt valamilyen oknál fogva,

1148
00:53:17,440 --> 00:53:18,210
majd társai.

1149
00:53:18,210 --> 00:53:19,500
Lehet, hogy ez alatt társai.

1150
00:53:19,500 --> 00:53:27,700
De még ennél is problematikusabb, mint hogy is--
Lássuk, Wikipedia is

1151
00:53:27,700 --> 00:53:35,194
változatai böngészők version--

1152
00:53:35,194 --> 00:53:36,160

1153
00:53:36,160 --> 00:53:39,190
>> Menjünk böngésző statisztikát.

1154
00:53:39,190 --> 00:53:40,680
AZAZ.

1155
00:53:40,680 --> 00:53:42,030
Még ez nem elég.

1156
00:53:42,030 --> 00:53:44,854
Böngésző statisztikák.

1157
00:53:44,854 --> 00:53:45,353
Saját verzió.

1158
00:53:45,353 --> 00:53:48,980

1159
00:53:48,980 --> 00:53:50,540
Ez nem lesz jobb.

1160
00:53:50,540 --> 00:53:53,414
Lássuk változatok.

1161
00:53:53,414 --> 00:53:54,830
Böngésző piaci részesedése.

1162
00:53:54,830 --> 00:53:57,110
Lássuk, ha ez jön ki.

1163
00:53:57,110 --> 00:53:57,610
RENDBEN.

1164
00:53:57,610 --> 00:54:00,010
Most ez kezd
egy kicsit hasznosabb.

1165
00:54:00,010 --> 00:54:04,870
Tehát itt, észre, hogy mi minden
különböző változatai böngészők.

1166
00:54:04,870 --> 00:54:09,887
És, istenem, ha look-- Chrome
48, Chrome 47, Chrome 31, Chrome 45.

1167
00:54:09,887 --> 00:54:12,970
Úgy értem, a böngészők egyre frissíteni,
és néha néhány ilyen változások

1168
00:54:12,970 --> 00:54:16,430
jelentősek
funkcionalitás szempontjából.

1169
00:54:16,430 --> 00:54:20,630
És így egy bizonyos ponton, a
termék vezetők, illetve a mérnökök

1170
00:54:20,630 --> 00:54:23,620
kell, hogy a te decision--
hogy mit, csak 1% -át a világ

1171
00:54:23,620 --> 00:54:24,740
még mindig használja az IE 7.

1172
00:54:24,740 --> 00:54:25,490
A pokolba velük.

1173
00:54:25,490 --> 00:54:27,470
Mi csak nem fog
támogatja, hogy a böngésző.

1174
00:54:27,470 --> 00:54:28,740
És mit jelent, hogy nem támogatja?

1175
00:54:28,740 --> 00:54:31,170
Ez azt jelentheti, hogy a gombok
Nem működik a weboldal,

1176
00:54:31,170 --> 00:54:33,050
vagy az azt jelentheti, a
formázás teljesen ki van kapcsolva.

1177
00:54:33,050 --> 00:54:35,091
Vagy lehet, hogy van, hogy
Ugyanezen ítélet hívás

1178
00:54:35,091 --> 00:54:39,089
mobil ezekben a napokban, ahol vagyunk
nem fog támogatni IOS 5 többé.

1179
00:54:39,089 --> 00:54:40,380
Tehát az emberek csak azt kell frissíteni.

1180
00:54:40,380 --> 00:54:45,850
Vagy nem fogunk támogatni Cupcake
Android OS az Android készülékek,

1181
00:54:45,850 --> 00:54:48,629
mert a world--, mint a
tech világ akar előrelépni,

1182
00:54:48,629 --> 00:54:51,170
ez a fajta akarja, hogy húzza a
világ ezzel úgy, hogy nem az

1183
00:54:51,170 --> 00:54:53,295
van, hogy továbbra is
visszafelé kompatibilis, így

1184
00:54:53,295 --> 00:54:54,920
kínálunk új és jó tulajdonságait.

1185
00:54:54,920 --> 00:54:57,878
Ez az egyik oka annak,
miért olyan sok vállalat elterjedni

1186
00:54:57,878 --> 00:55:01,440
Az automatikus frissítések és egyfajta kényszerítve
a legújabb szoftver nekünk.

1187
00:55:01,440 --> 00:55:04,010
És még cégek
mint az Apple fogja rendezni a

1188
00:55:04,010 --> 00:55:07,280
kényszeríti, majdnem vagy kötelezővé
Ön a piaci erők

1189
00:55:07,280 --> 00:55:11,164
hogy vesz egy új telefont, mert ők csak
nem fogja frissíteni a régi telefon már.

1190
00:55:11,164 --> 00:55:13,330
Szóval hagyja ki a
legújabb és legjobb funkciókat,

1191
00:55:13,330 --> 00:55:17,520
mert költséges őket, mint a
cég fenntartása idősebb, vitathatatlanul

1192
00:55:17,520 --> 00:55:19,330
gyengébb változatai szoftver.

1193
00:55:19,330 --> 00:55:23,660
De a hatása az, hogy
mi is szenvedünk ezt is.

1194
00:55:23,660 --> 00:55:26,550
>> Szóval vessünk egy pillantást, csak
Pár végső dolgokat.

1195
00:55:26,550 --> 00:55:29,740
Nézzük leüt igazi böjt néhány
a többi golyót, ha kíváncsi.

1196
00:55:29,740 --> 00:55:33,440
Tehát, ha akarták,
például pozíció

1197
00:55:33,440 --> 00:55:36,420
a szöveg különböző oldalain a
oldal, fogok csinálni egy gyors módja,

1198
00:55:36,420 --> 00:55:38,360
de van más
módon teheti ezt meg.

1199
00:55:38,360 --> 00:55:42,610
Hadd menjen előre és eliminate--
egyszerűsítse ezt a következők szerint.

1200
00:55:42,610 --> 00:55:45,330
Hadd menjen vissza a
egyszerű, egyszerű bekezdések.

1201
00:55:45,330 --> 00:55:47,760
Hadd menjen vissza a styles.css.

1202
00:55:47,760 --> 00:55:51,040
És én csak fogja használni a simple--
ami lehet, hogy látta a Google

1203
00:55:51,040 --> 00:55:54,430
vagy visszahívja a earlier--
szöveg igazítása jobbra.

1204
00:55:54,430 --> 00:55:56,220
És töltse be újra ezt az oldalt.

1205
00:55:56,220 --> 00:55:58,470
Most úgy tűnik, minden
hogy jobbra igazított,

1206
00:55:58,470 --> 00:56:00,770
ahogy lehet látni a mennyezeti itt.

1207
00:56:00,770 --> 00:56:04,470
>> Tudjuk, hogy ez úgy néz ki egy kicsit
foglalja-szerű, és azt mondhatjuk, "igazolja"

1208
00:56:04,470 --> 00:56:05,640
és újra.

1209
00:56:05,640 --> 00:56:09,870
Most már szép és tér mindkét
oldalán, ami elég szép.

1210
00:56:09,870 --> 00:56:12,220
A másik cél, hogy mi volt itt
változása volt a szöveg színét.

1211
00:56:12,220 --> 00:56:13,650
Így láttuk, hogy az én piros szöveget.

1212
00:56:13,650 --> 00:56:15,630
És most add gombok formája.

1213
00:56:15,630 --> 00:56:19,390
Akkor miért nem próbáljuk pontosan ezt?

1214
00:56:19,390 --> 00:56:23,656
De először hadd menjen a helyszínen, hogy
a legtöbb ember használja minden day-- Google.

1215
00:56:23,656 --> 00:56:25,780
És vessünk egy pillantást
hogy a Google tényleg működik.

1216
00:56:25,780 --> 00:56:26,821
De én ezt.

1217
00:56:26,821 --> 00:56:31,930
Először is hadd csinálni in-- igen,
hadd menjen a Google az első.

1218
00:56:31,930 --> 00:56:34,530
Megyek, hogy menni
a Google-beállítások,

1219
00:56:34,530 --> 00:56:40,660
mert szeretnék letiltani
úgynevezett azonnali eredményeket.

1220
00:56:40,660 --> 00:56:43,580
>> Tehát lehet, hogy észre
Google ezeket days-- hadd menjen vissza

1221
00:56:43,580 --> 00:56:44,850
és kapcsolja be ezt.

1222
00:56:44,850 --> 00:56:47,900
Tehát, ha elkezdem keresni
A "macskák", mint ez,

1223
00:56:47,900 --> 00:56:50,120
észre, hogy nem csak
Kapok automatikus kiegészítéséhez up

1224
00:56:50,120 --> 00:56:54,520
top, hirtelen, maga az oldal
Úgy tűnik, hogy változtatni elég gyorsan is,

1225
00:56:54,520 --> 00:56:58,750
és ez a Google nyelv használatával
nevű JavaScript próbál segítséget.

1226
00:56:58,750 --> 00:57:01,540
De sajnos ez a fajta
A elrontja a vitát

1227
00:57:01,540 --> 00:57:04,010
Az amit valójában
a motorháztető alatt van.

1228
00:57:04,010 --> 00:57:09,070
Így vagyok csak ilyen gyorsan
kapcsolja ki az azonnali eredményeket.

1229
00:57:09,070 --> 00:57:11,510
És megyek, hogy kattintson a Mentés gombra.

1230
00:57:11,510 --> 00:57:13,930
És most megyek nyitni
hogy a diagnosztikai eszköztár, hogy én

1231
00:57:13,930 --> 00:57:16,150
tartsa nyitás alatt a Hálózat fülre.

1232
00:57:16,150 --> 00:57:17,720
Tehát lássuk ezt.

1233
00:57:17,720 --> 00:57:21,960
Let me-- whoops--
lapozzunk ezt le egy kicsit.

1234
00:57:21,960 --> 00:57:24,410
És hadd keressen a "macskák".

1235
00:57:24,410 --> 00:57:26,790
>> És most notice-- valójában,
ez egy jó lehetőség

1236
00:57:26,790 --> 00:57:28,840
hogy megvitassák egy pillanatra.

1237
00:57:28,840 --> 00:57:32,460
Figyeljük a pillanatban type-- megállítani.

1238
00:57:32,460 --> 00:57:35,250
Fejezd be.

1239
00:57:35,250 --> 00:57:35,790
RENDBEN.

1240
00:57:35,790 --> 00:57:40,870
Figyeljük a pillanatban írja be a betűket
C, nézni a képernyő alján.

1241
00:57:40,870 --> 00:57:48,600
A- T- S. Mit jelent az alsó
Erre a képernyőre, a Network fülön,

1242
00:57:48,600 --> 00:57:53,320
sugallják történik minden
Mire egy betűt?

1243
00:57:53,320 --> 00:57:57,700
Sajnos, a béka nagyon
zavaró ma vagy a lóhere

1244
00:57:57,700 --> 00:58:00,339
vagy bármi is az.

1245
00:58:00,339 --> 00:58:01,880
Mi történik minden alkalommal beírtam?

1246
00:58:01,880 --> 00:58:04,230
És hadd törölje a
puffer és írja be újra.

1247
00:58:04,230 --> 00:58:06,580
So-- Hoppá.

1248
00:58:06,580 --> 00:58:13,280
Minden alkalommal, amikor egy betűt, C- A- T--
így egy új sort természetesen nem szűnik meg.

1249
00:58:13,280 --> 00:58:16,530
Mit jelent minden egyes ilyen sorai,
alapján, amit láttunk és tárgyalt

1250
00:58:16,530 --> 00:58:17,339
eddig?

1251
00:58:17,339 --> 00:58:18,130
KÖZÖNSÉG: A keresés?

1252
00:58:18,130 --> 00:58:21,770
David J. MALAN: A kereső, vagy
több általánosan, egy HTTP kérés

1253
00:58:21,770 --> 00:58:23,125
én böngésző a szervernek.

1254
00:58:23,125 --> 00:58:29,090
Nos, miért van a böngésző, hogy a HTTP
Kérjük minden alkalommal, amikor egy betűt?

1255
00:58:29,090 --> 00:58:30,502
>> KÖZÖNSÉG: [hallható]

1256
00:58:30,502 --> 00:58:33,210
David J. MALAN: Igen, ez így
nekem ezeket az automatikus teljes eredményt.

1257
00:58:33,210 --> 00:58:35,190
Mint, ahol ezek a
keresési eredmények származik?

1258
00:58:35,190 --> 00:58:38,120
Nos, minden alkalommal, amikor írja
levél, Google küld több

1259
00:58:38,120 --> 00:58:40,460
és egyre több a
A szavamat beírni.

1260
00:58:40,460 --> 00:58:41,040
Miért?

1261
00:58:41,040 --> 00:58:44,540
Mivel akarnak adni nekem egy
jobb és jobb, jobb javaslata,

1262
00:58:44,540 --> 00:58:48,880
a javaslatok listáját, amit szó
Próbálok ténylegesen teljes.

1263
00:58:48,880 --> 00:58:53,030
Tehát ez azt szó szerint minden
begépelt karakter a Google

1264
00:58:53,030 --> 00:58:56,900
küldik, végső soron
ömlesztve, hanem néha egy

1265
00:58:56,900 --> 00:59:00,620
egy időben végrehajtása érdekében
ezek automatikus teljes jellemzőkre

1266
00:59:00,620 --> 00:59:03,000
az adatok, természetesen, az interneten.

1267
00:59:03,000 --> 00:59:08,780
>> Most vessünk egy pillantást, amit valójában
történik, ha rákattintok a Google Search.

1268
00:59:08,780 --> 00:59:10,420
És aztán segítik ezt magunknak.

1269
00:59:10,420 --> 00:59:15,320
Tehát, ha én lépjünk le most a nagyon
első kérelmét, hogy most történt.

1270
00:59:15,320 --> 00:59:17,130
Figyeljük meg a következő.

1271
00:59:17,130 --> 00:59:25,550
Úgy küldték egy meglehetősen hosszú URL--
https://www.google.com/search?

1272
00:59:25,550 --> 00:59:27,100
majd egy csomó cuccot.

1273
00:59:27,100 --> 00:59:29,620
Lássuk ez valójában most
a böngésző fülön is.

1274
00:59:29,620 --> 00:59:31,310
Nézzük megszabadulni az eszköztár itt.

1275
00:59:31,310 --> 00:59:33,140
Itt a találati oldalon.

1276
00:59:33,140 --> 00:59:34,790
És vegyük észre az URL-t.

1277
00:59:34,790 --> 00:59:37,430
Most, akkor valószínűleg kitalálni
mi folyik itt részben.

1278
00:59:37,430 --> 00:59:39,090
Tehát először is, a meghatározás.

1279
00:59:39,090 --> 00:59:42,570
Ez nyilvánvalóan a cél
ahol az űrlap elküldése.

1280
00:59:42,570 --> 00:59:44,910
Tehát, ha beírtam a
szavak "macska" és nyomj Enter-t,

1281
00:59:44,910 --> 00:59:48,460
látszólag Google küldött
én szövegbeviteli erre az URL

1282
00:59:48,460 --> 00:59:50,770
hogy amit kiemelt
ott, perjel keresést.

1283
00:59:50,770 --> 00:59:56,530
Kiderült, hogy egy URL-t, bármit, ami
történik, miután a kérdőjel,

1284
00:59:56,530 --> 01:00:01,270
ahogy mondogatta, egy kulcsértékpár
amit beírt formában vagy valamilyen módon

1285
01:00:01,270 --> 01:00:04,500
továbbítja a
böngésző a szervernek.

1286
01:00:04,500 --> 01:00:07,180
>> Tehát minden alkalommal, amikor írja bemenet
egy internetes űrlap

1287
01:00:07,180 --> 01:00:10,000
és ez küldi el voltunk
tárgyalunk, egy get,

1288
01:00:10,000 --> 01:00:12,400
az egyik ilyen virtuális
borítékok tartalmát

1289
01:00:12,400 --> 01:00:15,510
E envelope-- igen, folyamatosan
szerzés töltött fizikailag

1290
01:00:15,510 --> 01:00:19,010
a borítékba osztályban
ma, de technológiailag

1291
01:00:19,010 --> 01:00:21,110
ez ténylegesen az URL-t.

1292
01:00:21,110 --> 01:00:22,940
Tehát valójában, hadd szitál ezt.

1293
01:00:22,940 --> 01:00:25,010
Hol látja felhasználói?

1294
01:00:25,010 --> 01:00:27,490
Hol látsz valamit
hogy magam gépelt itt?

1295
01:00:27,490 --> 01:00:32,100

1296
01:00:32,100 --> 01:00:33,491
Igen, "macskák".

1297
01:00:33,491 --> 01:00:33,990
Jobbra?

1298
01:00:33,990 --> 01:00:36,380
Tehát hadd csöpögtet ezt
valami egyszerűbb.

1299
01:00:36,380 --> 01:00:39,917
Fogok törölni mindent
Ez az URL, hogy nem értem,

1300
01:00:39,917 --> 01:00:42,250
és én csak hagyom
azt this-- / search? q = macskák.

1301
01:00:42,250 --> 01:00:45,640

1302
01:00:45,640 --> 01:00:47,890
Meglátjuk, ahol q
származik egy pillanat,

1303
01:00:47,890 --> 01:00:51,220
de úgy érzi, mint a minimális
mennyiségű információt, amit nyújtott.

1304
01:00:51,220 --> 01:00:53,050
És most megyek, hogy elérje az Enter billentyűt.

1305
01:00:53,050 --> 01:00:55,520
És észre még mindig működik.

1306
01:00:55,520 --> 01:00:57,950
Még mindig vissza egy csomó macskák.

1307
01:00:57,950 --> 01:01:00,340
Tehát a Google szakértő
mint ez manapság.

1308
01:01:00,340 --> 01:01:01,934
Ez 2016-ban nem 1999-ben.

1309
01:01:01,934 --> 01:01:04,600
Tehát van más dolog, hogy én
böngésző küld a szerverre.

1310
01:01:04,600 --> 01:01:07,100
De ez minimálisan
minden, ami szükséges.

1311
01:01:07,100 --> 01:01:08,380
>> Nos, miújság?

1312
01:01:08,380 --> 01:01:14,320
Nos, először is hadd menjen előre, és megy
vissza Cloud9 és hadd menjen előre

1313
01:01:14,320 --> 01:01:15,620
és becsukom a lapok korábban.

1314
01:01:15,620 --> 01:01:18,230
És én megteszem ezt én
saját csak egy pillanatra.

1315
01:01:18,230 --> 01:01:20,730
Megyek, hogy menjen előre
és hozzon létre új fájlt.

1316
01:01:20,730 --> 01:01:23,739
És én fogom menteni, mint google.html.

1317
01:01:23,739 --> 01:01:26,280
És fogok nagyon quickly--
Megyek lopni, valóban,

1318
01:01:26,280 --> 01:01:28,510
néhány ilyen szöveg, csak hogy időt takaríthat meg.

1319
01:01:28,510 --> 01:01:30,610
Megyek be ezt itt.

1320
01:01:30,610 --> 01:01:33,850
Nem fogok bajlódni
minden stilizáció ebben az időben.

1321
01:01:33,850 --> 01:01:38,340
Megyünk hívja ezt a "My Google."

1322
01:01:38,340 --> 01:01:41,230
És fogok megszabadulni
A mindenre a szervezetben.

1323
01:01:41,230 --> 01:01:42,740
És fogok csinálni a következő.

1324
01:01:42,740 --> 01:01:45,690
Hadd nagyítás.

1325
01:01:45,690 --> 01:01:50,620
Forma action-- és röviden megemlítettem
earlier-- whoops-- ahogy röviden

1326
01:01:50,620 --> 01:01:54,130
korábban már említettük, a működés során a
forma az, ahol küldi az adatokat.

1327
01:01:54,130 --> 01:01:56,620
Tehát google.com/search.

1328
01:01:56,620 --> 01:01:59,390
És az eljárás szeretném használni
lehet két dolog.

1329
01:01:59,390 --> 01:02:02,870
Ez lehet akár "get", ahogy folyamatosan
megvitatása, vagy lehet "post".

1330
01:02:02,870 --> 01:02:05,340
Most, az alapvető
különbség, ha "kap"

1331
01:02:05,340 --> 01:02:09,590
az összes információt, amely a
A Felhasználó eljut az URL.

1332
01:02:09,590 --> 01:02:13,530
>> Ez nagyszerű dolgok, mint kereső
motorok és néhány más alkalmazások,

1333
01:02:13,530 --> 01:02:17,080
de milyen körülmények között
Ön nem szeretné kitölteni egy űrlapot

1334
01:02:17,080 --> 01:02:21,620
, és az információt a végén a
URL, mint a böngésző címsorába?

1335
01:02:21,620 --> 01:02:25,470

1336
01:02:25,470 --> 01:02:26,605
Milyen formák csinálni you--

1337
01:02:26,605 --> 01:02:27,480
KÖZÖNSÉG: [hallható]

1338
01:02:27,480 --> 01:02:28,450
David J. MALAN: Igen, mint mi?

1339
01:02:28,450 --> 01:02:29,270
KÖZÖNSÉG: jelszavak.

1340
01:02:29,270 --> 01:02:31,936
David J. MALAN: Igen, így log
A Facebook vagy valamilyen honlapján.

1341
01:02:31,936 --> 01:02:34,395
Ez a felhasználói bemenet
formában, egy szöveges mezőben,

1342
01:02:34,395 --> 01:02:37,020
de valószínűleg nem akarják
felbukkan a böngésző URL-t.

1343
01:02:37,020 --> 01:02:38,121
Miért?

1344
01:02:38,121 --> 01:02:40,870
Úgy értem, lehet, hogy van némi
biztonsági vonatkozásait a hálózaton,

1345
01:02:40,870 --> 01:02:44,830
de more-- tetszik, még egyszerűbben, mi van, ha
A szobatársam, más jelentős,

1346
01:02:44,830 --> 01:02:47,710
a gyerekek, a házastárs néz
keresztül a böngésző előzményeket?

1347
01:02:47,710 --> 01:02:50,762
Van jelszavát jobbra
ott a böngésző történetében.

1348
01:02:50,762 --> 01:02:52,220
Ez nem érzem jó design.

1349
01:02:52,220 --> 01:02:54,500
Vagy még inkább technikailag,
tegyük fel, hogy megpróbálja

1350
01:02:54,500 --> 01:02:59,180
hogy feltölt egy képet a Flickr
vagy a Facebook vagy wherever--

1351
01:02:59,180 --> 01:03:03,010
vagyis felhasználói bemenetet, bár
ez egy kicsit interesting-- hogyan

1352
01:03:03,010 --> 01:03:05,530
tudom teletölteni egy képet az URL bar?

1353
01:03:05,530 --> 01:03:06,730
Te milyen fajta nem.

1354
01:03:06,730 --> 01:03:07,396
Te milyen lehet.

1355
01:03:07,396 --> 01:03:10,210
De tényleg, én szorongatott
elképzelni csinálja.

1356
01:03:10,210 --> 01:03:13,470
Szóval kell egy másik módszert
feltölteni képeket a honlapon,

1357
01:03:13,470 --> 01:03:15,657
és a másik módszer az úgynevezett "post".

1358
01:03:15,657 --> 01:03:18,740
De most, akkor csak beszélni
"Kap", ami az egyszerűbb a kettő.

1359
01:03:18,740 --> 01:03:21,100
Csak hozza a
felhasználó viszi be az URL-t.

1360
01:03:21,100 --> 01:03:22,830
>> Tehát itt a forma hozok létre.

1361
01:03:22,830 --> 01:03:24,070
Szeretnék egy bemenet.

1362
01:03:24,070 --> 01:03:24,820
És tudod mit?

1363
01:03:24,820 --> 01:03:26,111
Megyek, hogy egy kitalálni itt.

1364
01:03:26,111 --> 01:03:31,600
Megyek én felidézni
input "q" a "lekérdezés".

1365
01:03:31,600 --> 01:03:34,970
És azt hiszem, ez az egyik
eredeti tervek, talán a 1999.

1366
01:03:34,970 --> 01:03:39,560
És akkor milyen típusú ez a bemenet
csak lesz "szöveget."

1367
01:03:39,560 --> 01:03:43,040
Aztán megyek egy másik bemenet
hogy nem kell a név, hiszen hamarosan

1368
01:03:43,040 --> 01:03:45,120
lásd a fajta, amely a "be".

1369
01:03:45,120 --> 01:03:47,070
És ez meg fog
adj egy külön gomb.

1370
01:03:47,070 --> 01:03:48,320
És ez az.

1371
01:03:48,320 --> 01:03:50,790
>> Tehát hadd menjen előre, és mentse el a fájlt.

1372
01:03:50,790 --> 01:03:54,910
Fogok menni vissza a
és lépjen a google.html.

1373
01:03:54,910 --> 01:03:56,140
Belép.

1374
01:03:56,140 --> 01:03:59,680
És ez a fajta ritka
hogy mondjuk a legkevésbé.

1375
01:03:59,680 --> 01:04:03,110
De hadd menjen előre
és keressen a "macskák".

1376
01:04:03,110 --> 01:04:06,510
És észre vagyok jelenleg
Ebben Cloud9 URL.

1377
01:04:06,510 --> 01:04:09,240
De abban a pillanatban én kattintson erre,
hol remélem végzed?

1378
01:04:09,240 --> 01:04:10,160
>> KÖZÖNSÉG: Google.

1379
01:04:10,160 --> 01:04:11,118
>> David J. MALAN: Google.

1380
01:04:11,118 --> 01:04:12,740
Szóval kattintson a Küldés gombra.

1381
01:04:12,740 --> 01:04:15,200
És valóban Már újra végrehajtani a Google.

1382
01:04:15,200 --> 01:04:15,700
Jobbra?

1383
01:04:15,700 --> 01:04:16,480
Ez egyszerűbb.

1384
01:04:16,480 --> 01:04:17,120
Ez könnyebb.

1385
01:04:17,120 --> 01:04:20,350
Úgy értem, a kód egyértelműen jobb, mint
övék, a rendetlenség korábban láttuk.

1386
01:04:20,350 --> 01:04:21,100
És tudod mit?

1387
01:04:21,100 --> 01:04:22,610
Megyek vértezze ez egy kicsit.

1388
01:04:22,610 --> 01:04:23,860
Én ezt nem említette korábban.

1389
01:04:23,860 --> 01:04:27,860
Vannak címkéket, mint a H1, fejezet 1,
A legfontosabb fejezetének egy oldalon.

1390
01:04:27,860 --> 01:04:30,570
"Saját Google" hívom ezt.

1391
01:04:30,570 --> 01:04:31,940
Hadd töltse be újra.

1392
01:04:31,940 --> 01:04:33,772
Ez már egy kicsit már jobban.

1393
01:04:33,772 --> 01:04:34,980
És valóban, tudod mit?

1394
01:04:34,980 --> 01:04:36,430
Nekem already-- hazudtam.

1395
01:04:36,430 --> 01:04:40,200
Azt mondtam, hogy nem fog a stílus ez,
de fogom stílus ez, mint korábban.

1396
01:04:40,200 --> 01:04:46,860
És a testem lesz,
mondjuk, text-align center.

1397
01:04:46,860 --> 01:04:48,800
Úgy néz ki, mint a Google már.

1398
01:04:48,800 --> 01:04:51,090
>> Kell egy sortörés, mégis,
e Küldés gombra.

1399
01:04:51,090 --> 01:04:52,798
És kiderül, akkor
használhatja bekezdések

1400
01:04:52,798 --> 01:04:57,320
vagy ha több szó csak annyit,
adj egy sortörést here-- a br címke.

1401
01:04:57,320 --> 01:04:59,319
És ha be újra ezt, most megy oda.

1402
01:04:59,319 --> 01:05:01,610
Ez egy kicsit csúnya, úgyhogy
tehetett többsoros szünetek,

1403
01:05:01,610 --> 01:05:03,310
de ne legyen túl mohó itt.

1404
01:05:03,310 --> 01:05:06,430
Tehát most lássuk, működik-e a "kutyák".

1405
01:05:06,430 --> 01:05:08,640
Úgy tűnik, működik a "kutyák" is.

1406
01:05:08,640 --> 01:05:10,780
Tehát mi a vonzó elvihető itt?

1407
01:05:10,780 --> 01:05:13,600
One-- nem volt olyan hatalmas ugrás
tegyünk néhány további címkék,

1408
01:05:13,600 --> 01:05:15,370
mint a form tag a bemeneti címkét.

1409
01:05:15,370 --> 01:05:17,120
De még ennél is alapvetően
van, minden, amit csinálunk

1410
01:05:17,120 --> 01:05:20,610
amely kihasználja a megértés
A HTTP és az a tény,

1411
01:05:20,610 --> 01:05:24,900
hogy formák végül megváltoztatják
mi az URL a böngésző,

1412
01:05:24,900 --> 01:05:28,540
és így, ezért tudjuk
mechanikusan is hozzájárul a szerveren

1413
01:05:28,540 --> 01:05:33,600
azáltal, hogy egy HTML űrlapot, és tudta,
hogy a szerver megérti HTTP,

1414
01:05:33,600 --> 01:05:36,890
akárcsak testünk megérti, mint,
megrázta a kezem, hogy ugyanazt a protokollt,

1415
01:05:36,890 --> 01:05:40,920
és így jutunk vissza a válasz
hogy végül számítunk.

1416
01:05:40,920 --> 01:05:44,050
>> Így próbáljuk tenni egy
utolsó dolog most a mobil,

1417
01:05:44,050 --> 01:05:47,052
és én make-- adom hozzá
ezt a kódot a diák.

1418
01:05:47,052 --> 01:05:49,760
Tehát, ha azt szeretné, hogy bütykölni, akkor
biztosan vigye onnan.

1419
01:05:49,760 --> 01:05:51,551
De én megyek
előre, és nem egy dolog.

1420
01:05:51,551 --> 01:05:54,120
Megyek megy előre, és
nyitnom az index page--

1421
01:05:54,120 --> 01:05:59,030
my hello oldal, mint korábban, ami
van egy csomó ez ál-latin szöveg,

1422
01:05:59,030 --> 01:06:05,470
vagy értelmetlen latin szöveget, és has--
úgy néz ki, mint ez ebben a betűméretet.

1423
01:06:05,470 --> 01:06:07,850
De hadd menjen előre, és erre a célra.

1424
01:06:07,850 --> 01:06:09,300
Én megyek be Cloud9.

1425
01:06:09,300 --> 01:06:10,380
És akkor nem kell tennie ezt a lépést.

1426
01:06:10,380 --> 01:06:11,420
Én csak csinálni magamnak.

1427
01:06:11,420 --> 01:06:12,890
Megyek a Megosztás lehetőséget.

1428
01:06:12,890 --> 01:06:15,170
És ez a funkció
Csak a Cloud9, amelynek

1429
01:06:15,170 --> 01:06:17,710
Azt is, hogy a környezetem számára.

1430
01:06:17,710 --> 01:06:20,240
>> És csak a kedvéért
bemutató, hadd tegye ezt.

1431
01:06:20,240 --> 01:06:22,870
Megyek, hogy az én alkalmazás számára.

1432
01:06:22,870 --> 01:06:25,230
Figyeld meg, hogy figyelmeztetése rám, am
Azt biztos, hogy akarom ezt,

1433
01:06:25,230 --> 01:06:28,438
mert ez lesz, hogy mindenki
a világon, hogy ők itt most

1434
01:06:28,438 --> 01:06:33,560
vagy nézi a videót később a
internet képes, amit látok.

1435
01:06:33,560 --> 01:06:34,440
De ez rendben van.

1436
01:06:34,440 --> 01:06:37,870
Azt fogom mondani: "Kész."

1437
01:06:37,870 --> 01:06:42,080
És hadd javasoljuk, ha én
ez correctly-- hadd először ellenőrizni.

1438
01:06:42,080 --> 01:06:45,590
Menj előre, ha nem mind--
a böngésző a számítógépén,

1439
01:06:45,590 --> 01:06:49,900
megy ez az URL, és remélhetőleg
meglátja az én latin szöveget.

1440
01:06:49,900 --> 01:06:52,820
És hogy tisztázzuk, ez
futó nem az én laptop.

1441
01:06:52,820 --> 01:06:53,610
Ez a felhő.

1442
01:06:53,610 --> 01:06:58,120
Ez a Cloud9, szó szerint, hanem
Csináltam én munkaterület nyilvános

1443
01:06:58,120 --> 01:07:03,450
hogy bárki az interneten
férhet hozzá a Latin honlapon.

1444
01:07:03,450 --> 01:07:07,209
>> Mert ugyanazt az URL-t
A telefon, ha lehetne.

1445
01:07:07,209 --> 01:07:09,750
Ha ez fog kerülni, mégis, akkor
egyszerűen nézd át a vállát.

1446
01:07:09,750 --> 01:07:40,688

1447
01:07:40,688 --> 01:07:42,467
KÖZÖNSÉG: [hallható]

1448
01:07:42,467 --> 01:07:43,550
David J. MALAN: Sajnálom?

1449
01:07:43,550 --> 01:07:45,390
KÖZÖNSÉG: [hallható]

1450
01:07:45,390 --> 01:07:47,710
David J. MALAN: Just latin szó.

1451
01:07:47,710 --> 01:07:48,210
Ez minden.

1452
01:07:48,210 --> 01:07:49,250
De ez az, amit meg kell látni.

1453
01:07:49,250 --> 01:07:49,875
>> KÖZÖNSÉG: Igen.

1454
01:07:49,875 --> 01:07:50,790
David J. MALAN: Igen.

1455
01:07:50,790 --> 01:07:51,300
Igen.

1456
01:07:51,300 --> 01:07:51,540
RENDBEN.

1457
01:07:51,540 --> 01:07:53,530
Így tudok tartsa fel a
telefon egy pillanatra?

1458
01:07:53,530 --> 01:07:57,504
Így remélhetőleg ha elérésével
meg, meg kell nézni szinte olvashatatlan.

1459
01:07:57,504 --> 01:07:59,920
Ez still-- értem, ez
olvashatatlan, mert a latin.

1460
01:07:59,920 --> 01:08:01,920
De ez is olvasható
hogy milyen más okból?

1461
01:08:01,920 --> 01:08:03,775
Mint, mi tetszik neked erről?

1462
01:08:03,775 --> 01:08:04,650
KÖZÖNSÉG: Ez kicsi.

1463
01:08:04,650 --> 01:08:06,420
David J. MALAN: Ez szuper, szuper kicsi.

1464
01:08:06,420 --> 01:08:07,920
Tehát hogyan tudnánk ezt orvosolni?

1465
01:08:07,920 --> 01:08:09,730
Ez szuper, szuper kis
Victoria telefonon

1466
01:08:09,730 --> 01:08:11,400
és, ha már kihúzta
fel magad, valószínűleg

1467
01:08:11,400 --> 01:08:14,660
kis telefonján is, kivéve, ha
Kisegítő beállítások engedélyezve.

1468
01:08:14,660 --> 01:08:15,530
Mi az?

1469
01:08:15,530 --> 01:08:18,497
Lehet csak csipet és
zoom, ami működőképes,

1470
01:08:18,497 --> 01:08:20,330
de akkor csak látni
néhány szót egy időben.

1471
01:08:20,330 --> 01:08:20,859
Tehát egy pillanat.

1472
01:08:20,859 --> 01:08:21,720
Tudom, hogyan erősít ez.

1473
01:08:21,720 --> 01:08:22,219
Jobbra?

1474
01:08:22,219 --> 01:08:26,130
Jól jönne CSS, és tudtam változtatni a
betűméret 12 pontos és 24 pontos.

1475
01:08:26,130 --> 01:08:29,020
De a mellékhatása, hogy a
Természetesen lesz most,

1476
01:08:29,020 --> 01:08:32,630
egy asztali vagy laptop,
most a szöveg kétszer akkora.

1477
01:08:32,630 --> 01:08:35,810
És ez így lenne ilyen szép
megkülönböztetni készülékek,

1478
01:08:35,810 --> 01:08:37,840
és kiderül, ott
olyan módon csinál, hogy.

1479
01:08:37,840 --> 01:08:39,590
Számos
különböző módon, sőt,

1480
01:08:39,590 --> 01:08:44,189
amelynek segítségével CSS és szakértő jellemzői
hogy nem fog menni a nagy részletességgel,

1481
01:08:44,189 --> 01:08:46,960
akkor lényegében lekérdezés
A böngésző és azt mondják,

1482
01:08:46,960 --> 01:08:51,550
hogy ha a képernyő kisebb, mint ez
Sok pixel, használja ezt a betűméretet.

1483
01:08:51,550 --> 01:08:55,180
Ha a képernyő nagyobb, mint ez
Sok pixel, használja ezt más betűméretet.

1484
01:08:55,180 --> 01:08:57,080
>> Akkor még cifrább is.

1485
01:08:57,080 --> 01:09:00,140
Ha valaha is meglátogatott
weblap, hogy egy asztalon,

1486
01:09:00,140 --> 01:09:04,404
van egy nagy menüt, talán le a
oldalán, majd az összes, a tartalom

1487
01:09:04,404 --> 01:09:07,029
hogy az oldalán, hogy menu--
ez a fajta közös paradigma.

1488
01:09:07,029 --> 01:09:09,670
Menü a bal, a tartalom
A jobb oldalon, vagy fordítva.

1489
01:09:09,670 --> 01:09:13,569
Nem igazán működik a mobil, amikor a
képernyő csak ennyi pixel széles.

1490
01:09:13,569 --> 01:09:16,233
Így sokkal gyakoribb mobil,
A menü hirtelen kap

1491
01:09:16,233 --> 01:09:18,399
összeomlott, és meg kell
kattintson a gombra, látni,

1492
01:09:18,399 --> 01:09:22,404
illetve a honlap fogja állítani a menüben
fölötte, és tegye a tartalom alatta.

1493
01:09:22,404 --> 01:09:24,779
És akkor végre ezeket
dolgokat többféle módon is.

1494
01:09:24,779 --> 01:09:28,340
Akkor kérdezze meg a programozók,
hé, csapat, bármikor

1495
01:09:28,340 --> 01:09:34,450
látsz egy HTTP kérést egy Android
eszköz, a Microsoft eszköz, egy Google

1496
01:09:34,450 --> 01:09:39,930
készüléket, egy Apple eszköz használatához
betűméret és ezt menü,

1497
01:09:39,930 --> 01:09:42,670
vagy pedig használja ezt az alapértelmezett nagyobb elrendezést.

1498
01:09:42,670 --> 01:09:45,410
>> Most, a mi
alapvető technika mai

1499
01:09:45,410 --> 01:09:48,529
lehetne a mérnökök
tudni, hogy ez az

1500
01:09:48,529 --> 01:09:53,660
Az iPhone, Android telefon, laptop,
Asztali látogatás a cég szerver?

1501
01:09:53,660 --> 01:09:55,310
Miben kapnak az információkat?

1502
01:09:55,310 --> 01:09:56,080
>> KÖZÖNSÉG: fejléc?

1503
01:09:56,080 --> 01:09:57,740
>> David J. MALAN: Igen, a HTTP fejlécben.

1504
01:09:57,740 --> 01:10:01,714
Tehát minden HTTP kérés jön
hogy az ügyfelek a szerverek

1505
01:10:01,714 --> 01:10:03,880
többek között, hogy a virtuális belül
boríték, egy csomó

1506
01:10:03,880 --> 01:10:08,260
HTTP fejlécek, amelyek közül az egyik
a böngésző és az operációs rendszer

1507
01:10:08,260 --> 01:10:10,290
még, ha érdekel, hogy
hogy részletességgel.

1508
01:10:10,290 --> 01:10:13,790
Most ez egy rejtélyes külsejű húr, de
létezik szoftver, amely csak

1509
01:10:13,790 --> 01:10:18,530
egyszerűsítése, és ezt te is csak kérdez
programozási code-- PHP, Java, C ++,

1510
01:10:18,530 --> 01:10:23,650
whatever-- milyen telefon this--
mi az eszköz felhasználó használ?

1511
01:10:23,650 --> 01:10:27,501
És akkor azt mondják, mutasd meg nekik ezt
változata a honlapon, ha ez egy telefon.

1512
01:10:27,501 --> 01:10:30,250
Mutasd meg nekik, ez a változat a
honlapon, ha ez egy laptop vagy asztali.

1513
01:10:30,250 --> 01:10:32,316
De nem is kell
szerver oldali komplexitás.

1514
01:10:32,316 --> 01:10:33,940
Meg tudod csinálni még a legegyszerűbb dolgokat.

1515
01:10:33,940 --> 01:10:34,815
>> Azt fogom tenni ezt.

1516
01:10:34,815 --> 01:10:38,995
Megyek, hogy menjen előre be
én Cloud9 környezet,

1517
01:10:38,995 --> 01:10:41,370
és megyek hozzá egy címkét
láttál a Google előtt.

1518
01:10:41,370 --> 01:10:42,770
Ezt hívják a metacímke.

1519
01:10:42,770 --> 01:10:45,520
És soha nem emlékszem ez egy, így
Megyek, hogy átdolgozza itt.

1520
01:10:45,520 --> 01:10:50,552
Meta name = "nézetnek", majd
content = "width = az eszköz szélessége, intital

1521
01:10:50,552 --> 01:11:02,060
scale = 1 ", és ennyi.

1522
01:11:02,060 --> 01:11:06,230
>> Így akár azt is lehet
mint egy mágikus ráolvasás.

1523
01:11:06,230 --> 01:11:11,300
Ez még nem minden, hogy világos, de ez van
valami köze az ablakon,

1524
01:11:11,300 --> 01:11:15,070
és az ablakon csak a test egy
weboldal, a téglalap alakú területet, amely

1525
01:11:15,070 --> 01:11:16,690
definiálja a legtöbb oldalon.

1526
01:11:16,690 --> 01:11:19,060
És ez csak azt mondja
A böngésző, tudod mit?

1527
01:11:19,060 --> 01:11:22,589
Tedd a szélessége oldal
hatékonyan egyenlő a készülék szélessége.

1528
01:11:22,589 --> 01:11:25,380
Más szavakkal, nem feltételezik, hogy
Van egyfajta korlátlan teret.

1529
01:11:25,380 --> 01:11:29,920
Tételezzük fel, hogy csak annyi
helyet, mint maga az eszköz nagy.

1530
01:11:29,920 --> 01:11:34,454
És így most, ha én be újra ezt az
a böngészőm, nem látok változást.

1531
01:11:34,454 --> 01:11:37,370
De ha ezt tettem correctly-- és
hadd keresztbe tettem ujjmozdulatokba ha minden

1532
01:11:37,370 --> 01:11:42,920
újratölti a telefonok, ugye
lásd kényszerítő változás?

1533
01:11:42,920 --> 01:11:43,620
Igen, ez hogy--

1534
01:11:43,620 --> 01:11:45,067
>> KÖZÖNSÉG: [hallható]

1535
01:11:45,067 --> 01:11:45,900
David J. MALAN: Igen.

1536
01:11:45,900 --> 01:11:46,400
RENDBEN.

1537
01:11:46,400 --> 01:11:47,850
Tehát vitathatatlanul olvasható most?

1538
01:11:47,850 --> 01:11:53,070
Még kicsi, hogy tisztességes, de nem
Olyan apró, hogy kezelhetetlen.

1539
01:11:53,070 --> 01:11:56,920
És én minden bizonnyal felülírja ezt a
tovább CSS vagy a szerver oldalon,

1540
01:11:56,920 --> 01:12:00,120
de egyre inkább mit te
látva egyre több szolgáltatást

1541
01:12:00,120 --> 01:12:02,900
bekerüljön
kliensoldali environments--

1542
01:12:02,900 --> 01:12:06,530
JavaScript, ahogy megbeszéljük
Holnap, CSS és HTML-- így

1543
01:12:06,530 --> 01:12:09,190
hogy ezek a lekérdezések
lehet tenni az ügyfél

1544
01:12:09,190 --> 01:12:11,910
oly módon, hogy zavarja a
szerver sokkal kevesebb, és nem

1545
01:12:11,910 --> 01:12:14,530
hogy meg kell tartani a számára
Például az állandó támadása

1546
01:12:14,530 --> 01:12:17,210
Az új operációs rendszer
változatok, új böngésző verzió.

1547
01:12:17,210 --> 01:12:20,190
Akkor csak hagyja, hogy a böngésző
kérje a készülék, milyen nagy vagy te,

1548
01:12:20,190 --> 01:12:22,890
majd, hogy némileg logikus
döntések alapuló.

1549
01:12:22,890 --> 01:12:25,140
De majd meglátjuk több lehetőséget
logikai döntések

1550
01:12:25,140 --> 01:12:27,223
Holnap keretében
egy programozási nyelv.

1551
01:12:27,223 --> 01:12:29,800

1552
01:12:29,800 --> 01:12:32,760
>> Tehát, bármilyen kérdése van, akkor,
A webfejlesztés?

1553
01:12:32,760 --> 01:12:36,130
Ma nem webes programozás, per
se, mivel a legtöbb mindent csináltunk

1554
01:12:36,130 --> 01:12:38,370
nagyon esztétikus, ha úgy tetszik.

1555
01:12:38,370 --> 01:12:41,750
Nincs döntéshozatal
A kód, amit írt,

1556
01:12:41,750 --> 01:12:44,990
és hogy ezért a HTML egy jelölő
nyelv, nem egy programozási nyelv.

1557
01:12:44,990 --> 01:12:47,140
De holnap viszem
egy gyors pillantást, végül,

1558
01:12:47,140 --> 01:12:49,340
A JavaScript, ami
tényleges programozás

1559
01:12:49,340 --> 01:12:54,220
nyelv, amely lehetővé teszi számunkra, nem egy kicsit.

1560
01:12:54,220 --> 01:12:56,800
>> Bármi kérdés?

1561
01:12:56,800 --> 01:13:00,480
Nos, hadd javasol két
lehetőségeket kötelező házi feladatot.

1562
01:13:00,480 --> 01:13:02,900
Egy is-- ezek Cloud9
beszámoló nem jár le.

1563
01:13:02,900 --> 01:13:04,669
Nyugodtan használja
őket bütykölni.

1564
01:13:04,669 --> 01:13:05,960
Ez az ingyenes szolgáltatás színvonala.

1565
01:13:05,960 --> 01:13:08,754
Tudatában annak, hogy ha létrehozásakor
A munkaterület, akkor hozta nyilvánosságra,

1566
01:13:08,754 --> 01:13:11,670
amely nem jelenti azt, hogy bárki a
internet láthatja, hogy mit írsz.

1567
01:13:11,670 --> 01:13:15,104
Így talán csak úgy
Nem kínos magad

1568
01:13:15,104 --> 01:13:18,020
ha üzembe az első web
oldal ott nyilvánosan véletlenül,

1569
01:13:18,020 --> 01:13:20,134
de senki sem fog
tudom, hogy néz ki van egyébként.

1570
01:13:20,134 --> 01:13:23,760
>> És two-- hadd dobálják
fel ezt az URL is,

1571
01:13:23,760 --> 01:13:28,250
különösen akkor, ha ma érkezett egy
kicsit kevésbé kényelmes, mint mások,

1572
01:13:28,250 --> 01:13:30,430
biztos benne, mi ez az egész jelent.

1573
01:13:30,430 --> 01:13:36,780
Ismerd fel, hogy sokkal több ez a videó,
ami egyszerre jó módja annak, hogy elalszik

1574
01:13:36,780 --> 01:13:39,380
és nevetni, miközben
Ennek során is van

1575
01:13:39,380 --> 01:13:44,300
egy csomó társadalmilag érdekes
és biztonság tekintetében lényeges viták

1576
01:13:44,300 --> 01:13:47,370
abba John Oliver,
bár egy humorista.

1577
01:13:47,370 --> 01:13:55,456
>> De ha nincsenek további kérdése,
amely elvezet minket a recepción.

1578
01:13:55,456 --> 01:13:56,830
Akkor miért nem tudom bekapcsolni a zenét.

1579
01:13:56,830 --> 01:13:58,610
Ott kell lennie italok
és rágcsálnivalók kívül.

1580
01:13:58,610 --> 01:14:00,220
Örülök, hogy keveredik a mint
Amíg az emberek szeretnék,

1581
01:14:00,220 --> 01:14:01,600
kérdések megválaszolására több egy-egy.

1582
01:14:01,600 --> 01:14:03,330
De, egyébként, szívesen
felszállni bármely ponton,

1583
01:14:03,330 --> 01:14:05,740
és találkozunk újra
Holnap reggel egy kicsit.

1584
01:14:05,740 --> 01:14:07,290
Rendben, köszi.

1585
01:14:07,290 --> 01:14:10,428