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

2
00:00:00,127 --> 00:00:01,210
DAVID J. Malan: V redu.

3
00:00:01,210 --> 00:00:02,160
Mi smo nazaj.

4
00:00:02,160 --> 00:00:05,810
Torej, cilj te sklepnega zasedanja
je uvesti še nekaj konceptov

5
00:00:05,810 --> 00:00:09,290
ampak tudi dati vsakemu posamezniku možnost
da nekako raztezajo prstov

6
00:00:09,290 --> 00:00:11,270
in dejansko nekaj storiti
malo hands-on.

7
00:00:11,270 --> 00:00:13,897
Cilj je, da ne bo obrniti
vse nas v spletne razvijalce

8
00:00:13,897 --> 00:00:16,230
na kakršen koli način, ampak res samo
da vam okus nekaj

9
00:00:16,230 --> 00:00:21,750
temeljnih konstruktov za kaj
gre v spletno programiranje in danes spletu

10
00:00:21,750 --> 00:00:23,980
Razvoj, zato
statična stran things--

11
00:00:23,980 --> 00:00:26,660
ni logike, no programiranje
jezik, le statična vsebina.

12
00:00:26,660 --> 00:00:29,660
In to nam bo dalo priložnost
bi dejansko videli, kaj je spletni strežnik,

13
00:00:29,660 --> 00:00:34,140
glej kakšna datoteka HTML, si oglejte, kaj
je HTTP dejansko služi navzgor.

14
00:00:34,140 --> 00:00:38,600
Toda preden se spustimo v, vse retrospektivo
vprašanja o računalništvu v oblaku

15
00:00:38,600 --> 00:00:43,922
ali varnost ali kaj vmes?

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

17
00:00:44,890 --> 00:00:47,181
Dobro, dobro, kaj je
To storite tako, za vsak slučaj

18
00:00:47,181 --> 00:00:49,680
Proces se prijavili za
nekaj, kar traja nekaj minut.

19
00:00:49,680 --> 00:00:51,221
Bomo pustite, da se to v ozadju.

20
00:00:51,221 --> 00:00:56,860
Daj, če bi lahko,
da c9.io. ta URL here--

21
00:00:56,860 --> 00:01:02,810
To je tretja oseba service--
platforma kot storitev, če will--

22
00:01:02,810 --> 00:01:05,190
da se dogaja, da vas vabimo,
da se prijavite za račun,

23
00:01:05,190 --> 00:01:08,650
in to se dogaja, da vsak od vas
račun v tako imenovanem oblaku

24
00:01:08,650 --> 00:01:11,330
na infrastrukturi nekoga drugega,
podjetje, imenovano Cloud9.

25
00:01:11,330 --> 00:01:13,350
Toda kaj je lepo o
to je, da daš

26
00:01:13,350 --> 00:01:15,990
približevanje
Dejanski razvoj v realnem svetu

27
00:01:15,990 --> 00:01:18,530
okolje, čeprav v
oblak in v spletnem brskalniku

28
00:01:18,530 --> 00:01:21,175
in bomo to uporabili za dejansko
poskus bit danes.

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

30
00:01:27,116 --> 00:01:30,260
In potem gredo naprej in samo smer
svojo pot v procesu prijave

31
00:01:30,260 --> 00:01:32,630
če lahko.

32
00:01:32,630 --> 00:01:36,080
Tako se zgodi, da ta način uporabljajo v razredu
Učim za vse naše študente,

33
00:01:36,080 --> 00:01:39,140
tako na univerzi in tam zdaj, in
to je nadomestila tisto zgodovinsko

34
00:01:39,140 --> 00:01:41,390
je sicer downloadable software.

35
00:01:41,390 --> 00:01:44,620
Torej, kaj si dostop do
je ena od teh virtualnih strojev,

36
00:01:44,620 --> 00:01:46,460
v bistvu, da sem opisal prej.

37
00:01:46,460 --> 00:01:50,260
Torej, ta družba Cloud9 verjetno
najemnine iz tretje party-- dejansko

38
00:01:50,260 --> 00:01:52,760
v tem primeru, Google-- celoto
kup virtualnih strojev

39
00:01:52,760 --> 00:01:56,500
da so nekako Usitniti v
iluzija posameznih strežnikov

40
00:01:56,500 --> 00:01:58,610
da je vsak od nas ima popoln nadzor nad.

41
00:01:58,610 --> 00:02:01,640
To ni čisto natančno reči
da oni virtualne stroje,

42
00:02:01,640 --> 00:02:04,550
čeprav, ker tisto, kar
Cloud9 dejansko uporablja

43
00:02:04,550 --> 00:02:07,570
je nekoliko novejša tehnologija
imenuje kontejnerizacija.

44
00:02:07,570 --> 00:02:13,150
In naj me zgrabi to sliko
tu slikati to sliko.

45
00:02:13,150 --> 00:02:16,540
>> Posoda je, če
se spomnite sliko

46
00:02:16,540 --> 00:02:19,900
iz prej, nekoliko lažje
teže kot virtualni stroj.

47
00:02:19,900 --> 00:02:22,090
V bistvu, medtem ko zadnja
Tokrat smo se pogovarjali o tam

48
00:02:22,090 --> 00:02:25,170
da operacijski
sistem in Hipervizor

49
00:02:25,170 --> 00:02:28,260
in nato gost operacijski sistem, gost
operacijski sistem, gost operacijski

50
00:02:28,260 --> 00:02:30,940
sistem, na vrhu
fizične strojne opreme,

51
00:02:30,940 --> 00:02:33,740
Razlika s tem novejša
tehnologija, kontejnerizacija,

52
00:02:33,740 --> 00:02:37,290
je, da so vsi nekako delijo
isti operacijski sistem.

53
00:02:37,290 --> 00:02:39,970
Ampak še vedno ustvarijo
iluzija vsakogar

54
00:02:39,970 --> 00:02:44,590
ima svojo lastno ekskluzivno
administrativne pravice in datoteke

55
00:02:44,590 --> 00:02:45,400
na strežniku.

56
00:02:45,400 --> 00:02:48,230
Ampak tam je manj programska oprema
med vami in strojne opreme.

57
00:02:48,230 --> 00:02:52,260
Rezultat, ki je v
teorija, višjo učinkovitost,

58
00:02:52,260 --> 00:02:55,470
zato, ker ga uporabljate, ali
zapravlja manj sredstev

59
00:02:55,470 --> 00:02:57,360
o tem tako imenovanem virtualizacijo plasti.

60
00:02:57,360 --> 00:02:59,420
Torej se to imenuje
kontejnerizacija po naravi

61
00:02:59,420 --> 00:03:02,920
s pomočjo tehnologije imenovane DOCKER,
ki je zelo veliko, ki prihajajo v svoje.

62
00:03:02,920 --> 00:03:05,086
In to je nekaj, kar
inženirji v vašem podjetju

63
00:03:05,086 --> 00:03:08,610
Morda nekako nekako začeli govoriti
o tem takoj, če tega še niste storili,

64
00:03:08,610 --> 00:03:11,590
čeprav je gotovo ni
Razlog za skok na vseh bandwagons.

65
00:03:11,590 --> 00:03:15,410
>> Torej s tem je dejal, kaj
si verjetno videl

66
00:03:15,410 --> 00:03:22,670
je zaslon, ki izgleda nekaj takega.

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

68
00:03:23,170 --> 00:03:25,260
In samo pokliči me več, če se ne.

69
00:03:25,260 --> 00:03:27,440
In če SO- bom prišel, če ne.

70
00:03:27,440 --> 00:03:30,244
Pojdi naprej in kliknite, da je velik
plus, da ustvarite delovni prostor,

71
00:03:30,244 --> 00:03:31,660
in boste videli zaslon, kot je ta.

72
00:03:31,660 --> 00:03:35,020
Lahko pokličete delovni prostor
ime, kar hočeš, za zdaj.

73
00:03:35,020 --> 00:03:38,660
In samo dejansko zaradi enostavnosti,
iti in-- dobro, nekateri od vas

74
00:03:38,660 --> 00:03:39,660
že imajo delovne prostore.

75
00:03:39,660 --> 00:03:47,050
rečejo karkoli want-- poslovanja,
Harvard, četrtek, karkoli želite.

76
00:03:47,050 --> 00:03:48,800
Vi ne potrebujete opis.

77
00:03:48,800 --> 00:03:52,380
Lahko jo pustite zasebni, če vas
že kup delovnih prostorov.

78
00:03:52,380 --> 00:03:55,280
Če si prisiljen, da bi bilo javno,
da je v redu za današnje namene.

79
00:03:55,280 --> 00:03:56,750
Tudi tu je eden od upsells.

80
00:03:56,750 --> 00:03:59,939
Dobiš en zasebni delovni prostor, ki ga
privzeto. Toda, če želite še več,

81
00:03:59,939 --> 00:04:00,980
boste morali plačati več.

82
00:04:00,980 --> 00:04:02,870
V nasprotnem primeru vas silijo
da bi svoje delo javnosti.

83
00:04:02,870 --> 00:04:05,600
Ampak to je v redu, ker so tudi
Ta cilj v odprtokodnih skupnostih

84
00:04:05,600 --> 00:04:07,700
spodbuditi ljudi k
dejansko sodelovanje.

85
00:04:07,700 --> 00:04:10,699
>> In zadnja stvar, ki je pomembna,
čeprav je, po tem, ko ste izbrali ime

86
00:04:10,699 --> 00:04:17,140
in po tem, ko se odločite, zasebno ali javno,
kliknite HTML5, velik ikono oranžno

87
00:04:17,140 --> 00:04:22,430
drugi z leve, in
nato Ustvari delovni prostor.

88
00:04:22,430 --> 00:04:24,580
In to se bo verjetno
traja minuto ali tako,

89
00:04:24,580 --> 00:04:26,540
vendar boste potem imeti
okolje, ko vas

90
00:04:26,540 --> 00:04:30,544
storiti, da izgleda spominja
kaj moram na zaslonu tukaj.

91
00:04:30,544 --> 00:04:33,210
Ampak, še enkrat, to lahko traja minuto
ali več, da bi prišli do tega zaslona

92
00:04:33,210 --> 00:04:34,770
Ko boste kliknili Ustvari delovni prostor.

93
00:04:34,770 --> 00:04:37,936
Vendar me je z zastavico kot če bi me rad
da si na vse ali svetuje.

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

95
00:04:40,191 --> 00:04:40,690
V redu.

96
00:04:40,690 --> 00:04:42,390
Torej bom ozadju to za zdaj.

97
00:04:42,390 --> 00:04:44,260
Pokliči me več, če se vam zdi, da
kakršne koli tehnične težave.

98
00:04:44,260 --> 00:04:46,210
Ampak, še enkrat, da bi trajalo
malo za to, da se odpre.

99
00:04:46,210 --> 00:04:49,570
In gremo naprej in govori o tem, kaj
to dejansko pomeni, da bi spletno stran,

100
00:04:49,570 --> 00:04:52,780
kaj HTML je, kako vse to
zdaj povezuje tako začenjamo

101
00:04:52,780 --> 00:04:54,730
dejansko uporabo nekaterih tehnologije.

102
00:04:54,730 --> 00:04:58,310
Tako se izkaže, da sem lahko
gredo na mojega malega Mac tukaj,

103
00:04:58,310 --> 00:05:01,650
odpreti preprost program, imenovan
TextEdit, ali Windows sem lahko

104
00:05:01,650 --> 00:05:04,480
open nekaj, kar ti notepad.exe.

105
00:05:04,480 --> 00:05:08,260
In lahko sem samo preprosto naredite nekaj
kot this-- "Hello, world".

106
00:05:08,260 --> 00:05:12,020
In potem sem to lahko shranite kot
hello.txt Torej ni magija obstaja.

107
00:05:12,020 --> 00:05:15,200
To nima nič opraviti s spleta
programiranje, nič opraviti s HTML.

108
00:05:15,200 --> 00:05:16,790
Samo ustvarjanje preprosto besedilno datoteko.

109
00:05:16,790 --> 00:05:20,600
Vendar se je izkazalo, da je na spletu
Stran je dobesedno samo to.

110
00:05:20,600 --> 00:05:24,020
To je preprosta besedilna datoteka, ki vsebuje besedilo
da bi lahko tip na tipkovnici,

111
00:05:24,020 --> 00:05:30,070
vendar je tipično, a ne vedno
konča ne .txt, ampak .html ali .htm.

112
00:05:30,070 --> 00:05:32,050
In ti ne samo
tip besed v datoteki.

113
00:05:32,050 --> 00:05:35,280
Si dejansko morali uporabiti stvari, imenovane
oznake ali bolj na splošno, nekaj

114
00:05:35,280 --> 00:05:37,190
imenuje označevalni jezik.

115
00:05:37,190 --> 00:05:40,510
>> Torej bom zelo hitro tip
in nato razloži naslednje.

116
00:05:40,510 --> 00:05:42,290
Bom najprej
ta tip, ki pravi,

117
00:05:42,290 --> 00:05:45,730
hej, brskalnik, tukaj prihaja
Spletna stran v jeziku HTML.

118
00:05:45,730 --> 00:05:51,850
In ti dve stvari skupaj rekli, hej,
brskalnik, tole ni res HTML.

119
00:05:51,850 --> 00:05:55,790
Hej, brskalnik, tukaj prihaja
glavo ali na vrhu moje strani.

120
00:05:55,790 --> 00:05:59,900
Hej, brskalnik, znotraj vrhu
mojo stran, dal naslov, ki je, "zdravo,

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

122
00:06:01,610 --> 00:06:08,370
Hej, brskalnik, ko vodja mojega
stran, tukaj prihaja telo na svoji strani.

123
00:06:08,370 --> 00:06:12,170
In, hej, brskalnik, telo moje
strani je treba tudi povedati, "zdravo svet."

124
00:06:12,170 --> 00:06:15,500
Torej, kaj so najpomembnejše podrobnosti tukaj?

125
00:06:15,500 --> 00:06:17,960
To je tisto, kar je na splošno
imenovano izjavo o doc tipa,

126
00:06:17,960 --> 00:06:20,190
in, odkrito rečeno, da je malo
težko zapomniti to na prvi.

127
00:06:20,190 --> 00:06:21,481
Pravkar si nekako kopirajte prilepite.

128
00:06:21,481 --> 00:06:23,760
To je formalna pot
rekel, hej, brskalnik,

129
00:06:23,760 --> 00:06:28,030
Jaz sem z uporabo HTML različica 5, ki
prišel nekoliko pred kratkim.

130
00:06:28,030 --> 00:06:31,380
To je čarobno zaklinjanje, da nekateri
ljudje s slabim občutkom za oblikovanje

131
00:06:31,380 --> 00:06:33,640
odločila, da bo dana na
Zelo začetek datoteke.

132
00:06:33,640 --> 00:06:35,473
Kljub temu, da je
malo Skrivnosten, da je vse

133
00:06:35,473 --> 00:06:38,250
je means-- hej, brskalnik, tukaj
prihaja z verzijo 5 HTML.

134
00:06:38,250 --> 00:06:41,741
>> Preostali del tega je bil z nami
že nekaj časa, zgodovinsko,

135
00:06:41,741 --> 00:06:44,740
ampak to je bilo razvija, in to je
Verjetno je že malo lažje.

136
00:06:44,740 --> 00:06:47,320
Opazili nekaj značilnosti
kar sem poudaril.

137
00:06:47,320 --> 00:06:49,890
Tam je te stvari s kotno
brackets-- levi nosilec

138
00:06:49,890 --> 00:06:51,040
in pravi nosilec.

139
00:06:51,040 --> 00:06:52,490
In opazili simetrijo tukaj.

140
00:06:52,490 --> 00:06:57,340
In simetrije, mislim, kot sem
imajo to start oznako tukaj ali odprto oznako

141
00:06:57,340 --> 00:07:01,560
če hočete, tukaj imam
blizu tag ali končna oznaka, ki je

142
00:07:01,560 --> 00:07:06,460
razlikuje le v kolikor je to
poševnica na začetku besede

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

144
00:07:07,360 --> 00:07:09,360
In si lahko zamislite
To, kot sem bil mimogrede

145
00:07:09,360 --> 00:07:12,280
predlagala prej, hej,
brskalnik, prihaja nekaj HTML.

146
00:07:12,280 --> 00:07:16,060
In obratno, hej, brskalnik, ki je
da za začetek HTML-- in koncem.

147
00:07:16,060 --> 00:07:18,440
>> Medtem hej, brskalnik, tukaj
prihaja glavo moji strani.

148
00:07:18,440 --> 00:07:20,140
Hej, brskalnik, ki ga je za glavo.

149
00:07:20,140 --> 00:07:22,240
Hej, brskalnik, tukaj je
telo moje strani.

150
00:07:22,240 --> 00:07:24,020
Hej, brskalnik, ki ga je za telo.

151
00:07:24,020 --> 00:07:26,940
In notranjost, ki je nekaj
poljubna besedila za zdaj.

152
00:07:26,940 --> 00:07:30,520
In znotraj glave, medtem,
je nekaj samovoljno, ampak označeni,

153
00:07:30,520 --> 00:07:34,410
tako rekoč, besedilo, ki pravi, naslov
moje strani je "zdravo, svet."

154
00:07:34,410 --> 00:07:37,470
Zdaj, za zdaj, lahko
Predvidevam, da brskalniki

155
00:07:37,470 --> 00:07:41,762
imajo only-- ali, bolje rečeno, imajo spletne strani
samo dva parts-- glavo in telo.

156
00:07:41,762 --> 00:07:44,220
In glava je na splošno samo
kot menijski vrstici, stvari

157
00:07:44,220 --> 00:07:45,510
res samo na samem vrhu.

158
00:07:45,510 --> 00:07:48,910
In telo je črevesje v stran,
vse, kar je v tem velik pravokotnik

159
00:07:48,910 --> 00:07:50,239
da zapolni zaslon.

160
00:07:50,239 --> 00:07:51,780
Tako da sem šel naprej in to.

161
00:07:51,780 --> 00:07:54,400
Sem šel naprej in
Kliknite Shrani, File Save.

162
00:07:54,400 --> 00:07:58,580
In bom rešil
je to hello.html,

163
00:07:58,580 --> 00:08:00,870
in sem le, da bo
ga na mojem namizju.

164
00:08:00,870 --> 00:08:03,520
In sem šel
naprej in kliknite Shrani.

165
00:08:03,520 --> 00:08:05,806
In notice-- moj Mac na
Vsaj je kričati name.

166
00:08:05,806 --> 00:08:07,180
Ali ste prepričani, da želite to narediti?

167
00:08:07,180 --> 00:08:08,710
In sem hotel reči, da, uporabljam HTML.

168
00:08:08,710 --> 00:08:10,400
Vem, da bolje v tem primeru.

169
00:08:10,400 --> 00:08:14,686
In zdaj sem šel na namizje
kjer sem imel to datoteko naenkrat.

170
00:08:14,686 --> 00:08:16,060
In bom jo dvokliknite.

171
00:08:16,060 --> 00:08:18,268
In boste opazili, da je z
privzeto, Chrome odprla.

172
00:08:18,268 --> 00:08:19,996
To je zato, ker je to
privzeti brskalnik.

173
00:08:19,996 --> 00:08:21,370
In to samo pravi: "Zdravo, svet."

174
00:08:21,370 --> 00:08:23,078
Vendar pa pravi, "zdravo,
svet "na dveh mestih.

175
00:08:23,078 --> 00:08:23,979
Obvestilo zgornjem levem kotu.

176
00:08:23,979 --> 00:08:25,020
Precej težko zgrešiti, da je.

177
00:08:25,020 --> 00:08:26,180
To je velik in krepko.

178
00:08:26,180 --> 00:08:30,690
In kje drugje se ne zdi,
pravi, "zdravo, svet"?

179
00:08:30,690 --> 00:08:31,470
>> OBČINSTVO: Zavihek.

180
00:08:31,470 --> 00:08:33,100
>> DAVID J. Malan: Ja, zavihek sama.

181
00:08:33,100 --> 00:08:35,159
Torej, ko sem dejal vodja
Stran je vse do top--

182
00:08:35,159 --> 00:08:36,367
in vsekakor je to naslov.

183
00:08:36,367 --> 00:08:37,710
To je samo v zavihku tukaj.

184
00:08:37,710 --> 00:08:40,320
In sem lahko pull to kartico
načrtovana tako, da se ne zamenja.

185
00:08:40,320 --> 00:08:43,360
To je samo ena zanka zdaj,
in seveda vidimo "zdravo, svet"

186
00:08:43,360 --> 00:08:45,970
tu in "zdravo, svet" tukaj.

187
00:08:45,970 --> 00:08:47,160
Torej precej preprosta.

188
00:08:47,160 --> 00:08:49,050
Ampak to je tudi dokaj preprost.

189
00:08:49,050 --> 00:08:50,440
In, pravzaprav povečavi.

190
00:08:50,440 --> 00:08:53,272
Lahko spremenite velikost pisave samo
povečave za dostopnost.

191
00:08:53,272 --> 00:08:56,830
Ampak kaj je zdaj nekaj storiti
malo bolj zanimivo.

192
00:08:56,830 --> 00:08:59,760
>> Bom go-- Ops, kaj
pridem nazaj v svojo besedilno datoteko.

193
00:08:59,760 --> 00:09:02,400
Grem nazaj na moj
besedilna datoteka, in bom

194
00:09:02,400 --> 00:09:06,320
to spremeniti in reči
"Pozdravljeni, Disney World."

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

196
00:09:07,970 --> 00:09:10,919
In šel nazaj na moj
brskalnik in kliknite Reload.

197
00:09:10,919 --> 00:09:12,710
In sedaj, seveda, da
pravi, da "Disney World."

198
00:09:12,710 --> 00:09:15,500
In bom umetno povečavo
V samo zato, da je lažje videti.

199
00:09:15,500 --> 00:09:19,012
Torej, zdaj, žal, sem nekako želim
to-- pravzaprav, da je funkcija Mac.

200
00:09:19,012 --> 00:09:21,720
Želim, da kliknete na Disney World
in iti nekam kot disney.com,

201
00:09:21,720 --> 00:09:23,290
vendar to ne deluje.

202
00:09:23,290 --> 00:09:26,850
Torej, osnovno načelo spletu je
hiperpovezave, povezave, ki gredo drugam.

203
00:09:26,850 --> 00:09:28,390
Torej, kako naj naredim to?

204
00:09:28,390 --> 00:09:34,690
No, jaz lahko samo rečem,
"Zdravo, http://www.disney.com."

205
00:09:34,690 --> 00:09:36,110
Shrani to.

206
00:09:36,110 --> 00:09:37,620
Osveži.

207
00:09:37,620 --> 00:09:39,400
Ampak to tudi ni mogoče klikniti.

208
00:09:39,400 --> 00:09:42,930
In kaj je lepo tu, čeprav
to še ne deluje,

209
00:09:42,930 --> 00:09:45,930
je, da se zdi, da je
brskalnik ne dobesedno samo

210
00:09:45,930 --> 00:09:46,950
kaj mi je povedal, da storiti.

211
00:09:46,950 --> 00:09:50,110
Torej, če sem tip URL, kot je ta,
to je samo dogaja, da mi pokaže URL.

212
00:09:50,110 --> 00:09:54,270
Moram uporabiti oznake ali oznake
jezik dejansko povedati

213
00:09:54,270 --> 00:09:55,621
brskalnik storiti še več.

214
00:09:55,621 --> 00:09:57,870
Tako da sem šel naprej in
izbrisati to za trenutek.

215
00:09:57,870 --> 00:10:00,980
In sem hotel reči, hej,
brskalnik, zagon sidro tukaj,

216
00:10:00,980 --> 00:10:02,650
povezava tako rekoč.

217
00:10:02,650 --> 00:10:07,500
In hiper-referenca, destinacija
te sidro, bi morala biti ta URL.

218
00:10:07,500 --> 00:10:08,750
In opazil moje ponudbe.

219
00:10:08,750 --> 00:10:11,590
Lahko uporabite enojne narekovaje, preveč,
vendar pa morajo biti usklajeni,

220
00:10:11,590 --> 00:10:14,270
in jaz bi na splošno šele raba
dvojni narekovaji naj bo enostavno.

221
00:10:14,270 --> 00:10:16,820
Obvestilo bom zapreti oznako.

222
00:10:16,820 --> 00:10:21,160
In potem tukaj bom
reči, "Disney World."

223
00:10:21,160 --> 00:10:26,890
In zdaj moram nekaj symmetry--
odprt nosilec, / A, zaprt nosilec.

224
00:10:26,890 --> 00:10:28,090
>> Torej, kaj sem predstavil?

225
00:10:28,090 --> 00:10:30,100
Imeli smo nekaj oznak že.

226
00:10:30,100 --> 00:10:32,410
HTML, Head, naslov, telo,
so vse oznake, tako rekoč,

227
00:10:32,410 --> 00:10:34,280
z odprtimi in zaprtimi kolegi.

228
00:10:34,280 --> 00:10:36,530
Ampak obvestilo, da je to neke
za bistveno razlikujejo.

229
00:10:36,530 --> 00:10:39,140
To je tisto, kar pokličem
HTML atribut.

230
00:10:39,140 --> 00:10:41,451
In atribut je
samo ključni vrednosti par.

231
00:10:41,451 --> 00:10:43,950
To je običajna stvar v
računalnika science-- ključ-vrednost par.

232
00:10:43,950 --> 00:10:45,770
To je neke vrste orodje za trgovino.

233
00:10:45,770 --> 00:10:47,040
Ključna in vrednost.

234
00:10:47,040 --> 00:10:49,390
Beseda in nato nekaj
druga beseda ali besede.

235
00:10:49,390 --> 00:10:53,790
In v tem primeru, je ključ href,
in vrednost je, da je celoten URL.

236
00:10:53,790 --> 00:10:57,890
In kakšna lastnost pa je, da
vpliva na obnašanje oznake.

237
00:10:57,890 --> 00:11:01,010
In v tem primeru moramo vplivati
obnašanje sidro tag,

238
00:11:01,010 --> 00:11:04,140
ker moramo zasidrati
Ta povezava do nekje.

239
00:11:04,140 --> 00:11:06,960
In kako to, da je
s pomočjo atributa.

240
00:11:06,960 --> 00:11:08,970
>> Tako da sem šel naprej
in shranite datoteko zdaj.

241
00:11:08,970 --> 00:11:11,300
Vrnite se v mojem brskalniku in osvežite.

242
00:11:11,300 --> 00:11:14,580
In voila, imamo zdaj
Začetki zakonit spletne strani.

243
00:11:14,580 --> 00:11:18,420
Super-enostavno, ampak če sem hover nad
this-- obvestilo v spodnjem levem kotu,

244
00:11:18,420 --> 00:11:19,830
to je super, majhna.

245
00:11:19,830 --> 00:11:21,730
Ampak ne vidite www.disney.com.

246
00:11:21,730 --> 00:11:27,076
In če sem ga kliknite, res to
me popelje proč disney.com.

247
00:11:27,076 --> 00:11:29,380
Zdaj, Nenavadno
Tukaj je, da ni

248
00:11:29,380 --> 00:11:33,940
best-- najbolj tržno URL, vendar
da je v redu, ker ta datoteka ne

249
00:11:33,940 --> 00:11:35,360
obstaja na svetovnem spletu.

250
00:11:35,360 --> 00:11:39,740
Obstaja kot lokalno datoteko v navidezno
moje Uporabniki directory-- / jharvard--

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

252
00:11:41,890 --> 00:11:42,634
Vendar ima URL.

253
00:11:42,634 --> 00:11:43,800
Samo zgodi, da bo lokalna.

254
00:11:43,800 --> 00:11:47,050
Žal pa nihče od vas obišče
to, ker če vnesete URL,

255
00:11:47,050 --> 00:11:49,980
da boš povedal brskalnik
poglej za datoteke imenovane hello.html

256
00:11:49,980 --> 00:11:50,772
na trdem disku.

257
00:11:50,772 --> 00:11:53,271
In, seveda, če ste
je po vzdolž ročno

258
00:11:53,271 --> 00:11:54,530
to ne dogaja, da obstajajo.

259
00:11:54,530 --> 00:11:55,190
>> Tako da je v redu.

260
00:11:55,190 --> 00:11:57,815
Še vedno potrebujemo način, na koncu,
da bi dobili te datoteke v spletu,

261
00:11:57,815 --> 00:12:01,180
vendar pa draži narazen nekaj
varnostne posledice tega, kar smo pravkar

262
00:12:01,180 --> 00:12:04,850
videl in ga kravato nazaj na prejšnjo
Razprava iz tega jutra.

263
00:12:04,850 --> 00:12:08,200
Izkazalo se je, da če
Brskalnik dobesedno le ne

264
00:12:08,200 --> 00:12:12,560
kaj mi je povedal, da ne, in zdi se,
da se v primeru, da je sidro oznaka

265
00:12:12,560 --> 00:12:17,380
vplivalo na vrednost
Ta lastnost se imenuje href

266
00:12:17,380 --> 00:12:20,810
vendar prikazuje ta
Besedilo, bi to zdi

267
00:12:20,810 --> 00:12:26,520
bi pomenilo, da sem lahko dal URL
na obeh mestih in nato osvežite

268
00:12:26,520 --> 00:12:29,100
in zdaj videli URL in pojdite na URL.

269
00:12:29,100 --> 00:12:32,680
Obvestilo, če sem hover nad spodaj levo,
Jaz res dogaja še disney.com.

270
00:12:32,680 --> 00:12:38,340
>> Torej, če ste kdaj bili
phished-- P-H-I-S-H-E-D--

271
00:12:38,340 --> 00:12:42,820
z eno od teh lažnih e-poštnih sporočil
od kot PayPal vaše banke,

272
00:12:42,820 --> 00:12:46,470
ste verjetno prišel povezave znotraj
e-pošte, ki berete, da

273
00:12:46,470 --> 00:12:49,970
pove, da kliknite tukaj, da gredo potrjujejo
geslo ali potrdite datum rojstva

274
00:12:49,970 --> 00:12:53,840
ali socialni ali kaj socialno
vas inženiring razkriti

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

276
00:12:54,920 --> 00:12:57,625
No, jaz bi nekako sprejeti
Prednost je v tem, ne bi jaz?

277
00:12:57,625 --> 00:13:01,240
Lahko bi rekel, kaj
kot, www.paypal.com.

278
00:13:01,240 --> 00:13:11,340
In namesto disney.com, I
lahko gre za, kot so, badguy.com.

279
00:13:11,340 --> 00:13:12,850
Osveži.

280
00:13:12,850 --> 00:13:16,620
In kako enostavno je tepec,
zlasti netehnični bralnik

281
00:13:16,620 --> 00:13:20,649
ali površno branje
Bralec, kot da kliknete

282
00:13:20,649 --> 00:13:23,940
povezava, kot je ta, ki bi, če sem kliknite it--
Pravzaprav ne želim iti badguy.com.

283
00:13:23,940 --> 00:13:25,398
Ne vem, kaj se je dejansko tam.

284
00:13:25,398 --> 00:13:30,080
Torej paypal.com, obvestilo, je
kaj pa pravi, da se bo,

285
00:13:30,080 --> 00:13:33,210
ampak seveda, če pogledam dol
super-low, to je malo zamegljen,

286
00:13:33,210 --> 00:13:34,230
vendar pa pravi, badguy.com.

287
00:13:34,230 --> 00:13:38,644
To je povedal, samo zdaj
da bom na napačnem mestu.

288
00:13:38,644 --> 00:13:41,560
In ko sem že dejal, da banke
res ne sme spodbujati ali vlak

289
00:13:41,560 --> 00:13:44,510
Uporabniki v klikom povezave, to
je le ena manifestacija nje.

290
00:13:44,510 --> 00:13:45,430
In to je tako preprosto.

291
00:13:45,430 --> 00:13:48,120
Zdaj ste nasprotnik, če
narediš nekaj takega

292
00:13:48,120 --> 00:13:51,000
in poskušajo pretentati uporabnika
na obisku vaše spletne strani.

293
00:13:51,000 --> 00:13:53,320
Ampak za zdaj, bomo naprej
stvari, lep in čist.

294
00:13:53,320 --> 00:13:55,640
Smo šli naprej
in nazaj te spremembe.

295
00:13:55,640 --> 00:13:56,530
Osveži stran.

296
00:13:56,530 --> 00:13:57,740
In sem šel nazaj na disney.com.

297
00:13:57,740 --> 00:14:00,660
>> Poglejmo, če ne moremo draži
To narazen malo več.

298
00:14:00,660 --> 00:14:04,160
Torej "zdravo, Disney World."

299
00:14:04,160 --> 00:14:05,950
Bom povedal tukaj.

300
00:14:05,950 --> 00:14:08,220
Mogoče bom narediti nekaj prostora.

301
00:14:08,220 --> 00:14:12,730
"Upamo, da boste uživali v vaše bivanje!"

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

303
00:14:13,830 --> 00:14:15,850
Osveži.

304
00:14:15,850 --> 00:14:19,010
To ni rea-- to ni
kar sem nameraval, kajne?

305
00:14:19,010 --> 00:14:21,870
Mislim, če sem zdravljenje moje besedilo
datoteko kot urejevalnik besedil,

306
00:14:21,870 --> 00:14:24,894
kaj si upamo, se bo zgodilo tukaj?

307
00:14:24,894 --> 00:14:27,060
Ja, počutim se, kot da
mora biti prelom vrstice tukaj,

308
00:14:27,060 --> 00:14:28,799
zato se počuti buggy na nek način.

309
00:14:28,799 --> 00:14:31,090
Ampak to je pravzaprav namerno,
ker je tako kot prej,

310
00:14:31,090 --> 00:14:33,381
brskalnik je le, da bo
pa kaj vam je povedal, da storiti.

311
00:14:33,381 --> 00:14:34,806
Nisem ga povedal, da prekinitev vrstice.

312
00:14:34,806 --> 00:14:37,930
Sem ne povedal, da se premaknete navzdol, celo
čeprav, intuitivno, se počutim, kot sem.

313
00:14:37,930 --> 00:14:39,805
Tako se izkaže, da potrebujemo
malo bolj označevalni,

314
00:14:39,805 --> 00:14:41,390
in bom to popraviti, kot sledi.

315
00:14:41,390 --> 00:14:46,160
Bom ta uvod najprej pozdravi
s tem, kar se imenuje točka tag.

316
00:14:46,160 --> 00:14:48,920
In potem bom šel naprej
in zaviti ta drugi stavek

317
00:14:48,920 --> 00:14:54,370
V drugem odstavku tag, čeprav
oni so super-kratke odstavke.

318
00:14:54,370 --> 00:14:55,930
Zdaj bom rešil.

319
00:14:55,930 --> 00:14:57,160
Osveži.

320
00:14:57,160 --> 00:14:59,070
In zdaj imamo, da
prostor, in mi nekako

321
00:14:59,070 --> 00:15:01,680
imajo semantiko
dve ločeni točki.

322
00:15:01,680 --> 00:15:05,290
>> To je vse lepo in prav, vendar pa bi
lepo, da dodate sliko na to stran,

323
00:15:05,290 --> 00:15:08,710
tako da sem šel iskati
Mickey Mouse na Google Slike.

324
00:15:08,710 --> 00:15:12,830
In samo za zabavo, sem
dogaja, da zgrabi to sliko.

325
00:15:12,830 --> 00:15:15,350
Bom, da gredo naprej zdaj in
zgrabi URL te slike,

326
00:15:15,350 --> 00:15:16,510
čeprav je drugače
načinov, da to storijo.

327
00:15:16,510 --> 00:15:18,520
Za zdaj sem le, da bo kopirajte URL.

328
00:15:18,520 --> 00:15:24,770
Bom šel nazaj v moje besedilo
datotek, in bom tu povedati,

329
00:15:24,770 --> 00:15:31,160
img src = quote citata
da URL, super-dolgo.

330
00:15:31,160 --> 00:15:34,580
In potem mora pojem
Slika je nekoliko drugačna.

331
00:15:34,580 --> 00:15:38,640
Pa je res ni pojem začetek
slike in konča sliko,

332
00:15:38,640 --> 00:15:40,630
kot začetek označiti končni oznako.

333
00:15:40,630 --> 00:15:43,840
Tako se mu zdi malo čudno, da
me pomensko za to,

334
00:15:43,840 --> 00:15:45,390
da imajo blizu oznako slike.

335
00:15:45,390 --> 00:15:46,780
To ni napačna.

336
00:15:46,780 --> 00:15:48,840
To je popolnoma pravilna,
in to je spodbujati,

337
00:15:48,840 --> 00:15:50,870
vendar pa je okrajšava zapis.

338
00:15:50,870 --> 00:15:53,780
Ne morem nekako istočasno
Odpiranje in zapiranje enako oznako,

339
00:15:53,780 --> 00:15:55,510
in da bo brskalnik vesel.

340
00:15:55,510 --> 00:15:56,950
Torej, to je samo malo
bolj jedrnat stvari

341
00:15:56,950 --> 00:15:59,408
da konceptualno res ne
smisla za začetek in konec.

342
00:15:59,408 --> 00:16:01,190
Pravkar so tam, ali pa nisi.

343
00:16:01,190 --> 00:16:06,020
>> Torej bom rešil to in iti nazaj
na moj "Hello, world" strani in polnitve.

344
00:16:06,020 --> 00:16:09,880
In to je malo izpod nadzora,
ker je ta slika je dejansko

345
00:16:09,880 --> 00:16:12,210
malo veliko, ampak to je v redu.

346
00:16:12,210 --> 00:16:13,710
Lahko ga spremenite velikost v programu.

347
00:16:13,710 --> 00:16:14,900
Ali veste, kaj.

348
00:16:14,900 --> 00:16:17,350
Samo, da dokaže, da sem
bo dejansko reči

349
00:16:17,350 --> 00:16:21,760
da je širina te stvari naj
le 200 slikovnih pik, 200 pik.

350
00:16:21,760 --> 00:16:24,360
Naj gredo naprej in shranite
in osvežite, in zdaj stran

351
00:16:24,360 --> 00:16:25,690
izgleda malo bolj razumno.

352
00:16:25,690 --> 00:16:27,260
Toda opazili vzorec.

353
00:16:27,260 --> 00:16:30,030
No, sem se nekako naučil vse
HTML v nekem smislu, vsaj

354
00:16:30,030 --> 00:16:33,531
konceptualno, ker so vsi HTML je je
ti tags-- odprte oznake, zaprta oznake,

355
00:16:33,531 --> 00:16:35,280
in lastnosti, ki jih
spremenijo svoje vedenje.

356
00:16:35,280 --> 00:16:38,380
In, očitno, vsak
Oznaka je lahko nič ali ena

357
00:16:38,380 --> 00:16:43,005
ali dva ali več atributov, pri čemer vsaka
ki pa nekaj malo drugačen.

358
00:16:43,005 --> 00:16:44,380
Zdaj, kako veš, kaj obstaja?

359
00:16:44,380 --> 00:16:46,800
Ti samo poslušaj nekoga
kot ti povem, kaj obstaja,

360
00:16:46,800 --> 00:16:50,860
ali si Google približno za vaje
na HTML, in res je to preprosto.

361
00:16:50,860 --> 00:16:54,030
>> Resnično, ko sem bil undergrad
pred leti in se naučili, HTML,

362
00:16:54,030 --> 00:16:56,530
eden od mojih poučevanje matematike
pomočniki preživel

363
00:16:56,530 --> 00:16:59,600
malo časa mi mentorstvo
Za kot pol ure, uro,

364
00:16:59,600 --> 00:17:00,660
in potem sem bil na poti.

365
00:17:00,660 --> 00:17:03,300
Bil sem na poti proti izdelavo
najbolj ostudno spletne strani doslej,

366
00:17:03,300 --> 00:17:05,549
ki je, očitno, nisem
res korak dlje.

367
00:17:05,549 --> 00:17:09,849
Ampak bistvo je, da, ko vas
razumem te preproste ideas--

368
00:17:09,849 --> 00:17:13,450
če Skrivnosten text-- vendar ti preprosto
ideje se začne misel

369
00:17:13,450 --> 00:17:15,960
in zapiranje misel, vodenje
Vse lepo uravnoteženo,

370
00:17:15,960 --> 00:17:19,150
videti kaj gor, spreminjanje
vedenje te oznake, da je res vse

371
00:17:19,150 --> 00:17:20,079
je z njo.

372
00:17:20,079 --> 00:17:28,140
In v resnici, če bomo zdaj iti
nekaj podobnega google.com-- dejansko,

373
00:17:28,140 --> 00:17:31,920
pojdimo prostor malo več
reasonable-- stanford.edu.

374
00:17:31,920 --> 00:17:37,800
In sem šel na View,
Razvijalec, View Source.

375
00:17:37,800 --> 00:17:41,400
To je grda, ampak notice--
in bom povečavo obvestila

376
00:17:41,400 --> 00:17:43,432
nekatere stvari, ki je že znano.

377
00:17:43,432 --> 00:17:45,140
Tam je to tukaj,
ki je brskalnik.

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

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

380
00:17:47,634 --> 00:17:49,550
Očitno tam je
atribut, da nisem

381
00:17:49,550 --> 00:17:51,540
uporabiti, da podaja
Jezik strani

382
00:17:51,540 --> 00:17:54,380
in to lahko pomaga z avtomatskim
prevajanje in takšne stvari.

383
00:17:54,380 --> 00:17:55,546
Tu je glava strani.

384
00:17:55,546 --> 00:17:57,790
Tukaj je naslov strani Stanford.

385
00:17:57,790 --> 00:17:59,832
Tam je oznaka nisem
govorimo o yet-- Meta tag.

386
00:17:59,832 --> 00:18:01,540
To je nekako
osnovne informacije.

387
00:18:01,540 --> 00:18:04,210
To pomaga pri SEO, ali
iskanje motor optimizacijo,

388
00:18:04,210 --> 00:18:06,320
ali Google rezultati iskanja ali podobno.

389
00:18:06,320 --> 00:18:09,029
Ampak, če smo ostali videti, da
je videti, tukaj je telo tag.

390
00:18:09,029 --> 00:18:11,570
In tam je šopke drugo
Oznake smo ne govori še.

391
00:18:11,570 --> 00:18:13,750
Vendar Div ena za
delitev strani.

392
00:18:13,750 --> 00:18:16,680
To je kot nevidna pravokotnika
Če nekako želite duševno

393
00:18:16,680 --> 00:18:20,160
razdeliti svojo stran v
različne enote na spletu.

394
00:18:20,160 --> 00:18:22,650
In nato veliko Divs I
glej, kaj se imenuje razred,

395
00:18:22,650 --> 00:18:24,440
vendar se bomo vrnili k temu.

396
00:18:24,440 --> 00:18:26,200
>> To je interesting-- oblike.

397
00:18:26,200 --> 00:18:27,730
Obrazci so po vsem spletu.

398
00:18:27,730 --> 00:18:30,310
Vsako polje za iskanje, da si
kdaj uporabili je oblika.

399
00:18:30,310 --> 00:18:31,490
In, da, kaj je dejansko videli.

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

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

402
00:18:33,910 --> 00:18:37,660
Delovanje tega obrazca, za kar
zgodovinskih razlogov je, da URL.

403
00:18:37,660 --> 00:18:38,840
Metoda je "post".

404
00:18:38,840 --> 00:18:44,060
Izkazalo se je, da lahko zahteve HTTP uporabo
glagol "zaslužiti", kot smo videli prej,

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

406
00:18:45,070 --> 00:18:47,030
In boste videli razliko
to v trenutku.

407
00:18:47,030 --> 00:18:48,363
Poglejmo dejansko videli, kaj je to.

408
00:18:48,363 --> 00:18:49,830
Naj grem nazaj na stran Stanford.

409
00:18:49,830 --> 00:18:53,330
Kakšni obliki se pogovarjajo
o, misliš?

410
00:18:53,330 --> 00:18:54,485
Kaj skoči ven na vas?

411
00:18:54,485 --> 00:18:54,970
>> OBČINSTVO: Iskanje polje.

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

413
00:18:55,845 --> 00:18:58,410
Torej se v zgornjem desnem kotu
tukaj je to polje za iskanje.

414
00:18:58,410 --> 00:19:02,441
In to je, kako se izvajajo it--
oznaka, ki je dobesedno odprto nosilec obliki.

415
00:19:02,441 --> 00:19:03,940
In potem pa iskati nekaj.

416
00:19:03,940 --> 00:19:09,220
Poiščimo kolega
od mine-- "Nick Parlante."

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

418
00:19:11,380 --> 00:19:13,750
In seveda, da je šlo za
nekoliko drugačen URL.

419
00:19:13,750 --> 00:19:15,140
Naj grem nazaj.

420
00:19:15,140 --> 00:19:18,960
Poiščimo "tečaje".

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

422
00:19:19,460 --> 00:19:20,484
Šel na drug URL.

423
00:19:20,484 --> 00:19:23,400
Torej, Stanford je dodal nekaj čarobno
da oni ne me pelje na URL

424
00:19:23,400 --> 00:19:25,820
da smo videli v
Akcijski atribut tam.

425
00:19:25,820 --> 00:19:32,480
Vendar pa je ta oblika tu izvaja izključno
s pomočjo te provizije tukaj, te oznake.

426
00:19:32,480 --> 00:19:35,710
V bistvu, tukaj je vhod za
vrsto iskanja, ki jo želite.

427
00:19:35,710 --> 00:19:38,940
Tu je vhod za
druga vrsta iskanja.

428
00:19:38,940 --> 00:19:41,960
Tukaj je vhod za sam niz.

429
00:19:41,960 --> 00:19:45,394
In tako je cilj, da ne zaviti
naš um okoli vseh teh oznak

430
00:19:45,394 --> 00:19:46,060
ampak samo, da vidim.

431
00:19:46,060 --> 00:19:48,300
To je samo odpiranje in zapiranje
oznake in videti stvari.

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

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

434
00:19:48,920 --> 00:19:49,795
>> OBČINSTVO: [neslišno]

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

436
00:19:51,925 --> 00:19:53,550
DAVID J. Malan: To je dobro vprašanje.

437
00:19:53,550 --> 00:19:54,660
To je malo težje videti.

438
00:19:54,660 --> 00:19:56,300
Naj pridejo nazaj, da
vprašanje v samo nekaj minutah

439
00:19:56,300 --> 00:19:59,000
ko gledamo na nekaj, kar se imenuje
CSS ali kaskadnih slogov,

440
00:19:59,000 --> 00:20:02,500
in lahko poskušamo izpeljati
toliko od strani.

441
00:20:02,500 --> 00:20:08,090
Torej, če zdaj pogledamo na google.com,
da vidimo, kaj je njihova stran izgleda.

442
00:20:08,090 --> 00:20:09,840
Ti bi they're-- da je srčkan danes.

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

444
00:20:12,490 --> 00:20:12,990
V REDU.

445
00:20:12,990 --> 00:20:13,690
Končano.

446
00:20:13,690 --> 00:20:15,260
Vse je v redu, tako da View Source.

447
00:20:15,260 --> 00:20:19,590
Ti misliš, Google ima
res lepo izvorna koda.

448
00:20:19,590 --> 00:20:24,970
Torej, očitno, kaj se dogaja?

449
00:20:24,970 --> 00:20:27,880
In v resnici, to ni niti HTML.

450
00:20:27,880 --> 00:20:30,930
To je nekaj, kar se imenuje JavaScript.

451
00:20:30,930 --> 00:20:32,344
In kaj je nadaljuj in tekoč.

452
00:20:32,344 --> 00:20:34,010
Sploh ne vem, kje se začne stran.

453
00:20:34,010 --> 00:20:37,240
Bom ukazom
F, odprt nosilec HTML.

454
00:20:37,240 --> 00:20:38,200
V redu, to je to.

455
00:20:38,200 --> 00:20:44,150
Našel sem na začetni strani, in
je toliko stvari tukaj.

456
00:20:44,150 --> 00:20:45,310
>> Kaj se pravzaprav dogaja?

457
00:20:45,310 --> 00:20:47,460
No, veš kaj,
to lahko čiščenje.

458
00:20:47,460 --> 00:20:52,109
Če bi namesto da bi šel na to preglejte
orodna vrstica, to posebno diagnostično orodje,

459
00:20:52,109 --> 00:20:54,150
in ne gredo Network,
kjer smo vedno dogaja danes,

460
00:20:54,150 --> 00:20:56,420
ampak če grem v Elements,
kaj je res lepo

461
00:20:56,420 --> 00:20:59,990
je, da ima brskalnik veliko
veliko boljše oči kot jaz.

462
00:20:59,990 --> 00:21:02,670
In brskalnik lahko bere
da nered spletne strani

463
00:21:02,670 --> 00:21:04,700
da HTML mail smo pravkar
pogledal, in je lahko

464
00:21:04,700 --> 00:21:08,340
ga razčleniti ali brati in
analizirati in reformacija

465
00:21:08,340 --> 00:21:09,910
v lepi človeka prijazen način.

466
00:21:09,910 --> 00:21:11,740
Torej, kaj vidim sedaj
V tem zaslonu tukaj

467
00:21:11,740 --> 00:21:15,470
pod Elements, točno isto vsebino,
ampak oni zamaknjeni vse,

468
00:21:15,470 --> 00:21:18,140
oni ga Colorized, vendar
to je točno isto besedilo

469
00:21:18,140 --> 00:21:19,620
da sem prenesli iz strežnika.

470
00:21:19,620 --> 00:21:23,630
>> In kaj je zdaj lepo je, vidim
v telesu, za instance-- obvestila

471
00:21:23,630 --> 00:21:26,480
stran je še vedno sestavljen
od le glave in telesa,

472
00:21:26,480 --> 00:21:28,660
in sem lahko hierarhično potopite v tukaj.

473
00:21:28,660 --> 00:21:32,420
Opazimo, da Google se zdi, da imajo
da divs-- tole in tole.

474
00:21:32,420 --> 00:21:33,310
Lahko razširite to.

475
00:21:33,310 --> 00:21:35,370
Obstaja cel kup drugih Divs.

476
00:21:35,370 --> 00:21:36,900
Tako da je malo zapletena.

477
00:21:36,900 --> 00:21:37,400
Toda počakaj.

478
00:21:37,400 --> 00:21:40,970
To se zdi toliko bolj
berljivo, relativno, kot je ta.

479
00:21:40,970 --> 00:21:43,840
Zakaj je Google neprijetno
Sam ga pravkar pošilja

480
00:21:43,840 --> 00:21:50,400
to velik nered kode nekaterih
sortiranje samo izvajati nekaj

481
00:21:50,400 --> 00:21:53,640
da izgleda tako enostavno na prvi pogled?

482
00:21:53,640 --> 00:21:55,270
Kot, zakaj ne dodajo več prostorov?

483
00:21:55,270 --> 00:21:56,811
Zakaj niso zadeti nastopiti kot sem storil?

484
00:21:56,811 --> 00:21:59,110
Poglej, kako dobro sem
na pisanje spletne strani.

485
00:21:59,110 --> 00:22:00,680
udaril sem Enter tako marljivo.

486
00:22:00,680 --> 00:22:03,760
I zamaknjeni tako da vse, kar je
je tako lepa in berljiva.

487
00:22:03,760 --> 00:22:08,463
Zakaj Google ne izvajajo enako?

488
00:22:08,463 --> 00:22:11,409
>> OBČINSTVO: [neslišno]

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

490
00:22:12,305 --> 00:22:13,180
DAVID J. Malan: Dobro.

491
00:22:13,180 --> 00:22:14,270
Zelo pošteno.

492
00:22:14,270 --> 00:22:16,650
Nimajo nekaj
oseba na Googlu ročno

493
00:22:16,650 --> 00:22:18,160
posodabljanje domače strani več.

494
00:22:18,160 --> 00:22:20,010
To ni 1999 več.

495
00:22:20,010 --> 00:22:21,140
Torej imajo programsko opremo.

496
00:22:21,140 --> 00:22:25,397
Oni imajo druga orodja,
ustvarjajo dinamično oni HTML.

497
00:22:25,397 --> 00:22:27,480
Seveda, da sama oznaka
je napisal človek,

498
00:22:27,480 --> 00:22:30,220
ampak realnost je,
to je povsem pošteno reči,

499
00:22:30,220 --> 00:22:33,340
brskalnik gotovo ne
zanima me, kako grdo je koda.

500
00:22:33,340 --> 00:22:35,940
Ampak tam je še bolj
prepričljivi tehničnih razlogov

501
00:22:35,940 --> 00:22:42,580
da Google distribuira svoje HTML
koda v tako površni, navidezno

502
00:22:42,580 --> 00:22:48,350
Velika način vse pakirati skupaj
z zelo malo way-- zelo malo

503
00:22:48,350 --> 00:22:51,274
na poti oblikovanje, kot sem storil.

504
00:22:51,274 --> 00:22:52,570
>> OBČINSTVO: [neslišno]

505
00:22:52,570 --> 00:22:53,528
>> DAVID J. Malan: hitrejši?

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

507
00:22:54,040 --> 00:22:55,680
In kaj si rekel, Lydia?

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

509
00:22:56,240 --> 00:22:57,281
Zakaj hitreje?

510
00:22:57,281 --> 00:22:58,156
OBČINSTVO: [neslišno]

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

512
00:23:00,522 --> 00:23:02,230
DAVID J. Malan: Obstaja
ni prostora za branje.

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

514
00:23:02,730 --> 00:23:04,560
Tako da mislim o tem, kaj je prostor.

515
00:23:04,560 --> 00:23:08,394
Torej, vsak znak na tipkovnici je
določena količina prostora za zastopanje,

516
00:23:08,394 --> 00:23:10,560
bodisi fizično, kot je to
zavzame toliko prostora,

517
00:23:10,560 --> 00:23:13,250
ali nekako pod
napa, ki zahteva spomin.

518
00:23:13,250 --> 00:23:15,740
In kot aside-- in bomo
govori več o tem tomorrow--

519
00:23:15,740 --> 00:23:19,930
vsak znak na tipkovnici
običajno zahteva 8 bitov ali en bajt.

520
00:23:19,930 --> 00:23:23,360
Torej vzorec 8 ničel ali
tisti, ali samo 1 bajt, kot smo

521
00:23:23,360 --> 00:23:24,720
ljudje bi običajno rekli.

522
00:23:24,720 --> 00:23:27,690
Torej, to je majhna, vendar
je še vedno ni nič.

523
00:23:27,690 --> 00:23:29,940
To je še vedno določena količina prostora.

524
00:23:29,940 --> 00:23:36,082
Torej, če inženir ali Google zadetkov
preslednico samo enkrat, in domnevam

525
00:23:36,082 --> 00:23:38,540
Google-- je super-popular--
Predpostavimo, da milijarde ljudi

526
00:23:38,540 --> 00:23:40,780
obiščite njihovo domačo stran na dan,
ali kakšno število ljudi

527
00:23:40,780 --> 00:23:43,290
obiščite stran domov
milijarde krat na dan,

528
00:23:43,290 --> 00:23:48,890
koliko dodatnih bajtov je, da
inženir za programsko opremo samo strošek Google

529
00:23:48,890 --> 00:23:51,310
s pritiskom njegov ali njen preslednico enkrat?

530
00:23:51,310 --> 00:23:52,692
>> OBČINSTVO: [neslišno]

531
00:23:52,692 --> 00:23:54,150
DAVID J. Malan: Ni čisto tako slabo.

532
00:23:54,150 --> 00:23:57,070
Samo en bajt krat milijarde.

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

534
00:23:57,871 --> 00:23:59,120
OBČINSTVO: 8 milijard gigabajtov.

535
00:23:59,120 --> 00:24:00,370
DAVID J. Malan: Ni 8 milijard.

536
00:24:00,370 --> 00:24:01,240
8 milijard bajtov.

537
00:24:01,240 --> 00:24:02,410
Ampak 1 GB.

538
00:24:02,410 --> 00:24:04,080
1 GB bi merska enota.

539
00:24:04,080 --> 00:24:08,240
Če on ali ona ne dva
prostori, 2 gigabajta.

540
00:24:08,240 --> 00:24:09,030
Tri gigabajtov.

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

542
00:24:09,530 --> 00:24:11,860
To lestvice dragem.

543
00:24:11,860 --> 00:24:16,150
In tako v primerih, kot so Google,
ki je odobrena, so ekstremni primeri,

544
00:24:16,150 --> 00:24:21,450
obstajajo druga vprašanja, ki se pojavljajo samo
tako da zelo razumno odločitev

545
00:24:21,450 --> 00:24:25,744
ali ob zelo preprosta človeška dejanja,
ker ima to povečan učinek.

546
00:24:25,744 --> 00:24:27,660
Tako da eden od razlogov
To izgleda tako stisnjen

547
00:24:27,660 --> 00:24:30,660
je točno tako, kot Victoria said-- je bilo
pravkar ustvarila z računalniki anyway.

548
00:24:30,660 --> 00:24:31,900
Tako da ni nič takega.

549
00:24:31,900 --> 00:24:33,309
Naj brskalnik pogruntal.

550
00:24:33,309 --> 00:24:35,350
Ampak tudi namerno
nima veliko prostora,

551
00:24:35,350 --> 00:24:36,766
ker je prostor ni potreben.

552
00:24:36,766 --> 00:24:38,250
In prostor dejansko stane.

553
00:24:38,250 --> 00:24:40,670
>> Bodisi stane časa,
ker je samo za potiskanje

554
00:24:40,670 --> 00:24:44,670
da je veliko več podatkov od
Sedež google.com je pravkar

555
00:24:44,670 --> 00:24:47,710
je dobil, da sprejmejo nekatere znesek
čas, tudi če je milisekund

556
00:24:47,710 --> 00:24:51,190
ali mikrosekund, vendar to sešteje
več kot toliko uporabnikov, ali bolj verjetno,

557
00:24:51,190 --> 00:24:52,270
verjetno stane.

558
00:24:52,270 --> 00:24:54,690
Google verjetno poveže
nekdo drug v svetu, ki je eden

559
00:24:54,690 --> 00:24:56,398
tistih pokukati
točk, in če imajo

560
00:24:56,398 --> 00:24:59,880
neke vrste finančnega razmerja
pri čemer stroške svoje podatke denarja,

561
00:24:59,880 --> 00:25:01,730
so morda tudi
zmanjšanje koliko podatkov

562
00:25:01,730 --> 00:25:04,530
oni izpljunil na
njihovo internetno povezavo.

563
00:25:04,530 --> 00:25:07,630
>> Tako je smešno, čeprav na koncu,
ali morda pomirjujoče stvar,

564
00:25:07,630 --> 00:25:11,030
je, da čeprav ta izgleda strašno
velika, ob koncu dneva,

565
00:25:11,030 --> 00:25:16,750
je še vedno natančni enaka načela kot
To je zelo preprosta stran tukaj za HTML

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

567
00:25:17,390 --> 00:25:20,610
Torej le povzeti, in tako, da
imajo kanonično različico, če ne bi bilo

568
00:25:20,610 --> 00:25:25,900
po skupaj z izbiro tukaj, tukaj
morda najbolj enostavna spletnih strani,

569
00:25:25,900 --> 00:25:28,240
tako nekaj igral z morda kasneje.

570
00:25:28,240 --> 00:25:30,790
>> No, pa uvesti
Nekaj ​​drugih idej sedaj.

571
00:25:30,790 --> 00:25:33,420
Mi smo o tem, da uvedejo
nekaj, kar se imenuje slog oznako.

572
00:25:33,420 --> 00:25:38,110
Lahko Stilizovati stran
na bolj zanimive načine.

573
00:25:38,110 --> 00:25:40,860
Torej, medtem ko e-pošte HTML
je vse o označevanju up

574
00:25:40,860 --> 00:25:44,470
podatki, nekako navedbo k
Brskalnik kako strukturirati podatke,

575
00:25:44,470 --> 00:25:48,110
kam it, CSS, ali
kaskadnih slogov,

576
00:25:48,110 --> 00:25:52,640
je drugi jezik, ki
običajno dobi pomešane s HTML

577
00:25:52,640 --> 00:25:55,670
kot bomo see-- vendar smo lahko čisto
da se v moment--, ki bo

578
00:25:55,670 --> 00:25:59,850
je zadnji kilometer in jo stylizes.

579
00:25:59,850 --> 00:26:02,460
To postane barve ravno prav,
pisave velikosti ravno prav,

580
00:26:02,460 --> 00:26:03,860
pozicioniranje ravno prav.

581
00:26:03,860 --> 00:26:06,510
To je vse o estetiki
ali oblikovanje, ne gre

582
00:26:06,510 --> 00:26:08,330
osnovni podatki sami po sebi.

583
00:26:08,330 --> 00:26:11,390
In najlažji način za prikaz
To je mogoče z zgledom.

584
00:26:11,390 --> 00:26:15,320
Torej bom šel čez
na moje preprosto besedilno datoteko.

585
00:26:15,320 --> 00:26:17,970
In vsak trenutek, bom
nas je vodil skozi postopek

586
00:26:17,970 --> 00:26:19,360
za to sami.

587
00:26:19,360 --> 00:26:23,310
>> Bom šel nazaj v svojo datoteko
tukaj in osvežite stran samo

588
00:26:23,310 --> 00:26:25,800
potrditi, kako izgleda.

589
00:26:25,800 --> 00:26:27,190
To je, če smo na zdaj.

590
00:26:27,190 --> 00:26:31,170
Počutim se, kot bi otroci uživajo
ob nekaj barve na tej spletni strani.

591
00:26:31,170 --> 00:26:34,480
Tako da sem šel tu gor
v glavi strani.

592
00:26:34,480 --> 00:26:38,130
In bom naredil slog, / stil.

593
00:26:38,130 --> 00:26:44,060
In potem znotraj tega, grem
povedati telo mojega page--

594
00:26:44,060 --> 00:26:46,870
in to oblikovanje je pri
prvi pogled, morda malo

595
00:26:46,870 --> 00:26:49,400
čudno, ampak običajna.

596
00:26:49,400 --> 00:26:55,010
Bom rekel, da je v ozadju
Barva te strani mora biti zelene barve.

597
00:26:55,010 --> 00:26:57,960
In to je žal
nekako ni najboljši dizajn.

598
00:26:57,960 --> 00:27:00,710
Obvestilo, ki je prej
v svetu HTML,

599
00:27:00,710 --> 00:27:03,190
Rekel sem, da atributi
so ti pari ključnih vrednosti.

600
00:27:03,190 --> 00:27:05,760
Nekaj ​​enako ponudbo
konec citata "nekaj".

601
00:27:05,760 --> 00:27:08,810
V svetu CSS, ki je
ki ga je zasnoval nekaj različnih ljudi,

602
00:27:08,810 --> 00:27:11,020
so se odločili, da v svojih
svetu, ključ-vrednost parov

603
00:27:11,020 --> 00:27:13,920
bi bila beseda debelega črevesa nekaj.

604
00:27:13,920 --> 00:27:15,220
Torej, to je ista ideja, čeprav.

605
00:27:15,220 --> 00:27:18,620
To povezujejo vrednost
z nekaterimi ključ, ki nekako

606
00:27:18,620 --> 00:27:20,330
vpliva na obnašanje te strani.

607
00:27:20,330 --> 00:27:21,901
>> In ti si verjetno lahko uganiti.

608
00:27:21,901 --> 00:27:24,150
Kaj je to verjetno bo
storiti, tudi če ste nikoli

609
00:27:24,150 --> 00:27:27,867
videl HTML ali CSS prej?

610
00:27:27,867 --> 00:27:29,450
OBČINSTVO: spremenite barvo ozadja.

611
00:27:29,450 --> 00:27:30,560
DAVID J. Malan: Ja,
spremenite barvo ozadja.

612
00:27:30,560 --> 00:27:33,280
In natančneje
Barva ozadja telesa.

613
00:27:33,280 --> 00:27:36,290
Toda v kolikor
Telo za zdaj je spletna

614
00:27:36,290 --> 00:27:38,870
page-- to je edina stvar,
pod naslovno vrstico really-- v

615
00:27:38,870 --> 00:27:40,870
to je verjetno bo
vplivajo na isto stvar.

616
00:27:40,870 --> 00:27:41,430
Torej, da vidimo.

617
00:27:41,430 --> 00:27:42,490
Rešimo to.

618
00:27:42,490 --> 00:27:44,310
Pojdi tukaj in osvežite.

619
00:27:44,310 --> 00:27:46,140
To je zelo grd.

620
00:27:46,140 --> 00:27:48,070
In kaj se dogaja
Tukaj je stranski učinek.

621
00:27:48,070 --> 00:27:49,850
Pravkar sem izbral to sliko naključno.

622
00:27:49,850 --> 00:27:53,305
Zakaj je zelena ni
prežema za Mickey?

623
00:27:53,305 --> 00:27:54,180
OBČINSTVO: [neslišno]

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

625
00:27:56,880 --> 00:27:57,880
DAVID J. Malan: Točno tako.

626
00:27:57,880 --> 00:28:01,750
Izkazalo se je, da so slike, precej
veliko vse slike, ki bi jih uporabljamo,

627
00:28:01,750 --> 00:28:03,670
so vsi rectangles-- kvadratkov.

628
00:28:03,670 --> 00:28:07,710
Tudi če je Mickey nekaj krivulje
k sebi in ima ozadje,

629
00:28:07,710 --> 00:28:09,330
da je v ozadju mora biti nekaj.

630
00:28:09,330 --> 00:28:10,280
To mora biti bela.

631
00:28:10,280 --> 00:28:11,910
To mora biti črna ali kaj drugega.

632
00:28:11,910 --> 00:28:13,650
To je lahko pregledna.

633
00:28:13,650 --> 00:28:16,100
In v resnici, sem lahko
Odpri Mickey Mouse tukaj

634
00:28:16,100 --> 00:28:18,590
v program, imenovan Photoshop
ali kaj podobnega

635
00:28:18,590 --> 00:28:21,176
in spremeniti vse, da se bela
ozadje pregledno,

636
00:28:21,176 --> 00:28:22,550
tako da bi zeleno sijalo skozi.

637
00:28:22,550 --> 00:28:25,980
Ampak to je nekaj, kar bi morali
vprašati sebe ali grafični umetnik

638
00:28:25,980 --> 00:28:28,130
ali oblikovalec na moj
Podjetje, na primer,

639
00:28:28,130 --> 00:28:31,490
storiti, še posebej, ker sem
sposodil tole iz interneta.

640
00:28:31,490 --> 00:28:33,030
Ampak to je, zakaj se to dogaja.

641
00:28:33,030 --> 00:28:34,980
>> Torej, kaj bi mi želeli narediti?

642
00:28:34,980 --> 00:28:41,040
No, mi bi želeli, da smo rekli,
Res upam, da boste uživali v vaše bivanje.

643
00:28:41,040 --> 00:28:44,150
In za poudarek, hočem
da bi to močno,

644
00:28:44,150 --> 00:28:48,310
in tako bom rekel odprt močna in
zapre močna in nato osvežite.

645
00:28:48,310 --> 00:28:50,320
In to je malo težko
videti na projektorju

646
00:28:50,320 --> 00:28:53,250
morda pa res zdaj
skoči ven na vas malo več.

647
00:28:53,250 --> 00:28:56,180
Tako da lahko dodate ležeče na tem
Tako krepko obrnjena na ta način.

648
00:28:56,180 --> 00:28:57,500
Mi lahko spremenite barve.

649
00:28:57,500 --> 00:29:01,610
Dejstvo je, samo za brcne, da sem
dogaja, da gredo naprej in to.

650
00:29:01,610 --> 00:29:05,120
Res ne všeč, kako moj
odstavki so tako blizu skupaj,

651
00:29:05,120 --> 00:29:06,870
tako da sem lahko naredil kaj takega.

652
00:29:06,870 --> 00:29:13,310
Bom povedal, brskalnik,
spremeniti vsak odstavek oznako, da so,

653
00:29:13,310 --> 00:29:16,952
kaj je say-- pravzaprav, veš kaj,
kaj je uskladiti, da besedilo-align, center.

654
00:29:16,952 --> 00:29:19,410
In še enkrat, vem da je to le
ker je nekdo naučil, da me

655
00:29:19,410 --> 00:29:21,118
ali Pogledal sem ga v
spletni sklic.

656
00:29:21,118 --> 00:29:22,450
Torej mi rešiti to.

657
00:29:22,450 --> 00:29:25,070
In, ah, zdaj nimam
središčem sliko tam.

658
00:29:25,070 --> 00:29:28,490
In dejansko, veš kaj, če
Sem premakniti moje slike v odstavku

659
00:29:28,490 --> 00:29:34,510
tag-- tako da tretji odstavek,
čeprav to ni besedilo.

660
00:29:34,510 --> 00:29:36,917
Rešimo to in osvežite.

661
00:29:36,917 --> 00:29:40,000
Zdaj stran se začenja iskati vrste
of-- Mislim, da je še vedno precej grdo,

662
00:29:40,000 --> 00:29:43,180
ampak vsaj izgleda, da sem preživel
dve minuti namesto eno minuto

663
00:29:43,180 --> 00:29:43,950
zaradi česar je.

664
00:29:43,950 --> 00:29:47,200
>> In tako, postopoma, lahko naredimo
te estetske spremembe zdaj na strani?

665
00:29:47,200 --> 00:29:50,860
Sem res ne spremeni podatke v
Stran razen doda beseda res.

666
00:29:50,860 --> 00:29:52,650
Sem dodal metapodatke, če hočete.

667
00:29:52,650 --> 00:29:54,830
Hej, brskalnik, da
Beseda "zares" krepko.

668
00:29:54,830 --> 00:29:56,940
Vendar podatki niso trdni.

669
00:29:56,940 --> 00:29:57,830
To je metapodatki.

670
00:29:57,830 --> 00:29:59,410
Podatki so "Res."

671
00:29:59,410 --> 00:30:02,200
Torej imamo še nekaj
isti pojmi kot prej.

672
00:30:02,200 --> 00:30:05,990
Zdaj, seveda to ni na spletu,
tako bom naredil en zadnji korak tukaj.

673
00:30:05,990 --> 00:30:10,300
>> Bom šel na hello.html
in samo označite in kopirate to.

674
00:30:10,300 --> 00:30:12,285
In zdaj bom
gredo v Cloud9, ki

675
00:30:12,285 --> 00:30:13,910
Vam bom sprehod skozi vsak trenutek.

676
00:30:13,910 --> 00:30:17,080
In verjetnost, da boste kmalu, če
še ni na zaslonu, kot je ta.

677
00:30:17,080 --> 00:30:21,080
In želim, da vam na hitro
Ogled kaj Cloud9 dejansko je.

678
00:30:21,080 --> 00:30:26,590
Torej, še enkrat oblak 9 je
ta storitev v oblaku

679
00:30:26,590 --> 00:30:30,580
da vi in ​​mi daje iluzijo
imajo lastne virtualni stroj

680
00:30:30,580 --> 00:30:33,090
v oblaku, tehnično
posoda v oblaku,

681
00:30:33,090 --> 00:30:35,160
da imamo polno
administrativne privilegije.

682
00:30:35,160 --> 00:30:37,130
Torej, v teoriji, nihče
drugje na svetu ima

683
00:30:37,130 --> 00:30:39,152
dostop do zaslona Jaz sem
gledaš zdaj,

684
00:30:39,152 --> 00:30:40,860
razen morda ljudi
ki vodijo v mesto,

685
00:30:40,860 --> 00:30:43,470
ker tehnično imajo
fizični dostop in tako naprej.

686
00:30:43,470 --> 00:30:44,740
>> Torej, kaj smo videli v tem okolju?

687
00:30:44,740 --> 00:30:46,230
Bom pomanjšati,
ker je malo majhen.

688
00:30:46,230 --> 00:30:48,104
In naj omenim več
sem za trenutek.

689
00:30:48,104 --> 00:30:53,210
Na levi strani mojega in si
zaslon, tam je brskalnik datoteko na levi strani.

690
00:30:53,210 --> 00:30:55,362
Torej podobno kot v duhu
Mac OS in Windows.

691
00:30:55,362 --> 00:30:57,070
To so vse
datoteke v mojem računu.

692
00:30:57,070 --> 00:30:59,250
In privzeto, če je vaš
račun, kot je moja,

693
00:30:59,250 --> 00:31:05,090
boste videli, ali kmalu videli
helloworld.html in readme.md.

694
00:31:05,090 --> 00:31:07,950
Tukaj na desni, to je
kjer moji besedilne datoteke so šli.

695
00:31:07,950 --> 00:31:11,620
Če ste že uporabljali Microsoft
Beseda ali Beležnica ali TextEdit,

696
00:31:11,620 --> 00:31:14,100
to je beseda moja urejanja
datotek je šel.

697
00:31:14,100 --> 00:31:16,540
In potem je najbolj Skrivnosten
značilnost tega okolja

698
00:31:16,540 --> 00:31:20,100
da ne bomo res potrebovali, da je uporaba
tukaj imenuje Terminal Window.

699
00:31:20,100 --> 00:31:23,390
Če ste uporabljali DOS
minulih dni, to je Linux

700
00:31:23,390 --> 00:31:25,450
ali Linux ekvivalent DOS.

701
00:31:25,450 --> 00:31:28,190
To je besedilo, ki temelji interface--
Ni klikov z miško, ne vlečenje.

702
00:31:28,190 --> 00:31:30,770
Vse, kar lahko storite, je tip
ukazi, vendar ukazi

703
00:31:30,770 --> 00:31:34,400
lahko ustvarite datoteke, premikanje datotek, odprtih
imenikov, blizu imenikov,

704
00:31:34,400 --> 00:31:35,740
storiti vse več stvari.

705
00:31:35,740 --> 00:31:38,060
Ampak za zdaj, bomo samo
preživijo svoj čas tukaj.

706
00:31:38,060 --> 00:31:39,050
>> In tako naredimo to.

707
00:31:39,050 --> 00:31:41,008
Če ste v tem
okolje, ki ga naj bi

708
00:31:41,008 --> 00:31:45,900
bilo, če ste ustvarili delovno okolje
že, pojdi naprej in pojdi gor

709
00:31:45,900 --> 00:31:48,690
na File, New za trenutek.

710
00:31:48,690 --> 00:31:51,740
In to vam bo dala nov
Kartica tukaj v sredini.

711
00:31:51,740 --> 00:31:54,250
In sem samo-- in kaj je
gredo naprej in to.

712
00:31:54,250 --> 00:31:59,910
Gremo naprej in zdaj se datoteke, Shrani
in iti naprej in ga imenujemo hello.html,

713
00:31:59,910 --> 00:32:02,740
ne sme zamenjati z
helloworld.html, ki

714
00:32:02,740 --> 00:32:06,910
je prišel z novim brezplačen račun,
ki je le vzorčna datoteka.

715
00:32:06,910 --> 00:32:11,020
Videli boste, da se nenadoma pojavi,
najverjetneje na levi strani,

716
00:32:11,020 --> 00:32:12,810
in kartica bo še vedno odprta.

717
00:32:12,810 --> 00:32:21,300
In naj vas spodbujamo, zdaj poustvariti
ta datoteka ali nekatere njegove variante.

718
00:32:21,300 --> 00:32:24,607
In če si ne more povsem videti na
zaslon, to je identična diapozitive

719
00:32:24,607 --> 00:32:26,190
da imate verjetno v drugem zavihku.

720
00:32:26,190 --> 00:32:29,296
>> Torej na kratko, bo svojo prvo spletno stran,
ga shranite, nato pa vsak trenutek,

721
00:32:29,296 --> 00:32:31,170
Pokazal vam bom, kako
lahko dejansko videti to.

722
00:32:31,170 --> 00:32:32,970
Toda spremeniti vsaj eno stvar.

723
00:32:32,970 --> 00:32:35,400
Spremenite helloworld za
nekakšen lastni izbiri,

724
00:32:35,400 --> 00:32:39,821
tako da ste prepričani, da je vaš
datoteko in ne tistega, ki sem ustvaril.

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

726
00:32:40,320 --> 00:32:43,804
In ko ste ready-- ne
rush--, ko ste pripravljeni,

727
00:32:43,804 --> 00:32:46,220
gredo naprej in shranite
Ko ste naredili te spremembe.

728
00:32:46,220 --> 00:32:49,540
In če kliknete
Run gumb up top, to

729
00:32:49,540 --> 00:32:53,610
mora odpreti nov zavihek, ki bo povedal,
si kaj URL lahko obiščete datoteko na,

730
00:32:53,610 --> 00:32:56,380
vendar lahko traja nekaj trenutkov, da
quote citata "start Apache", ki

731
00:32:56,380 --> 00:32:58,820
je ime spletnega strežnika.

732
00:32:58,820 --> 00:33:02,430
Torej, bodite previdni, da narediti točno
kaj je v datoteki na koncu.

733
00:33:02,430 --> 00:33:04,610
Torej sedaj, bom povečavo.

734
00:33:04,610 --> 00:33:07,780
Če začnem tipkati
open-nosilec HTML, obvestilo

735
00:33:07,780 --> 00:33:09,650
to me je spodbudilo, da končam misel.

736
00:33:09,650 --> 00:33:13,750
In če sem zaključil misel je,
samodejno mi daje zaključno oznako.

737
00:33:13,750 --> 00:33:17,190
Toda pričakovanje je potem bom udaril
Enter, nato pa notri

738
00:33:17,190 --> 00:33:21,180
in ne glavo notri in
Nato sem naredil telo v notranjosti.

739
00:33:21,180 --> 00:33:24,430
In to je malo čudno na prvi,
ker počne delo za vas,

740
00:33:24,430 --> 00:33:27,110
vendar spoznali, da na koncu
vam prihrani tipkanja.

741
00:33:27,110 --> 00:33:30,500
In v resnici, zelo pogosta značilnost
programiranje okoljih v teh dneh

742
00:33:30,500 --> 00:33:33,260
tako za razvoj spletnih podobnega
to in dejansko programiranje,

743
00:33:33,260 --> 00:33:36,960
ki bomo govorili o prihodnosti,
je ta auto-popolna funkcije,

744
00:33:36,960 --> 00:33:39,710
stvari, ki samo omogočajo, da se
programer ali oblikovalec

745
00:33:39,710 --> 00:33:42,010
vnesti manj pritiskov na
izpolnitev isto stvar.

746
00:33:42,010 --> 00:33:43,176
Včasih je dobro, čeprav.

747
00:33:43,176 --> 00:33:44,560
Včasih je prav nadležno.

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

749
00:33:49,290 --> 00:33:54,010
In še enkrat, ko sem prepisal
drsnik ali kakšno njegovo varianto,

750
00:33:54,010 --> 00:33:57,360
lahko s klikom na gumb Zaženi do vrha.

751
00:33:57,360 --> 00:33:59,910
In nato na dnu
okno, boste obveščeni

752
00:33:59,910 --> 00:34:04,290
kaj URL lahko obiščejo vašo spletno stran.

753
00:34:04,290 --> 00:34:08,790
Mine, na primer, je v
business-daharvard.c9users.io

754
00:34:08,790 --> 00:34:11,480
in tako naprej.

755
00:34:11,480 --> 00:34:14,580
V redu, torej, naj me-- kakšna vprašanja?

756
00:34:14,580 --> 00:34:19,460
Vsa druga vprašanja o ravno
ta delovni preden smo dodali funkcije?

757
00:34:19,460 --> 00:34:21,692
In mi predlagala, samo
da se ljudje comfortable--

758
00:34:21,692 --> 00:34:24,400
ker je ena stvar, da samo
copy-paste slepo, kar sem naredil.

759
00:34:24,400 --> 00:34:27,177
Ampak samo zato, da ljudje rokoborbi
z vsaj eno izmed opravil,

760
00:34:27,177 --> 00:34:28,510
Bom vklopite glasbo.

761
00:34:28,510 --> 00:34:32,630
Bom predlaga seznam
stvari, ki jih lahko potencialno dodate.

762
00:34:32,630 --> 00:34:34,086
In lahko zagotovo uporabljati Google.

763
00:34:34,086 --> 00:34:36,210
In zakaj ne bi samo
Predlagamo, da se lotite reševanja

764
00:34:36,210 --> 00:34:38,710
vsaj en poseben problem.

765
00:34:38,710 --> 00:34:45,090
Torej, glede na oznake,
Naj ponovno to tukaj.

766
00:34:45,090 --> 00:34:48,280
>> Pravzaprav, mi dal
je v obliki tekstovnih.

767
00:34:48,280 --> 00:35:02,380
Recimo, da je med oznakami bomo morda
uporabiti tukaj je nekaj oznake tukaj.

768
00:35:02,380 --> 00:35:06,090
Videli smo, da odstavek oznako.

769
00:35:06,090 --> 00:35:07,850
Zdaj se dogaja, da auto-popolna.

770
00:35:07,850 --> 00:35:12,220
Odstavek tag, sidro tag.

771
00:35:12,220 --> 00:35:15,250
Recimo, da želite
narediti kaj večjega,

772
00:35:15,250 --> 00:35:19,480
tako da boste morda like--
razpon tag lahko pomaga.

773
00:35:19,480 --> 00:35:23,010
No, boste morda potrebovali pomoč
za to v samo nekaj trenutkov.

774
00:35:23,010 --> 00:35:24,830
Videli smo div.

775
00:35:24,830 --> 00:35:26,170
Videli boste, da je miza.

776
00:35:26,170 --> 00:35:27,928
Obstaja nekaj, kar ti 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
Pridejo nazaj, da je v trenutku.

780
00:35:34,770 --> 00:35:36,590
Kaj drugega bi bilo prav?

781
00:35:36,590 --> 00:35:38,310
Tam je močna.

782
00:35:38,310 --> 00:35:43,640
Tu je poudarek, oziroma em.

783
00:35:43,640 --> 00:35:50,110
There's-- kaj
Morda bi radi tu?

784
00:35:50,110 --> 00:35:51,930
No, bomo vzeli
poglej to skupaj.

785
00:35:51,930 --> 00:35:53,230
Oblika, ki smo ga videli.

786
00:35:53,230 --> 00:35:54,130
Tam je oblika.

787
00:35:54,130 --> 00:35:56,500
Tam je vhod in nekaj drugih.

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

789
00:35:58,924 --> 00:36:00,090
Vse je v redu, tako da je to.

790
00:36:00,090 --> 00:36:02,330
Če želite odgovoriti na Victoria je
Vprašanje, kaj me najprej

791
00:36:02,330 --> 00:36:05,020
Samo se prepričajte, da so vsi
lahko dobili svoje zdravo delovanje.

792
00:36:05,020 --> 00:36:06,900
Potem naj vam predstavim
Nekaj ​​druge ideje.

793
00:36:06,900 --> 00:36:09,209
Potem bomo kaj ljudje rešiti
nekaj težav na svoje.

794
00:36:09,209 --> 00:36:11,500
Potem bomo dejansko vrnili
s tem pojmom obliki

795
00:36:11,500 --> 00:36:14,950
in bomo dejansko ponovno izvajati
skupaj front-end vmesnik,

796
00:36:14,950 --> 00:36:16,450
tako rekoč, da Google sam.

797
00:36:16,450 --> 00:36:19,700
Bomo uporabili Google kot zadnji konec in pustite
jim delati trdo delo, preiskavo,

798
00:36:19,700 --> 00:36:22,760
vendar bomo ponovno sprednji konec
Google in iskalnega obrazca

799
00:36:22,760 --> 00:36:24,520
da imajo na svoji domači strani.

800
00:36:24,520 --> 00:36:27,050
In tako bomo prišli nazaj
Te oznake v samo trenutek.

801
00:36:27,050 --> 00:36:30,270
>> Torej, to je bilo tisto, kar sem
Predlagana pred nekaj trenutki.

802
00:36:30,270 --> 00:36:33,940
Lahko dodate stilizacijo k
Stran znotraj tega sloga oznake,

803
00:36:33,940 --> 00:36:36,950
in lahko Stilizovati ozadje
barvo, poravnavo besedila,

804
00:36:36,950 --> 00:36:39,000
ali je center ali levo ali desno.

805
00:36:39,000 --> 00:36:41,630
Ampak zelo hitro bi jih
ugotovili, ali spletni oblikovalec

806
00:36:41,630 --> 00:36:44,060
bi ugotovili, da je to
postane malo okoren,

807
00:36:44,060 --> 00:36:48,330
ker si to, kar je
imenovano mešanje vsebine

808
00:36:48,330 --> 00:36:50,120
s predstavitvijo le-teh.

809
00:36:50,120 --> 00:36:53,756
Ste mešanje svoje podatke
in njegove estetike.

810
00:36:53,756 --> 00:36:56,380
In v resnici, če menite, da
kaj se bo zgodilo čez time--

811
00:36:56,380 --> 00:36:58,350
To je zelo majhen
Spletna stran, seveda.

812
00:36:58,350 --> 00:37:01,590
Ampak, če dodam vsebino na tej strani
in dodam slog na to stran,

813
00:37:01,590 --> 00:37:04,650
stran zelo hitro dobi
daljša in daljša.

814
00:37:04,650 --> 00:37:07,510
In domnevam, da hočem
še eno spletno stran, ki

815
00:37:07,510 --> 00:37:09,010
ima nekaj od teh lastnosti.

816
00:37:09,010 --> 00:37:12,350
Recimo moj drugi spletno stran za moje
site-- tudi, hočem vse, kar center,

817
00:37:12,350 --> 00:37:14,960
in tudi jaz želim vse
z zelenim ozadjem.

818
00:37:14,960 --> 00:37:17,940
Jaz sem precej dogaja, da imajo za
kopiraj in prilepi nekaj teh vrstic

819
00:37:17,940 --> 00:37:20,730
v to drugo datoteko, ki se počuti v redu.

820
00:37:20,730 --> 00:37:22,030
To bo rešil problem.

821
00:37:22,030 --> 00:37:26,060
>> Kaj pa, če hočem tretjo stran
ali 30. strani ali 40. strani?

822
00:37:26,060 --> 00:37:28,730
Zdaj bom za kopiranje in
lepljenje veliko podvojene kode

823
00:37:28,730 --> 00:37:30,430
v več datotek.

824
00:37:30,430 --> 00:37:32,600
In tako predpostavimo, da
Sem se odločil, ali bom povedal,

825
00:37:32,600 --> 00:37:34,780
hej, ne bomo z uporabo
zeleno ozadje več.

826
00:37:34,780 --> 00:37:36,380
Bomo začeli uporabljati oranžno.

827
00:37:36,380 --> 00:37:38,690
Kaj spremeniti?

828
00:37:38,690 --> 00:37:42,900
Torej, boste morali spremeniti ta slog
od zelene do oranžne, kako marsikje?

829
00:37:42,900 --> 00:37:44,920
Kot 30 ali 40 mest.

830
00:37:44,920 --> 00:37:45,900
To je dolgočasno.

831
00:37:45,900 --> 00:37:47,039
To je nagnjena k napakam.

832
00:37:47,039 --> 00:37:49,580
Obstaja več razlogov
kjer si ne bi želeli, da povzroči

833
00:37:49,580 --> 00:37:51,840
da vrsta bolečine za sebe.

834
00:37:51,840 --> 00:37:54,760
In tako ne bi bilo lepo,
če bi lahko vzamemo tisto, kar sem

835
00:37:54,760 --> 00:37:58,240
dal med ta dva rumena
oznake, ta slog oznake,

836
00:37:58,240 --> 00:38:04,050
je faktor ven, in dal vse moje
stilizacijo v eno centralno datoteko

837
00:38:04,050 --> 00:38:08,470
da so vsi 30 ali 40 mojih drugih datotek
sposoditi od ali nekako reference,

838
00:38:08,470 --> 00:38:11,640
ni v nasprotju z mreženjem
diagrami smo počeli prej?

839
00:38:11,640 --> 00:38:15,030
>> Torej, če grem sem, da sem
bo dejansko predlagati

840
00:38:15,030 --> 00:38:17,880
da se zamenja
slog tag z nečim

841
00:38:17,880 --> 00:38:21,620
imenuje povezava tag, ki
je strašno, strašno imenom,

842
00:38:21,620 --> 00:38:24,370
ker jih ne uporabljate
povezava tag ustvariti kaj

843
00:38:24,370 --> 00:38:26,380
smo ljudje poznamo kot povezavo na spletno stran.

844
00:38:26,380 --> 00:38:29,750
Za to, boste uporabili katero tag?

845
00:38:29,750 --> 00:38:31,464
Kako si ustvariti povezavo na spletno stran?

846
00:38:31,464 --> 00:38:32,130
OBČINSTVO: The a.

847
00:38:32,130 --> 00:38:34,870
DAVID J. Malan: A, ali sidro
tag, da je šel na Disney prej.

848
00:38:34,870 --> 00:38:39,090
Povezava tag tukaj govori
this-- povezava do datoteke imenovane

849
00:38:39,090 --> 00:38:44,350
styles.css, razmerje, v katerem
se bo, da je moja slogovno.

850
00:38:44,350 --> 00:38:48,290
Zato je to eden izmed S v
CSS-- kaskadnih slogov.

851
00:38:48,290 --> 00:38:50,490
Style sheet-- dva S-ih v CSS.

852
00:38:50,490 --> 00:38:52,550
CSS.

853
00:38:52,550 --> 00:38:58,640
To samo pomeni, hej, brskalnik, pojdite
zdi styles.css na lokalnem strežniku

854
00:38:58,640 --> 00:39:01,870
in jo uporabite kot slogom,
kar pomeni znotraj te datoteke

855
00:39:01,870 --> 00:39:05,310
se bo vse
stilizacije, da smo pravkar storili.

856
00:39:05,310 --> 00:39:07,396
In kaj ta datoteka
lahko izgleda, kot je to.

857
00:39:07,396 --> 00:39:10,020
In bom samo to, da je to hitro
Na primer, ker ne potrebujemo

858
00:39:10,020 --> 00:39:12,000
da se preveč v plevel tukaj.

859
00:39:12,000 --> 00:39:17,840
Ampak, če sem kopirati to, kar sem predlagala
je, da programer ustvariti novo datoteko

860
00:39:17,840 --> 00:39:24,450
prilepite v teh lines--
whoops-- prilepite v teh vrsticah,

861
00:39:24,450 --> 00:39:32,270
ga shranite kot styles.css, nato pa v
drugo datoteko, izbrišite vse to

862
00:39:32,270 --> 00:39:35,450
in jo nadomestiti namesto
s tem link tag.

863
00:39:35,450 --> 00:39:43,090
Tako, da če sem povezal href = "styles.css"
razmerje mora biti "slogovne"

864
00:39:43,090 --> 00:39:44,170
blizu tag.

865
00:39:44,170 --> 00:39:45,250
Shrani.

866
00:39:45,250 --> 00:39:47,000
Pojdi nazaj na moj helloworld.

867
00:39:47,000 --> 00:39:48,690
Osveži.

868
00:39:48,690 --> 00:39:51,290
>> Dobesedno se ni nič zgodilo.

869
00:39:51,290 --> 00:39:54,710
To je dobro, saj to
pomeni, da je pravzaprav vse deluje.

870
00:39:54,710 --> 00:39:58,860
Da bi dokazali toliko, domnevam naredim
slovnične napake, in to imenujemo "styles.css"

871
00:39:58,860 --> 00:40:03,080
s kapitalom S, ki je
napačna, in nato osvežite.

872
00:40:03,080 --> 00:40:05,470
Sedaj lahko vidite, da preprosto ne deluje.

873
00:40:05,470 --> 00:40:06,362
Zdaj, zakaj?

874
00:40:06,362 --> 00:40:08,070
No, pa uporabite
tehniko od prej.

875
00:40:08,070 --> 00:40:10,153
Naj gredo naprej in v
moj brskalnik, v Chrome, da sem

876
00:40:10,153 --> 00:40:12,900
bo odprla, da je posebna
Kartica omrežja kot prej,

877
00:40:12,900 --> 00:40:15,560
in mi osvežite stran.

878
00:40:15,560 --> 00:40:19,341
Kaj nisi presenečen, da je sedaj?

879
00:40:19,341 --> 00:40:20,840
Ali pa ste presenečeni, da ga vidim.

880
00:40:20,840 --> 00:40:23,225
Kakorkoli, kaj vidite zdaj?

881
00:40:23,225 --> 00:40:24,100
OBČINSTVO: [neslišno]

882
00:40:24,100 --> 00:40:24,770
DAVID J. Malan: To ni bilo mogoče najti.

883
00:40:24,770 --> 00:40:25,680
Zakaj je ni bilo mogoče najti?

884
00:40:25,680 --> 00:40:28,480
No, Styles.css-- kapitala
S- ne obstaja.

885
00:40:28,480 --> 00:40:29,230
Sem misnamed.

886
00:40:29,230 --> 00:40:30,430
Enostavno slovnične napake.

887
00:40:30,430 --> 00:40:33,816
Ampak sem že razumljivo zdaj
404, ker je strežnik je rekel, hej,

888
00:40:33,816 --> 00:40:34,440
to ni bilo mogoče najti.

889
00:40:34,440 --> 00:40:36,300
Dobesedno, ne vem
če je ta datoteka.

890
00:40:36,300 --> 00:40:38,880
Tako se je zaradi tega brskalnika
vam pokaže, kaj je v njeni moči,

891
00:40:38,880 --> 00:40:42,860
surovo vsebino strani
ki je bil 200, HTML,

892
00:40:42,860 --> 00:40:45,390
vendar stilizacijo ne more
se nato doda.

893
00:40:45,390 --> 00:40:47,120
In to je tisto, kar je mišljeno z kaskadno.

894
00:40:47,120 --> 00:40:49,070
Lahko nekako dodate
potem, in to nekako

895
00:40:49,070 --> 00:40:50,874
izboljšuje estetiko spletne strani.

896
00:40:50,874 --> 00:40:53,790
In lahko celo prednost pred tistimi,
stili s še drugimi slogovne datoteke

897
00:40:53,790 --> 00:40:54,700
če želiš.

898
00:40:54,700 --> 00:40:57,780
To ni bilo mogoče najti, čeprav je v tem primeru,
ker seveda, sem misnamed.

899
00:40:57,780 --> 00:41:00,330
Zato bi morali popraviti, da je prvi.

900
00:41:00,330 --> 00:41:04,667
>> Torej, gremo naprej in
predlagam naslednje.

901
00:41:04,667 --> 00:41:07,410

902
00:41:07,410 --> 00:41:11,140
Gremo naprej in to.

903
00:41:11,140 --> 00:41:14,220
Začenši z morda
Vaše helloworld datoteka

904
00:41:14,220 --> 00:41:17,740
Naj samo povabi nekaj
za funkcijo predloge.

905
00:41:17,740 --> 00:41:20,400
Torej, Victoria, želiš
da so nekateri besedilo večji, kajne?

906
00:41:20,400 --> 00:41:24,555
Vse je v redu, tako da bomo lahko
ne predstavljajo besedila večji.

907
00:41:24,555 --> 00:41:26,860
In bomo vsak odtrgal off
samo en problem rešiti.

908
00:41:26,860 --> 00:41:30,867
Znamka besedilo večji.

909
00:41:30,867 --> 00:41:32,700
Ne bom moti
to pišem, ko smo

910
00:41:32,700 --> 00:41:35,600
imajo bullet tehnologije prav tukaj.

911
00:41:35,600 --> 00:41:39,970
Torej nekaj težav.

912
00:41:39,970 --> 00:41:44,670
Torej bomo poskušali
da besedilo večji.

913
00:41:44,670 --> 00:41:45,170
V redu.

914
00:41:45,170 --> 00:41:48,360
Kaj drugega bi nekdo predlaga?

915
00:41:48,360 --> 00:41:50,332
Kaj še lahko želimo
storiti v spletno stran?

916
00:41:50,332 --> 00:41:52,040
Kaj je prišel gor z
kratek seznam stvari

917
00:41:52,040 --> 00:41:55,366
in nato prenese na
skupino, da to ugotovite.

918
00:41:55,366 --> 00:41:56,270
>> OBČINSTVO: [neslišno]

919
00:41:56,270 --> 00:42:02,251
>> DAVID J. Malan: OK, položaj besedila
na različnih straneh stran?

920
00:42:02,251 --> 00:42:02,750
V redu.

921
00:42:02,750 --> 00:42:04,620
Nekaj ​​drugega.

922
00:42:04,620 --> 00:42:05,784
>> OBČINSTVO: [neslišno]

923
00:42:05,784 --> 00:42:06,700
DAVID J. Malan: Res je.

924
00:42:06,700 --> 00:42:08,720
Torej gif je samo
drugačna oblika datoteke.

925
00:42:08,720 --> 00:42:12,830
Pravkar smo se uporablja, kaj, A
png ali jpg verjetno?

926
00:42:12,830 --> 00:42:14,480
Uporabili smo jpg.

927
00:42:14,480 --> 00:42:16,780
Če vas zanima, čezmerni
odgovoriti na vaše vprašanje

928
00:42:16,780 --> 00:42:19,404
se je jpg splošno uporablja za
fotografije, saj podpira

929
00:42:19,404 --> 00:42:21,500
milijoni barv ali 24-bitne barve.

930
00:42:21,500 --> 00:42:26,930
GIF se običajno uporablja za, na primer,
internet meme te days-- animacije,

931
00:42:26,930 --> 00:42:28,810
kot animirani gif.

932
00:42:28,810 --> 00:42:32,320
Ampak to se zgodi uporabiti manjši barvo
palete, le 256 možnih barv,

933
00:42:32,320 --> 00:42:35,230
vendar podpira
preglednost in animacija.

934
00:42:35,230 --> 00:42:40,330
In potem je tukaj še png, ki podpira
preglednosti in več barv

935
00:42:40,330 --> 00:42:41,300
vendar ne animacijo.

936
00:42:41,300 --> 00:42:42,133
Torej, to je kompromis.

937
00:42:42,133 --> 00:42:44,144

938
00:42:44,144 --> 00:42:46,060
Torej dodal gif, čeprav,
bi funkcionalno

939
00:42:46,060 --> 00:42:48,396
enakovredno dodal png ali jpg.

940
00:42:48,396 --> 00:42:49,110
Ja.

941
00:42:49,110 --> 00:42:50,550
vir slike enaka.

942
00:42:50,550 --> 00:42:51,590
Torej nekaj drugega.

943
00:42:51,590 --> 00:42:57,288
Oglejmo prišli do nečesa,
smo poslali Victoria storiti tukaj.

944
00:42:57,288 --> 00:42:59,209
>> OBČINSTVO: Dodaj gumbe za obliko.

945
00:42:59,209 --> 00:43:00,000
DAVID J. Malan: OK.

946
00:43:00,000 --> 00:43:02,179
Torej dodali gumbe za obliko.

947
00:43:02,179 --> 00:43:03,470
In bomo storili, da je eden skupaj.

948
00:43:03,470 --> 00:43:07,220
Tako, da bo popolna segue
takoj po tem izzivom.

949
00:43:07,220 --> 00:43:10,357
Še kaj?

950
00:43:10,357 --> 00:43:11,440
Kaj bi radi storili?

951
00:43:11,440 --> 00:43:14,040

952
00:43:14,040 --> 00:43:16,516
Spletna počuti zelo underwhelming
če je to vse, kar lahko storimo.

953
00:43:16,516 --> 00:43:18,140
OBČINSTVO: spremenite barvo besedila.

954
00:43:18,140 --> 00:43:19,500
DAVID J. Malan: Spreminjanje kaj?

955
00:43:19,500 --> 00:43:20,666
OBČINSTVO: Barva besedila.

956
00:43:20,666 --> 00:43:22,311
DAVID J. Malan: Spreminjanje barve besedila.

957
00:43:22,311 --> 00:43:22,810
V redu.

958
00:43:22,810 --> 00:43:23,790
Torej, kaj je to.

959
00:43:23,790 --> 00:43:27,209
Samo še enkrat, tako da si ne samo
s pamet, počne točno to, kar delam,

960
00:43:27,209 --> 00:43:29,500
Bom vklopite glasbo
za morda pet minut tukaj.

961
00:43:29,500 --> 00:43:30,450
Ste dobrodošli, da uporabite Google.

962
00:43:30,450 --> 00:43:33,130
Ste dobrodošli, da me prosi, in
Bom šepetajo namig v uho.

963
00:43:33,130 --> 00:43:35,171
Ste dobrodošli, da si
več na ramena drugih.

964
00:43:35,171 --> 00:43:37,340
Toda rešiti le enega od teh težav.

965
00:43:37,340 --> 00:43:40,190
Vendar bomo storili zadnjega, je
predstavlja eno, če bi lahko skupaj.

966
00:43:40,190 --> 00:43:42,790
Torej, pet minut za reševanje
koli od teh težav

967
00:43:42,790 --> 00:43:46,780
s pomočjo Google, intuicijo, ali
druga sredstva, ki so na voljo za vas.

968
00:43:46,780 --> 00:43:48,630
>> [GLASBA]

969
00:43:48,630 --> 00:43:49,130
V redu.

970
00:43:49,130 --> 00:43:50,838
Brez skrbi, če želite
da krpanje,

971
00:43:50,838 --> 00:43:53,880
ampak bom pokvariti nekaj
teh odgovorov.

972
00:43:53,880 --> 00:43:57,986
Torej, prvi predlog iz
Victoria je bila, da bi besedilo večji.

973
00:43:57,986 --> 00:43:59,360
Torej je nekaj načinov, da to storijo.

974
00:43:59,360 --> 00:44:01,530
Sem trenutno obnovljena
moj zaslon na ta format,

975
00:44:01,530 --> 00:44:04,310
čeprav sem Povečano
umetno samo, da vidim stvari.

976
00:44:04,310 --> 00:44:07,470
In kaj je to.

977
00:44:07,470 --> 00:44:11,380
Naj gredo naprej in zgrabi
nekateri generični latinsko besedilo

978
00:44:11,380 --> 00:44:19,540
samo zato, da bomo imeli kaj za delati.

979
00:44:19,540 --> 00:44:20,715
Torej daj mi samo en trenutek.

980
00:44:20,715 --> 00:44:21,840
Bom tri odstavke.

981
00:44:21,840 --> 00:44:53,430

982
00:44:53,430 --> 00:44:53,930
V REDU.

983
00:44:53,930 --> 00:44:55,560
To bo bolje primer.

984
00:44:55,560 --> 00:44:57,840
Tako za radovedne, v
moj hello.html, sem

985
00:44:57,840 --> 00:45:01,645
prilepili tri nesmiseln
Latin odstavki

986
00:45:01,645 --> 00:45:03,270
samo zato, da imamo nekaj besedila za delo.

987
00:45:03,270 --> 00:45:06,720
In cilj Victoria je bil, da
narediti nekaj besedila večjega.

988
00:45:06,720 --> 00:45:09,879
Tako bi lahko, tako kot prej, gre tukaj.

989
00:45:09,879 --> 00:45:11,170
In mi to storiti na pravi način.

990
00:45:11,170 --> 00:45:13,253
Bom imel povezavo
oznaka, ki kaže na datoteko

991
00:45:13,253 --> 00:45:20,560
imenovano "styles.css," je razmerje
od katerih je spet "slogovne".

992
00:45:20,560 --> 00:45:25,221
In potem bom rešiti da
in odprla to "styles.css."

993
00:45:25,221 --> 00:45:28,940
>> Torej, kot prej, imam
sposobnosti v tem CSS datoteki

994
00:45:28,940 --> 00:45:31,569
dejansko preglasijo privzeto
estetika spletne strani,

995
00:45:31,569 --> 00:45:33,860
in privzete estetika,
Seveda, so precej dolgočasno.

996
00:45:33,860 --> 00:45:36,943
To je neke normalne velikosti pisave, črna
besedilo, belo ozadje in tako naprej.

997
00:45:36,943 --> 00:45:39,440
Tako, da sem želite
vse to besedilo večji.

998
00:45:39,440 --> 00:45:40,460
Jaz lahko naredim nekaj stvari.

999
00:45:40,460 --> 00:45:43,750
Po mojem styles.css datoteke, I
Lahko bi rekli, veš kaj,

1000
00:45:43,750 --> 00:45:46,950
velja naslednje
telo moje strani.

1001
00:45:46,950 --> 00:45:51,390
Pojdi naprej in da
velikost pisave 24 točk,

1002
00:45:51,390 --> 00:45:54,130
ki je številka da bi
uporabljajo v programu Microsoft Word.

1003
00:45:54,130 --> 00:45:57,620
Naj grem nazaj na moj splet
stran tukaj in osvežite,

1004
00:45:57,620 --> 00:45:59,640
in lahko vidite, da
to je že veliko večja.

1005
00:45:59,640 --> 00:46:02,223
In bomo lahko dobili malo nor,
tako kot smo lahko na desktop--

1006
00:46:02,223 --> 00:46:03,670
bi bilo 96 točk.

1007
00:46:03,670 --> 00:46:04,950
Osveži.

1008
00:46:04,950 --> 00:46:07,610
In to je že malo
upočasnila na tej točki.

1009
00:46:07,610 --> 00:46:09,500
>> Ampak jaz bi se lahko malo bolj natančno.

1010
00:46:09,500 --> 00:46:14,530
Namesto uporabe tega
Slogovna na telo moji strani,

1011
00:46:14,530 --> 00:46:21,740
kaj bi mi jo uporabljajo namesto,
kakšna druga oznaka, ki bi lahko še

1012
00:46:21,740 --> 00:46:25,445
deluje na isti način?

1013
00:46:25,445 --> 00:46:26,444
>> OBČINSTVO: The 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
Tako da glava ne bi bilo
pravilna, saj je verjeti,

1016
00:46:29,350 --> 00:46:31,300
ne moreš dejansko
nadzor nad estetiko.

1017
00:46:31,300 --> 00:46:32,700
Tam je bodisi besedilo tam ali ne.

1018
00:46:32,700 --> 00:46:36,760
Toda p tag-- lahko potopite v malo
globlje, tako rekoč, na točki

1019
00:46:36,760 --> 00:46:37,350
oznake.

1020
00:46:37,350 --> 00:46:41,600
In čeprav obstajajo tri,
To je popolnoma v redu, saj je v CSS,

1021
00:46:41,600 --> 00:46:44,900
ko sem rekel "p", to
pomeni uporabi naslednji

1022
00:46:44,900 --> 00:46:48,300
za vsako oznako, ki ustreza tem
selektor, selektor samo

1023
00:46:48,300 --> 00:46:49,430
pri čemer ime oznake.

1024
00:46:49,430 --> 00:46:52,350
Torej, kjerkoli že ste videli
"P", velja velikost pisave,

1025
00:46:52,350 --> 00:46:55,222
in kaj je uspelo več
smiselno again-- 24. točka.

1026
00:46:55,222 --> 00:46:56,930
In veš kaj,
Samo za dober ukrep,

1027
00:46:56,930 --> 00:46:59,810
Naredimo barvo
rdeča samo za trenutek.

1028
00:46:59,810 --> 00:47:03,740
In zdaj, če sem se osvežite, zdaj smo
glej tri grde odstavke.

1029
00:47:03,740 --> 00:47:07,180
>> Zdaj pa predpostavimo, da sem neke
of-- Želim prvi odstavek

1030
00:47:07,180 --> 00:47:08,210
da skoči ven na uporabnika.

1031
00:47:08,210 --> 00:47:11,150
Ne želim, da samo povečanje
velikost pisave vsega.

1032
00:47:11,150 --> 00:47:16,105
In zato sem pravzaprav želijo ugotoviti, ali
razlikovati med temi odstavki.

1033
00:47:16,105 --> 00:47:18,730
Torej, kaj je znebiti rdeče,
saj to je samo nekako lepljiv,

1034
00:47:18,730 --> 00:47:23,885
in gremo naprej in da
velikost pisave 12 točk, ki jih privzeto

1035
00:47:23,885 --> 00:47:26,260
tako da smo nazaj na nekaj
malo bolj smiselno.

1036
00:47:26,260 --> 00:47:29,190
In zdaj sem samo želim, da povečanje
velikost pisave prvega odstavka.

1037
00:47:29,190 --> 00:47:31,440
To lahko storite v nekaj
načinov, vendar eden od načinov, da je

1038
00:47:31,440 --> 00:47:37,180
morda najbolj poučni Na
moment je, da naredite naslednje.

1039
00:47:37,180 --> 00:47:43,280
Naj gredo naprej in rekli, to
odstavek ima edinstven ID "prvi".

1040
00:47:43,280 --> 00:47:45,000
Lahko bi poklical to, kar želim.

1041
00:47:45,000 --> 00:47:46,874
Lahko bi rekli "foo"
ali druga beseda,

1042
00:47:46,874 --> 00:47:49,290
ampak bom, da ga nekateri
semantično smiselno ime

1043
00:47:49,290 --> 00:47:50,320
kot "prvi".

1044
00:47:50,320 --> 00:47:54,790
To je edinstven identifikator,
ID, za moj prvi odstavek.

1045
00:47:54,790 --> 00:47:59,360
>> Kaj lahko sedaj storiti v mojem slogovni
je malo bolj natančno.

1046
00:47:59,360 --> 00:48:02,330
Namesto da bi rekel, uporablja
naslednje p tag,

1047
00:48:02,330 --> 00:48:04,890
Lahko rečem following--
velja naslednje,

1048
00:48:04,890 --> 00:48:11,000
ali izberite, HTML element
da ima edinstven ID "prvi".

1049
00:48:11,000 --> 00:48:12,350
Kaj želite uporabiti za to?

1050
00:48:12,350 --> 00:48:15,250
Velikost pisave 24. točko.

1051
00:48:15,250 --> 00:48:16,640
Torej imam dva selektorje zdaj.

1052
00:48:16,640 --> 00:48:19,690
Eden naredi vse
točke od 12-točko.

1053
00:48:19,690 --> 00:48:24,960
Ampak ta, še posebej, ker gre
second-- gre zadnji v file--

1054
00:48:24,960 --> 00:48:27,090
To ima kaskadni učinek.

1055
00:48:27,090 --> 00:48:30,200
Pravkar sem na vse moje
odstavek oznake 12-point,

1056
00:48:30,200 --> 00:48:34,350
vendar je to zdaj kaskade in
preglasi, da je za vse elemente

1057
00:48:34,350 --> 00:48:38,800
Na strani vsaka oznaka na strani katere
edinstven ID je citat citata "prvi".

1058
00:48:38,800 --> 00:48:41,720
In hashtag v tem kontekstu
samo pomeni "posebni identifikator."

1059
00:48:41,720 --> 00:48:43,750
Ne ga v datoteki HTML.

1060
00:48:43,750 --> 00:48:46,880
Jaz, tukaj, samo reči
quote citata "prvi".

1061
00:48:46,880 --> 00:48:48,470
>> Torej mi osvežite.

1062
00:48:48,470 --> 00:48:49,919
In zdaj vidim, ah, OK.

1063
00:48:49,919 --> 00:48:51,710
Mislim, da to ni tako
lepa, ampak to je nekako

1064
00:48:51,710 --> 00:48:53,600
podobnega uvodu zavarovalnici za
knjiga ali nekaj takega,

1065
00:48:53,600 --> 00:48:55,100
kjer je prvi odstavek večji.

1066
00:48:55,100 --> 00:48:57,933
Lahko bi bilo še bolj natančna
le prve črke, ampak vsaj

1067
00:48:57,933 --> 00:48:59,110
Sem izvaja večji nadzor.

1068
00:48:59,110 --> 00:49:04,760
Zdaj maybe-- morda želim, da to storijo
občasno iz kakršnega koli razloga,

1069
00:49:04,760 --> 00:49:09,010
in zato ne želim, da je to
velja za samo eno oznako HTML.

1070
00:49:09,010 --> 00:49:15,110
Namesto tega pa say-- dovolimo
Prav tako naredite naslednje.

1071
00:49:15,110 --> 00:49:18,810
Class = "uvoz".

1072
00:49:18,810 --> 00:49:23,970
Ker se ID se uporablja za edinstveno
prepoznati eno stvar, eno oznako,

1073
00:49:23,970 --> 00:49:30,190
v vašo spletno stran, je razred mišljeno, da se
uporabiti na poljubnem številu elementov ali oznak

1074
00:49:30,190 --> 00:49:30,950
na vaši spletni strani.

1075
00:49:30,950 --> 00:49:31,710
Torej je za enkratno uporabo.

1076
00:49:31,710 --> 00:49:33,090
ID-ja ni mogoče ponovno uporabiti.

1077
00:49:33,090 --> 00:49:34,450
Razred je za enkratno uporabo.

1078
00:49:34,450 --> 00:49:37,830
>> In veš kaj, za kar
filozofsko reasons--

1079
00:49:37,830 --> 00:49:40,180
Nisem končal moj
thought-- bom povedal

1080
00:49:40,180 --> 00:49:44,300
da se prvi odstavek in
Drugi odstavek so pomembni.

1081
00:49:44,300 --> 00:49:48,600
Torej bom uporabila razred imenovano
"Pomembno", da če shranim datoteko

1082
00:49:48,600 --> 00:49:51,510
in osvežite, nima
funkcionalni učinek še.

1083
00:49:51,510 --> 00:49:53,780
Ampak sem dodal nekaj
metapodatki v datoteko,

1084
00:49:53,780 --> 00:49:56,610
nekako nekaj ločenega
iz osnovnih podatkov spisa,

1085
00:49:56,610 --> 00:50:02,300
tako da je zdaj v moji slogom, če I
namesto da bi rekel ".important" - saj veste,

1086
00:50:02,300 --> 00:50:07,110
vse, kar je pomembno, da sem
dogaja, da pisave-barvo, red--

1087
00:50:07,110 --> 00:50:09,930
oziroma ne pisave, barvo, samo barvo.

1088
00:50:09,930 --> 00:50:12,930
Tam je nedoslednosti
V CSS žal.

1089
00:50:12,930 --> 00:50:14,120
In osvežite.

1090
00:50:14,120 --> 00:50:17,640
Zdaj opazili prvi
dve točki so rdeče

1091
00:50:17,640 --> 00:50:20,880
ne pa tudi tretje, ker sem samo
uporabila razred "pomembne"

1092
00:50:20,880 --> 00:50:25,020
v prvih dveh te stvari.

1093
00:50:25,020 --> 00:50:28,030
>> Torej v ID, imate možnost
zelo natančno opredeliti.

1094
00:50:28,030 --> 00:50:30,110
Z razredi, imate ponovne uporabe.

1095
00:50:30,110 --> 00:50:33,800
Toda v obeh primerih, opazili
nekako načela dobre zasnove

1096
00:50:33,800 --> 00:50:39,072
kjer sem vključeno ven vse
estetika na mojo styles.css datoteko.

1097
00:50:39,072 --> 00:50:40,280
Torej ni messiness tukaj.

1098
00:50:40,280 --> 00:50:44,490
Ni omembe rdeča ali
krepko obrnjena ali velikost pisave v tej datoteki.

1099
00:50:44,490 --> 00:50:49,430
Namesto imam pomensko,
smiselno značilna moje podatke, kot je,

1100
00:50:49,430 --> 00:50:51,240
Tukaj je nekaj pomembnih podatkov.

1101
00:50:51,240 --> 00:50:52,800
Tukaj je nekaj bolj pomembnih podatkov.

1102
00:50:52,800 --> 00:50:56,500
Poleg tega, tukaj je
"Prvi" mojih pomembnih podatkov.

1103
00:50:56,500 --> 00:51:01,050
Torej HTML je vse okoli neke
z označevanjem, dobesedno, besede

1104
00:51:01,050 --> 00:51:05,270
in odstavki in konstrukti v vašem
Stran s temi malo namigov, če vas

1105
00:51:05,270 --> 00:51:07,640
bo, da lahko
nekako vzvoda uporabo

1106
00:51:07,640 --> 00:51:10,880
druge tehnike, kot so CSS na ta način.

1107
00:51:10,880 --> 00:51:14,760
>> Torej, v odgovor na vprašanje, Victoria,
lahko naredimo besedilo večji na ta način.

1108
00:51:14,760 --> 00:51:18,380
Obstaja veliko drugih načinov, vendar
pisave tag-- odprti oklepaj "font" -

1109
00:51:18,380 --> 00:51:19,770
je pravzaprav stara več let.

1110
00:51:19,770 --> 00:51:21,410
In to je problem
Tudi s samo opira

1111
00:51:21,410 --> 00:51:23,485
na spletni resources--
v glavnem so zastareli.

1112
00:51:23,485 --> 00:51:26,110
In res, da je bila zastarela,
ker je svet spoznal,

1113
00:51:26,110 --> 00:51:28,970
Kaj "font-size = 7" pomeni?

1114
00:51:28,970 --> 00:51:29,670
To pa ne.

1115
00:51:29,670 --> 00:51:32,770
In tako že vrsto let in da
To day-- ena od strani

1116
00:51:32,770 --> 00:51:36,060
Tukaj ugotavlja, da je dejansko
neverjetno boleče včasih še vedno

1117
00:51:36,060 --> 00:51:38,900
za razvoj območij za
web, ker Microsoft

1118
00:51:38,900 --> 00:51:44,220
Google in Mozilla in
drugi pogosto ne strinjajo o tem, kako

1119
00:51:44,220 --> 00:51:47,480
razlagati specifikacijo kot HTML.

1120
00:51:47,480 --> 00:51:52,490
>> Obstaja pravilnik za HTML,
na splošno pravi, kaj vsaka oznaka pomeni.

1121
00:51:52,490 --> 00:51:55,690
Ampak včasih je to prepuščena
diskretnost izvajanja je,

1122
00:51:55,690 --> 00:51:57,290
Microsoft diskretnost in Google.

1123
00:51:57,290 --> 00:52:00,000
In tako da bom zelo pogosto
glej na spletni strani nekaj

1124
00:52:00,000 --> 00:52:04,954
videti drugačen na osebnem računalniku
kot ga ima na Mac,

1125
00:52:04,954 --> 00:52:06,995
in da je res, ker,
Na koncu dneva,

1126
00:52:06,995 --> 00:52:08,891
niso ga preizkusiti
tudi na obeh platformah.

1127
00:52:08,891 --> 00:52:11,390
Ampak to je tudi zato, ker razumno,
pametni ljudje se ne strinjajo

1128
00:52:11,390 --> 00:52:14,970
in podjetja bodo ne strinjajo, in tako
eden od izzivov programiranja

1129
00:52:14,970 --> 00:52:16,980
za splet ali za projektiranje
stvari za splet

1130
00:52:16,980 --> 00:52:21,700
piše vašo spletno stran na način,
ki deluje na vsaki spletni brskalnik.

1131
00:52:21,700 --> 00:52:23,410
Toda tudi to je nesmiselno, kajne?

1132
00:52:23,410 --> 00:52:27,807
Obstaja veliko različic toliko
brskalniki tam, da na neki točki,

1133
00:52:27,807 --> 00:52:30,890
imate tudi, da bi sodbo klic
in boste morali odločiti, kot podjetje,

1134
00:52:30,890 --> 00:52:33,082
predvsem za e-poslovanje slog
strani, kjer boste dali

1135
00:52:33,082 --> 00:52:36,290
poskuša uporabiti najnovejše in najboljše
tehnologije, da bi res dobro uporabnika

1136
00:52:36,290 --> 00:52:37,110
izkušnja.

1137
00:52:37,110 --> 00:52:41,019
Toda nekateri odstotek svojim uporabnikom morda
še vedno uporabljate Internet Explorer 6 ali 7

1138
00:52:41,019 --> 00:52:43,810
ali 8, zlasti glede na
Država, ki ste prihajajo iz.

1139
00:52:43,810 --> 00:52:46,760
>> In tako zelo pogosto
posvetoval je nekaj

1140
00:52:46,760 --> 00:52:50,920
kot "statistika spletnega brskalnika."

1141
00:52:50,920 --> 00:52:56,560
In če gremo to-- poglejmo Wikipedia
in videli, kako je to graf up-to-datum

1142
00:52:56,560 --> 00:52:59,320
če obstaja.

1143
00:52:59,320 --> 00:53:02,420
Torej, tukaj si lahko ogledate
kjer brskalniki dejansko

1144
00:53:02,420 --> 00:53:06,160
so, glede na december 2015
v skladu z ameriško vlado.

1145
00:53:06,160 --> 00:53:11,170
Chrome je na 42% tržni delež, sledijo
ga IE večinoma v nastavitvah podjetij

1146
00:53:11,170 --> 00:53:14,490
ali računalniku, seveda,
sledi Firefox,

1147
00:53:14,490 --> 00:53:17,440
nato Safari, nato pa Opera ni
da zemljevid sem iz neznanega razloga,

1148
00:53:17,440 --> 00:53:18,210
in potem drugi.

1149
00:53:18,210 --> 00:53:19,500
Mogoče je pod drugi.

1150
00:53:19,500 --> 00:53:27,700
Toda bolj problematično kot to is--
da vidimo, če je tudi Wikipedia

1151
00:53:27,700 --> 00:53:35,194
različice brskalnikov version--

1152
00:53:35,194 --> 00:53:36,160

1153
00:53:36,160 --> 00:53:39,190
>> Pojdimo v statistiko brskalnika.

1154
00:53:39,190 --> 00:53:40,680
TJ.

1155
00:53:40,680 --> 00:53:42,030
Tudi to ni dovolj.

1156
00:53:42,030 --> 00:53:44,854
Statistika brskalnika.

1157
00:53:44,854 --> 00:53:45,353
Moja verzija.

1158
00:53:45,353 --> 00:53:48,980

1159
00:53:48,980 --> 00:53:50,540
To se ne bo zgodilo.

1160
00:53:50,540 --> 00:53:53,414
Poglejmo različice.

1161
00:53:53,414 --> 00:53:54,830
Brskalnik tržni delež.

1162
00:53:54,830 --> 00:53:57,110
Poglejmo, če to pride gor.

1163
00:53:57,110 --> 00:53:57,610
V REDU.

1164
00:53:57,610 --> 00:54:00,010
Zdaj to postaja
malo bolj koristno.

1165
00:54:00,010 --> 00:54:04,870
Torej, tukaj, opazili, da smo vsi
različne različice brskalnikov.

1166
00:54:04,870 --> 00:54:09,887
In, moj bog, če look-- Chrome
48, Chrome 47, Chrome 31, Chrome 45.

1167
00:54:09,887 --> 00:54:12,970
Mislim, brskalniki bolj posodobljena,
in včasih nekatere od teh sprememb

1168
00:54:12,970 --> 00:54:16,430
so pomembne pri
Pogoji funkcionalnosti.

1169
00:54:16,430 --> 00:54:20,630
In tako na neki točki se je
produktne vodje ali inženirji

1170
00:54:20,630 --> 00:54:23,620
morali narediti decision-- vas
veš kaj, samo 1% na svetu

1171
00:54:23,620 --> 00:54:24,740
še vedno uporablja IE 7.

1172
00:54:24,740 --> 00:54:25,490
K vragu z njimi.

1173
00:54:25,490 --> 00:54:27,470
Mi samo ne bo
podpira ta brskalnik.

1174
00:54:27,470 --> 00:54:28,740
In kaj to pomeni, da ne podpira?

1175
00:54:28,740 --> 00:54:31,170
To lahko pomeni, da tipke
ne deluje na vaši spletni strani

1176
00:54:31,170 --> 00:54:33,050
ali bi to pomenilo,
Oblikovanje je popolnoma off.

1177
00:54:33,050 --> 00:54:35,091
Ali boste morda morali narediti
da isto sodbo klic

1178
00:54:35,091 --> 00:54:39,089
v mobilnih teh dneh, kjer sva
Ne gre za podporo IOS 5 več.

1179
00:54:39,089 --> 00:54:40,380
Torej ljudje samo še nadgraditi.

1180
00:54:40,380 --> 00:54:45,850
Ali pa ne bomo za podporo Cupcake
Android OS za naprave Android,

1181
00:54:45,850 --> 00:54:48,629
ker kot world-- kot
tech svet želi napredovati,

1182
00:54:48,629 --> 00:54:51,170
je nekako želi povlecite
svet z njim, tako da ne

1183
00:54:51,170 --> 00:54:53,295
morajo ostati
nazaj združljiv tako da

1184
00:54:53,295 --> 00:54:54,920
lahko ponudijo nove in dobre lastnosti.

1185
00:54:54,920 --> 00:54:57,878
To je dejansko eden od razlogov,
zakaj toliko podjetja uvajajo

1186
00:54:57,878 --> 00:55:01,440
samodejne posodobitve in nekako silijo
najnovejše različice programske opreme na nas.

1187
00:55:01,440 --> 00:55:04,010
In celo podjetja
kot bo Apple razvrstite po

1188
00:55:04,010 --> 00:55:07,280
prisili, skoraj ali zahtevajo
vi v smislu tržnih sil

1189
00:55:07,280 --> 00:55:11,164
kupiti nov telefon, ker so pravkar
ne bo posodobil svoj stari telefon več.

1190
00:55:11,164 --> 00:55:13,330
Torej ste izpustili na
najnovejše in najboljše lastnosti,

1191
00:55:13,330 --> 00:55:17,520
ker je drago za njih kot
Družba za vzdrževanje starejši, verjetno

1192
00:55:17,520 --> 00:55:19,330
slabše različice programske opreme.

1193
00:55:19,330 --> 00:55:23,660
Vendar je neto učinek je, da
smo tudi to trpi tudi.

1194
00:55:23,660 --> 00:55:26,550
>> Tako da je lahko pogled na samo
Nekaj ​​končnih stvari tukaj.

1195
00:55:26,550 --> 00:55:29,740
Oglejmo knock off zelo hitro nekaj
te druge krogle, če radoveden.

1196
00:55:29,740 --> 00:55:33,440
Torej, če ste skušali,
na primer, položaj

1197
00:55:33,440 --> 00:55:36,420
besedilo na različnih straneh
Stran, bom naredil en hiter način,

1198
00:55:36,420 --> 00:55:38,360
vendar pa je drugače
načinov za to.

1199
00:55:38,360 --> 00:55:42,610
Naj gredo naprej in eliminate--
poenostaviti to takole.

1200
00:55:42,610 --> 00:55:45,330
Naj gre nazaj na moj
preproste, enostavne odstavki.

1201
00:55:45,330 --> 00:55:47,760
Naj grem nazaj na moj styles.css.

1202
00:55:47,760 --> 00:55:51,040
In sem le, da bo za uporabo simple--
ki ste morda videli na Googlu

1203
00:55:51,040 --> 00:55:54,430
ali prikličite iz earlier--
text-align right.

1204
00:55:54,430 --> 00:55:56,220
In osveži stran.

1205
00:55:56,220 --> 00:55:58,470
Zdaj je vse videti
biti desno poravnano,

1206
00:55:58,470 --> 00:56:00,770
kot lahko vidite v zgornjem tukaj.

1207
00:56:00,770 --> 00:56:04,470
>> Lahko bi bilo videti malo bolj
Rezervirajte podobno, in lahko rečemo, "opravičujejo"

1208
00:56:04,470 --> 00:56:05,640
in osvežite.

1209
00:56:05,640 --> 00:56:09,870
Zdaj je lepo in kvadrat na obeh
strani, ki je nekako lepo.

1210
00:56:09,870 --> 00:56:12,220
Drugi cilj, da smo imeli tukaj
je sprememba barve besedila.

1211
00:56:12,220 --> 00:56:13,650
Tako smo videli, da s svojim rdečim besedilom.

1212
00:56:13,650 --> 00:56:15,630
In zdaj dodali gumbe za obliko.

1213
00:56:15,630 --> 00:56:19,390
Torej, zakaj ne bi poskušali narediti točno to?

1214
00:56:19,390 --> 00:56:23,656
Ampak najprej mi gre na stran, ki
večina od nas uporablja vsak day-- Googlu.

1215
00:56:23,656 --> 00:56:25,780
In kaj je si oglejte
Kako Google dejansko deluje.

1216
00:56:25,780 --> 00:56:26,821
Ampak bom to naredil.

1217
00:56:26,821 --> 00:56:31,930
Najprej naj to in-- ja,
Naj gredo na Google prvi.

1218
00:56:31,930 --> 00:56:34,530
Bom moral iti
v Google Nastavitve

1219
00:56:34,530 --> 00:56:40,660
ker želim, da onemogočite
nekaj, kar se imenuje Instant rezultate.

1220
00:56:40,660 --> 00:56:43,580
>> Torej, ste morda opazili v
Google ti days-- me nazaj

1221
00:56:43,580 --> 00:56:44,850
in to vključite.

1222
00:56:44,850 --> 00:56:47,900
Torej, če začnem iskati
za "mačke", kot je ta,

1223
00:56:47,900 --> 00:56:50,120
opazili, da ne samo, da
Dobim samodejno dokončanje up

1224
00:56:50,120 --> 00:56:54,520
top, kar naenkrat, sama stran
Zdi se, da se zelo hitro spreminjajo, kot tudi,

1225
00:56:54,520 --> 00:56:58,750
in da je Google s pomočjo jezika
imenuje JavaScript poskušam biti v pomoč.

1226
00:56:58,750 --> 00:57:01,540
Ampak žal, to nekako
od zamoči našo razpravo

1227
00:57:01,540 --> 00:57:04,010
o tem, kaj se dejansko dogaja
pod pokrovom tukaj.

1228
00:57:04,010 --> 00:57:09,070
Torej, jaz sem samo nekako hitro
izklopite takojšnje rezultate.

1229
00:57:09,070 --> 00:57:11,510
In bom kliknite Shrani.

1230
00:57:11,510 --> 00:57:13,930
In zdaj bom odpreti
da diagnostični orodna vrstica, ki sem

1231
00:57:13,930 --> 00:57:16,150
da odprtino pod jeziček Network.

1232
00:57:16,150 --> 00:57:17,720
Torej, kaj je to.

1233
00:57:17,720 --> 00:57:21,960
Naj me-- whoops--
pomaknite tole malo.

1234
00:57:21,960 --> 00:57:24,410
In mi iskanje "mačke".

1235
00:57:24,410 --> 00:57:26,790
>> In zdaj notice-- dejansko,
To je dobra priložnost

1236
00:57:26,790 --> 00:57:28,840
za razpravo za trenutek.

1237
00:57:28,840 --> 00:57:32,460
Obvestilo trenutek, ko sem type-- ga ustavili.

1238
00:57:32,460 --> 00:57:35,250
Prenehaj.

1239
00:57:35,250 --> 00:57:35,790
V REDU.

1240
00:57:35,790 --> 00:57:40,870
Obvestilo trenutek, ko sem tipa črko
C, pazi na dnu zaslona.

1241
00:57:40,870 --> 00:57:48,600
A- T- S. Kaj dno
tega zaslona, ​​moj jeziček Omrežje,

1242
00:57:48,600 --> 00:57:53,320
Predlagamo se dogaja vsak
ko sem tipa pismo?

1243
00:57:53,320 --> 00:57:57,700
Žal žaba zelo
moteča danes ali deteljica

1244
00:57:57,700 --> 00:58:00,339
ali karkoli je.

1245
00:58:00,339 --> 00:58:01,880
Kaj se dogaja vsakič, ko sem tipkal?

1246
00:58:01,880 --> 00:58:04,230
In mi jasno,
buffer in ga ponovno vnesite.

1247
00:58:04,230 --> 00:58:06,580
SO- Ups.

1248
00:58:06,580 --> 00:58:13,280
Vsakič, ko sem tipa pismo, C- A- T--
tako nova vrstica očitno še vedno navedena.

1249
00:58:13,280 --> 00:58:16,530
Kaj vsaka od teh vrstic predstavljata
podlagi tega, kar smo videli in obravnavali

1250
00:58:16,530 --> 00:58:17,339
doslej?

1251
00:58:17,339 --> 00:58:18,130
OBČINSTVO: Iskanje?

1252
00:58:18,130 --> 00:58:21,770
DAVID J. Malan: Iskanje, ali
bolj na splošno, zahteva HTTP

1253
00:58:21,770 --> 00:58:23,125
iz mojega brskalnika v strežniku.

1254
00:58:23,125 --> 00:58:29,090
No, zakaj je moj brskalnik izdelavo HTTP
zahteva, vsakič, ko sem vnesete pismo?

1255
00:58:29,090 --> 00:58:30,502
>> OBČINSTVO: [neslišno]

1256
00:58:30,502 --> 00:58:33,210
DAVID J. Malan: Ja, to je kar
me ti auto-popolna rezultate.

1257
00:58:33,210 --> 00:58:35,190
Kot, kjer se ti
Rezultati iskanja prišel?

1258
00:58:35,190 --> 00:58:38,120
Torej, vsakič, ko sem vtipkajte
pismo, Google pošlje več

1259
00:58:38,120 --> 00:58:40,460
in vedno bolj
beseda sem tipkanje.

1260
00:58:40,460 --> 00:58:41,040
Zakaj?

1261
00:58:41,040 --> 00:58:44,540
Zato, ker želijo, da mi
boljši in boljši, boljši predlog,

1262
00:58:44,540 --> 00:58:48,880
seznam predlogov, za kaj beseda
Poskušam pravzaprav popolna.

1263
00:58:48,880 --> 00:58:53,030
Torej, to se pravi dobesedno vsak
znak vnesete v Google

1264
00:58:53,030 --> 00:58:56,900
se pošlje končno v
razsutem stanju, včasih pa tudi eden

1265
00:58:56,900 --> 00:59:00,620
v času, da bi za izvedbo
ti auto-popolna funkcije kadar

1266
00:59:00,620 --> 00:59:03,000
podatki so seveda na spletu.

1267
00:59:03,000 --> 00:59:08,780
>> Zdaj pa si oglejte, kaj se dejansko
se zgodi, ko kliknem Iskanje Google.

1268
00:59:08,780 --> 00:59:10,420
In potem bomo to vzvod sami.

1269
00:59:10,420 --> 00:59:15,320
Torej, če sem se pomaknite navzdol zdaj zelo
Prva zahteva, ki se je pravkar zgodilo.

1270
00:59:15,320 --> 00:59:17,130
Obvestilo naslednje.

1271
00:59:17,130 --> 00:59:25,550
To je bil poslan na dokaj dolgo URL--
https://www.google.com/search?

1272
00:59:25,550 --> 00:59:27,100
in potem cel kup stvari.

1273
00:59:27,100 --> 00:59:29,620
Poglejmo to dejansko zdaj
v zavihku brskalnika samega.

1274
00:59:29,620 --> 00:59:31,310
Oglejmo znebiti orodni vrstici tukaj.

1275
00:59:31,310 --> 00:59:33,140
Tukaj je stran rezultatov iskanja.

1276
00:59:33,140 --> 00:59:34,790
In obvestilo tukaj je URL.

1277
00:59:34,790 --> 00:59:37,430
Zdaj si verjetno lahko uganiti
kaj se dogaja v delu.

1278
00:59:37,430 --> 00:59:39,090
Torej, najprej opredelitev.

1279
00:59:39,090 --> 00:59:42,570
To očitno je destinacija
če se predloži obrazec.

1280
00:59:42,570 --> 00:59:44,910
Torej, ko sem tipkal v
besedi "mačke" in pritisnite tipko Enter,

1281
00:59:44,910 --> 00:59:48,460
očitno Google pošlje
moj vnos besedila na ta URL

1282
00:59:48,460 --> 00:59:50,770
da sem izpostavil
tam, poševnica iskanje.

1283
00:59:50,770 --> 00:59:56,530
Izkazalo se je, v URL-ju, vse, kar
se zgodi, ko se zastavlja vprašanje,

1284
00:59:56,530 --> 01:00:01,270
kot smo ostali pravijo, ključna vrednost par
ki ste ga vpisali v obrazec ali nekako

1285
01:00:01,270 --> 01:00:04,500
prenašajo iz
brskalnika na strežnik.

1286
01:00:04,500 --> 01:00:07,180
>> Torej kadarkoli vnesete vhod
v obliki na spletu

1287
01:00:07,180 --> 01:00:10,000
in je bilo poslano, kot smo jih
razpravljali, preko stopijo,

1288
01:00:10,000 --> 01:00:12,400
eden od teh virtualni
ovojnice, vsebina

1289
01:00:12,400 --> 01:00:15,510
tega envelope-- ja, da
dobili polnjene fizično

1290
01:00:15,510 --> 01:00:19,010
v kuverto v razredu
Danes, vendar tehnološko

1291
01:00:19,010 --> 01:00:21,110
to je dejansko dal v URL.

1292
01:00:21,110 --> 01:00:22,940
Torej, v resnici, mi presejemo skozi to.

1293
01:00:22,940 --> 01:00:25,010
Kje vidite vnosa od uporabnika?

1294
01:00:25,010 --> 01:00:27,490
Kje vidite nekaj
da sem jaz tipkal tukaj?

1295
01:00:27,490 --> 01:00:32,100

1296
01:00:32,100 --> 01:00:33,491
Ja, tako da "mačke".

1297
01:00:33,491 --> 01:00:33,990
Prav?

1298
01:00:33,990 --> 01:00:36,380
Torej mi destilirati to
v nekaj enostavnejši.

1299
01:00:36,380 --> 01:00:39,917
Bom izbrisati vse o
ta URL, da ne razumem,

1300
01:00:39,917 --> 01:00:42,250
in sem le, da bo zapustil
je kot this-- / iskati? q = mačke.

1301
01:00:42,250 --> 01:00:45,640

1302
01:00:45,640 --> 01:00:47,890
Bomo videli, kjer je Q
prihaja v trenutku,

1303
01:00:47,890 --> 01:00:51,220
ampak, da se počuti, kot minimum
Količina informacij, ki sem jih podal.

1304
01:00:51,220 --> 01:00:53,050
In zdaj bom zadeti nastopiti.

1305
01:00:53,050 --> 01:00:55,520
In opazil, da še vedno deluje.

1306
01:00:55,520 --> 01:00:57,950
Še vedno dobil nazaj cel kup mačk.

1307
01:00:57,950 --> 01:01:00,340
Torej Google je ljubitelj
kot je to v teh dneh.

1308
01:01:00,340 --> 01:01:01,934
To je 2016, ne 1999.

1309
01:01:01,934 --> 01:01:04,600
Torej je drugih stvari, da je moj
brskalnik pošilja na strežnik.

1310
01:01:04,600 --> 01:01:07,100
Toda to je minimalno
vse, kar je potrebno.

1311
01:01:07,100 --> 01:01:08,380
>> Torej, kaj se dogaja?

1312
01:01:08,380 --> 01:01:14,320
No, najprej naj grem naprej in iti
nazaj na Cloud9 in mi daj

1313
01:01:14,320 --> 01:01:15,620
in zaprem zavihke prej.

1314
01:01:15,620 --> 01:01:18,230
In to bom naredil na mojem
lastnik le za trenutek.

1315
01:01:18,230 --> 01:01:20,730
Bom, da gredo naprej
in ustvariti novo datoteko.

1316
01:01:20,730 --> 01:01:23,739
In bom, da ga shranite kot google.html.

1317
01:01:23,739 --> 01:01:26,280
In bom zelo quickly--
Bom ukradel, pravzaprav,

1318
01:01:26,280 --> 01:01:28,510
nekaj tega besedila samo za prihranek časa.

1319
01:01:28,510 --> 01:01:30,610
Bom prilepite tukaj.

1320
01:01:30,610 --> 01:01:33,850
Ne bom ukvarjati s
any stilizacijo tokrat.

1321
01:01:33,850 --> 01:01:38,340
Bomo rekli "Moj Google."

1322
01:01:38,340 --> 01:01:41,230
In bom, da se znebite
vsega v telesu.

1323
01:01:41,230 --> 01:01:42,740
In bom naredil naslednje.

1324
01:01:42,740 --> 01:01:45,690
Naj povečavo.

1325
01:01:45,690 --> 01:01:50,620
Oblika action-- in kot sem na kratko omenil
earlier-- whoops-- kot sem na kratko

1326
01:01:50,620 --> 01:01:54,130
je bilo že omenjeno, zaradi delovanja
oblika je, če pošljete podatke.

1327
01:01:54,130 --> 01:01:56,620
Torej google.com/search.

1328
01:01:56,620 --> 01:01:59,390
In način želim uporabljati
je lahko eden od dveh stvari.

1329
01:01:59,390 --> 01:02:02,870
To je lahko bodisi "dobili", kot smo ostali
razpravljamo, ali je lahko "post".

1330
01:02:02,870 --> 01:02:05,340
Za zdaj, je temeljna
Razlika je, če uporabljate "zaslužiti"

1331
01:02:05,340 --> 01:02:09,590
vse informacije, ki jih
Uporabnik zagotavlja dobi poslal v URL.

1332
01:02:09,590 --> 01:02:13,530
>> To je super za stvari, kot so iskanje
motorji in nekaj drugih aplikacij,

1333
01:02:13,530 --> 01:02:17,080
toda v katerih bi okoliščinah
si ne želim, da izpolnite obrazec

1334
01:02:17,080 --> 01:02:21,620
in so podatki na koncu gor
URL, kot je v naslovni vrstici brskalnika?

1335
01:02:21,620 --> 01:02:25,470

1336
01:02:25,470 --> 01:02:26,605
Kakšne oblike storiti you--

1337
01:02:26,605 --> 01:02:27,480
OBČINSTVO: [neslišno]

1338
01:02:27,480 --> 01:02:28,450
DAVID J. Malan: Ja, kot kaj?

1339
01:02:28,450 --> 01:02:29,270
OBČINSTVO: gesla.

1340
01:02:29,270 --> 01:02:31,936
DAVID J. Malan: Ja, tako da se prijavite
v Facebook ali neki spletni strani.

1341
01:02:31,936 --> 01:02:34,395
To je uporabnik vhod iz
oblika, polje z besedilom,

1342
01:02:34,395 --> 01:02:37,020
ampak verjetno ga ne želijo
prikazuje v URL brskalnika.

1343
01:02:37,020 --> 01:02:38,121
Zakaj?

1344
01:02:38,121 --> 01:02:40,870
Mislim, morda obstaja nekaj
varnostne posledice na omrežju,

1345
01:02:40,870 --> 01:02:44,830
vendar more-- všeč, bolj preprosto, kaj pa če
tvoj sostanovalec, vaše pomembne druge,

1346
01:02:44,830 --> 01:02:47,710
vaši otroci, vaš zakonec izgleda
skozi zgodovino brskalnika?

1347
01:02:47,710 --> 01:02:50,762
Obstaja geslo prav
tam v zgodovini brskalnika.

1348
01:02:50,762 --> 01:02:52,220
Da se ne počutim kot dobrega oblikovanja.

1349
01:02:52,220 --> 01:02:54,500
Ali pa še bolj tehnično,
Predvidevam, da poskušate

1350
01:02:54,500 --> 01:02:59,180
naložiti fotografijo Flickr
ali Facebook ali wherever--

1351
01:02:59,180 --> 01:03:03,010
da je vhod uporabnik, čeprav
to je malo več interesting-- kako

1352
01:03:03,010 --> 01:03:05,530
naj strpati slike v naslovni vrstici?

1353
01:03:05,530 --> 01:03:06,730
Si nekako nekako ne more.

1354
01:03:06,730 --> 01:03:07,396
Si nekako lahko.

1355
01:03:07,396 --> 01:03:10,210
Ampak, res, da sem težko pritisniti
predstavljati tem.

1356
01:03:10,210 --> 01:03:13,470
Tako da moram še eno metodo za
nalaganje fotografij na spletni strani,

1357
01:03:13,470 --> 01:03:15,657
in da je druga metoda se imenuje "post".

1358
01:03:15,657 --> 01:03:18,740
Ampak za zdaj, bomo samo govorili o
"Dobili", ki je enostavnejši od obeh.

1359
01:03:18,740 --> 01:03:21,100
Samo postavlja vse
Uporabnik vhod v URL.

1360
01:03:21,100 --> 01:03:22,830
>> Torej, tukaj je oblika sem ustvarjanju.

1361
01:03:22,830 --> 01:03:24,070
Hočem vhod.

1362
01:03:24,070 --> 01:03:24,820
In veste kaj?

1363
01:03:24,820 --> 01:03:26,111
Bom vzeti ugibati tukaj.

1364
01:03:26,111 --> 01:03:31,600
Bom spomniti na moj
input "q" za "poizvedbo."

1365
01:03:31,600 --> 01:03:34,970
In mislim, da je to ena izmed
izvirne modele, morda, od leta 1999.

1366
01:03:34,970 --> 01:03:39,560
Nato vrsto tem vhodu
je le, da bo treba "text".

1367
01:03:39,560 --> 01:03:43,040
In potem bom še en vhod
da ne potrebuje ime, saj bomo kmalu

1368
01:03:43,040 --> 01:03:45,120
glej vrsta, ki je "predloži".

1369
01:03:45,120 --> 01:03:47,070
In to se dogaja, da
daj mi poseben gumb.

1370
01:03:47,070 --> 01:03:48,320
In to je to.

1371
01:03:48,320 --> 01:03:50,790
>> Zato naj gredo naprej in shranite datoteko.

1372
01:03:50,790 --> 01:03:54,910
Bom šel nazaj na moj
brskalnik in pojdite na google.html.

1373
01:03:54,910 --> 01:03:56,140
Enter.

1374
01:03:56,140 --> 01:03:59,680
In to je vrsta redka
reči najmanj.

1375
01:03:59,680 --> 01:04:03,110
Ampak naj gredo naprej
in iskanje za "mačke".

1376
01:04:03,110 --> 01:04:06,510
In opazil sem trenutno
Na tem URL Cloud9.

1377
01:04:06,510 --> 01:04:09,240
Toda v trenutku, ko kliknem to,
kje Upam, da boste na koncu?

1378
01:04:09,240 --> 01:04:10,160
>> OBČINSTVO: Google.

1379
01:04:10,160 --> 01:04:11,118
>> DAVID J. Malan: Google.

1380
01:04:11,118 --> 01:04:12,740
Torej, kaj je kliknite Pošlji.

1381
01:04:12,740 --> 01:04:15,200
In res sem se ponovno izvaja Google.

1382
01:04:15,200 --> 01:04:15,700
Prav?

1383
01:04:15,700 --> 01:04:16,480
To je enostavnejša.

1384
01:04:16,480 --> 01:04:17,120
To je vžigalnik.

1385
01:04:17,120 --> 01:04:20,350
Mislim, moja številka je vsekakor bolje, kot
njihova, od nered smo videli prej.

1386
01:04:20,350 --> 01:04:21,100
In veste kaj?

1387
01:04:21,100 --> 01:04:22,610
Bom to začiniti malo.

1388
01:04:22,610 --> 01:04:23,860
Nisem omenil že prej.

1389
01:04:23,860 --> 01:04:27,860
Obstajajo oznake, kot so H1, za razdelek 1,
najpomembnejša postavka v stran.

1390
01:04:27,860 --> 01:04:30,570
"Moj Google," to bom poklical.

1391
01:04:30,570 --> 01:04:31,940
Naj osvežite.

1392
01:04:31,940 --> 01:04:33,772
To je videti malo že bolje.

1393
01:04:33,772 --> 01:04:34,980
In, pravzaprav, veste kaj?

1394
01:04:34,980 --> 01:04:36,430
Sem already-- sem lagal.

1395
01:04:36,430 --> 01:04:40,200
Rekel sem, da ne bom slog to,
ampak bom ta stil kot prej.

1396
01:04:40,200 --> 01:04:46,860
In moje telo se bo,
recimo, text-align center.

1397
01:04:46,860 --> 01:04:48,800
To je videti bolj kot je Google že.

1398
01:04:48,800 --> 01:04:51,090
>> Rabim prelom vrstice, čeprav,
za to gumb Pošlji.

1399
01:04:51,090 --> 01:04:52,798
In se je izkazalo, si
lahko uporabijo odstavke,

1400
01:04:52,798 --> 01:04:57,320
ali si lahko bolj dobesedno samo reči,
daj mi linijo prelom here-- BR oznako.

1401
01:04:57,320 --> 01:04:59,319
In če sem osvežite to, zdaj gre tam.

1402
01:04:59,319 --> 01:05:01,610
To je malo grd, tako da sem
bi lahko storili več prelomov vrstic,

1403
01:05:01,610 --> 01:05:03,310
vendar naj ne bi dobili preveč pohlepni tukaj.

1404
01:05:03,310 --> 01:05:06,430
Zdaj pa poglejmo, če deluje za "pse."

1405
01:05:06,430 --> 01:05:08,640
Zdi se, da delo za "psi", kot tudi.

1406
01:05:08,640 --> 01:05:10,780
Torej, kaj je privlačna takeaway tukaj?

1407
01:05:10,780 --> 01:05:13,600
One-- ni bil velik preskok na
uvesti nekaj več oznak,

1408
01:05:13,600 --> 01:05:15,370
kot obliko oznako v vhodnem oznako.

1409
01:05:15,370 --> 01:05:17,120
Ampak bolj bistveno
je, da vsi delamo

1410
01:05:17,120 --> 01:05:20,610
je vplivno naše razumevanje
HTTP in dejstva

1411
01:05:20,610 --> 01:05:24,900
ki tvori končno spremeniti
kaj je v URL brskalnika,

1412
01:05:24,900 --> 01:05:28,540
in tako, zato smo lahko
mehansko prispevati k strežniku

1413
01:05:28,540 --> 01:05:33,600
tako, da obrazec HTML in poznavanje
da strežnik razume HTTP,

1414
01:05:33,600 --> 01:05:36,890
tako kot naše telo razume, kot so,
tresenje moje roke, da istega protokola,

1415
01:05:36,890 --> 01:05:40,920
in tako smo dobili nazaj odgovor
da smo na koncu pričakujejo.

1416
01:05:40,920 --> 01:05:44,050
>> Torej, poskusimo narediti eno
Zadnja stvar, ki je zdaj z mobilno,

1417
01:05:44,050 --> 01:05:47,052
in bom make-- bom dodati
to kodo na diapozitive.

1418
01:05:47,052 --> 01:05:49,760
Torej, če želite Lemiti, vas
lahko zagotovo traja od tam.

1419
01:05:49,760 --> 01:05:51,551
Ampak bom šel
naprej in eno stvar.

1420
01:05:51,551 --> 01:05:54,120
Bom, da gredo naprej in
odpreti svoj indeks page--

1421
01:05:54,120 --> 01:05:59,030
moja zdravo stran kot prej, kar
ima veliko tega faux-Latinska besedila,

1422
01:05:59,030 --> 01:06:05,470
ali brez pomena latinsko besedilo, in has--
izgleda, da je ta na tej velikosti pisave.

1423
01:06:05,470 --> 01:06:07,850
Ampak naj gredo naprej in to.

1424
01:06:07,850 --> 01:06:09,300
Bom šel v Cloud9.

1425
01:06:09,300 --> 01:06:10,380
In ti ne bi bilo treba storiti ta korak.

1426
01:06:10,380 --> 01:06:11,420
Bom to naredil sam.

1427
01:06:11,420 --> 01:06:12,890
Bom kliknite Skupna raba.

1428
01:06:12,890 --> 01:06:15,170
In to je funkcija
samo za Cloud9, pri čemer

1429
01:06:15,170 --> 01:06:17,710
Lahko bi moj okolje javnosti.

1430
01:06:17,710 --> 01:06:20,240
>> In samo zaradi
demonstracija, naj to storijo.

1431
01:06:20,240 --> 01:06:22,870
Jaz bom, da bo moja vloga za javnost.

1432
01:06:22,870 --> 01:06:25,230
Opazite, da me je opozorila, am
prepričan sem, da želite to narediti,

1433
01:06:25,230 --> 01:06:28,438
saj to se dogaja, da vse
v svetu, pa naj oni zdaj tukaj

1434
01:06:28,438 --> 01:06:33,560
ali gledanje video pozneje na
Internet lahko videli, kaj vidim.

1435
01:06:33,560 --> 01:06:34,440
Ampak to je v redu.

1436
01:06:34,440 --> 01:06:37,870
Bom rekel "Done".

1437
01:06:37,870 --> 01:06:42,080
In naj vas spodbujamo, če sem
To correctly-- mi ga preizkusiti prvi.

1438
01:06:42,080 --> 01:06:45,590
Daj, če ne mind--
v brskalniku v računalniku,

1439
01:06:45,590 --> 01:06:49,900
pojdite na ta URL, in upajmo, da
boste videli moj latinski tekst.

1440
01:06:49,900 --> 01:06:52,820
In da bo jasno, da je
teče, ne na moj laptop.

1441
01:06:52,820 --> 01:06:53,610
To je v oblaku.

1442
01:06:53,610 --> 01:06:58,120
To je na Cloud9, dobesedno, ampak
Naredil sem svoj delovni prostor javnosti

1443
01:06:58,120 --> 01:07:03,450
tako, da vsakdo na internetu
morem dostopati latinski domačo stran.

1444
01:07:03,450 --> 01:07:07,209
>> Pojdi na isti URL za
telefon, če bi lahko.

1445
01:07:07,209 --> 01:07:09,750
Če bo to stalo, čeprav,
lahko samo gledajo čez ramo.

1446
01:07:09,750 --> 01:07:40,688

1447
01:07:40,688 --> 01:07:42,467
OBČINSTVO: [neslišno]

1448
01:07:42,467 --> 01:07:43,550
DAVID J. Malan: Žal mi je?

1449
01:07:43,550 --> 01:07:45,390
OBČINSTVO: [neslišno]

1450
01:07:45,390 --> 01:07:47,710
DAVID J. Malan: Samo latinske besede.

1451
01:07:47,710 --> 01:07:48,210
To je vse.

1452
01:07:48,210 --> 01:07:49,250
Ampak to je tisto, kar bi morali videti.

1453
01:07:49,250 --> 01:07:49,875
>> OBČINSTVO: Ja.

1454
01:07:49,875 --> 01:07:50,790
DAVID J. Malan: Ja.

1455
01:07:50,790 --> 01:07:51,300
Ja.

1456
01:07:51,300 --> 01:07:51,540
V REDU.

1457
01:07:51,540 --> 01:07:53,530
Tako lahko sprejme do vašega
telefon za trenutek?

1458
01:07:53,530 --> 01:07:57,504
Torej, upam, če dostopate
da bi bilo videti skoraj neberljiv.

1459
01:07:57,504 --> 01:07:59,920
To je still-- Mislim, da je
neberljive zaradi latinščine.

1460
01:07:59,920 --> 01:08:01,920
Ampak to je tudi neberljiv
za kakšen drug razlog?

1461
01:08:01,920 --> 01:08:03,775
Kot, kaj displeases vi o tem?

1462
01:08:03,775 --> 01:08:04,650
OBČINSTVO: To je majhen.

1463
01:08:04,650 --> 01:08:06,420
DAVID J. Malan: To je super, super majhna.

1464
01:08:06,420 --> 01:08:07,920
Torej, kako bi lahko to popravimo?

1465
01:08:07,920 --> 01:08:09,730
To je super, super majhna
na telefonu Victoria

1466
01:08:09,730 --> 01:08:11,400
in, če ste potegnil
da se sami, verjetno

1467
01:08:11,400 --> 01:08:14,660
mali na telefonu, kot tudi, če vas
imeti omogočen nastavitev dostopnosti.

1468
01:08:14,660 --> 01:08:15,530
Kaj je to?

1469
01:08:15,530 --> 01:08:18,497
Si lahko samo stisnite in
zoom, ki je izvedljiv,

1470
01:08:18,497 --> 01:08:20,330
potem pa vidiš samo
nekaj besed naenkrat.

1471
01:08:20,330 --> 01:08:20,859
Torej, počakaj malo.

1472
01:08:20,859 --> 01:08:21,720
Vem, kako to popraviti.

1473
01:08:21,720 --> 01:08:22,219
Prav?

1474
01:08:22,219 --> 01:08:26,130
Lahko bi uporabili CSS, in sem lahko spremenite
velikosti od 12-točke na 24-točko pisave.

1475
01:08:26,130 --> 01:08:29,020
Vendar je stranski učinek, da
Seveda se bo sedaj

1476
01:08:29,020 --> 01:08:32,630
na namizni ali prenosni računalnik,
Zdaj je besedilo dvakrat tako velika.

1477
01:08:32,630 --> 01:08:35,810
In zato, da bi nekako bilo lepo
razlikovati med napravami,

1478
01:08:35,810 --> 01:08:37,840
in se izkaže, da
načini za tem.

1479
01:08:37,840 --> 01:08:39,590
Obstaja več
različne načine, v resnici,

1480
01:08:39,590 --> 01:08:44,189
pri čemer s pomočjo CSS in ljubitelj funkcije
da ne bomo šli v zelo podrobno,

1481
01:08:44,189 --> 01:08:46,960
lahko bistveno poizvedbo
brskalnik in pravijo,

1482
01:08:46,960 --> 01:08:51,550
Če je zaslon manjši od tega
veliko pik, s to velikost pisave.

1483
01:08:51,550 --> 01:08:55,180
Če je zaslon večji od tega
veliko pik, s to drugo velikost pisave.

1484
01:08:55,180 --> 01:08:57,080
>> Lahko še vedno tudi ljubitelj.

1485
01:08:57,080 --> 01:09:00,140
Če ste kdaj obiskal
spletna stran, da na namizju

1486
01:09:00,140 --> 01:09:04,404
ima veliko meni, morda off na
stran, in nato celotno vsebino

1487
01:09:04,404 --> 01:09:07,029
je na strani, ki menu--
to je neke vrste skupne paradigme.

1488
01:09:07,029 --> 01:09:09,670
Meni na levi, vsebini
na desni ali obratno.

1489
01:09:09,670 --> 01:09:13,569
Ne res deluje na mobilni telefon, ko bo
Zaslon je le to veliko slikovnih pik.

1490
01:09:13,569 --> 01:09:16,233
Torej bolj pogosti na mobilne naprave,
vaš jedilnik bo nenadoma dobil

1491
01:09:16,233 --> 01:09:18,399
propadel, in moraš
s klikom na gumb, da ga vidim,

1492
01:09:18,399 --> 01:09:22,404
ali bo spletna stran dal meni
nad njo in čaka vsebine pod njim.

1493
01:09:22,404 --> 01:09:24,779
In lahko izvajajo te
stvari na različne načine, tudi.

1494
01:09:24,779 --> 01:09:28,340
Lahko se posvetujte s svojim programerji,
hej, ekipa, kadarkoli

1495
01:09:28,340 --> 01:09:34,450
vidiš zahtevo HTTP iz Androida
Naprava, Microsoft naprava, Google

1496
01:09:34,450 --> 01:09:39,930
napravo, napravo za Apple, uporabite ta
velikost pisave in uporabo te postavitev menija,

1497
01:09:39,930 --> 01:09:42,670
ali pa uporabite privzeta večji postavitev.

1498
01:09:42,670 --> 01:09:45,410
>> Sedaj, s pomočjo katere
temeljna tehnika danes

1499
01:09:45,410 --> 01:09:48,529
lahko inženirji uporabili
vedeti, ali je to

1500
01:09:48,529 --> 01:09:53,660
iPhone, Android telefon, prenosni računalnik,
namizni obisku strežnika podjetja?

1501
01:09:53,660 --> 01:09:55,310
Kjer se dobijo te informacije?

1502
01:09:55,310 --> 01:09:56,080
>> OBČINSTVO: Glava?

1503
01:09:56,080 --> 01:09:57,740
>> DAVID J. Malan: Ja, glava HTTP.

1504
01:09:57,740 --> 01:10:01,714
Torej, vsak zahteva HTTP, ki prihajajo iz
njihove stranke na svojih strežnikih

1505
01:10:01,714 --> 01:10:03,880
vključujejo v notranjosti, da virtualna
ovojnica, cel kup

1506
01:10:03,880 --> 01:10:08,260
HTTP glave, od katerih je
brskalnik in operacijski sistem

1507
01:10:08,260 --> 01:10:10,290
tudi, če vas skrbi, da
da je raven podrobnosti.

1508
01:10:10,290 --> 01:10:13,790
Zdaj, to je skrivnosten videza niz, vendar
obstaja programska oprema, ki bo le

1509
01:10:13,790 --> 01:10:18,530
poenostaviti to, in si lahko samo vprašam
pri načrtovanju code-- PHP, Java, C ++,

1510
01:10:18,530 --> 01:10:23,650
whatever-- kaj telefon this--
katero napravo je ta uporabnik uporablja?

1511
01:10:23,650 --> 01:10:27,501
In potem lahko rečemo, pokaži jim to
različica spletne strani, če je telefon.

1512
01:10:27,501 --> 01:10:30,250
Pokaži jim to različico
Spletna stran, če je laptop ali pult.

1513
01:10:30,250 --> 01:10:32,316
Ampak sploh ne potrebujemo
Server-side kompleksnost.

1514
01:10:32,316 --> 01:10:33,940
To lahko storite tudi najenostavnejši stvari.

1515
01:10:33,940 --> 01:10:34,815
>> Bom, da to storijo.

1516
01:10:34,815 --> 01:10:38,995
Bom šel naprej v
moj Cloud9 okolje,

1517
01:10:38,995 --> 01:10:41,370
in bom dodati oznako
da ste videli v Googlu prej.

1518
01:10:41,370 --> 01:10:42,770
To se imenuje metaoznaka.

1519
01:10:42,770 --> 01:10:45,520
In nikoli ne pozabite, ta, da
Bom ga prepisati tukaj.

1520
01:10:45,520 --> 01:10:50,552
Meta name = "prikaznega polja" in nato
content = "width = širina naprave, intital

1521
01:10:50,552 --> 01:11:02,060
Lestvica = 1 "in to je to.

1522
01:11:02,060 --> 01:11:06,230
>> Tako da lahko sodelujejo tudi
kot čarobni urok.

1523
01:11:06,230 --> 01:11:11,300
To pa še ni vse, da je jasno, ampak to je
kaj storiti z začetnega prikaza,

1524
01:11:11,300 --> 01:11:15,070
in Vidno je le telo
spletna stran, pravokotna regija, ki

1525
01:11:15,070 --> 01:11:16,690
definira večina strani.

1526
01:11:16,690 --> 01:11:19,060
In to je samo povedal,
brskalnik, veš kaj?

1527
01:11:19,060 --> 01:11:22,589
Mora biti širina te strani
dejansko enaka širini naprave.

1528
01:11:22,589 --> 01:11:25,380
Z drugimi besedami, ne domneva, da
ste vrste neomejen prostor.

1529
01:11:25,380 --> 01:11:29,920
Predvidevam, da ste samo toliko
Prostor kot naprava sama velika.

1530
01:11:29,920 --> 01:11:34,454
In zdaj, če sem osvežite to
v mojem brskalniku, ne vidim sprememb.

1531
01:11:34,454 --> 01:11:37,370
Ampak, če sem to correctly-- in
Naj prečka moje fingers-- če vas vse

1532
01:11:37,370 --> 01:11:42,920
osvežite svoje telefone, kajne
glej prepričljiv spremembe?

1533
01:11:42,920 --> 01:11:43,620
Ja, je that--

1534
01:11:43,620 --> 01:11:45,067
>> OBČINSTVO: [neslišno]

1535
01:11:45,067 --> 01:11:45,900
DAVID J. Malan: Da.

1536
01:11:45,900 --> 01:11:46,400
V REDU.

1537
01:11:46,400 --> 01:11:47,850
Torej verjetno bolj berljiva zdaj?

1538
01:11:47,850 --> 01:11:53,070
Še vedno majhen, bi bilo pošteno, ne pa tudi
tako majhen, da so neobvladljivi.

1539
01:11:53,070 --> 01:11:56,920
In jaz bi vsekakor preglasijo to
nadalje s CSS ali na strani strežnika,

1540
01:11:56,920 --> 01:12:00,120
ampak vse tisto, kar si
vidim se več in več funkcij

1541
01:12:00,120 --> 01:12:02,900
se doda
Strani odjemalca environments--

1542
01:12:02,900 --> 01:12:06,530
JavaScript, saj bomo razpravljali
Jutri, CSS in HTML-- tako

1543
01:12:06,530 --> 01:12:09,190
da so vse te poizvedbe
je mogoče storiti na stranko

1544
01:12:09,190 --> 01:12:11,910
tako, da se moti
Strežnik veliko manj in ne

1545
01:12:11,910 --> 01:12:14,530
da so sledili, za
primer, stalno Juriš

1546
01:12:14,530 --> 01:12:17,210
novega operacijskega sistemu
različice, nove različice brskalnika.

1547
01:12:17,210 --> 01:12:20,190
Lahko samo pustiti brskalnik
vprašajte napravo, kako velik si,

1548
01:12:20,190 --> 01:12:22,890
in nato nekako logična
odločitve, ki temeljijo na tem.

1549
01:12:22,890 --> 01:12:25,140
Ampak bomo videli več priložnosti
za logične odločitve

1550
01:12:25,140 --> 01:12:27,223
jutri v okviru
iz programskega jezika.

1551
01:12:27,223 --> 01:12:29,800

1552
01:12:29,800 --> 01:12:32,760
>> Torej, vsa vprašanja, potem,
na spletni razvoj?

1553
01:12:32,760 --> 01:12:36,130
Danes ni spletno programiranje, na
se, ker je bilo vse, kar smo storili

1554
01:12:36,130 --> 01:12:38,370
je zelo estetsko, če hočete.

1555
01:12:38,370 --> 01:12:41,750
Ni odločanje v
kodo, ki smo jih napisal,

1556
01:12:41,750 --> 01:12:44,990
in da je, zakaj HTML je označevalni
jezik, ni programski jezik.

1557
01:12:44,990 --> 01:12:47,140
Jutri bomo lahko
hiter pogled, navsezadnje,

1558
01:12:47,140 --> 01:12:49,340
v JavaScript, ki je
dejansko programiranje

1559
01:12:49,340 --> 01:12:54,220
jezik, ki nam omogoča narediti malo več.

1560
01:12:54,220 --> 01:12:56,800
>> Kakšno vprašanje?

1561
01:12:56,800 --> 01:13:00,480
No, naj predlaga dve
možnosti neobvezne za domačo nalogo.

1562
01:13:00,480 --> 01:13:02,900
Ena is-- te Cloud9
računi ne bo potekla.

1563
01:13:02,900 --> 01:13:04,669
Ste dobrodošli za uporabo
jim brkljati.

1564
01:13:04,669 --> 01:13:05,960
To je prost raven storitev.

1565
01:13:05,960 --> 01:13:08,754
Zavedam se, da, če pri ustvarjanju
svoj delovni prostor, ki jih je bilo javnosti,

1566
01:13:08,754 --> 01:13:11,670
ki ne pomeni, da kdorkoli na
Internet lahko vidite, kaj tipkate.

1567
01:13:11,670 --> 01:13:15,104
Torej, morda samo menijo,
ni neprijetno sami

1568
01:13:15,104 --> 01:13:18,020
Če ste dajanje svojo prvo spletno
Stran tam javno nesreči,

1569
01:13:18,020 --> 01:13:20,134
vendar nihče ne bo
vedeti, da je videti nekako.

1570
01:13:20,134 --> 01:13:23,760
>> In dvo mi kretnjo
do tega URL-ja, kot tudi,

1571
01:13:23,760 --> 01:13:28,250
še posebej, če ste prišli danes
malo manj udoben kot drugi,

1572
01:13:28,250 --> 01:13:30,430
prepričani, kaj vse to pomeni.

1573
01:13:30,430 --> 01:13:36,780
Zavedaj se, da je veliko več od tega videa,
ki je hkrati dober način zaspati

1574
01:13:36,780 --> 01:13:39,380
in tudi za smeh, medtem ko
tem je treba tudi

1575
01:13:39,380 --> 01:13:44,300
veliko druţbeno zanimivo
in varovanje pomembnih razprav

1576
01:13:44,300 --> 01:13:47,370
tam John Oliver,
čeprav komik.

1577
01:13:47,370 --> 01:13:55,456
>> Ampak, če ni več vprašanj,
ki nas pripelje na recepciji.

1578
01:13:55,456 --> 01:13:56,830
Torej, zakaj ne prižgem glasbo.

1579
01:13:56,830 --> 01:13:58,610
Treba bi bilo pijače
in prigrizki zunaj.

1580
01:13:58,610 --> 01:14:00,220
Vesel sem, da se družijo tako
Dokler bodo ljudje radi,

1581
01:14:00,220 --> 01:14:01,600
odgovoriti na vprašanja, bolj ena na ena.

1582
01:14:01,600 --> 01:14:03,330
Ampak drugače, ste dobrodošli
za vzlet na kateri koli točki,

1583
01:14:03,330 --> 01:14:05,740
in bomo spet videli
jutri zjutraj, za malo več.

1584
01:14:05,740 --> 01:14:07,290
V redu, hvala.

1585
01:14:07,290 --> 01:14:10,428