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

2
00:00:00,127 --> 00:00:01,210
David J. Malan: Dobře.

3
00:00:01,210 --> 00:00:02,160
Jsme zpět.

4
00:00:02,160 --> 00:00:05,810
Takže, cílem tohoto posledního zasedání
je představit několik dalších konceptů

5
00:00:05,810 --> 00:00:09,290
ale také dát každému příležitost
na druh natáhnout prsty

6
00:00:09,290 --> 00:00:11,270
a vlastně něco dělat
trochu hands-on.

7
00:00:11,270 --> 00:00:13,897
Cílem není obrátit
Všechny nás do webové vývojáře

8
00:00:13,897 --> 00:00:16,230
jakýmkoliv způsobem, ale ve skutečnosti jen
aby vám ochutnat některá

9
00:00:16,230 --> 00:00:21,750
ze základních konstrukty toho, co
jde do programování pro web a dnes web

10
00:00:21,750 --> 00:00:23,980
vývoj, takže
statická strana things--

11
00:00:23,980 --> 00:00:26,660
žádná logika, žádný programovací
jazyk, jen statický obsah.

12
00:00:26,660 --> 00:00:29,660
A to nám dá příležitost
skutečně vidět, co je webový server,

13
00:00:29,660 --> 00:00:34,140
Podívejte se, co soubor HTML, je vidět, co
to je HTTP je ve skutečnosti servírují.

14
00:00:34,140 --> 00:00:38,600
Ale dříve, než se ponoříme do libovolné retrospektivu
otázky týkající se cloud computing

15
00:00:38,600 --> 00:00:43,922
nebo bezpečnosti nebo něco mezi tím?

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

17
00:00:44,890 --> 00:00:47,181
Dobře, dobře, pojďme
to jen v případě,

18
00:00:47,181 --> 00:00:49,680
Proces přihlášení k odběru
něco, co trvá několik minut.

19
00:00:49,680 --> 00:00:51,221
Necháme to udělat v pozadí.

20
00:00:51,221 --> 00:00:56,860
Jen do toho, kdybyste mohl,
na tuto adresu URL here-- c9.io.

21
00:00:56,860 --> 00:01:02,810
Jedná se o třetí strany service--
Platforma jako služba, když se will--

22
00:01:02,810 --> 00:01:05,190
že se tě pozvat
se přihlásit k účtu,

23
00:01:05,190 --> 00:01:08,650
a to bude dát každému z vás
účet v tzv mraku

24
00:01:08,650 --> 00:01:11,330
na infrastruktuře někoho jiného,
společnost s názvem Cloud9.

25
00:01:11,330 --> 00:01:13,350
Ale co je hezké o
To je, že poskytují vám

26
00:01:13,350 --> 00:01:15,990
aproximace
skutečný vývoj v reálném světě

27
00:01:15,990 --> 00:01:18,530
životní prostředí, i když v
mrak a ve webovém prohlížeči,

28
00:01:18,530 --> 00:01:21,175
a my budeme používat to vlastně
trochu experimentovat dnes.

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

30
00:01:27,116 --> 00:01:30,260
A pak jít dopředu a jen navigovat
vaše cesta k procesu registrace

31
00:01:30,260 --> 00:01:32,630
Pokud bys mohl.

32
00:01:32,630 --> 00:01:36,080
Tak jsme se náhodou použít ve třídě
Učím pro všechny naše studenty,

33
00:01:36,080 --> 00:01:39,140
a to jak na akademické půdě i mimo teď, a
to, co nahradil historicky

34
00:01:39,140 --> 00:01:41,390
jinak byl software ke stažení.

35
00:01:41,390 --> 00:01:44,620
Takže to, co bylo získání přístupu k
je jeden z těchto virtuálních strojů,

36
00:01:44,620 --> 00:01:46,460
v podstatě, že jsem popsal výše.

37
00:01:46,460 --> 00:01:50,260
Takže tato společnost Cloud9 patrně
nájemné ze třetí party-- ba

38
00:01:50,260 --> 00:01:52,760
v tomto případě, Google-- celek
banda virtuálních strojů

39
00:01:52,760 --> 00:01:56,500
že nějak rozsekat na
iluze jednotlivé servery

40
00:01:56,500 --> 00:01:58,610
že každý z nás má plnou kontrolu nad.

41
00:01:58,610 --> 00:02:01,640
Není to úplně přesné říkat
že jsou virtuální stroje,

42
00:02:01,640 --> 00:02:04,550
ačkoli, protože to, co
Cloud9 ve skutečnosti používá

43
00:02:04,550 --> 00:02:07,570
je poněkud novější technologie
volal containerization.

44
00:02:07,570 --> 00:02:13,150
A dovolte mi chytit tento obrázek
Zde se malovat tento obrázek.

45
00:02:13,150 --> 00:02:16,540
>> Kontejner je, pokud
Vzpomínáte si obrázek

46
00:02:16,540 --> 00:02:19,900
z dřívějška, poněkud lehčí
hmotnost než virtuálním stroji.

47
00:02:19,900 --> 00:02:22,090
Ve skutečnosti, vzhledem k tomu, poslední
Tentokrát jsme mluvili o tu

48
00:02:22,090 --> 00:02:25,170
bytí provozní
Systém a hypervizor

49
00:02:25,170 --> 00:02:28,260
a pak hostujícího operačního systému, host
operačního systému, hostující operační

50
00:02:28,260 --> 00:02:30,940
Systém, na vrcholu své
fyzického hardwaru,

51
00:02:30,940 --> 00:02:33,740
Rozdíl od této novější
Technologie, containerization,

52
00:02:33,740 --> 00:02:37,290
je, že všichni nějakým způsobem sdílet
stejný operační systém.

53
00:02:37,290 --> 00:02:39,970
Ale stále vytvářet
iluze každého

54
00:02:39,970 --> 00:02:44,590
s jeho nebo její vlastní exkluzivní
práva pro správu a soubory

55
00:02:44,590 --> 00:02:45,400
na serveru.

56
00:02:45,400 --> 00:02:48,230
Ale je tu méně softwarem
mezi vámi a hardwaru.

57
00:02:48,230 --> 00:02:52,260
Jejímž výsledkem je, v
Teorie, vyšší výkon,

58
00:02:52,260 --> 00:02:55,470
protože používáte nebo
plýtvání méně zdrojů

59
00:02:55,470 --> 00:02:57,360
Na tomto tzv virtualizační vrstvou.

60
00:02:57,360 --> 00:02:59,420
Tak tomu se říká
containerization od přírody

61
00:02:59,420 --> 00:03:02,920
prostřednictvím technologie zvané Docker,
která je do značné míry přichází do jeho vlastní.

62
00:03:02,920 --> 00:03:05,086
A to je něco,
Technici ve vaší firmě

63
00:03:05,086 --> 00:03:08,610
Možná trochu druh začne mluvit
asi brzy, pokud tak již neučinili,

64
00:03:08,610 --> 00:03:11,590
i když tam to určitě ne
Důvodem skočit na jakýchkoli bandwagons.

65
00:03:11,590 --> 00:03:15,410
>> Takže s tím řekl, co
budete pravděpodobně vidět nyní

66
00:03:15,410 --> 00:03:22,670
je obrazovka, která vypadá trochu jako je tento.

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

68
00:03:23,170 --> 00:03:25,260
A stačí zavolat mi, než v opačném případě.

69
00:03:25,260 --> 00:03:27,440
A jestli tak-- Půjdu přes ne-li.

70
00:03:27,440 --> 00:03:30,244
Jděte do toho a klikněte na tak velký
navíc k vytvoření pracovního prostoru,

71
00:03:30,244 --> 00:03:31,660
a uvidíte obrazovku podobnou následující.

72
00:03:31,660 --> 00:03:35,020
Můžete zavolat na pracovní plochu
pojmenovat, co chcete pro tuto chvíli.

73
00:03:35,020 --> 00:03:38,660
A ve skutečnosti jen pro jednoduchost,
go a- dobře, někteří z vás

74
00:03:38,660 --> 00:03:39,660
již mají pracovní prostory.

75
00:03:39,660 --> 00:03:47,050
Nazvěme to cokoliv want-- podnikání,
Harvard, čtvrtek, cokoliv chcete.

76
00:03:47,050 --> 00:03:48,800
Nepotřebujete popis.

77
00:03:48,800 --> 00:03:52,380
Můžete ji nechat v soukromí, pokud jste
již mají spoustu pracovních prostorech.

78
00:03:52,380 --> 00:03:55,280
Pokud jste nuceni, aby to veřejná,
je to v pořádku pro dnešní účely.

79
00:03:55,280 --> 00:03:56,750
I zde je jeden z upsells.

80
00:03:56,750 --> 00:03:59,939
Máte jednu soukromou pracovním místě
default. Ale pokud chcete víc,

81
00:03:59,939 --> 00:04:00,980
budete muset platit více.

82
00:04:00,980 --> 00:04:02,870
V opačném případě vás nutit
aby svou práci veřejnosti.

83
00:04:02,870 --> 00:04:05,600
Ale to je v pořádku, protože i oni
zaměřit tento na open-source komunit

84
00:04:05,600 --> 00:04:07,700
aby se lidé
skutečně spolupracovat.

85
00:04:07,700 --> 00:04:10,699
>> A poslední věc, která je důležitá,
když je po zvolíte název

86
00:04:10,699 --> 00:04:17,140
a poté, co si vyberete soukromé nebo veřejné,
kliknutím HTML5 velký oranžový ikonu

87
00:04:17,140 --> 00:04:22,430
druhý zleva, a
klepněte na tlačítko Vytvořit pracovní prostor.

88
00:04:22,430 --> 00:04:24,580
A to bude pravděpodobně
trvat minutu nebo tak,

89
00:04:24,580 --> 00:04:26,540
ale budete pak mít
životní prostředí, jakmile vás

90
00:04:26,540 --> 00:04:30,544
dělat to, co vypadá připomínající
co mám na obrazovce tady.

91
00:04:30,544 --> 00:04:33,210
Ale opět, to může trvat minutu
nebo více, aby si na tuto obrazovku

92
00:04:33,210 --> 00:04:34,770
jakmile jste klikli Vytvořit pracovní prostor.

93
00:04:34,770 --> 00:04:37,936
Ale právě označili mě přes jestli mě chtěli
aby se podívat na něco nebo doporučovat.

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

95
00:04:40,191 --> 00:04:40,690
Dobře.

96
00:04:40,690 --> 00:04:42,390
Takže budu pozadí to pro tuto chvíli.

97
00:04:42,390 --> 00:04:44,260
Zavolej mi přes když se zdá, že
máte nějaké technické problémy.

98
00:04:44,260 --> 00:04:46,210
Ale opět, to by mohlo trvat
Trochu za to otevřít.

99
00:04:46,210 --> 00:04:49,570
A pojďme do toho a mluvit o tom,
to vlastně znamená, aby webové stránky,

100
00:04:49,570 --> 00:04:52,780
co je HTML, a jak se to všechno
Propojuje jako my začínáme

101
00:04:52,780 --> 00:04:54,730
aby skutečně používat některé technologie.

102
00:04:54,730 --> 00:04:58,310
Tak to dopadá, že mohu
jít na můj malý Mac tady,

103
00:04:58,310 --> 00:05:01,650
otevřít jednoduchý program nazvaný
TextEdit, nebo na Windows jsem mohl

104
00:05:01,650 --> 00:05:04,480
open něco, co nazývá Notepad.exe.

105
00:05:04,480 --> 00:05:08,260
A mohl bych prostě něco udělat
jako tohle-- "Hello, World".

106
00:05:08,260 --> 00:05:12,020
A pak bych mohl uložit jako
hello.txt Takže tam žádná magie.

107
00:05:12,020 --> 00:05:15,200
To nemá nic společného s web
programování, nic co do činění s HTML.

108
00:05:15,200 --> 00:05:16,790
Jen vytvoření jednoduchého textového souboru.

109
00:05:16,790 --> 00:05:20,600
Ale ukazuje se, že web
Stránka je doslova jen to.

110
00:05:20,600 --> 00:05:24,020
Je to jednoduchý textový soubor obsahující textový
které můžete psát na klávesnici,

111
00:05:24,020 --> 00:05:30,070
ale obvykle, ale ne vždy
skončí ne .txt, ale .html nebo .htm.

112
00:05:30,070 --> 00:05:32,050
A vy ne jen
zadávat slova v souboru.

113
00:05:32,050 --> 00:05:35,280
Jste skutečně používat věci zvané
tagy nebo obecněji, něco

114
00:05:35,280 --> 00:05:37,190
zvané značkovací jazyk.

115
00:05:37,190 --> 00:05:40,510
>> Takže budu velmi rychle psát
a potom vysvětlit následující.

116
00:05:40,510 --> 00:05:42,290
Jdu první
zadejte tento, který říká,

117
00:05:42,290 --> 00:05:45,730
hej, prohlížeč, přichází
webová stránka napsána v HTML.

118
00:05:45,730 --> 00:05:51,850
A tyto dvě věci dohromady říci, hej,
prohlížeč, následující je opravdu HTML.

119
00:05:51,850 --> 00:05:55,790
Hej, prohlížeče, přichází
Hlava nebo horní mé stránky.

120
00:05:55,790 --> 00:05:59,900
Hej, prohlížeče, uvnitř horní části
moje strana, dát název, který zní: "Dobrý den,

121
00:05:59,900 --> 00:06:01,610
svět."

122
00:06:01,610 --> 00:06:08,370
Hej, prohlížeč, poté, co hlava my
strana, přichází tělo mé stránce.

123
00:06:08,370 --> 00:06:12,170
A, hej, prohlížeč, tělo mé
stránka by měla také říci, "hello world".

124
00:06:12,170 --> 00:06:15,500
Takže jaké jsou zde Význačnými podrobnosti?

125
00:06:15,500 --> 00:06:17,960
To je to, co je všeobecně
volal prohlášení o doc typu,

126
00:06:17,960 --> 00:06:20,190
a upřímně řečeno, je to trochu
těžké zapamatovat si to na prvním místě.

127
00:06:20,190 --> 00:06:21,481
Můžete tak nějak kopírovat-vložit jej.

128
00:06:21,481 --> 00:06:23,760
To je formální způsob
říkat, hej, prohlížeč,

129
00:06:23,760 --> 00:06:28,030
Já používám HTML verze 5, které
vyšel v poslední době poněkud.

130
00:06:28,030 --> 00:06:31,380
Je to kouzelné zaříkadlo, že některé
lidé s nedostatečným smyslem návrhu

131
00:06:31,380 --> 00:06:33,640
se rozhodl dát u
Velmi horní části souboru.

132
00:06:33,640 --> 00:06:35,473
I přesto, že je to
trochu tajemné, to je všechno

133
00:06:35,473 --> 00:06:38,250
to means-- hej, prohlížeč, zde
dodáván s verzí 5 HTML.

134
00:06:38,250 --> 00:06:41,741
>> Zbytek to bylo u nás
již nějakou dobu, historicky,

135
00:06:41,741 --> 00:06:44,740
ale bylo to vyvíjí, a to
Pravděpodobně došlo k Začínám být trochu jednodušší.

136
00:06:44,740 --> 00:06:47,320
Všimněte si několik charakteristik
z toho, co jsem se zvýrazní.

137
00:06:47,320 --> 00:06:49,890
Je tam tyto věci s hranatý
brackets-- levou hranatou závorku

138
00:06:49,890 --> 00:06:51,040
a pravá závorka.

139
00:06:51,040 --> 00:06:52,490
A všimněte si symetrii zde.

140
00:06:52,490 --> 00:06:57,340
A symetrie, myslím, stejně jako já
mají tuto počáteční tag zde nebo otevřenou značku

141
00:06:57,340 --> 00:07:01,560
chcete-li, tady dole mám
V blízkosti tag nebo koncová značka, která je

142
00:07:01,560 --> 00:07:06,460
odlišné pouze tehdy, pokud má tento
lomítko na začátku slova

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

144
00:07:07,360 --> 00:07:09,360
A můžete myslet
to když jsem byl nedbale

145
00:07:09,360 --> 00:07:12,280
navrhuje předtím, hej,
prohlížeče, přichází nějaký HTML.

146
00:07:12,280 --> 00:07:16,060
A naopak, hej, prohlížeč, který je
že pro začátek a konec HTML--.

147
00:07:16,060 --> 00:07:18,440
>> Mezitím hej, prohlížeč, zde
přichází hlavu mé stránky.

148
00:07:18,440 --> 00:07:20,140
Hej, prohlížeč, to je pro hlavu.

149
00:07:20,140 --> 00:07:22,240
Hej, prohlížeč, zde je
Tělo mé stránky.

150
00:07:22,240 --> 00:07:24,020
Hej, browser, že je to pro tělo.

151
00:07:24,020 --> 00:07:26,940
A vnitřní části, která je nějaký
libovolný text pro teď.

152
00:07:26,940 --> 00:07:30,520
A uvnitř hlavy, zatím,
Je nějaký svévolný, ale označil,

153
00:07:30,520 --> 00:07:34,410
tak říkajíc, text, který říká, titul
mé straně bude "Hello, World".

154
00:07:34,410 --> 00:07:37,470
Nyní, pro tuto chvíli, můžete
Předpokládejme, že prohlížečů

155
00:07:37,470 --> 00:07:41,762
mají only-- nebo spíše, webové stránky mají
Pouze dva parts-- hlavu a tělo.

156
00:07:41,762 --> 00:07:44,220
A hlava je obvykle jen
jako nabídkové liště se věci

157
00:07:44,220 --> 00:07:45,510
opravdu jen na samém vrcholu.

158
00:07:45,510 --> 00:07:48,910
A tělo je střevech stránky,
Všechno v tom velkém obdélníku

159
00:07:48,910 --> 00:07:50,239
který vyplní celou obrazovku.

160
00:07:50,239 --> 00:07:51,780
Takže já jdu dopředu a to udělat.

161
00:07:51,780 --> 00:07:54,400
Budu pokračovat a
klepněte na tlačítko Uložit, Uložit soubor.

162
00:07:54,400 --> 00:07:58,580
A budu šetřit
to jako hello.html,

163
00:07:58,580 --> 00:08:00,870
a já jsem prostě jít
dát to na mém desktopu.

164
00:08:00,870 --> 00:08:03,520
A já jdu
neváhejte a klikněte na tlačítko Uložit.

165
00:08:03,520 --> 00:08:05,806
A notice-- můj Mac na
je alespoň na mě ječet.

166
00:08:05,806 --> 00:08:07,180
Jste si jisti, že to chceš udělat?

167
00:08:07,180 --> 00:08:08,710
A já chtěl říct, ano, používat HTML.

168
00:08:08,710 --> 00:08:10,400
Znám lepší v tomto případě.

169
00:08:10,400 --> 00:08:14,686
A teď budu jít do mého počítače
kde jsem tento soubor mít najednou.

170
00:08:14,686 --> 00:08:16,060
A budu poklepejte na něj.

171
00:08:16,060 --> 00:08:18,268
A všimněte si, že tím, že
default, Chrome otevřel.

172
00:08:18,268 --> 00:08:19,996
To proto, že to je
jako výchozí prohlížeč.

173
00:08:19,996 --> 00:08:21,370
A to jen říká: "Hello, World".

174
00:08:21,370 --> 00:08:23,078
Ale říká, že "Dobrý den,
svět "na dvou místech.

175
00:08:23,078 --> 00:08:23,979
Všimněte si vlevo nahoře.

176
00:08:23,979 --> 00:08:25,020
Dost těžké přehlédnout.

177
00:08:25,020 --> 00:08:26,180
Je to velká a tučným písmem.

178
00:08:26,180 --> 00:08:30,690
A kde jinde se nezdá
říkat, "ahoj, svět"?

179
00:08:30,690 --> 00:08:31,470
>> Diváků: Karta.

180
00:08:31,470 --> 00:08:33,100
>> David J. Malan: Jo, karta sama o sobě.

181
00:08:33,100 --> 00:08:35,159
Takže když jsem řekl šéf
Stránka je vše až top--

182
00:08:35,159 --> 00:08:36,367
a ve skutečnosti se jedná o titul.

183
00:08:36,367 --> 00:08:37,710
Je to jen v záložce zde.

184
00:08:37,710 --> 00:08:40,320
A můžu vytáhnout tuto kartu
ven tak, aby se plést.

185
00:08:40,320 --> 00:08:43,360
To je nyní jen jedné kartě,
a opravdu vidíme "Hello, World"

186
00:08:43,360 --> 00:08:45,970
tady nahoře a "ahoj, svět" tady dole.

187
00:08:45,970 --> 00:08:47,160
Takže docela jednoduché.

188
00:08:47,160 --> 00:08:49,050
Ale je to také docela jednoduché.

189
00:08:49,050 --> 00:08:50,440
A vlastně jsem přiblížení.

190
00:08:50,440 --> 00:08:53,272
Mohu změnit velikost písma právě
zvětšit pro přístupnost.

191
00:08:53,272 --> 00:08:56,830
Ale pojďme teď něco udělat
trochu zajímavější.

192
00:08:56,830 --> 00:08:59,760
>> Jdu do go-- Jejda, dovolte
mi dostat zpátky do svého textového souboru.

193
00:08:59,760 --> 00:09:02,400
Vracím se k mému
textový soubor, a jdu

194
00:09:02,400 --> 00:09:06,320
tuto situaci změnit a říkají,
"Dobrý den, Disney World."

195
00:09:06,320 --> 00:09:07,970
Uložit.

196
00:09:07,970 --> 00:09:10,919
A vrátit se do mého
prohlížeč a klepněte na tlačítko Načíst znovu.

197
00:09:10,919 --> 00:09:12,710
A teď, samozřejmě, to
říká: "Disney World."

198
00:09:12,710 --> 00:09:15,500
A já jdu k umělému zvětšení
V právě proto je lépe vidět.

199
00:09:15,500 --> 00:09:19,012
Takže teď, bohužel, jsem tak trochu chtít
to-- ve skutečnosti, to je funkce Mac.

200
00:09:19,012 --> 00:09:21,720
Chci kliknout na Disney World
a jít někam, jako disney.com,

201
00:09:21,720 --> 00:09:23,290
ale to nefunguje.

202
00:09:23,290 --> 00:09:26,850
Takže základním principem webu je
hypertextové odkazy, odkazy, které jdou jinam.

203
00:09:26,850 --> 00:09:28,390
Tak jak to mám udělat?

204
00:09:28,390 --> 00:09:34,690
No, mohl bych jen říct,
"Dobrý den, http://www.disney.com."

205
00:09:34,690 --> 00:09:36,110
Uložit toto.

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

207
00:09:37,620 --> 00:09:39,400
Ale to také není kliknout.

208
00:09:39,400 --> 00:09:42,930
A co je příjemné tady, přestože
není funkční ještě,

209
00:09:42,930 --> 00:09:45,930
je, že se zdá, že
Prohlížeč dělá doslova jen

210
00:09:45,930 --> 00:09:46,950
co řeknu to dělat.

211
00:09:46,950 --> 00:09:50,110
Tak právě píšu, jestli URL takhle,
je to jen bude, aby mi ukázal URL.

212
00:09:50,110 --> 00:09:54,270
Musím použít značky nebo značky
Jazyk, který vlastně říci

213
00:09:54,270 --> 00:09:55,621
prohlížeč dělat ještě více.

214
00:09:55,621 --> 00:09:57,870
Takže já jdu dopředu a
smazat tuto chvíli.

215
00:09:57,870 --> 00:10:00,980
A já chtěl říct, hej,
Prohlížeč jazyce kotvu tady,

216
00:10:00,980 --> 00:10:02,650
odkaz tak říkajíc.

217
00:10:02,650 --> 00:10:07,500
A hyper-reference, cíl
uvedené kotvy, by mělo být toto URL.

218
00:10:07,500 --> 00:10:08,750
A všimněte si mé citace.

219
00:10:08,750 --> 00:10:11,590
Mohl bych použít apostrofy taky,
ale musíte být konzistentní,

220
00:10:11,590 --> 00:10:14,270
a já bych obvykle stačí použít
uvozovky, aby to jednoduché.

221
00:10:14,270 --> 00:10:16,820
Všimněte si, Chystám se zavřít tag.

222
00:10:16,820 --> 00:10:21,160
A pak tady jdu
říkat, "Disney World."

223
00:10:21,160 --> 00:10:26,890
A teď potřebuju nějaký symmetry--
otevřený držák, / a, uzavřený držák.

224
00:10:26,890 --> 00:10:28,090
>> Tak co jsem představil?

225
00:10:28,090 --> 00:10:30,100
Měli jsme několik značek již.

226
00:10:30,100 --> 00:10:32,410
HTML, Hlava, Hlava, tělo,
jsou všechny tagy, tak říkajíc,

227
00:10:32,410 --> 00:10:34,280
s otevřenými i uzavřenými protějšky.

228
00:10:34,280 --> 00:10:36,530
Ale oznámení, je to druh
z zásadně odlišná.

229
00:10:36,530 --> 00:10:39,140
To je to, co budeme nazývat
v HTML atributu.

230
00:10:39,140 --> 00:10:41,451
A je atribut
jen pár klíč-hodnota.

231
00:10:41,451 --> 00:10:43,950
To je běžná věc
počítače science-- pár klíč-hodnota.

232
00:10:43,950 --> 00:10:45,770
Je to něco jako nástroj obchodu.

233
00:10:45,770 --> 00:10:47,040
Klíčovou a hodnotu.

234
00:10:47,040 --> 00:10:49,390
Slovo a ještě něco navíc
jiné slovo nebo slova.

235
00:10:49,390 --> 00:10:53,790
A v tomto případě je klíč href,
a hodnota je, že úplná URL.

236
00:10:53,790 --> 00:10:57,890
A co je atribut dělá, je to
ovlivňuje chování tagu.

237
00:10:57,890 --> 00:11:01,010
A v tomto případě musíme ovlivňovat
chování značky ukotvení,

238
00:11:01,010 --> 00:11:04,140
protože musíme zakotvit
odkaz někam.

239
00:11:04,140 --> 00:11:06,960
A jak to udělat, je
prostřednictvím atributu.

240
00:11:06,960 --> 00:11:08,970
>> Takže budu pokračovat
a uložte soubor nyní.

241
00:11:08,970 --> 00:11:11,300
Vrať se do svého prohlížeče a znovu načíst.

242
00:11:11,300 --> 00:11:14,580
A voila, máme na mapě
Počátky legitimní webové stránky.

243
00:11:14,580 --> 00:11:18,420
Super-jednoduchý, ale když jsem se vznášet se nad
tohle-- oznámení v levém dolním rohu,

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

245
00:11:19,830 --> 00:11:21,730
Ale vy vidět www.disney.com.

246
00:11:21,730 --> 00:11:27,076
A když jsem na něj, opravdu to
whisks mě pryč disney.com.

247
00:11:27,076 --> 00:11:29,380
Nyní je zvláštní věc
Zde je to, že není

248
00:11:29,380 --> 00:11:33,940
best-- nejvíce prodejní URL, ale
je to v pořádku, protože tento soubor není

249
00:11:33,940 --> 00:11:35,360
existují na World Wide Web.

250
00:11:35,360 --> 00:11:39,740
Existuje jako lokální soubor ve zjevně
moji uživatelé directory-- / jharvard--

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

252
00:11:41,890 --> 00:11:42,634
Ale má URL.

253
00:11:42,634 --> 00:11:43,800
Prostě se to stane, že je místní.

254
00:11:43,800 --> 00:11:47,050
Bohužel, nikdo z vás mohou navštívit
to, protože pokud zadáte tuto adresu URL

255
00:11:47,050 --> 00:11:49,980
byste říkat prohlížeče,
Vyhledejte soubor s názvem hello.html

256
00:11:49,980 --> 00:11:50,772
na pevném disku.

257
00:11:50,772 --> 00:11:53,271
A samozřejmě, pokud jste
Sledoval spolu ručně,

258
00:11:53,271 --> 00:11:54,530
to nebude existovat tam.

259
00:11:54,530 --> 00:11:55,190
>> Takže je to v pořádku.

260
00:11:55,190 --> 00:11:57,815
Stále potřebujeme cestu, nakonec,
stáhni soubor do webu,

261
00:11:57,815 --> 00:12:01,180
ale pojďme šprýmaři odděleně pár
bezpečnostní důsledky, co jsme právě

262
00:12:01,180 --> 00:12:04,850
viděl a svázat jej zpět na dřívější
Diskuse z dnešního rána.

263
00:12:04,850 --> 00:12:08,200
Ukazuje se, že pokud
Prohlížeč doslova dělá

264
00:12:08,200 --> 00:12:12,560
co řeknu to udělat, a zdá se,
aby se stát, že kotva tag

265
00:12:12,560 --> 00:12:17,380
ovlivněna hodnotou
Tento atribut volal href

266
00:12:17,380 --> 00:12:20,810
ale zobrazí se toto
text, toto se zdá

267
00:12:20,810 --> 00:12:26,520
naznačit, že bych mohl dát URL
V obou místech a pak znovu načíst

268
00:12:26,520 --> 00:12:29,100
a nyní vidět URL a přejít na adresu URL.

269
00:12:29,100 --> 00:12:32,680
Všimněte si, když jsem vznášet se nad dolním rohu,
Já opravdu jít ještě disney.com.

270
00:12:32,680 --> 00:12:38,340
>> Takže pokud jste někdy byli
phished-- P-H-I-S-H-E-D--

271
00:12:38,340 --> 00:12:42,820
s jedním z těchto falešných e-mailů
od jako PayPal vaší banky,

272
00:12:42,820 --> 00:12:46,470
pravděpodobně jste dostali odkazy uvnitř
e-mailu, který čtete, že

273
00:12:46,470 --> 00:12:49,970
vám řekne, klikněte sem jít potvrdit
heslo nebo potvrzení své datum narození

274
00:12:49,970 --> 00:12:53,840
nebo sociální nebo něco společensky
inženýrství vám sdělit

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

276
00:12:54,920 --> 00:12:57,625
No, mohl jsem tak trochu vzít
Výhodou tohoto postupu, nemohl jsem?

277
00:12:57,625 --> 00:13:01,240
Mohl bych říci něco
podobně, www.paypal.com.

278
00:13:01,240 --> 00:13:11,340
A místo disney.com, I
mohli jít, stejně jako, badguy.com.

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

280
00:13:12,850 --> 00:13:16,620
A jak snadné je napálit,
zejména netechnické čtečka

281
00:13:16,620 --> 00:13:20,649
nebo zběžně čtení
Čtenář než kliknout

282
00:13:20,649 --> 00:13:23,940
odkaz takhle, která, pokud kliknu to--
Já vlastně nechci jít badguy.com.

283
00:13:23,940 --> 00:13:25,398
Nevím, co je vlastně tam.

284
00:13:25,398 --> 00:13:30,080
Takže paypal.com, vývěsní, je
co říká, že to bude,

285
00:13:30,080 --> 00:13:33,210
ale samozřejmě, pokud se podívám dolů
super-nízko, je to trochu rozmazaný,

286
00:13:33,210 --> 00:13:34,230
ale říká, že badguy.com.

287
00:13:34,230 --> 00:13:38,644
To je jediná říct právě teď
že jdu na špatném místě.

288
00:13:38,644 --> 00:13:41,560
A když jsem řekl dříve, že banky
Opravdu by nemělo být podnětem nebo vlakem

289
00:13:41,560 --> 00:13:44,510
Uživatelé ke kliknutí odkazy, toto
je jen jedním z projevů toho.

290
00:13:44,510 --> 00:13:45,430
A je to tak jednoduché.

291
00:13:45,430 --> 00:13:48,120
Nyní jste protivníkem, pokud
děláte něco takového

292
00:13:48,120 --> 00:13:51,000
a pokusit se přimět uživatele
k návštěvě svých webových stránkách.

293
00:13:51,000 --> 00:13:53,320
Ale teď, budeme
věci pěkné a čisté.

294
00:13:53,320 --> 00:13:55,640
Budeme pokračovat
a přetočit těchto změn.

295
00:13:55,640 --> 00:13:56,530
Znovu načíst stránku.

296
00:13:56,530 --> 00:13:57,740
A já se vrátit do disney.com.

297
00:13:57,740 --> 00:14:00,660
>> Uvidíme, jestli nemůžeme dráždit
Tento sebe trochu víc.

298
00:14:00,660 --> 00:14:04,160
Takže "Dobrý den, Disney World."

299
00:14:04,160 --> 00:14:05,950
Chystám se říct, tady dole.

300
00:14:05,950 --> 00:14:08,220
Možná, že budu dělat nějaký prostor.

301
00:14:08,220 --> 00:14:12,730
"Doufáme, že si svůj pobyt!"

302
00:14:12,730 --> 00:14:13,830
Uložit.

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

304
00:14:15,850 --> 00:14:19,010
Není to rea-- to není
co jsem zamýšlel, že jo?

305
00:14:19,010 --> 00:14:21,870
Mám na mysli, když jsem ošetřovat textu
soubor jako textový procesor,

306
00:14:21,870 --> 00:14:24,894
Co jste doufat, že by se stalo tady?

307
00:14:24,894 --> 00:14:27,060
Jo, mám pocit, že tam
by měl být konec řádku tady,

308
00:14:27,060 --> 00:14:28,799
tak to je kočárek nějakým způsobem.

309
00:14:28,799 --> 00:14:31,090
Ale to je ve skutečnosti úmyslné,
protože stejně jako dříve,

310
00:14:31,090 --> 00:14:33,381
prohlížeč je teprve ve chvíli,
to, co jste to říct dělat.

311
00:14:33,381 --> 00:14:34,806
Jsem to řekl, aby rozbít linky.

312
00:14:34,806 --> 00:14:37,930
Já jsem to řekl, aby pohybovat dolů, a to i
i když intuitivně, mám pocit, že jsem to udělal.

313
00:14:37,930 --> 00:14:39,805
Tak to dopadá potřebujeme
trochu víc značkovací,

314
00:14:39,805 --> 00:14:41,390
a budu opravit to následujícím způsobem.

315
00:14:41,390 --> 00:14:46,160
Jdu do této předmluvě prvního ahoj
s tím, co se nazývá bod tag.

316
00:14:46,160 --> 00:14:48,920
A pak budu pokračovat
a zabalit tuto druhou větu

317
00:14:48,920 --> 00:14:54,370
v jiném tagu odstavce, i když
jsou super-krátkých odstavců.

318
00:14:54,370 --> 00:14:55,930
Teď budu šetřit.

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

320
00:14:57,160 --> 00:14:59,070
A teď máme, že
prostor, a my jsme tak nějak

321
00:14:59,070 --> 00:15:01,680
mají sémantiku
dvě oddělené body.

322
00:15:01,680 --> 00:15:05,290
>> To je vše v pořádku a dobré, ale to by
bylo pěkné přidat obrázek na tuto stránku,

323
00:15:05,290 --> 00:15:08,710
takže budu jít hledat
Mickey Mouse na Google Images.

324
00:15:08,710 --> 00:15:12,830
A jen tak pro zábavu, jsem
chystá chytit tento obrázek.

325
00:15:12,830 --> 00:15:15,350
Chystám se jít dopředu a hned
chytit URL tohoto obrázku,

326
00:15:15,350 --> 00:15:16,510
i když tam je něco jiného
způsobů, jak to udělat.

327
00:15:16,510 --> 00:15:18,520
Pro tuto chvíli, já jsem prostě jít ke zkopírování URL.

328
00:15:18,520 --> 00:15:24,770
Chystám se jít zpět do mého textu
soubor, a budu zde říci,

329
00:15:24,770 --> 00:15:31,160
img src = cenovou nabídku konec citátu
že URL, super-long.

330
00:15:31,160 --> 00:15:34,580
A pak představou
obraz je trochu jiný.

331
00:15:34,580 --> 00:15:38,640
To fakt není představa startování
obraz a konče obraz,

332
00:15:38,640 --> 00:15:40,630
jako počáteční značka koncový tag.

333
00:15:40,630 --> 00:15:43,840
Tak to je trochu divné
me sémanticky, jak to udělat,

334
00:15:43,840 --> 00:15:45,390
mít detailní značku obrázku.

335
00:15:45,390 --> 00:15:46,780
To není správné.

336
00:15:46,780 --> 00:15:48,840
Je to naprosto správné,
a to je podporováno

337
00:15:48,840 --> 00:15:50,870
ale je tu zkrácený zápis.

338
00:15:50,870 --> 00:15:53,780
Mohu druh souběžně
otevírat a zavírat stejnou značku,

339
00:15:53,780 --> 00:15:55,510
a že učiní prohlížeč spokojeni.

340
00:15:55,510 --> 00:15:56,950
Takže je to jen trochu
stručnější pro věci

341
00:15:56,950 --> 00:15:59,408
že koncepčně opravdu ne
smysl začínat a končit.

342
00:15:59,408 --> 00:16:01,190
Prostě tu jsou, nebo nejsou.

343
00:16:01,190 --> 00:16:06,020
>> Takže jdu zachránit to a vrátit se
mého "Hello, world", str a obnovte.

344
00:16:06,020 --> 00:16:09,880
A je to trochu mimo kontrolu,
protože ten obraz je vlastně

345
00:16:09,880 --> 00:16:12,210
trochu velký, ale to je v pořádku.

346
00:16:12,210 --> 00:16:13,710
Mohl jsem to změnit velikost v programu.

347
00:16:13,710 --> 00:16:14,900
Nebo víte co.

348
00:16:14,900 --> 00:16:17,350
Jen demonstrovat, že jsem
bude vlastně říci

349
00:16:17,350 --> 00:16:21,760
že šířka této věci by měl
jen 200 pixelů, 200 tečky.

350
00:16:21,760 --> 00:16:24,360
Nech mě jít dopředu a uložit
a znovu, a nyní stránky

351
00:16:24,360 --> 00:16:25,690
vypadá trochu rozumnější.

352
00:16:25,690 --> 00:16:27,260
Ale všimněte si vzor.

353
00:16:27,260 --> 00:16:30,030
No, já jsem trochu naučil vy všichni
HTML v nějakém smyslu, přinejmenším

354
00:16:30,030 --> 00:16:33,531
koncepčně, protože všechny HTML je
Tyto tags-- otevřené tagy, uzavřený tagy,

355
00:16:33,531 --> 00:16:35,280
a atributy, které
modifikovat jejich chování.

356
00:16:35,280 --> 00:16:38,380
A zdá se, že každý
tag může mít nula nebo jeden

357
00:16:38,380 --> 00:16:43,005
nebo dvě nebo více atributů, každý z
který dělá něco trochu jiného.

358
00:16:43,005 --> 00:16:44,380
Nyní, jak víte, co existuje?

359
00:16:44,380 --> 00:16:46,800
Stačí poslouchat někoho
stejně jako ti povím, co existuje,

360
00:16:46,800 --> 00:16:50,860
nebo si jen věnované asi za tutorial
na HTML, a je to opravdu to jednoduché.

361
00:16:50,860 --> 00:16:54,030
>> Opravdu, když jsem byl undergrad
Před lety se naučil HTML,

362
00:16:54,030 --> 00:16:56,530
jeden z mých matematiky výuky
asistenti právě strávila

363
00:16:56,530 --> 00:16:59,600
trochu času mi doučování
Pro jako půl hodiny, hodinu,

364
00:16:59,600 --> 00:17:00,660
a pak jsem byl na cestě.

365
00:17:00,660 --> 00:17:03,300
Byl jsem na cestě k vytváření
nejohavnějším webové stránky vůbec,

366
00:17:03,300 --> 00:17:05,549
který, zdá se, nemám
Opravdu postupoval dál.

367
00:17:05,549 --> 00:17:09,849
Ale jde o to, že jakmile vás
porozumět těchto jednoduchých ideas--

368
00:17:09,849 --> 00:17:13,450
pokud tajemné text-- ale tyto jednoduché
představy o spuštění myšlenku

369
00:17:13,450 --> 00:17:15,960
a zavírání myšlenku, udržování
všechno pěkně vyvážené,

370
00:17:15,960 --> 00:17:19,150
hledá něco nahoru, modifikování
Chování této značce, to je opravdu vše

371
00:17:19,150 --> 00:17:20,079
tam je k tomu.

372
00:17:20,079 --> 00:17:28,140
A ve skutečnosti, pokud bychom teď jít
něco jako google.com-- ve skutečnosti,

373
00:17:28,140 --> 00:17:31,920
pojďme si místo trochu víc
reasonable-- stanford.edu.

374
00:17:31,920 --> 00:17:37,800
A já jdu k zobrazení,
Developer, Zobrazit zdrojový kód.

375
00:17:37,800 --> 00:17:41,400
Je to ošklivé, ale notice--
a budu přiblížit oznámení

376
00:17:41,400 --> 00:17:43,432
některé věci, které je již obeznámen.

377
00:17:43,432 --> 00:17:45,140
Tam je to tady,
což je prohlížeč.

378
00:17:45,140 --> 00:17:46,800
Přichází HTML5.

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

380
00:17:47,634 --> 00:17:49,550
Zdá se, že je tu
atribut, který jsem neměl

381
00:17:49,550 --> 00:17:51,540
použití, které určuje
jazyk stránky

382
00:17:51,540 --> 00:17:54,380
a to může pomoci s automatickým
Překlad a tak podobně.

383
00:17:54,380 --> 00:17:55,546
Zde je hlava stránky.

384
00:17:55,546 --> 00:17:57,790
Tady je titulní strana Stanfordu of.

385
00:17:57,790 --> 00:17:59,832
Tam je značka já ne
mluvit o yet-- Meta tag.

386
00:17:59,832 --> 00:18:01,540
Je to jen jakýsi
Informace o pozadí.

387
00:18:01,540 --> 00:18:04,210
Pomáhá s SEO, nebo
optimalizace pro vyhledávače-motor,

388
00:18:04,210 --> 00:18:06,320
nebo výsledky vyhledávání Google, nebo podobně.

389
00:18:06,320 --> 00:18:09,029
Ale pokud budeme hledat dál, udržet
hledáte, tady je tělo tag.

390
00:18:09,029 --> 00:18:11,570
A je tu další svazky
Značky jsme nemluvili o dosud.

391
00:18:11,570 --> 00:18:13,750
Ale Div je jedno pro
rozdělení stránky.

392
00:18:13,750 --> 00:18:16,680
Je to jako neviditelné obdélník
pokud jste trochu chtít mentálně

393
00:18:16,680 --> 00:18:20,160
rozdělit stránku do
různé jednotky online.

394
00:18:20,160 --> 00:18:22,650
A pak spousta divs I
vidět, něco jako třída,

395
00:18:22,650 --> 00:18:24,440
ale vrátíme se k tomu.

396
00:18:24,440 --> 00:18:26,200
>> To je interesting-- formulářů.

397
00:18:26,200 --> 00:18:27,730
Formuláře jsou po celém webu.

398
00:18:27,730 --> 00:18:30,310
Jakékoliv vyhledávací pole jsi
někdy použitý je forma.

399
00:18:30,310 --> 00:18:31,490
A tak, pojďme skutečně vidět.

400
00:18:31,490 --> 00:18:32,790
Formulář.

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

402
00:18:33,910 --> 00:18:37,660
Účinek tohoto formuláře z jakéhokoliv
Z historických důvodů je to, že URL.

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

404
00:18:38,840 --> 00:18:44,060
Ukazuje se, že požadavky HTTP může používat
sloveso "dostat", jako jsme viděli předtím,

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

406
00:18:45,070 --> 00:18:47,030
A uvidíte rozdíl
z toho za chvíli.

407
00:18:47,030 --> 00:18:48,363
Pojďme skutečně vidět, co to je.

408
00:18:48,363 --> 00:18:49,830
Nech mě jít zpět na stránku Stanfordu.

409
00:18:49,830 --> 00:18:53,330
Jaká forma to mluví
o, o tom myslíš?

410
00:18:53,330 --> 00:18:54,485
Co vyskočí na vás?

411
00:18:54,485 --> 00:18:54,970
>> Diváků: Vyhledávací pole.

412
00:18:54,970 --> 00:18:55,845
>> David J. Malan: Jo.

413
00:18:55,845 --> 00:18:58,410
Tak se v pravém horním rohu
Zde je to vyhledávacího pole.

414
00:18:58,410 --> 00:19:02,441
A to je způsob, jakým realizován to--
tag, který je doslova pod širým držák forma.

415
00:19:02,441 --> 00:19:03,940
A pak pojďme něco hledat.

416
00:19:03,940 --> 00:19:09,220
Pojďme hledat kamaráda
z mine-- "Nick Parlante."

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

418
00:19:11,380 --> 00:19:13,750
A samozřejmě, to šlo
trochu jiný URL.

419
00:19:13,750 --> 00:19:15,140
Nech mě jít zpátky.

420
00:19:15,140 --> 00:19:18,960
Pojďme hledat "kurzy."

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

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

423
00:19:20,484 --> 00:19:23,400
Takže, Stanford je přidání nějaké kouzlo
že oni mě brát na adresu URL

424
00:19:23,400 --> 00:19:25,820
které jsme viděli v
atributu tam akce.

425
00:19:25,820 --> 00:19:32,480
Ale tato forma je zde realizována ryze
prostřednictvím této přirážky tady, tyto značky.

426
00:19:32,480 --> 00:19:35,710
Ve skutečnosti, zde je vstup pro
typ vyhledávání, které chcete.

427
00:19:35,710 --> 00:19:38,940
Zde je vstup pro
jiný typ vyhledávání.

428
00:19:38,940 --> 00:19:41,960
Zde je vstup pro samotný řetězec.

429
00:19:41,960 --> 00:19:45,394
A tak cílem není zabalit
naše mysl kolem všech těchto značek

430
00:19:45,394 --> 00:19:46,060
ale prostě vidět.

431
00:19:46,060 --> 00:19:48,300
Je to prostě otevírání a zavírání
tagy a hledají věci.

432
00:19:48,300 --> 00:19:48,560
To jo?

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

434
00:19:48,920 --> 00:19:49,795
>> Diváků: [neslyšitelné]

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

436
00:19:51,925 --> 00:19:53,550
David J. Malan: To je dobrá otázka.

437
00:19:53,550 --> 00:19:54,660
To je trochu složitější vidět.

438
00:19:54,660 --> 00:19:56,300
Dovolte mi, abych se vrátil k tomu
otázka několika málo minut

439
00:19:56,300 --> 00:19:59,000
když se podíváme na takzvaný
CSS, nebo kaskádové styly,

440
00:19:59,000 --> 00:20:02,500
a můžeme se pokusit odvodit
jak hodně ze stránky.

441
00:20:02,500 --> 00:20:08,090
Takže pokud bychom se teď podívat na google.com,
podívejme se, co jejich strana vypadá.

442
00:20:08,090 --> 00:20:09,840
Ty by they're-- to roztomilé dnes.

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

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

445
00:20:12,990 --> 00:20:13,690
Vše hotovo.

446
00:20:13,690 --> 00:20:15,260
V pořádku, takže View Source.

447
00:20:15,260 --> 00:20:19,590
Člověk by si myslel Google má
opravdu pěkné zdrojový kód.

448
00:20:19,590 --> 00:20:24,970
Takže, zdá se, že to, co se tady děje?

449
00:20:24,970 --> 00:20:27,880
A ve skutečnosti, to není ani HTML.

450
00:20:27,880 --> 00:20:30,930
To je něco, co nazývá JavaScript.

451
00:20:30,930 --> 00:20:32,344
A pojďme dál a dál.

452
00:20:32,344 --> 00:20:34,010
Já ani nevím, kde začíná stránky.

453
00:20:34,010 --> 00:20:37,240
Chystám se použít příkaz
F, otevřený držák HTML.

454
00:20:37,240 --> 00:20:38,200
Dobře, tady to je.

455
00:20:38,200 --> 00:20:44,150
Zjistil jsem, začátek stránky a
tam je tolik věcí zde.

456
00:20:44,150 --> 00:20:45,310
>> Co se vlastně děje?

457
00:20:45,310 --> 00:20:47,460
No, víte co,
můžeme vyčistit to.

458
00:20:47,460 --> 00:20:52,109
Pokud bych místo toho jít do toho Zkontrolujte
Panel nástrojů, tato speciální diagnostický nástroj,

459
00:20:52,109 --> 00:20:54,150
a nechoďte do sítě,
kde jsme jít dál dnes,

460
00:20:54,150 --> 00:20:56,420
ale když jdu na Elements
co je opravdu pěkné

461
00:20:56,420 --> 00:20:59,990
je to, že prohlížeč má hodně
mnohem lepší oči než já.

462
00:20:59,990 --> 00:21:02,670
A prohlížeč umí číst
že nepořádek z webové stránky,

463
00:21:02,670 --> 00:21:04,700
že HTML mailu jsme právě
Podíval se na, a to může

464
00:21:04,700 --> 00:21:08,340
rozebere ho nebo číst a
analyzovat a přeformátovat

465
00:21:08,340 --> 00:21:09,910
v pěkné člověka příjemným způsobem.

466
00:21:09,910 --> 00:21:11,740
Takže to, co jsem teď viděl
V této obrazovce zde

467
00:21:11,740 --> 00:21:15,470
pod Elements, přesně stejný obsah,
ale už odsazeny všechno,

468
00:21:15,470 --> 00:21:18,140
obarvit, že jsem to, ale
to je přesně stejný text

469
00:21:18,140 --> 00:21:19,620
že jsem si stáhnul ze serveru.

470
00:21:19,620 --> 00:21:23,630
>> A co je teď Nice je vidím
v těle, pro instance-- oznámení

471
00:21:23,630 --> 00:21:26,480
stránka je stále složena
of jen hlava a tělo,

472
00:21:26,480 --> 00:21:28,660
a mohu hierarchicky ponořit zde.

473
00:21:28,660 --> 00:21:32,420
Všimněte si, že Google Zdá se, že
aby divs-- tohle a tohle.

474
00:21:32,420 --> 00:21:33,310
Mohu rozšiřovat to.

475
00:21:33,310 --> 00:21:35,370
Je tu celá řada dalších divs.

476
00:21:35,370 --> 00:21:36,900
Takže je to trochu složitější.

477
00:21:36,900 --> 00:21:37,400
Ale počkej.

478
00:21:37,400 --> 00:21:40,970
To se zdá být mnohem víc
čitelný, relativně, než toto.

479
00:21:40,970 --> 00:21:43,840
Proč je Google trapné
Samotný pouhým zasláním

480
00:21:43,840 --> 00:21:50,400
tento obrovský nepořádek kódu některých
třídit jen realizovat něco

481
00:21:50,400 --> 00:21:53,640
to vypadá tak jednoduše na první pohled?

482
00:21:53,640 --> 00:21:55,270
Stejně jako, proč ne oni přidat více mezer?

483
00:21:55,270 --> 00:21:56,811
Proč to stisknutím klávesy Enter, jako jsem to udělal?

484
00:21:56,811 --> 00:21:59,110
Podívejte se, jak dobrý jsem byl
při psaní webové stránky.

485
00:21:59,110 --> 00:22:00,680
Trefil jsem Enter tak pilně.

486
00:22:00,680 --> 00:22:03,760
odsazeny jsem tak vše
Je tak hezká a čitelný.

487
00:22:03,760 --> 00:22:08,463
Proč Google nepraktikuje totéž?

488
00:22:08,463 --> 00:22:11,409
>> Diváků: [neslyšitelné]

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

490
00:22:12,305 --> 00:22:13,180
David J. Malan: Dobrý.

491
00:22:13,180 --> 00:22:14,270
Velmi fér.

492
00:22:14,270 --> 00:22:16,650
Nemají některé
osoba u Googlu manuálně

493
00:22:16,650 --> 00:22:18,160
aktualizace domovské stránky ještě.

494
00:22:18,160 --> 00:22:20,010
Není to už 1999.

495
00:22:20,010 --> 00:22:21,140
Takže oni mají software.

496
00:22:21,140 --> 00:22:25,397
Mají další nástroje, které
generovat dynamicky jsou HTML.

497
00:22:25,397 --> 00:22:27,480
Samozřejmě, že kód sám o sobě
byla napsána lidmi,

498
00:22:27,480 --> 00:22:30,220
ale skutečnost je taková,
je to docela spravedlivé říci,

499
00:22:30,220 --> 00:22:33,340
prohlížeč rozhodně není
jedno, jak chaotický kód je.

500
00:22:33,340 --> 00:22:35,940
Ale je tam ještě
závažný technický důvod

501
00:22:35,940 --> 00:22:42,580
že Google distribuuje své HTML
Kód v takové nedbalý, zdánlivě

502
00:22:42,580 --> 00:22:48,350
Drtivá způsob, jak vše zabaleno dohromady
s velmi málo way-- velmi málo

503
00:22:48,350 --> 00:22:51,274
ve způsobu formátování jako já.

504
00:22:51,274 --> 00:22:52,570
>> Diváků: [neslyšitelné]

505
00:22:52,570 --> 00:22:53,528
>> David J. Malan: Rychlejší?

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

507
00:22:54,040 --> 00:22:55,680
A co jsi řekl, Lydie?

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

509
00:22:56,240 --> 00:22:57,281
Proč rychleji?

510
00:22:57,281 --> 00:22:58,156
Diváků: [neslyšitelné]

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

512
00:23:00,522 --> 00:23:02,230
David J. Malan: Existuje
žádný prostor pro čtení.

513
00:23:02,230 --> 00:23:02,730
To jo.

514
00:23:02,730 --> 00:23:04,560
Takže přemýšlet o tom, co je to prostor.

515
00:23:04,560 --> 00:23:08,394
Takže každý znak na klávesnici se
určité množství prostoru pro reprezentaci,

516
00:23:08,394 --> 00:23:10,560
buď fyzicky, to líbí
zabírá že mnoho prostoru,

517
00:23:10,560 --> 00:23:13,250
nebo nějak Vespod
digestoř, která vyžaduje paměť.

518
00:23:13,250 --> 00:23:15,740
A jako aside-- a my
mluvit víc o tomto tomorrow--

519
00:23:15,740 --> 00:23:19,930
každá postava na klávesnici
obvykle vyžaduje 8 bitů, nebo jeden bajt.

520
00:23:19,930 --> 00:23:23,360
Takže vzor 8 nul nebo
Ti, nebo jen jeden bajt, jak jsme

521
00:23:23,360 --> 00:23:24,720
by lidé obvykle říkají.

522
00:23:24,720 --> 00:23:27,690
Tak to je malý, ale
je to stále non-nula.

523
00:23:27,690 --> 00:23:29,940
Je to stále určité množství prostoru.

524
00:23:29,940 --> 00:23:36,082
Takže pokud inženýr nebo Google hity
mezerníku jen jednou, a předpokládejme

525
00:23:36,082 --> 00:23:38,540
Google-- je to super-popular--
Předpokládejme, že miliarda lidí

526
00:23:38,540 --> 00:23:40,780
navštívit jejich domovskou stránku denně,
nebo nějaký počet osob

527
00:23:40,780 --> 00:23:43,290
navštívit domov strana A
miliardy krát denně,

528
00:23:43,290 --> 00:23:48,890
kolik dalších bytů má tu
Softwarový inženýr prostě stojí Google

529
00:23:48,890 --> 00:23:51,310
tím, že udeří jeho nebo její Mezerník jednou?

530
00:23:51,310 --> 00:23:52,692
>> Diváků: [neslyšitelné]

531
00:23:52,692 --> 00:23:54,150
David J. Malan: Ne tak docela tak špatné.

532
00:23:54,150 --> 00:23:57,070
Jen jeden krát byte miliardy.

533
00:23:57,070 --> 00:23:57,871
tak je--

534
00:23:57,871 --> 00:23:59,120
Diváků: 8 miliard gigabajtů.

535
00:23:59,120 --> 00:24:00,370
David J. Malan: Není 8000000000.

536
00:24:00,370 --> 00:24:01,240
8 miliarda bytů.

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

538
00:24:02,410 --> 00:24:04,080
1 GB bude měrná jednotka.

539
00:24:04,080 --> 00:24:08,240
Jestliže on nebo ona dělá dva
prostory, 2 GB.

540
00:24:08,240 --> 00:24:09,030
Tři gigabajtů.

541
00:24:09,030 --> 00:24:09,530
Právo?

542
00:24:09,530 --> 00:24:11,860
To váhy nákladně.

543
00:24:11,860 --> 00:24:16,150
A tak v případech, jako je Google,
která udělil, jsou extrémní případy,

544
00:24:16,150 --> 00:24:21,450
existují i ​​jiné problémy, které vznikají právě
tím, že velmi rozumné rozhodnutí

545
00:24:21,450 --> 00:24:25,744
nebo při velmi prosté lidské činnosti,
proto, že má tento zvětšený účinek.

546
00:24:25,744 --> 00:24:27,660
Takže jeden z důvodů
to vypadá tak stlačený

547
00:24:27,660 --> 00:24:30,660
je přesně tak, jak to bylo Victoria said--
Jen generovaný počítačem tak jako tak.

548
00:24:30,660 --> 00:24:31,900
Takže žádný velký problém.

549
00:24:31,900 --> 00:24:33,309
Nechte prohlížeč na to přijít.

550
00:24:33,309 --> 00:24:35,350
Ale také záměrně
nemá moc prostoru,

551
00:24:35,350 --> 00:24:36,766
proto, že prostor není nutné.

552
00:24:36,766 --> 00:24:38,250
A prostor skutečně stojí peníze.

553
00:24:38,250 --> 00:24:40,670
>> Je to buď stojí čas,
protože jen aby se zasadila

554
00:24:40,670 --> 00:24:44,670
že mnohem více dat z
webu Google.com hlavní stan jen

555
00:24:44,670 --> 00:24:47,710
má vzít nějaké množství
čas, i když je to milisekund

556
00:24:47,710 --> 00:24:51,190
nebo mikrosekund, ale to sečte
přes tak mnoho uživatelů, nebo spíše,

557
00:24:51,190 --> 00:24:52,270
to asi stojí peníze.

558
00:24:52,270 --> 00:24:54,690
Google zřejmě připojí k
někdo jiný na světě, jeden

559
00:24:54,690 --> 00:24:56,398
z těch, peering
body, a pokud budou mít

560
00:24:56,398 --> 00:24:59,880
nějaký druh finančního vztahu
přičemž jejich data stojí peníze,

561
00:24:59,880 --> 00:25:01,730
mohli by stejně
minimalizovat, jak velké množství dat

562
00:25:01,730 --> 00:25:04,530
oni plivat na
Jejich připojení k internetu.

563
00:25:04,530 --> 00:25:07,630
>> Takže legrační věc, ale nakonec,
nebo možná uklidňující věc,

564
00:25:07,630 --> 00:25:11,030
je to, že i když to vypadá nesmírně
ohromující, na konci dne,

565
00:25:11,030 --> 00:25:16,750
je to stále přesně stejné zásady jako
Tento velmi jednoduchá stránka zde z HTML

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

567
00:25:17,390 --> 00:25:20,610
Takže jen shrnout a tak, abyste
mají kanonickou verzi, pokud jste nebyli

568
00:25:20,610 --> 00:25:25,900
Následující spolu volbou zde, zde
může být nejjednodušší webových stránek,

569
00:25:25,900 --> 00:25:28,240
takže něco hrát s snad později.

570
00:25:28,240 --> 00:25:30,790
>> Dobře, pojďme zavést
Pár dalších nápadů teď.

571
00:25:30,790 --> 00:25:33,420
Chystáme se zavádět
něco, co nazývá styl značky.

572
00:25:33,420 --> 00:25:38,110
Můžeme stylizovat tuto stránku
V další zajímavé způsoby.

573
00:25:38,110 --> 00:25:40,860
Takže zatímco HTML e-mail
vše o značkování

574
00:25:40,860 --> 00:25:44,470
data, druh uvedením do A
browser, jak strukturovat data,

575
00:25:44,470 --> 00:25:48,110
kam umístit to, CSS, nebo
Kaskádové styly,

576
00:25:48,110 --> 00:25:52,640
je druhý jazyk, který
obvykle dostane smíšeny s HTML

577
00:25:52,640 --> 00:25:55,670
jak budeme see-- ale můžeme čistit
že až do moment--, který bere

578
00:25:55,670 --> 00:25:59,850
to finále míle, a to ho stylizuje.

579
00:25:59,850 --> 00:26:02,460
To dostane barvy tak akorát,
velikostí písma tak akorát,

580
00:26:02,460 --> 00:26:03,860
polohovací tak akorát.

581
00:26:03,860 --> 00:26:06,510
Je to všechno o estetice
nebo formátování, ne o

582
00:26:06,510 --> 00:26:08,330
Základním samotná data.

583
00:26:08,330 --> 00:26:11,390
A nejjednodušší způsob, jak ukázat
toto je možná příkladem.

584
00:26:11,390 --> 00:26:15,320
Takže jdu projít
mého jednoduchého textového souboru.

585
00:26:15,320 --> 00:26:17,970
A za chvíli, budu
chodit k nám prostřednictvím procesu

586
00:26:17,970 --> 00:26:19,360
dělat to sami.

587
00:26:19,360 --> 00:26:23,310
>> Chystám se vrátit do svého souboru
tady a obnovte stránku právě

588
00:26:23,310 --> 00:26:25,800
Pro potvrzení, jak to vypadá.

589
00:26:25,800 --> 00:26:27,190
To je to, kde jsme teď.

590
00:26:27,190 --> 00:26:31,170
Mám pocit, že děti by se nyní
mají nějaké barvy na této webové stránce.

591
00:26:31,170 --> 00:26:34,480
Takže já jdu sem nahoru
do záhlaví stránky.

592
00:26:34,480 --> 00:26:38,130
A já udělám styl, / styl.

593
00:26:38,130 --> 00:26:44,060
A pak uvnitř toho jdu
sdělit tělo mé page--

594
00:26:44,060 --> 00:26:46,870
a to formátování, v
první pohled možná trochu

595
00:26:46,870 --> 00:26:49,400
divně, ale konvenční.

596
00:26:49,400 --> 00:26:55,010
Chystám se říci, že na pozadí
barva této stránce by měly být zelené.

597
00:26:55,010 --> 00:26:57,960
A to je bohužel
druh není nejlepší návrh.

598
00:26:57,960 --> 00:27:00,710
Všimněte si, že dříve
ve světě HTML,

599
00:27:00,710 --> 00:27:03,190
Řekl jsem, že atributy
jsou tyto dvojice klíč-hodnota.

600
00:27:03,190 --> 00:27:05,760
Něco se rovná cenovou nabídku
konec citátu "něco".

601
00:27:05,760 --> 00:27:08,810
Ve světě, který byl CSS
navržený některými jinými lidmi,

602
00:27:08,810 --> 00:27:11,020
oni se rozhodli, že v jejich
world, klíč-hodnota páry

603
00:27:11,020 --> 00:27:13,920
by bylo slovo něco tlustého střeva.

604
00:27:13,920 --> 00:27:15,220
Takže je to stejná myšlenka, ačkoli.

605
00:27:15,220 --> 00:27:18,620
Je to sdružující hodnotu
s některými klíč, který nějakým způsobem

606
00:27:18,620 --> 00:27:20,330
ovlivňuje chování této stránce.

607
00:27:20,330 --> 00:27:21,901
>> A asi tušíte.

608
00:27:21,901 --> 00:27:24,150
Co je to pravděpodobně bude
dělat to iv případě, že jste nikdy

609
00:27:24,150 --> 00:27:27,867
Viděl HTML nebo CSS předtím?

610
00:27:27,867 --> 00:27:29,450
Diváků: Změna barvy pozadí.

611
00:27:29,450 --> 00:27:30,560
David J. Malan: Jo,
změnit barvu pozadí.

612
00:27:30,560 --> 00:27:33,280
A specificky
barva pozadí těla.

613
00:27:33,280 --> 00:27:36,290
Ale pokud tato
Tělo teď je web

614
00:27:36,290 --> 00:27:38,870
page-- je to jediná věc,
pod záhlaví really--

615
00:27:38,870 --> 00:27:40,870
to asi bude
ovlivní to samé.

616
00:27:40,870 --> 00:27:41,430
Takže uvidíme.

617
00:27:41,430 --> 00:27:42,490
Zachraňme to.

618
00:27:42,490 --> 00:27:44,310
Jít sem a znovu.

619
00:27:44,310 --> 00:27:46,140
Je to docela odporný.

620
00:27:46,140 --> 00:27:48,070
A co se děje
Zde je vedlejším účinkem.

621
00:27:48,070 --> 00:27:49,850
Jen jsem si vybral tento obrázek náhodně.

622
00:27:49,850 --> 00:27:53,305
Proč je zelený není
prostupující za Mickey?

623
00:27:53,305 --> 00:27:54,180
Diváků: [neslyšitelné]

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

625
00:27:56,880 --> 00:27:57,880
David J. Malan: Přesně tak.

626
00:27:57,880 --> 00:28:01,750
Ukazuje se, že obrazy, pěkný
mnoho všechny obrázky, které bychom mohli použít,

627
00:28:01,750 --> 00:28:03,670
jsou všechny rectangles-- obdélníků.

628
00:28:03,670 --> 00:28:07,710
I v případě, Mickey má některé křivky
pro sebe a má zázemí,

629
00:28:07,710 --> 00:28:09,330
že pozadí musí být něco.

630
00:28:09,330 --> 00:28:10,280
Musí být bílá.

631
00:28:10,280 --> 00:28:11,910
To má být černý nebo něco jiného.

632
00:28:11,910 --> 00:28:13,650
To může být transparentní.

633
00:28:13,650 --> 00:28:16,100
A ve skutečnosti, mohl bych
otevřít Mickey Mouse zde

634
00:28:16,100 --> 00:28:18,590
v programu s názvem Photoshop
nebo něco podobného

635
00:28:18,590 --> 00:28:21,176
a změnit všechny ta bílá
pozadí na průhledné,

636
00:28:21,176 --> 00:28:22,550
takže zelená bude prosvítat.

637
00:28:22,550 --> 00:28:25,980
Ale to je něco, co by bylo třeba
požádat o sobě nebo grafik

638
00:28:25,980 --> 00:28:28,130
nebo designer v mém
společnost, například,

639
00:28:28,130 --> 00:28:31,490
dělat, zejména proto, že jsem právě
půjčil tenhle z internetu.

640
00:28:31,490 --> 00:28:33,030
Ale to je důvod, proč se to děje.

641
00:28:33,030 --> 00:28:34,980
>> Tak co ještě můžeme udělat?

642
00:28:34,980 --> 00:28:41,040
No, možná chceme říci, že jsme
Opravdu doufám, že si můžete vychutnat svůj pobyt.

643
00:28:41,040 --> 00:28:44,150
A pro důraz, chci
aby tento silný,

644
00:28:44,150 --> 00:28:48,310
a tak řeknu otevřený a silný
zavřít silný a pak znovu načíst.

645
00:28:48,310 --> 00:28:50,320
A je to trochu těžké
zobrazit na projektoru

646
00:28:50,320 --> 00:28:53,250
ale snad opravdu teď
vyskočí na vás trochu víc.

647
00:28:53,250 --> 00:28:56,180
Takže můžete přidávat kurzívu v tomto
způsob, tučné obklad tímto způsobem.

648
00:28:56,180 --> 00:28:57,500
Mohli bychom změnit barvy.

649
00:28:57,500 --> 00:29:01,610
Ve skutečnosti je jen pro zábavu, jsem
jít dopředu a to udělat.

650
00:29:01,610 --> 00:29:05,120
Nemám opravdu rád, jak my
odstavce jsou to blízko u sebe,

651
00:29:05,120 --> 00:29:06,870
takže jsem mohl udělat něco takového.

652
00:29:06,870 --> 00:29:13,310
Chystám se říct, prohlížeč,
se mění každý bod značku mají,

653
00:29:13,310 --> 00:29:16,952
pojďme say-- ve skutečnosti, víte, co,
pojďme sladit to text-align, centrum.

654
00:29:16,952 --> 00:29:19,410
A opět, vím, že to jen
Vzhledem k tomu, někdo mě naučil

655
00:29:19,410 --> 00:29:21,118
nebo Vyhledal jsem si to v
online reference.

656
00:29:21,118 --> 00:29:22,450
Takže dovolte mi zachránit to.

657
00:29:22,450 --> 00:29:25,070
A, ach, teď jsem
soustředěný obraz tam.

658
00:29:25,070 --> 00:29:28,490
A skutečně, víte co, pokud
Pohnu obrazu do odstavce

659
00:29:28,490 --> 00:29:34,510
tag-- takže třetí odstavec,
i když to není text.

660
00:29:34,510 --> 00:29:36,917
Zachraňme to a znovu.

661
00:29:36,917 --> 00:29:40,000
Nyní je stránka začíná vypadat druh
of-- Myslím, že je to stále dost ošklivý,

662
00:29:40,000 --> 00:29:43,180
ale alespoň to vypadá, že jsem strávila
Dvě minuty namísto jedna minuta

663
00:29:43,180 --> 00:29:43,950
dělat to.

664
00:29:43,950 --> 00:29:47,200
>> A tak postupně, můžeme učinit
Tyto estetické změny teď stránce?

665
00:29:47,200 --> 00:29:50,860
Jsem příliš nezměnil údajů v systému
Strana jiné než přidáním slova vážně.

666
00:29:50,860 --> 00:29:52,650
Přidal jsem metadata, chcete-li.

667
00:29:52,650 --> 00:29:54,830
Hej, prohlížeče, aby se
Slovo "opravdu" tučně.

668
00:29:54,830 --> 00:29:56,940
Ale data není silná.

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

670
00:29:57,830 --> 00:29:59,410
Data jsou "opravdu".

671
00:29:59,410 --> 00:30:02,200
Takže máme ještě některé
stejné pojmy jako předtím.

672
00:30:02,200 --> 00:30:05,990
Nyní, samozřejmě, to není na webu,
takže budu dělat jeden poslední krok zde.

673
00:30:05,990 --> 00:30:10,300
>> Chystám se jít do hello.html
a jen zvýraznit a kopírovat to.

674
00:30:10,300 --> 00:30:12,285
A teď jdu
jít do Cloud9, který

675
00:30:12,285 --> 00:30:13,910
Tě projít za chvíli.

676
00:30:13,910 --> 00:30:17,080
A šance, že budete brzy, pokud
Není již na obrazovce, jako je tento.

677
00:30:17,080 --> 00:30:21,080
A dovolte mi, abych vám rychlý
Prohlídka co Cloud9 ve skutečnosti je.

678
00:30:21,080 --> 00:30:26,590
Takže znovu Cloud 9 je
Tato služba cloud-based

679
00:30:26,590 --> 00:30:30,580
že vy a mi dává iluzi
mít svůj vlastní virtuální stroj

680
00:30:30,580 --> 00:30:33,090
v cloudu, technicky
kontejner v cloudu,

681
00:30:33,090 --> 00:30:35,160
že máme plné
oprávnění správce.

682
00:30:35,160 --> 00:30:37,130
Takže teoreticky, nikdo
jinde ve světě nemá

683
00:30:37,130 --> 00:30:39,152
Přístup na obrazovku Jsem
při pohledu na právě teď,

684
00:30:39,152 --> 00:30:40,860
snad s výjimkou lidí
kteří běží na webu,

685
00:30:40,860 --> 00:30:43,470
protože technicky mají
fyzický přístup a tak dále.

686
00:30:43,470 --> 00:30:44,740
>> Tak co vidíme v tomto prostředí?

687
00:30:44,740 --> 00:30:46,230
Chystám se vzdálíte,
protože je to trochu malé.

688
00:30:46,230 --> 00:30:48,104
A dovolte mi připomenout, přes
Zde jen na chvíli.

689
00:30:48,104 --> 00:30:53,210
Na levé straně mého a vaše
obrazovce, je tu prohlížeč souborů na levé straně.

690
00:30:53,210 --> 00:30:55,362
Takže svým duchem podobat
Mac OS a Windows.

691
00:30:55,362 --> 00:30:57,070
To jsou všechny
Soubory na mém účtu.

692
00:30:57,070 --> 00:30:59,250
A ve výchozím nastavení, pokud vaše
Účet je jako moje,

693
00:30:59,250 --> 00:31:05,090
uvidíte nebo brzy vidět
helloworld.html a readme.md.

694
00:31:05,090 --> 00:31:07,950
Tady na pravé straně, to je
kde jsou mé textové soubory se chystáte jít.

695
00:31:07,950 --> 00:31:11,620
Pokud jste někdy používali Microsoft
Word nebo Poznámkový blok nebo TextEdit,

696
00:31:11,620 --> 00:31:14,100
To je slovo, moje editace
souborů se chystá jít.

697
00:31:14,100 --> 00:31:16,540
A pak nejobskurnější
Funkce tohoto prostředí

698
00:31:16,540 --> 00:31:20,100
že nebudeme opravdu potřeba použít, je
sem volal okno terminálu.

699
00:31:20,100 --> 00:31:23,390
Pokud jste použili DOS od
minulý rok, to je Linux

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

701
00:31:25,450 --> 00:31:28,190
Je to text-based interface--
žádné kliknutí myší, ne tažením.

702
00:31:28,190 --> 00:31:30,770
Jediné, co můžete udělat, je zadat
příkazy, ale tyto příkazy

703
00:31:30,770 --> 00:31:34,400
může vytvářet soubory, přesouvat soubory, otevřené
adresáře, v blízkosti adresáře,

704
00:31:34,400 --> 00:31:35,740
udělat libovolný počet věcí.

705
00:31:35,740 --> 00:31:38,060
Ale teď, prostě budeme
trávit čas tady.

706
00:31:38,060 --> 00:31:39,050
>> A tak jdeme na to.

707
00:31:39,050 --> 00:31:41,008
Pokud jste v této
Prostředí, které byste měli

708
00:31:41,008 --> 00:31:45,900
bylo, kdyby jste vytvořili pracovní prostředí
Již, jděte do toho a prostě jít nahoru

709
00:31:45,900 --> 00:31:48,690
do souboru, Nový chvíli.

710
00:31:48,690 --> 00:31:51,740
A to vám dá nový
Karta tady uprostřed.

711
00:31:51,740 --> 00:31:54,250
A já jen-- a pojďme
jděte do toho a toho dosáhnout.

712
00:31:54,250 --> 00:31:59,910
Pojďme dál a teď se souboru, uložte
a jít dopředu a nazývat to hello.html,

713
00:31:59,910 --> 00:32:02,740
nesmí být zaměňována s
helloworld.html, který

714
00:32:02,740 --> 00:32:06,910
přišel se svým novým účtu zdarma,
což je jen ukázkový soubor.

715
00:32:06,910 --> 00:32:11,020
Uvidíte, že se náhle objeví,
s největší pravděpodobností na levé straně,

716
00:32:11,020 --> 00:32:12,810
a karta bude stále otevřený.

717
00:32:12,810 --> 00:32:21,300
A dovolte, abych vás povzbudit nyní znovu
tento soubor nebo některé jejich varianty.

718
00:32:21,300 --> 00:32:24,607
A pokud si není úplně vidět jej na
obrazovky, to je totožný s sklíčka

719
00:32:24,607 --> 00:32:26,190
že máte pravděpodobně na jiné kartě.

720
00:32:26,190 --> 00:32:29,296
>> Takže ve zkratce, aby vaše první webové stránky,
uložte jej a pak za chvíli,

721
00:32:29,296 --> 00:32:31,170
Ukážu vám, jak se
může skutečně zobrazit toto.

722
00:32:31,170 --> 00:32:32,970
Ale změnit alespoň jednu věc.

723
00:32:32,970 --> 00:32:35,400
Změnit HelloWorld na
něco vlastního výběru,

724
00:32:35,400 --> 00:32:39,821
takže jste přesvědčeni, že je to vaše
soubor a ne ten, který právě jsem vytvořil.

725
00:32:39,821 --> 00:32:40,320
Dobře.

726
00:32:40,320 --> 00:32:43,804
A když jste ready-- ne
rush--, když jste připraveni,

727
00:32:43,804 --> 00:32:46,220
jděte do toho a uložte soubor
Po provedení těchto změn.

728
00:32:46,220 --> 00:32:49,540
A pokud kliknete na
Běžet tlačítka nahoru top, toto

729
00:32:49,540 --> 00:32:53,610
měl otevřít novou kartu, která bude vyprávět
co máte URL můžete navštívit soubor na,

730
00:32:53,610 --> 00:32:56,380
ale může to chvíli trvat, než k
quote konec citátu "start Apache", který

731
00:32:56,380 --> 00:32:58,820
je název webového serveru.

732
00:32:58,820 --> 00:33:02,430
Takže buďte opatrní a dělat přesně
co je v souboru nakonec.

733
00:33:02,430 --> 00:33:04,610
Takže teď, budu přiblížit.

734
00:33:04,610 --> 00:33:07,780
Mám-li začít psát
open-držák HTML, vývěsní

735
00:33:07,780 --> 00:33:09,650
to mě výzvou dokončit svou myšlenku.

736
00:33:09,650 --> 00:33:13,750
A když jsem dokončil svou myšlenku, ji
automaticky mi dává uzavírací tag.

737
00:33:13,750 --> 00:33:17,190
Ale očekávání se pak budu hit
Vstoupit, a pak se přesunout tam uvnitř

738
00:33:17,190 --> 00:33:21,180
a to hlavu dovnitř a
pak jsem si tělo uvnitř.

739
00:33:21,180 --> 00:33:24,430
A je to trochu divné na první,
protože to dělá práci za vás,

740
00:33:24,430 --> 00:33:27,110
ale uvědomit, že v konečném důsledku
to vám ušetří stisky kláves.

741
00:33:27,110 --> 00:33:30,500
A ve skutečnosti, velmi častým znakem
programovací prostředí v těchto dnech

742
00:33:30,500 --> 00:33:33,260
a to jak pro vývoj webových aplikací, jako je
Tento a skutečné programování,

743
00:33:33,260 --> 00:33:36,960
které budeme hovořit o budoucnosti,
Právě tyto auto-kompletní funkce,

744
00:33:36,960 --> 00:33:39,710
věci, které prostě umožňovat
programátor nebo designer

745
00:33:39,710 --> 00:33:42,010
psát méně úhozy
dokázat totéž.

746
00:33:42,010 --> 00:33:43,176
Někdy je to dobře, ačkoli.

747
00:33:43,176 --> 00:33:44,560
Někdy je to jen nepříjemné.

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

749
00:33:49,290 --> 00:33:54,010
A opět, jakmile jste přepisována
posuvná nebo nějakou její variantu,

750
00:33:54,010 --> 00:33:57,360
můžete kliknout na tlačítko Spustit do vrcholu.

751
00:33:57,360 --> 00:33:59,910
A pak se na dně
okna, budete informováni

752
00:33:59,910 --> 00:34:04,290
na to, co URL můžete navštívit své webové stránky.

753
00:34:04,290 --> 00:34:08,790
Dolu, například, je v
business-daharvard.c9users.io

754
00:34:08,790 --> 00:34:11,480
a tak dále.

755
00:34:11,480 --> 00:34:14,580
Dobře, takže, ať me-- nějaké dotazy?

756
00:34:14,580 --> 00:34:19,460
Jakékoliv další otázky týkající se jen na to,
tento pracovní předtím, než jsme přidat funkce?

757
00:34:19,460 --> 00:34:21,692
A dovolte mi navrhnout, jen
dostat lidi comfortable--

758
00:34:21,692 --> 00:34:24,400
protože to je jedna věc jen
copy-paste slepě, co jsem udělal.

759
00:34:24,400 --> 00:34:27,177
Ale jen proto, aby lidé zápasit
s alespoň jednou to-do,

760
00:34:27,177 --> 00:34:28,510
Jdu zapnout nějakou hudbu.

761
00:34:28,510 --> 00:34:32,630
Chystám se navrhnout seznam
věci, které mohou potenciálně přidat.

762
00:34:32,630 --> 00:34:34,086
A můžete samozřejmě použít Google.

763
00:34:34,086 --> 00:34:36,210
A proč ne my jen
navrhuji pokusu o vyřešení

764
00:34:36,210 --> 00:34:38,710
alespoň jeden zde zvláštní problém.

765
00:34:38,710 --> 00:34:45,090
Takže, pokud jde o značky,
dovolte mi, abych znovu použít tohle.

766
00:34:45,090 --> 00:34:48,280
>> Ve skutečnosti, dovolte mi, abych dal
že v textové podobě.

767
00:34:48,280 --> 00:35:02,380
Řekněme, že mezi značkami bychom mohli
použijte zde jsou některé značky tady.

768
00:35:02,380 --> 00:35:06,090
Viděli jsme odstavce značku.

769
00:35:06,090 --> 00:35:07,850
Teď to bude auto-kompletní.

770
00:35:07,850 --> 00:35:12,220
Odstavec tag, kotva tag.

771
00:35:12,220 --> 00:35:15,250
Řekněme, že chcete
aby se něco větší,

772
00:35:15,250 --> 00:35:19,480
takže je možné jako--
Rozpětí tag může pomoci.

773
00:35:19,480 --> 00:35:23,010
No, možná budete potřebovat nějakou pomoc
za to za chvíli.

774
00:35:23,010 --> 00:35:24,830
Viděli jsme div.

775
00:35:24,830 --> 00:35:26,170
Uvidíte tu tabulku.

776
00:35:26,170 --> 00:35:27,928
Existuje něco, co nazývá 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
Vrať se k tomu za chvíli.

780
00:35:34,770 --> 00:35:36,590
Co jiného by mohlo být užitečné?

781
00:35:36,590 --> 00:35:38,310
Tam je silná.

782
00:35:38,310 --> 00:35:43,640
Tam je důraz, nebo spíše em.

783
00:35:43,640 --> 00:35:50,110
There's-- co jiného
Možná máte chuť tady?

784
00:35:50,110 --> 00:35:51,930
No, budeme trvat
Podívejte se na to společně.

785
00:35:51,930 --> 00:35:53,230
Formulář, který jsme viděli.

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

787
00:35:54,130 --> 00:35:56,500
K dispozici je vstupní a několik dalších.

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

789
00:35:58,924 --> 00:36:00,090
Dobře, takže jdeme na to.

790
00:36:00,090 --> 00:36:02,330
Chcete-li přijmout Victorie
otázka, dovolte mi nejprve

791
00:36:02,330 --> 00:36:05,020
jen ujistit, že všichni
schopný dostat své ahoj práci.

792
00:36:05,020 --> 00:36:06,900
Pak dovolte mi představit
pár dalších nápadů.

793
00:36:06,900 --> 00:36:09,209
Pak necháme lidi řešit
nějaký problém na vlastní pěst.

794
00:36:09,209 --> 00:36:11,500
Pak budeme vlastně vracet
do tohoto pojmu formuláře,

795
00:36:11,500 --> 00:36:14,950
a my vlastně re-implementovat
spolu front-end rozhraní,

796
00:36:14,950 --> 00:36:16,450
tak říkajíc, pro společnost Google.

797
00:36:16,450 --> 00:36:19,700
Budeme používat Google jako back end a nechat
je dělat těžkou práci bude hledání,

798
00:36:19,700 --> 00:36:22,760
ale budeme znovu předek
Google a vyhledávacího formuláře

799
00:36:22,760 --> 00:36:24,520
že mají na své vlastní domovské stránce.

800
00:36:24,520 --> 00:36:27,050
A tak se vrátíme k
tyto značky za chvíli.

801
00:36:27,050 --> 00:36:30,270
>> Tak tohle bylo to, co jsem
Navrhovaná před chvílí.

802
00:36:30,270 --> 00:36:33,940
Můžeme přidat stylizaci do A
stránky odpovídá tohoto stylu tagu

803
00:36:33,940 --> 00:36:36,950
a můžeme stylizovat pozadí
barva, zarovnání textu,

804
00:36:36,950 --> 00:36:39,000
ať už je to střed nebo vlevo či vpravo.

805
00:36:39,000 --> 00:36:41,630
Ale velmi rychle byste
najít nebo web designer

806
00:36:41,630 --> 00:36:44,060
by se zjistit, že toto
se stává trochu nepraktický,

807
00:36:44,060 --> 00:36:48,330
proto, že děláte to, co je
volal smíchání obsahu

808
00:36:48,330 --> 00:36:50,120
s prezentací z nich.

809
00:36:50,120 --> 00:36:53,756
Ty smíchání svá data
a estetika těchto látek.

810
00:36:53,756 --> 00:36:56,380
A ve skutečnosti, pokud se domníváte,
co se bude dít v průběhu time--

811
00:36:56,380 --> 00:36:58,350
To je velmi malý
webové stránky, samozřejmě.

812
00:36:58,350 --> 00:37:01,590
Ale když jsem přidat obsah na tuto stránku
a přidám styl na tuto stránku,

813
00:37:01,590 --> 00:37:04,650
stránky velmi rychle dostane
delší a delší a delší.

814
00:37:04,650 --> 00:37:07,510
A předpokládám, že chci
mít druhý webovou stránku, která

815
00:37:07,510 --> 00:37:09,010
sdílí některé z těchto atributů.

816
00:37:09,010 --> 00:37:12,350
Předpokládejme, že můj druhý webové stránky pro můj
site-- Vám chci všechno centrum,

817
00:37:12,350 --> 00:37:14,960
i já chci všechno
se zeleným pozadím.

818
00:37:14,960 --> 00:37:17,940
Jsem docela hodně bude muset
zkopírovat a vložit některé z těchto řádků

819
00:37:17,940 --> 00:37:20,730
do tohoto druhého souboru, který se cítí v pořádku.

820
00:37:20,730 --> 00:37:22,030
To bude problém vyřešit.

821
00:37:22,030 --> 00:37:26,060
>> Ale co když chci třetí strana
nebo 30. strana nebo strana 40.?

822
00:37:26,060 --> 00:37:28,730
Teď bude kopírovat a
vkládání hodně duplicitního kódu

823
00:37:28,730 --> 00:37:30,430
ve více souborech.

824
00:37:30,430 --> 00:37:32,600
A tak předpokládám, že
I rozhodnout, nebo mi bylo řečeno,

825
00:37:32,600 --> 00:37:34,780
hej, nejsme s použitím
zeleném pozadí už ne.

826
00:37:34,780 --> 00:37:36,380
Chystáme se začít používat oranžově.

827
00:37:36,380 --> 00:37:38,690
Co budete muset změnit?

828
00:37:38,690 --> 00:37:42,900
No, budete muset změnit tento styl
ze zelené na oranžovou, jak mnoha místech?

829
00:37:42,900 --> 00:37:44,920
Stejně jako 30 nebo 40 míst.

830
00:37:44,920 --> 00:37:45,900
Je to únavné.

831
00:37:45,900 --> 00:37:47,039
To je náchylné k chybám.

832
00:37:47,039 --> 00:37:49,580
K dispozici je celá řada důvodů,
kde byste nechtěli vyvolat

833
00:37:49,580 --> 00:37:51,840
že druh bolesti na sebe.

834
00:37:51,840 --> 00:37:54,760
A tak nebylo by to bylo hezké
kdybychom mohli vzít to, co jsem právě

835
00:37:54,760 --> 00:37:58,240
vložit mezi těmito dvěma žlutý
tagy, tyto tagy styl,

836
00:37:58,240 --> 00:38:04,050
faktor ho a dát všechny mé
stylizace do jednoho centrálního souboru

837
00:38:04,050 --> 00:38:08,470
že všechny 30 nebo 40 z mých dalších souborů
půjčovat z nebo nějakým způsobem odkazovat,

838
00:38:08,470 --> 00:38:11,640
ne na rozdíl od sítě
diagramy jsme dělali předtím?

839
00:38:11,640 --> 00:38:15,030
>> Takže když jdu sem, že jsem
bude ve skutečnosti navrhnout

840
00:38:15,030 --> 00:38:17,880
že nahradit
Styl štítek s něčím

841
00:38:17,880 --> 00:38:21,620
volal link tag, který
Je hrozně, hrozně pojmenovaný,

842
00:38:21,620 --> 00:38:24,370
protože nemusíte používat
link tag vytvořit co

843
00:38:24,370 --> 00:38:26,380
my lidé známe jako odkaz na webové stránce.

844
00:38:26,380 --> 00:38:29,750
Za to, že budete používat která značka?

845
00:38:29,750 --> 00:38:31,464
Jak si vytvořit odkaz na webové stránce?

846
00:38:31,464 --> 00:38:32,130
Publikum: a.

847
00:38:32,130 --> 00:38:34,870
David J. Malan: A, nebo kotva
tag, který šel do Disney předtím.

848
00:38:34,870 --> 00:38:39,090
Odkaz tag zde říká:
tohle-- odkaz na soubor nazvaný

849
00:38:39,090 --> 00:38:44,350
styles.css, vztah, ke kterému
bude, že je to moje stylů.

850
00:38:44,350 --> 00:38:48,290
Takže to je jedna z S letech v
CSS-- kaskádové styly.

851
00:38:48,290 --> 00:38:50,490
Styl sheet-- dva S letech v CSS.

852
00:38:50,490 --> 00:38:52,550
Kaskádových stylů.

853
00:38:52,550 --> 00:38:58,640
To jen znamená, hej, prohlížeč, přejděte
najít styles.css na místním serveru

854
00:38:58,640 --> 00:39:01,870
a použít ji jako svůj stylů,
což znamená, že uvnitř tohoto souboru

855
00:39:01,870 --> 00:39:05,310
bude všechny
stylizace, že jsme právě udělal.

856
00:39:05,310 --> 00:39:07,396
A tak to, co tento soubor
může vypadat jako je tato.

857
00:39:07,396 --> 00:39:10,020
A budu dělat to je rychlý
Například proto, že nepotřebujeme

858
00:39:10,020 --> 00:39:12,000
dostat příliš do plevel zde.

859
00:39:12,000 --> 00:39:17,840
Ale když jsem kopírovat to, co chci navrhnout
je to, že programátor vytvořit nový soubor,

860
00:39:17,840 --> 00:39:24,450
vložit do těchto lines--
whoops-- vložit do těchto linkách,

861
00:39:24,450 --> 00:39:32,270
uložte jej jako styles.css, a pak v
Druhý soubor, odstranit všechny, které

862
00:39:32,270 --> 00:39:35,450
a nahradit ji namísto
s tímto link tag.

863
00:39:35,450 --> 00:39:43,090
Takže když jsem propojit href = "styles.css"
vztah musí být "stylesheet"

864
00:39:43,090 --> 00:39:44,170
V blízkosti tag.

865
00:39:44,170 --> 00:39:45,250
Ulož to.

866
00:39:45,250 --> 00:39:47,000
Vraťte se zpět do mého helloworld.

867
00:39:47,000 --> 00:39:48,690
Reload.

868
00:39:48,690 --> 00:39:51,290
>> Doslova se nic nestalo.

869
00:39:51,290 --> 00:39:54,710
To je dobrá věc, protože to
znamená, že je vlastně všechno funguje.

870
00:39:54,710 --> 00:39:58,860
Dokázat tolik, že bych učinit
překlep, a říkám to "styles.css"

871
00:39:58,860 --> 00:40:03,080
s velkým S, který je
nesprávné, a pak znovu načíst.

872
00:40:03,080 --> 00:40:05,470
Nyní můžete vidět, že prostě nefunguje.

873
00:40:05,470 --> 00:40:06,362
A teď, proč?

874
00:40:06,362 --> 00:40:08,070
Dobře, pojďme použijte
Technika z dřívějška.

875
00:40:08,070 --> 00:40:10,153
Nech mě jít dopředu, a
můj prohlížeč, v Chrome, jsem

876
00:40:10,153 --> 00:40:12,900
chystá otevřít, že zvláštní
Karta sítě jako dříve,

877
00:40:12,900 --> 00:40:15,560
a nech mě znovu načíst stránku.

878
00:40:15,560 --> 00:40:19,341
Co jste nepřekvapilo, že teď vidět?

879
00:40:19,341 --> 00:40:20,840
Nebo možná jste překvapen, když to viděl.

880
00:40:20,840 --> 00:40:23,225
Ať tak či onak, to, co vidíte teď?

881
00:40:23,225 --> 00:40:24,100
Diváků: [neslyšitelné]

882
00:40:24,100 --> 00:40:24,770
David J. Malan: To nebyl nalezen.

883
00:40:24,770 --> 00:40:25,680
Proč je to nebyl nalezen?

884
00:40:25,680 --> 00:40:28,480
No, Styles.css-- kapitál
S- neexistuje.

885
00:40:28,480 --> 00:40:29,230
jej nesprávně pojmenovaný jsem.

886
00:40:29,230 --> 00:40:30,430
Jednoduché překlep.

887
00:40:30,430 --> 00:40:33,816
Ale já jsem stále pochopitelně nyní
404, protože server říká, hej,

888
00:40:33,816 --> 00:40:34,440
to není nalezen.

889
00:40:34,440 --> 00:40:36,300
Doslova, nevím
kde tento soubor je.

890
00:40:36,300 --> 00:40:38,880
Takže jako výsledek, prohlížeče
ukazuje, co je v jejích silách,

891
00:40:38,880 --> 00:40:42,860
syrové obsah stránky,
který byl 200, HTML,

892
00:40:42,860 --> 00:40:45,390
ale stylizace nemůže
Poté budou přidány.

893
00:40:45,390 --> 00:40:47,120
A to je to, co se rozumí pod pojmem kaskádové.

894
00:40:47,120 --> 00:40:49,070
Můžete nějak přidat
po, a to tak nějak

895
00:40:49,070 --> 00:40:50,874
zjemňuje estetiku webové stránky.

896
00:40:50,874 --> 00:40:53,790
A dokonce můžete přepsat ty,
styly s ještě dalších StyleSheet souborech

897
00:40:53,790 --> 00:40:54,700
jestli chceš.

898
00:40:54,700 --> 00:40:57,780
To není nalezen, i když v tomto případě,
protože samozřejmě to nesprávně pojmenovaný já.

899
00:40:57,780 --> 00:41:00,330
Takže budu muset napravit jako první.

900
00:41:00,330 --> 00:41:04,667
>> Tak pojďme do toho a
navrhují následující.

901
00:41:04,667 --> 00:41:07,410

902
00:41:07,410 --> 00:41:11,140
Pojďme dál a to udělat.

903
00:41:11,140 --> 00:41:14,220
Počínaje možná
Váš helloworld soubor,

904
00:41:14,220 --> 00:41:17,740
dovolte mi pozvat pár
z funkce návrhy.

905
00:41:17,740 --> 00:41:20,400
Takže, Victoria, co jste chtěli
aby nějaký text větší, že jo?

906
00:41:20,400 --> 00:41:24,555
V pořádku, takže můžeme
dělat, aby textu větší.

907
00:41:24,555 --> 00:41:26,860
A budeme každý trhat off
jen jeden problém k řešení.

908
00:41:26,860 --> 00:41:30,867
Udělat textu větší.

909
00:41:30,867 --> 00:41:32,700
Nebudu obtěžovat
psát, když jsme

910
00:41:32,700 --> 00:41:35,600
mají kulka technologii támhle.

911
00:41:35,600 --> 00:41:39,970
Takže některé problémy.

912
00:41:39,970 --> 00:41:44,670
Takže budeme snažit
aby textu větší.

913
00:41:44,670 --> 00:41:45,170
Dobře.

914
00:41:45,170 --> 00:41:48,360
Co jiného by někdo navrhnout?

915
00:41:48,360 --> 00:41:50,332
Co jiného můžeme chtít
dělat na webové stránce?

916
00:41:50,332 --> 00:41:52,040
Pojďme přijít s
krátký seznam věcí,

917
00:41:52,040 --> 00:41:55,366
a pak přenést do
Skupina přijít na to.

918
00:41:55,366 --> 00:41:56,270
>> Diváků: [neslyšitelné]

919
00:41:56,270 --> 00:42:02,251
>> David J. Malan: OK, umístění textu
na různých stranách stránky?

920
00:42:02,251 --> 00:42:02,750
Dobře.

921
00:42:02,750 --> 00:42:04,620
Něco jiného.

922
00:42:04,620 --> 00:42:05,784
>> Diváků: [neslyšitelné]

923
00:42:05,784 --> 00:42:06,700
David J. Malan: Je.

924
00:42:06,700 --> 00:42:08,720
Takže gif je jen
jiný formát souboru.

925
00:42:08,720 --> 00:42:12,830
Jen jsme použili, co, je
png nebo jpg asi?

926
00:42:12,830 --> 00:42:14,480
Použili jsme jpg.

927
00:42:14,480 --> 00:42:16,780
Pokud jste zvědaví, nadměrný
odpověď na vaši otázku

928
00:42:16,780 --> 00:42:19,404
je jpg se obecně používá pro
fotografie, protože podporuje

929
00:42:19,404 --> 00:42:21,500
milióny barev nebo 24bitové barvy.

930
00:42:21,500 --> 00:42:26,930
GIF se obvykle používá pro, například,
internetový mem tyto days-- animace,

931
00:42:26,930 --> 00:42:28,810
jako animované soubory GIF.

932
00:42:28,810 --> 00:42:32,320
Ale to se stává použít menší barvu
paleta, jen 256 možných barev,

933
00:42:32,320 --> 00:42:35,230
ale podporuje
transparentnosti a animace.

934
00:42:35,230 --> 00:42:40,330
A pak je tu png, který podporuje
transparentnosti a více barev

935
00:42:40,330 --> 00:42:41,300
ale ne animaci.

936
00:42:41,300 --> 00:42:42,133
Takže je to trade-off.

937
00:42:42,133 --> 00:42:44,144

938
00:42:44,144 --> 00:42:46,060
Takže přidání gif, ačkoli,
by být funkčně

939
00:42:46,060 --> 00:42:48,396
ekvivalentní k přidání png nebo jpg.

940
00:42:48,396 --> 00:42:49,110
To jo.

941
00:42:49,110 --> 00:42:50,550
zdrojový obraz rovná.

942
00:42:50,550 --> 00:42:51,590
Takže něco jiného.

943
00:42:51,590 --> 00:42:57,288
Pojďme přijít s něčím,
jsme poslali Victoria dělat tady.

944
00:42:57,288 --> 00:42:59,209
>> Diváků: Přidejte tlačítka pro formulář.

945
00:42:59,209 --> 00:43:00,000
David J. Malan: OK.

946
00:43:00,000 --> 00:43:02,179
Tak přidat tlačítka na formuláři.

947
00:43:02,179 --> 00:43:03,470
A budeme dělat, že jeden dohromady.

948
00:43:03,470 --> 00:43:07,220
Tak to bude perfektní segue
hned po této výzvě.

949
00:43:07,220 --> 00:43:10,357
Něco dalšího?

950
00:43:10,357 --> 00:43:11,440
Co můžete udělat?

951
00:43:11,440 --> 00:43:14,040

952
00:43:14,040 --> 00:43:16,516
Webový cítí velmi neohromující
pokud je to vše, co můžeme dělat.

953
00:43:16,516 --> 00:43:18,140
Diváků: Změna barvy textu.

954
00:43:18,140 --> 00:43:19,500
David J. Malan: Změna co?

955
00:43:19,500 --> 00:43:20,666
Publikum: Barva textu.

956
00:43:20,666 --> 00:43:22,311
David J. Malan: Změna barvy textu.

957
00:43:22,311 --> 00:43:22,810
Dobře.

958
00:43:22,810 --> 00:43:23,790
Tak jdeme na to.

959
00:43:23,790 --> 00:43:27,209
Jen znovu tak, že nejste, jen
nazpaměť, dělá přesně to, co dělám,

960
00:43:27,209 --> 00:43:29,500
Jdu se obrátit na hudbu
pro asi pět minut zde.

961
00:43:29,500 --> 00:43:30,450
Rádo se používat Google.

962
00:43:30,450 --> 00:43:33,130
Rádo se mě ptát, a
Budu šeptat náznak do ucha.

963
00:43:33,130 --> 00:43:35,171
Rádo se podívat
více než na ostatních ramen.

964
00:43:35,171 --> 00:43:37,340
Ale řeší jen jeden z těchto problémů.

965
00:43:37,340 --> 00:43:40,190
Ale uděláme ten poslední, na
tvoří jeden, kdybychom mohli společně.

966
00:43:40,190 --> 00:43:42,790
Tak pět minut řešit
některé z těchto problémů

967
00:43:42,790 --> 00:43:46,780
používáte Google, intuice, nebo jakákoli
jiné prostředky k dispozici.

968
00:43:46,780 --> 00:43:48,630
>> [MUSIC PŘEHRÁVÁNÍ]

969
00:43:48,630 --> 00:43:49,130
Dobře.

970
00:43:49,130 --> 00:43:50,838
Žádné starosti, pokud chcete
zachovat šťourat,

971
00:43:50,838 --> 00:43:53,880
ale budu kazit pár
z těchto odpovědí.

972
00:43:53,880 --> 00:43:57,986
Takže první návrh z
Victoria byla dělat textu větší.

973
00:43:57,986 --> 00:43:59,360
Takže tam je několik způsobů, jak toho dosáhnout.

974
00:43:59,360 --> 00:44:01,530
Já jsem v současné době obnoveny
obrazovka na tuto velikost,

975
00:44:01,530 --> 00:44:04,310
když jsem zvětšených
uměle prostě vidět věci.

976
00:44:04,310 --> 00:44:07,470
A jdeme na to.

977
00:44:07,470 --> 00:44:11,380
Nech mě jít dopředu a urvat
některé generické latinský text

978
00:44:11,380 --> 00:44:19,540
Jen tak máme něco pracovat.

979
00:44:19,540 --> 00:44:20,715
Tak dej mi jen jeden okamžik.

980
00:44:20,715 --> 00:44:21,840
Udělám tři odstavce.

981
00:44:21,840 --> 00:44:53,430

982
00:44:53,430 --> 00:44:53,930
OK.

983
00:44:53,930 --> 00:44:55,560
Bude to lepší příklad.

984
00:44:55,560 --> 00:44:57,840
Takže pro zvědavé, v
můj hello.html, jen jsem

985
00:44:57,840 --> 00:45:01,645
vložit tři nesmyslný
Latinské body

986
00:45:01,645 --> 00:45:03,270
Jen tak máme nějaký text pracovat.

987
00:45:03,270 --> 00:45:06,720
A Victoria cílem bylo
učinit některé z textu větší.

988
00:45:06,720 --> 00:45:09,879
Takže jsem mohl, stejně jako dříve, jít sem.

989
00:45:09,879 --> 00:45:11,170
A nech mě to udělat správným způsobem.

990
00:45:11,170 --> 00:45:13,253
Budu mít odkaz
tag, který odkazuje na soubor

991
00:45:13,253 --> 00:45:20,560
s názvem "styles.css," vztah
z nichž je opět "stylů."

992
00:45:20,560 --> 00:45:25,221
A pak budu tou výjimkou, že
a otevřít tento "styles.css."

993
00:45:25,221 --> 00:45:28,940
>> Tak, jako dříve, mám
Schopnost v tomto souboru CSS

994
00:45:28,940 --> 00:45:31,569
skutečně přepsat výchozí
estetika webové stránky,

995
00:45:31,569 --> 00:45:33,860
a výchozí estetika,
Samozřejmě, jsou docela nudné.

996
00:45:33,860 --> 00:45:36,943
Je to něco normální velikosti písma, černá
text, bílé pozadí, a tak dále.

997
00:45:36,943 --> 00:45:39,440
Takže předpokládám, že chci, aby se
všechny tohoto textu větší.

998
00:45:39,440 --> 00:45:40,460
Mohl bych udělat pár věcí.

999
00:45:40,460 --> 00:45:43,750
Podle mého styles.css souboru, I
Dalo by se říci, víte co,

1000
00:45:43,750 --> 00:45:46,950
platí následující
Tělo mé stránky.

1001
00:45:46,950 --> 00:45:51,390
Jděte do toho a dělat
velikost písma 24 bodů,

1002
00:45:51,390 --> 00:45:54,130
což je číslo bych mohl
použít v aplikaci Microsoft Word.

1003
00:45:54,130 --> 00:45:57,620
Nech mě jít zpátky do mého webu
Stránka tady a znovu,

1004
00:45:57,620 --> 00:45:59,640
a můžete vidět, že
už je mnohem větší.

1005
00:45:59,640 --> 00:46:02,223
A můžeme dostat trochu blázen,
stejně jako můžeme na desktop--

1006
00:46:02,223 --> 00:46:03,670
aby bylo 96 bodů.

1007
00:46:03,670 --> 00:46:04,950
Reload.

1008
00:46:04,950 --> 00:46:07,610
A je to stále málo
nepraktický v tomto bodě.

1009
00:46:07,610 --> 00:46:09,500
>> Ale můžu být trochu přesnější.

1010
00:46:09,500 --> 00:46:14,530
Namísto použití této
stylů k tělu mé stránky,

1011
00:46:14,530 --> 00:46:21,740
co jiného bych mohl použít ji na místo,
jaké další značka, která by ještě

1012
00:46:21,740 --> 00:46:25,445
funkce stejným způsobem?

1013
00:46:25,445 --> 00:46:26,444
>> Publikum: p tag?

1014
00:46:26,444 --> 00:46:27,360
David J. Malan: P štítek.

1015
00:46:27,360 --> 00:46:29,350
Takže hlava nebude
správné, protože hlavy,

1016
00:46:29,350 --> 00:46:31,300
nemůžete vlastně
ovládat estetiku.

1017
00:46:31,300 --> 00:46:32,700
Je tam, nebo ne formou textu.

1018
00:46:32,700 --> 00:46:36,760
Ale p tag-- můžu ponořit trochu
hlouběji, tak říkajíc, na odstavec

1019
00:46:36,760 --> 00:46:37,350
tagy.

1020
00:46:37,350 --> 00:46:41,600
A i když jsou tam tři,
To je naprosto v pořádku, protože v CSS,

1021
00:46:41,600 --> 00:46:44,900
když jsem jen říct "p", tato
znamená platí následující

1022
00:46:44,900 --> 00:46:48,300
na jakoukoli značku, která odpovídá této
volič, volič jen

1023
00:46:48,300 --> 00:46:49,430
je název tagu.

1024
00:46:49,430 --> 00:46:52,350
Takže tam, kde vidíte
"P", platí velikost písma,

1025
00:46:52,350 --> 00:46:55,222
a pojďme dělat to více
rozumné again-- 24 bod.

1026
00:46:55,222 --> 00:46:56,930
A víte co,
Jen pro jistotu,

1027
00:46:56,930 --> 00:46:59,810
udělejme barvu
red jen na chvíli.

1028
00:46:59,810 --> 00:47:03,740
A teď když jsem znovu, teď
vidět tři ošklivé body.

1029
00:47:03,740 --> 00:47:07,180
>> Ale teď předpokládejme, že jsem nějak
of-- Chci první odstavec

1030
00:47:07,180 --> 00:47:08,210
vyskočit na uživatele.

1031
00:47:08,210 --> 00:47:11,150
Já nechci jen zvýšit
velikost písma všeho.

1032
00:47:11,150 --> 00:47:16,105
A tak jsem se skutečně chtějí identifikaci nebo
rozlišovat mezi těmito body.

1033
00:47:16,105 --> 00:47:18,730
Takže pojďme se zbavit červené,
protože to je jen trochu laciné,

1034
00:47:18,730 --> 00:47:23,885
a pojďme do toho a aby se
velikost písma 12-bodový ve výchozím nastavení,

1035
00:47:23,885 --> 00:47:26,260
takže jsme zpátky k něčemu
trochu rozumnější.

1036
00:47:26,260 --> 00:47:29,190
A teď chci jen ke zvýšení
velikost písma v prvním odstavci.

1037
00:47:29,190 --> 00:47:31,440
Zvládnu to v několika
způsoby, ale jeden způsob, jak to je

1038
00:47:31,440 --> 00:47:37,180
snad nejvíce instruktážní at the
moment je následující.

1039
00:47:37,180 --> 00:47:43,280
Nech mě jít a říct, toto
odstavec má jedinečný identifikátor "první".

1040
00:47:43,280 --> 00:47:45,000
Mohl bych zavolat tuto co chci.

1041
00:47:45,000 --> 00:47:46,874
Mohl bych volat toto "foo"
nebo jakékoli jiné slovo,

1042
00:47:46,874 --> 00:47:49,290
ale já jdu dát mu nějaký
sémanticky smysluplné jméno

1043
00:47:49,290 --> 00:47:50,320
jako "první".

1044
00:47:50,320 --> 00:47:54,790
To je jedinečný identifikátor,
ID, na můj první odstavec.

1045
00:47:54,790 --> 00:47:59,360
>> Co mohu dělat teď v mém stylů
Je o něco přesnější.

1046
00:47:59,360 --> 00:48:02,330
Místo toho říká, platí
následující p tagu

1047
00:48:02,330 --> 00:48:04,890
Mohu říci, že following--
platí následující,

1048
00:48:04,890 --> 00:48:11,000
nebo zvolte, HTML element
který má jedinečné ID "první".

1049
00:48:11,000 --> 00:48:12,350
Co chci, aby se na něj vztahují?

1050
00:48:12,350 --> 00:48:15,250
Velikost písma 24 bodu.

1051
00:48:15,250 --> 00:48:16,640
Takže mám dva selektory teď.

1052
00:48:16,640 --> 00:48:19,690
Jeden dělá všechny
body 12 bodů.

1053
00:48:19,690 --> 00:48:24,960
Ale tento jeden, zejména proto, že jde
second-- to přijde minule v file--

1054
00:48:24,960 --> 00:48:27,090
to má kaskádový účinek.

1055
00:48:27,090 --> 00:48:30,200
Právě jsem udělal všechnu mou
Značky odstavce 12 bodů,

1056
00:48:30,200 --> 00:48:34,350
ale to teď kaskády a
přepíše, že pro jakékoliv prvky

1057
00:48:34,350 --> 00:48:38,800
na stránce jakýkoli štítek na stránce, jejíž
jedinečný identifikátor je citát konec citátu "první".

1058
00:48:38,800 --> 00:48:41,720
A hashtag v této souvislosti
prostě znamená "jedinečný identifikátor."

1059
00:48:41,720 --> 00:48:43,750
Nechci dát do HTML souboru.

1060
00:48:43,750 --> 00:48:46,880
I tady, stačí říct
citát konec citátu "první".

1061
00:48:46,880 --> 00:48:48,470
>> Tak ať mi znovu.

1062
00:48:48,470 --> 00:48:49,919
A teď vidím, ah, OK.

1063
00:48:49,919 --> 00:48:51,710
Myslím, že to není tak
pěkný, ale je to trochu

1064
00:48:51,710 --> 00:48:53,600
jako se samotným předmluvě ke
kniha nebo něco takového,

1065
00:48:53,600 --> 00:48:55,100
kde první odstavec je větší.

1066
00:48:55,100 --> 00:48:57,933
Mohl by to být ještě přesnější
jen první písmena, ale přinejmenším

1067
00:48:57,933 --> 00:48:59,110
Já jsem vykonával větší kontrolu.

1068
00:48:59,110 --> 00:49:04,760
Nyní maybe-- možná chci to udělat
příležitostně z jakéhokoli důvodu,

1069
00:49:04,760 --> 00:49:09,010
a tak nechci to
vztahovat pouze na jeden HTML tagu.

1070
00:49:09,010 --> 00:49:15,110
Spíše, pojďme say-- pojďme
také udělat následující.

1071
00:49:15,110 --> 00:49:18,810
Class = "import".

1072
00:49:18,810 --> 00:49:23,970
Zatímco ID slouží k jednoznačné
identifikovat jednu věc, jednu značku,

1073
00:49:23,970 --> 00:49:30,190
do webové stránky, třída má být
používat na libovolném počtu prvků nebo tagy

1074
00:49:30,190 --> 00:49:30,950
Na své webové stránce.

1075
00:49:30,950 --> 00:49:31,710
Takže je to k opakovanému použití.

1076
00:49:31,710 --> 00:49:33,090
ID nelze použít znovu.

1077
00:49:33,090 --> 00:49:34,450
Třída je na jedno použití.

1078
00:49:34,450 --> 00:49:37,830
>> A víte co, pro cokoliv
filozofické reasons--

1079
00:49:37,830 --> 00:49:40,180
Nechtěl jsem dokončil svůj
Myslel jsem chtěl říct

1080
00:49:40,180 --> 00:49:44,300
že první odstavec a
Druhý bod je důležitý.

1081
00:49:44,300 --> 00:49:48,600
Takže jdu požádat o třídu s názvem
"Důležité", že pokud I ušetřit soubor

1082
00:49:48,600 --> 00:49:51,510
a znovu, nemá žádný
funkční dopad dosud.

1083
00:49:51,510 --> 00:49:53,780
Ale já jsem přidal některé
metadata Ze spisu vyplývá,

1084
00:49:53,780 --> 00:49:56,610
druh něco oddělený
ze základních údajů ve spisu o,

1085
00:49:56,610 --> 00:50:02,300
takže teď v mém stylů, kdybych
Místo toho říkají ".Upozornění" - víte,

1086
00:50:02,300 --> 00:50:07,110
cokoliv, co je důležité, že jsem
bude dělat font-barvy, red--

1087
00:50:07,110 --> 00:50:09,930
nebo spíše ne font-barvy, jen barvu.

1088
00:50:09,930 --> 00:50:12,930
Je tu rozpory
v CSS bohužel.

1089
00:50:12,930 --> 00:50:14,120
A znovu.

1090
00:50:14,120 --> 00:50:17,640
Nyní si všimnout první
dva odstavce jsou červené

1091
00:50:17,640 --> 00:50:20,880
ale ne třetí, protože jsem jen
aplikoval třídu "důležité"

1092
00:50:20,880 --> 00:50:25,020
k prvnímu dvou z těchto věcí.

1093
00:50:25,020 --> 00:50:28,030
>> Takže ID, budete mít možnost
určit velmi přesně.

1094
00:50:28,030 --> 00:50:30,110
S třídami, máte opětovnou použitelnost.

1095
00:50:30,110 --> 00:50:33,800
Ale v obou případech všimnete
druh principu dobré designu

1096
00:50:33,800 --> 00:50:39,072
kde jsem vytknout všechny
estetika v mém styles.css souboru.

1097
00:50:39,072 --> 00:50:40,280
Takže tam to tady žádný nepořádek.

1098
00:50:40,280 --> 00:50:44,490
Neexistuje žádná zmínka o červené nebo
tučné-obklad nebo velikost písma v tomto souboru.

1099
00:50:44,490 --> 00:50:49,430
Spíše mám sémanticky,
smysluplně charakterizován mých osobních údajů jako,

1100
00:50:49,430 --> 00:50:51,240
Zde jsou některé důležité údaje.

1101
00:50:51,240 --> 00:50:52,800
Zde je některé další důležitá data.

1102
00:50:52,800 --> 00:50:56,500
Kromě toho, je zde
"První" z mých důležitých dat.

1103
00:50:56,500 --> 00:51:01,050
Takže HTML je především o třídění
tagování doslova slova

1104
00:51:01,050 --> 00:51:05,270
a odstavců a konstrukty ve vašem
Stránka s těmito malými náznaky, pokud vás

1105
00:51:05,270 --> 00:51:07,640
bude, že můžete
nějakým způsobem využít používání

1106
00:51:07,640 --> 00:51:10,880
Jiné techniky, jako je CSS tímto způsobem.

1107
00:51:10,880 --> 00:51:14,760
>> Takže v odpovědi na otázku Victoria,
můžeme textu větší tímto způsobem.

1108
00:51:14,760 --> 00:51:18,380
Existuje mnoho jiných způsobů, ale
písmo tag-- otevřený držák "font" -

1109
00:51:18,380 --> 00:51:19,770
je ve skutečnosti několik let.

1110
00:51:19,770 --> 00:51:21,410
A to je ten problém,
Také se spoléhat pouze

1111
00:51:21,410 --> 00:51:23,485
na online resources--
mají tendenci být zastaralé.

1112
00:51:23,485 --> 00:51:26,110
A skutečně, který byl zastaralý,
protože svět si uvědomil,

1113
00:51:26,110 --> 00:51:28,970
co znamená "font-size = 7" znamená?

1114
00:51:28,970 --> 00:51:29,670
To není.

1115
00:51:29,670 --> 00:51:32,770
A tak po mnoho let a
Tento day-- jeden z boku

1116
00:51:32,770 --> 00:51:36,060
bere na vědomí, zde je to, že je ve skutečnosti
neuvěřitelně bolestivé ještě někdy

1117
00:51:36,060 --> 00:51:38,900
vyvinout místa pro
web, protože Microsoft

1118
00:51:38,900 --> 00:51:44,220
a Google a Mozilla a
jiní často rozcházejí v tom, jak

1119
00:51:44,220 --> 00:51:47,480
interpretovat specifikace jako HTML.

1120
00:51:47,480 --> 00:51:52,490
>> Tam je soubor pravidel pro HTML, které
obecně říká, že to, co každá značka znamená.

1121
00:51:52,490 --> 00:51:55,690
Ale někdy je to ponecháno na
uvážení implementace je,

1122
00:51:55,690 --> 00:51:57,290
diskrétnost a Google Microsoft.

1123
00:51:57,290 --> 00:52:00,000
A tak se budete velmi často
vidět na webových stránkách něčem

1124
00:52:00,000 --> 00:52:04,954
vypadá jinak na PC
než to dělá na počítači Mac,

1125
00:52:04,954 --> 00:52:06,995
a to je opravdu proto, že
na konci dne,

1126
00:52:06,995 --> 00:52:08,891
neměli to vyzkoušet
dobře na obou platformách.

1127
00:52:08,891 --> 00:52:11,390
Ale je to také proto, že rozumná,
chytří lidé nebudou souhlasit

1128
00:52:11,390 --> 00:52:14,970
a společnosti budou souhlasit, a tak
Jednou z výzev programování

1129
00:52:14,970 --> 00:52:16,980
pro web nebo projektování
věci na webu

1130
00:52:16,980 --> 00:52:21,700
píše své webové stránky takovým způsobem,
který funguje na každém webovém prohlížeči.

1131
00:52:21,700 --> 00:52:23,410
Ale i to je nerozumné, že jo?

1132
00:52:23,410 --> 00:52:27,807
Existuje mnoho verzí tolik
prohlížeče tam, že v určitém okamžiku,

1133
00:52:27,807 --> 00:52:30,890
máte také udělat úsudek volání
a vy budete muset rozhodnout, jako společnost,

1134
00:52:30,890 --> 00:52:33,082
zejména pro e-commerce stylu
místa, kam

1135
00:52:33,082 --> 00:52:36,290
pokusu o použití nejnovější a největší
Technologie dát opravdu dobrý uživatele

1136
00:52:36,290 --> 00:52:37,110
zažít.

1137
00:52:37,110 --> 00:52:41,019
Ale někteří procento uživatelů by mohlo
stále používáte Internet Explorer 6 nebo 7

1138
00:52:41,019 --> 00:52:43,810
nebo 8, a to zejména v závislosti na
Země, která oni přicházejí.

1139
00:52:43,810 --> 00:52:46,760
>> A tak velmi často
konzultovány je něco,

1140
00:52:46,760 --> 00:52:50,920
jako "statistiky webového prohlížeče."

1141
00:52:50,920 --> 00:52:56,560
A pokud půjdeme to-- podívejme Wikipedia
a uvidíte, jak up-to-date tento graf je

1142
00:52:56,560 --> 00:52:59,320
pokud existuje.

1143
00:52:59,320 --> 00:53:02,420
Takže tady vidíte
kde prohlížeče vlastně

1144
00:53:02,420 --> 00:53:06,160
jsou podle prosince 2015,
Podle vlády USA.

1145
00:53:06,160 --> 00:53:11,170
Chrome je v podílu na trhu 42%, následoval
IE do značné míry na firemní nastavení

1146
00:53:11,170 --> 00:53:14,490
nebo nastavení PC, samozřejmě,
následuje Firefox,

1147
00:53:14,490 --> 00:53:17,440
pak Safari, Opera pak ne
aby mapy tady z nějakého důvodu,

1148
00:53:17,440 --> 00:53:18,210
a pak další.

1149
00:53:18,210 --> 00:53:19,500
Možná je to v kategorii Ostatní.

1150
00:53:19,500 --> 00:53:27,700
Ale problematičtější než to je--
Uvidíme, jestli Wikipedia má také

1151
00:53:27,700 --> 00:53:35,194
verze prohlížečů version--

1152
00:53:35,194 --> 00:53:36,160

1153
00:53:36,160 --> 00:53:39,190
>> Pojďme do statistik prohlížeče.

1154
00:53:39,190 --> 00:53:40,680
TJ.

1155
00:53:40,680 --> 00:53:42,030
Ani to nestačí.

1156
00:53:42,030 --> 00:53:44,854
Statistiky prohlížeči.

1157
00:53:44,854 --> 00:53:45,353
Moje verze.

1158
00:53:45,353 --> 00:53:48,980

1159
00:53:48,980 --> 00:53:50,540
Že to nebude mít pravdu.

1160
00:53:50,540 --> 00:53:53,414
Podívejme se verze.

1161
00:53:53,414 --> 00:53:54,830
tržní podíl prohlížeče.

1162
00:53:54,830 --> 00:53:57,110
Uvidíme, jestli to přijde.

1163
00:53:57,110 --> 00:53:57,610
OK.

1164
00:53:57,610 --> 00:54:00,010
Teď to začíná
trochu užitečnější.

1165
00:54:00,010 --> 00:54:04,870
Tak tady si všimněte, že máme všichni
různé verze prohlížečů.

1166
00:54:04,870 --> 00:54:09,887
A, můj bože, když se look-- Chrome
48, 47 Chrome, Chrome 31, Chrome 45.

1167
00:54:09,887 --> 00:54:12,970
Myslím, prohlížeče stále aktualizována,
a někdy některé z těchto změn

1168
00:54:12,970 --> 00:54:16,430
jsou významné
z hlediska funkčnosti.

1169
00:54:16,430 --> 00:54:20,630
A tak v určitém bodě,
produktoví manažeři nebo inženýři

1170
00:54:20,630 --> 00:54:23,620
je třeba provést decision-- vás
Víš co, jen 1% na světě

1171
00:54:23,620 --> 00:54:24,740
stále používá IE 7.

1172
00:54:24,740 --> 00:54:25,490
K čertu s nimi.

1173
00:54:25,490 --> 00:54:27,470
My prostě nebude
podporu tohoto prohlížeče.

1174
00:54:27,470 --> 00:54:28,740
A co to znamená nepodporovat?

1175
00:54:28,740 --> 00:54:31,170
To by mohlo znamenat, že knoflíky
nefungují na své webové stránky,

1176
00:54:31,170 --> 00:54:33,050
nebo by to mohlo znamenat, že
Formátování je úplně mimo.

1177
00:54:33,050 --> 00:54:35,091
Nebo možná budete muset provést
ten samý úsudku

1178
00:54:35,091 --> 00:54:39,089
v mobilních těchto dnech, kdy, jsme
nebude podporovat iOS 5 už ne.

1179
00:54:39,089 --> 00:54:40,380
Takže lidé prostě muset upgradovat.

1180
00:54:40,380 --> 00:54:45,850
Nebo nebudeme podporovat Cupcake
Android OS pro zařízení se systémem Android,

1181
00:54:45,850 --> 00:54:48,629
protože jak world-- jako
tech svět chce posunout vpřed,

1182
00:54:48,629 --> 00:54:51,170
to jaksi chce přetáhnout
svět s ním tak, že tomu tak není

1183
00:54:51,170 --> 00:54:53,295
musí být i nadále
zpětně kompatibilní, takže

1184
00:54:53,295 --> 00:54:54,920
mohou nabídnout nové a dobré vlastnosti.

1185
00:54:54,920 --> 00:54:57,878
To je jedním z důvodů,
proč tak mnoho firem vyvalit

1186
00:54:57,878 --> 00:55:01,440
automatické aktualizace a tak nějak nutit
nejnovější verze softwaru na nás.

1187
00:55:01,440 --> 00:55:04,010
A dokonce i firmy
stejně jako Apple bude třídit podle

1188
00:55:04,010 --> 00:55:07,280
nutí vás téměř nebo zavázat
vy z hlediska tržní síly

1189
00:55:07,280 --> 00:55:11,164
koupit nový telefon, protože prostě
nebude aktualizovat svůj starý telefon ještě.

1190
00:55:11,164 --> 00:55:13,330
Takže si ujít
nejnovější a nejlepší funkce,

1191
00:55:13,330 --> 00:55:17,520
protože je to nákladné pro ně jako
Společnost udržet starší, pravděpodobně

1192
00:55:17,520 --> 00:55:19,330
podřadné verze softwaru.

1193
00:55:19,330 --> 00:55:23,660
Ale Výsledkem je, že
také trpět to stejně.

1194
00:55:23,660 --> 00:55:26,550
>> Takže pojďme se podívat na právě
pár finálních věcí zde.

1195
00:55:26,550 --> 00:55:29,740
Pojďme ukrást opravdu rychle některá
ty ostatní kulky, pokud zvědavý.

1196
00:55:29,740 --> 00:55:33,440
Takže pokud jste se snažili,
Například pozici

1197
00:55:33,440 --> 00:55:36,420
text na různých stranách
strana, budu dělat jednu rychlý způsob,

1198
00:55:36,420 --> 00:55:38,360
ale je tu jiný
způsobů, jak toho dosáhnout.

1199
00:55:38,360 --> 00:55:42,610
Nech mě jít dopředu a eliminate--
zjednodušit to následujícím způsobem.

1200
00:55:42,610 --> 00:55:45,330
Nech mě jít zpátky do mého
jednoduché, prosté body.

1201
00:55:45,330 --> 00:55:47,760
Nech mě jít zpátky do mého styles.css.

1202
00:55:47,760 --> 00:55:51,040
A já jsem prostě jít používat simple--
které jste mohli vidět na Google

1203
00:55:51,040 --> 00:55:54,430
nebo jej vyvolejte z earlier--
text-align pravdu.

1204
00:55:54,430 --> 00:55:56,220
A obnovte tuto stránku.

1205
00:55:56,220 --> 00:55:58,470
Nyní je vše se zdá
být zarovnaný vpravo,

1206
00:55:58,470 --> 00:56:00,770
jak jste mohli vidět na stropě zde.

1207
00:56:00,770 --> 00:56:04,470
>> Můžeme se, aby to vypadalo trochu víc
si podobné a můžeme říci, "ospravedlnit"

1208
00:56:04,470 --> 00:56:05,640
a znovu.

1209
00:56:05,640 --> 00:56:09,870
Teď je to pěkné a na náměstí oba
strany, což je docela hezké.

1210
00:56:09,870 --> 00:56:12,220
Dalším cílem, který jsme zde měli
byla změna barvy textu.

1211
00:56:12,220 --> 00:56:13,650
Takže jsme viděli, že se svým červeným textem.

1212
00:56:13,650 --> 00:56:15,630
A teď přidat tlačítka pro formulář.

1213
00:56:15,630 --> 00:56:19,390
Tak proč ne se snažíme dělat přesně to?

1214
00:56:19,390 --> 00:56:23,656
Ale nejdřív nech mě jít na stránky, které
většina z nás používá každý day-- Google.

1215
00:56:23,656 --> 00:56:25,780
A pojďme se podívat na
Jak Google skutečně funguje.

1216
00:56:25,780 --> 00:56:26,821
Ale budu to dělat.

1217
00:56:26,821 --> 00:56:31,930
Nejprve mi dovolte to in-- ano,
nech mě jít do Google jako první.

1218
00:56:31,930 --> 00:56:34,530
Budu muset jít
do Nastavení Google,

1219
00:56:34,530 --> 00:56:40,660
protože chci vypnout
něco, co nazývá okamžité výsledky.

1220
00:56:40,660 --> 00:56:43,580
>> Takže jste si možná všimli v
Google tyto days-- nech mě jít zpět

1221
00:56:43,580 --> 00:56:44,850
a to zapnout.

1222
00:56:44,850 --> 00:56:47,900
Takže když jsem začít hledat
pro "kočky", jako je tento,

1223
00:56:47,900 --> 00:56:50,120
Všimněte si, že nejenom
Mám auto-dokončení up

1224
00:56:50,120 --> 00:56:54,520
top, najednou, samotná stránka
Zdá se, že změnit docela rychle, stejně,

1225
00:56:54,520 --> 00:56:58,750
a to je Google pomocí jazyka
volal JavaScript snaží být užitečný.

1226
00:56:58,750 --> 00:57:01,540
Ale bohužel, to laskavý
z zkazí naši diskusi

1227
00:57:01,540 --> 00:57:04,010
o tom, co se skutečně děje
Pod kapotou zde.

1228
00:57:04,010 --> 00:57:09,070
Takže jsem tak nějak rychle
vypnutí okamžité výsledky.

1229
00:57:09,070 --> 00:57:11,510
A já jdu na tlačítko Uložit.

1230
00:57:11,510 --> 00:57:13,930
A teď jdu otevřít
že diagnostický panel nástrojů, které jsem

1231
00:57:13,930 --> 00:57:16,150
udržovat otvor na kartě síť.

1232
00:57:16,150 --> 00:57:17,720
Tak jdeme na to.

1233
00:57:17,720 --> 00:57:21,960
Nechť me-- whoops--
rolovat to trochu dolů.

1234
00:57:21,960 --> 00:57:24,410
A nech mě hledat "kočky".

1235
00:57:24,410 --> 00:57:26,790
>> A teď notice-- vlastně
To je dobrá příležitost

1236
00:57:26,790 --> 00:57:28,840
diskutovat na chvíli.

1237
00:57:28,840 --> 00:57:32,460
Povšimněte si okamžiku, kdy jsem ji type-- zastavit.

1238
00:57:32,460 --> 00:57:35,250
Přestaň.

1239
00:57:35,250 --> 00:57:35,790
OK.

1240
00:57:35,790 --> 00:57:40,870
Všimněte si ten okamžik jsem napíšete
C, dívat se na spodní části obrazovky.

1241
00:57:40,870 --> 00:57:48,600
A- T- S. Co na dno
z této obrazovky, moje karta Network,

1242
00:57:48,600 --> 00:57:53,320
navrhnou se děje každý
Když jsem psát dopis?

1243
00:57:53,320 --> 00:57:57,700
Bohužel, žába je velmi
rozptylující dnes nebo trojlístek

1244
00:57:57,700 --> 00:58:00,339
nebo co to je.

1245
00:58:00,339 --> 00:58:01,880
Co se děje pokaždé, když jsem napsal?

1246
00:58:01,880 --> 00:58:04,230
A dovolte mi zrušte
bufferu a znovu jej zadejte.

1247
00:58:04,230 --> 00:58:06,580
Tak-- pokřiky.

1248
00:58:06,580 --> 00:58:13,280
Pokaždé, když jsem psát dopis, C- A- T--
takže nový řádek evidentně stále objevují.

1249
00:58:13,280 --> 00:58:16,530
Co každý z těchto řádků představují
základě toho, co jsme viděli a diskutovali

1250
00:58:16,530 --> 00:58:17,339
tak daleko?

1251
00:58:17,339 --> 00:58:18,130
Diváků: Hledání?

1252
00:58:18,130 --> 00:58:21,770
David J. Malan: Hledání, nebo
obecněji, požadavek HTTP

1253
00:58:21,770 --> 00:58:23,125
z mého prohlížeče na serveru.

1254
00:58:23,125 --> 00:58:29,090
Tak proč je můj prohlížeč dělat HTTP
vyžádat pokaždé, když píšu dopis?

1255
00:58:29,090 --> 00:58:30,502
>> Diváků: [neslyšitelné]

1256
00:58:30,502 --> 00:58:33,210
David J. Malan: Jo, to dává
me tyto auto-kompletní výsledky.

1257
00:58:33,210 --> 00:58:35,190
Stejně jako tam, kde se tyto
Výsledky vyhledávání pochází?

1258
00:58:35,190 --> 00:58:38,120
No, pokaždé, když jsem typ domu
písmeno, Google posílá více

1259
00:58:38,120 --> 00:58:40,460
a víc a víc
Slovo jsem psát.

1260
00:58:40,460 --> 00:58:41,040
Proč?

1261
00:58:41,040 --> 00:58:44,540
Protože chtějí, aby mi dal
lepší a lepší, lepší návrh,

1262
00:58:44,540 --> 00:58:48,880
seznam návrhů, za to, co slovo
Snažím se skutečně kompletní.

1263
00:58:48,880 --> 00:58:53,030
Takže to znamená, že doslova každý
znak zadáte do Googlu

1264
00:58:53,030 --> 00:58:56,900
je odesílán, v konečném důsledku
objem, ale také někdy jeden

1265
00:58:56,900 --> 00:59:00,620
v době za účelem provádění
Tyto auto-kompletní funkce, když

1266
00:59:00,620 --> 00:59:03,000
data je samozřejmě na webu.

1267
00:59:03,000 --> 00:59:08,780
>> Nyní se pojďme podívat na to, co vlastně
se stane, když na tlačítko Vyhledat Googlem.

1268
00:59:08,780 --> 00:59:10,420
A pak budeme využívat to sami.

1269
00:59:10,420 --> 00:59:15,320
Takže když jsem se posunout dolů nyní velmi
První žádost, která se právě stalo.

1270
00:59:15,320 --> 00:59:17,130
Všimněte si, že následující.

1271
00:59:17,130 --> 00:59:25,550
To byl poslán k poměrně dlouhé URL--
https://www.google.com/search?

1272
00:59:25,550 --> 00:59:27,100
a pak celá řada věcí.

1273
00:59:27,100 --> 00:59:29,620
Podívejme se to vlastně nyní
V záložce prohlížeče sám.

1274
00:59:29,620 --> 00:59:31,310
Pojďme se zbavit panelu nástrojů zde.

1275
00:59:31,310 --> 00:59:33,140
Zde je na stránce výsledků vyhledávání.

1276
00:59:33,140 --> 00:59:34,790
A oznámení tady je URL.

1277
00:59:34,790 --> 00:59:37,430
Nyní můžete asi tušíte
co se tady děje částečně.

1278
00:59:37,430 --> 00:59:39,090
Takže v první řadě, definice.

1279
00:59:39,090 --> 00:59:42,570
Toto zřejmě je cíl
kde je formulář odeslán.

1280
00:59:42,570 --> 00:59:44,910
Takže když jsem napsal v
Slova "kočky" a stiskněte klávesu Enter,

1281
00:59:44,910 --> 00:59:48,460
zřejmě Google poslal
moje psaní textu na tuto adresu URL

1282
00:59:48,460 --> 00:59:50,770
že jsem zdůraznila
tam, lomítko vyhledávání.

1283
00:59:50,770 --> 00:59:56,530
Ukázalo se, že v URL, nic, co by
se stane poté, otazník je,

1284
00:59:56,530 --> 01:00:01,270
jak jsme pořád říkáš, pár klíč-hodnota
která byla zadána do formuláře nebo nějakým

1285
01:00:01,270 --> 01:00:04,500
přenášena z
prohlížeče na server.

1286
01:00:04,500 --> 01:00:07,180
>> Takže kdykoliv napíšete vstup
do formy na webu

1287
01:00:07,180 --> 01:00:10,000
a je odeslána jako máme
Diskutoval přes Get,

1288
01:00:10,000 --> 01:00:12,400
jeden z nich virtuální
obálky, obsah

1289
01:00:12,400 --> 01:00:15,510
Z toho envelope-- ano, udržet
stále plněná fyzicky

1290
01:00:15,510 --> 01:00:19,010
do obálky ve třídě
dnes, ale technologicky

1291
01:00:19,010 --> 01:00:21,110
je to vlastně dát do URL.

1292
01:00:21,110 --> 01:00:22,940
Takže ve skutečnosti, dovolte mi prosít přes to.

1293
01:00:22,940 --> 01:00:25,010
Kde vidíte vstup od uživatele?

1294
01:00:25,010 --> 01:00:27,490
Kde vidíte něco
že já sám napsal tady děje?

1295
01:00:27,490 --> 01:00:32,100

1296
01:00:32,100 --> 01:00:33,491
Jo, tak "kočky".

1297
01:00:33,491 --> 01:00:33,990
Právo?

1298
01:00:33,990 --> 01:00:36,380
Tak ať mi to destilovat
do něčeho jednoduššího.

1299
01:00:36,380 --> 01:00:39,917
Jdu smazat vše o
Tato adresa URL, které nerozumím,

1300
01:00:39,917 --> 01:00:42,250
a já jsem prostě jít k odchodu
to jak tohle-- / hledat? q = kočky.

1301
01:00:42,250 --> 01:00:45,640

1302
01:00:45,640 --> 01:00:47,890
Uvidíme kde Q
pochází z roku chvíli,

1303
01:00:47,890 --> 01:00:51,220
ale že se cítí jako minimum
Množství informací, které mám k dispozici.

1304
01:00:51,220 --> 01:00:53,050
A teď budu stiskněte klávesu Enter.

1305
01:00:53,050 --> 01:00:55,520
A všimněte si to ještě funguje.

1306
01:00:55,520 --> 01:00:57,950
Stále se vrátíme spoustu koček.

1307
01:00:57,950 --> 01:01:00,340
Tak Google je milovník
než to v těchto dnech.

1308
01:01:00,340 --> 01:01:01,934
Je to 2016, ne 1999.

1309
01:01:01,934 --> 01:01:04,600
Takže je tu další věci, že mí
prohlížeč posílá na server.

1310
01:01:04,600 --> 01:01:07,100
Ale to je minimálně
to vše je nutné.

1311
01:01:07,100 --> 01:01:08,380
>> Tak o co jde?

1312
01:01:08,380 --> 01:01:14,320
No, v první nech mě jít dopředu a jít
zpět na Cloud9 a nech mě jít napřed

1313
01:01:14,320 --> 01:01:15,620
a zavřu kartách dříve.

1314
01:01:15,620 --> 01:01:18,230
A budu to dělat na mém
vlastnit jen na chvíli.

1315
01:01:18,230 --> 01:01:20,730
Chystám se pokračovat
a vytvořit nový soubor.

1316
01:01:20,730 --> 01:01:23,739
A budu ji uložit jako google.html.

1317
01:01:23,739 --> 01:01:26,280
A budu velmi quickly--
Jdu ukrást, ve skutečnosti,

1318
01:01:26,280 --> 01:01:28,510
některé z těchto textu jen proto, aby ušetřil čas.

1319
01:01:28,510 --> 01:01:30,610
Jdu vložit to tady.

1320
01:01:30,610 --> 01:01:33,850
Nebudu se obtěžovat s
jakákoli stylizace tentokrát.

1321
01:01:33,850 --> 01:01:38,340
Budeme volat toto "Můj Google."

1322
01:01:38,340 --> 01:01:41,230
A já jdu zbavit
všechno v těle.

1323
01:01:41,230 --> 01:01:42,740
A já budu dělat následující.

1324
01:01:42,740 --> 01:01:45,690
Nech mě přiblížit.

1325
01:01:45,690 --> 01:01:50,620
Formulář action-- a jak jsem krátce zmínil
earlier-- whoops-- jak jsem stručně

1326
01:01:50,620 --> 01:01:54,130
již bylo zmíněno, působením
Formulář je místo, kde můžete odeslat data.

1327
01:01:54,130 --> 01:01:56,620
Tak google.com/search.

1328
01:01:56,620 --> 01:01:59,390
A způsob chci použít
může být jedna ze dvou věcí.

1329
01:01:59,390 --> 01:02:02,870
To může být buď "dostat", jak držíme
diskutovat, nebo to může být "post".

1330
01:02:02,870 --> 01:02:05,340
Pro tuto chvíli je zásadní
Rozdíl je v tom, pokud používáte "dostat"

1331
01:02:05,340 --> 01:02:09,590
veškeré informace, které
Uživatel poskytuje dostane poslal v URL.

1332
01:02:09,590 --> 01:02:13,530
>> To je skvělé pro věci, jako je vyhledávání
motory a několik dalších aplikací,

1333
01:02:13,530 --> 01:02:17,080
ale v tom, co by to okolnosti
nebudete chtít vyplnit formulář

1334
01:02:17,080 --> 01:02:21,620
a mít informace neskončil
URL, stejně jako v adresním řádku prohlížeče?

1335
01:02:21,620 --> 01:02:25,470

1336
01:02:25,470 --> 01:02:26,605
Jaké formy dělat vás--

1337
01:02:26,605 --> 01:02:27,480
Diváků: [neslyšitelné]

1338
01:02:27,480 --> 01:02:28,450
David J. Malan: Jo, jako co?

1339
01:02:28,450 --> 01:02:29,270
Diváků: Hesla.

1340
01:02:29,270 --> 01:02:31,936
David J. Malan: Jo, tak se přihlásit
na Facebook nebo nějaké webové stránky.

1341
01:02:31,936 --> 01:02:34,395
To je vstup uživatele z
formuláře, textové pole,

1342
01:02:34,395 --> 01:02:37,020
ale asi to nechci
objevil v URL prohlížeče.

1343
01:02:37,020 --> 01:02:38,121
Proč?

1344
01:02:38,121 --> 01:02:40,870
Myslím, možná tam jsou některé
bezpečnostní důsledky na síti,

1345
01:02:40,870 --> 01:02:44,830
ale more-- rád, jednodušeji, co kdyby
váš spolubydlící, vaše dalších významných,

1346
01:02:44,830 --> 01:02:47,710
vaše děti, váš manžel vypadá
skrz historii prohlížeče?

1347
01:02:47,710 --> 01:02:50,762
Tam je vaše heslo pravdu
tam v historii prohlížeče.

1348
01:02:50,762 --> 01:02:52,220
Že nemá pocit, že dobrý design.

1349
01:02:52,220 --> 01:02:54,500
Nebo dokonce více technicky,
Předpokládám, že se snažíš

1350
01:02:54,500 --> 01:02:59,180
nahrát fotky na Flickr
nebo Facebook nebo wherever--

1351
01:02:59,180 --> 01:03:03,010
že je na vstupu uživatele, i když
je to trochu víc interesting-- jak

1352
01:03:03,010 --> 01:03:05,530
mám vtěsnat obraz v adresním řádku?

1353
01:03:05,530 --> 01:03:06,730
Tak nějak jaksi nemůže.

1354
01:03:06,730 --> 01:03:07,396
Tak nějak půjde.

1355
01:03:07,396 --> 01:03:10,210
Ale fakt, že jsem zle
si představit, že dělá.

1356
01:03:10,210 --> 01:03:13,470
Tak jsem třeba další způsob
nahrávání fotografií na webové stránky,

1357
01:03:13,470 --> 01:03:15,657
a že jiná metoda se nazývá "post".

1358
01:03:15,657 --> 01:03:18,740
Ale teď, budeme jen mluvit o
"Se", což je jednodušší ze dvou.

1359
01:03:18,740 --> 01:03:21,100
Prostě to dává všechno
Uživatelský vstup do URL.

1360
01:03:21,100 --> 01:03:22,830
>> Takže tady je forma Já vytváření.

1361
01:03:22,830 --> 01:03:24,070
Chci vstup.

1362
01:03:24,070 --> 01:03:24,820
A víte co?

1363
01:03:24,820 --> 01:03:26,111
Chystám se vzít hádat zde.

1364
01:03:26,111 --> 01:03:31,600
Jdu připomenout můj
input "q" pro "dotaz".

1365
01:03:31,600 --> 01:03:34,970
A myslím, že je to jeden z
originálním designem, snad z roku 1999.

1366
01:03:34,970 --> 01:03:39,560
A pak typ tohoto vstupu
Je jen bude "text".

1367
01:03:39,560 --> 01:03:43,040
A pak budu mít další vstupy
který nepotřebuje jméno, jak jsme brzy uvidíme

1368
01:03:43,040 --> 01:03:45,120
viz, jehož typ je "předložit".

1369
01:03:45,120 --> 01:03:47,070
A to bude
dej mi speciálního tlačítka.

1370
01:03:47,070 --> 01:03:48,320
A to je vše.

1371
01:03:48,320 --> 01:03:50,790
>> Tak nech mě jít dopředu a uložit tento soubor.

1372
01:03:50,790 --> 01:03:54,910
Chystám se vrátit do mé
prohlížeč a přejděte na google.html.

1373
01:03:54,910 --> 01:03:56,140
Enter.

1374
01:03:56,140 --> 01:03:59,680
A je to docela řídké
přinejmenším.

1375
01:03:59,680 --> 01:04:03,110
Ale nech mě jít napřed
a hledat "kočky".

1376
01:04:03,110 --> 01:04:06,510
A všimněte si, že jsem v současné době
na této adrese Cloud9.

1377
01:04:06,510 --> 01:04:09,240
Ale ve chvíli, kdy jsem na tlačítko to,
kde si doufám, že skončíte?

1378
01:04:09,240 --> 01:04:10,160
>> Diváků: Google.

1379
01:04:10,160 --> 01:04:11,118
>> David J. Malan: Google.

1380
01:04:11,118 --> 01:04:12,740
Takže pojďme na tlačítko Odeslat.

1381
01:04:12,740 --> 01:04:15,200
A skutečně jsem re-implementována Google.

1382
01:04:15,200 --> 01:04:15,700
Právo?

1383
01:04:15,700 --> 01:04:16,480
Je to jednodušší.

1384
01:04:16,480 --> 01:04:17,120
Je to lehčí.

1385
01:04:17,120 --> 01:04:20,350
Myslím, že můj kód je jednoznačně lepší než
jejich, od nepořádku jsme viděli dříve.

1386
01:04:20,350 --> 01:04:21,100
A víte co?

1387
01:04:21,100 --> 01:04:22,610
Chystám se okořenit to až trochu.

1388
01:04:22,610 --> 01:04:23,860
Nezmínil jsem se o to dříve.

1389
01:04:23,860 --> 01:04:27,860
Tam jsou značky, jako H1, v okruhu 1,
nejdůležitější nadpis na stránce.

1390
01:04:27,860 --> 01:04:30,570
"Google My," Zavolám to.

1391
01:04:30,570 --> 01:04:31,940
Nech mě znovu.

1392
01:04:31,940 --> 01:04:33,772
Vypadá to trochu lépe už.

1393
01:04:33,772 --> 01:04:34,980
A skutečně, víte co?

1394
01:04:34,980 --> 01:04:36,430
Mám already-- jsem lhal.

1395
01:04:36,430 --> 01:04:40,200
Řekl jsem, že nebudeme styl to,
ale budu styl to jako předtím.

1396
01:04:40,200 --> 01:04:46,860
A mé tělo se stane,
řekněme, text-align centrum.

1397
01:04:46,860 --> 01:04:48,800
Vypadá to již více jako Google.

1398
01:04:48,800 --> 01:04:51,090
>> Musím zalomení řádku, i když,
za to tlačítko Odeslat.

1399
01:04:51,090 --> 01:04:52,798
A ukázalo se, vy
mohou používat body,

1400
01:04:52,798 --> 01:04:57,320
nebo si můžete více doslova jen říct,
dej mi čáru přestávka here-- na br značku.

1401
01:04:57,320 --> 01:04:59,319
A když jsem znovu to, teď to tam chodí.

1402
01:04:59,319 --> 01:05:01,610
Je to trochu ošklivé, a tak jsem
mohl dělat více řádků,

1403
01:05:01,610 --> 01:05:03,310
ale pojďme se dostat sem příliš nenasytní.

1404
01:05:03,310 --> 01:05:06,430
Takže teď uvidíme, jestli to funguje u "psy".

1405
01:05:06,430 --> 01:05:08,640
Zdá se, že pracovat pro "psy", stejně.

1406
01:05:08,640 --> 01:05:10,780
Takže to, co je tady přesvědčivé stánek s jídlem?

1407
01:05:10,780 --> 01:05:13,600
One-- nebyl obrovský skok na
zavádět několik dalších značek,

1408
01:05:13,600 --> 01:05:15,370
jako tagu form ve vstupním značce.

1409
01:05:15,370 --> 01:05:17,120
Ale ještě podstatnější
znamená, že všichni děláme

1410
01:05:17,120 --> 01:05:20,610
je využití naše porozumění
HTTP a skutečnost,

1411
01:05:20,610 --> 01:05:24,900
že formy nakonec změnit
co je v URL prohlížeče,

1412
01:05:24,900 --> 01:05:28,540
a tak tedy můžeme
mechanicky přispívat k serveru

1413
01:05:28,540 --> 01:05:33,600
tím, že formulář HTML a vědět,
že server chápe, HTTP,

1414
01:05:33,600 --> 01:05:36,890
stejně jako naše tělo chápe, stejně jako,
třást ruce mé, že stejný protokol,

1415
01:05:36,890 --> 01:05:40,920
a tak se vrátíme odpověď
že jsme nakonec očekávat.

1416
01:05:40,920 --> 01:05:44,050
>> Tak pojďme zkusit provést jednu
To poslední, co teď s mobilní,

1417
01:05:44,050 --> 01:05:47,052
a budu make-- Přidám
tento kód sklíčka.

1418
01:05:47,052 --> 01:05:49,760
Takže pokud byste chtěli pohrát, vás
lze jistě vzít odtud.

1419
01:05:49,760 --> 01:05:51,551
Ale já jdu
dopředu a udělat jednu věc.

1420
01:05:51,551 --> 01:05:54,120
Chystám se jít dopředu a
otevřou své indexu page--

1421
01:05:54,120 --> 01:05:59,030
Dobrý den můj stránky jako dříve, což
Má spoustu tohoto textu faux-latiny,

1422
01:05:59,030 --> 01:06:05,470
nebo bezvýznamný latinský text, a has--
vypadá to, že to v této velikosti písma.

1423
01:06:05,470 --> 01:06:07,850
Ale dovolte mi jít dopředu a to udělat.

1424
01:06:07,850 --> 01:06:09,300
Chystám se jít do Cloud9.

1425
01:06:09,300 --> 01:06:10,380
A vy nemusíte dělat tento krok.

1426
01:06:10,380 --> 01:06:11,420
Budu dělat to sám.

1427
01:06:11,420 --> 01:06:12,890
Jdu na tlačítko Share.

1428
01:06:12,890 --> 01:06:15,170
A to je vlastnost
Jen z Cloud9, přičemž

1429
01:06:15,170 --> 01:06:17,710
Mohu se životní prostředí, veřejné.

1430
01:06:17,710 --> 01:06:20,240
>> A právě kvůli
Demonstrace, nech mě to udělat.

1431
01:06:20,240 --> 01:06:22,870
Jdu dělat mé žádosti veřejnosti.

1432
01:06:22,870 --> 01:06:25,230
Všimněte si, to mě varoval, am
Určitě chci to udělat,

1433
01:06:25,230 --> 01:06:28,438
protože to bude dělat každý
ve světě, ať už je to tady

1434
01:06:28,438 --> 01:06:33,560
nebo sledování videa na později
internet možnost vidět, co vidím.

1435
01:06:33,560 --> 01:06:34,440
Ale to je v pořádku.

1436
01:06:34,440 --> 01:06:37,870
Budu říkat "Hotovo."

1437
01:06:37,870 --> 01:06:42,080
A dovolte mi, abych vás povzbudit, kdybych to udělal
Tento correctly-- dovolte mi, abych ji nejprve otestovat.

1438
01:06:42,080 --> 01:06:45,590
Jen do toho, pokud nechcete mind--
do prohlížeče v počítači,

1439
01:06:45,590 --> 01:06:49,900
jděte na tuto adresu URL, a doufejme
uvidíte můj latinský text.

1440
01:06:49,900 --> 01:06:52,820
A aby bylo jasné, že je to
běžící ne na mém notebooku.

1441
01:06:52,820 --> 01:06:53,610
Je to v cloudu.

1442
01:06:53,610 --> 01:06:58,120
Je to na Cloud9, a to doslova, ale
Už jsem se pracovního prostoru veřejnosti

1443
01:06:58,120 --> 01:07:03,450
takže kdokoli na internetu
mohou přistupovat domovskou stránku latinu.

1444
01:07:03,450 --> 01:07:07,209
>> Přejděte na stejnou adresu URL na
telefon, pokud byste mohli.

1445
01:07:07,209 --> 01:07:09,750
Pokud vás to bude stát, když byste
stačí se podívat přes rameno.

1446
01:07:09,750 --> 01:07:40,688

1447
01:07:40,688 --> 01:07:42,467
Diváků: [neslyšitelné]

1448
01:07:42,467 --> 01:07:43,550
David J. Malan: Je mi to líto?

1449
01:07:43,550 --> 01:07:45,390
Diváků: [neslyšitelné]

1450
01:07:45,390 --> 01:07:47,710
David J. Malan: Jen latinská slova.

1451
01:07:47,710 --> 01:07:48,210
To je vše.

1452
01:07:48,210 --> 01:07:49,250
Ale to, co byste měli vidět.

1453
01:07:49,250 --> 01:07:49,875
>> Diváků: Jo.

1454
01:07:49,875 --> 01:07:50,790
David J. Malan: Jo.

1455
01:07:50,790 --> 01:07:51,300
To jo.

1456
01:07:51,300 --> 01:07:51,540
OK.

1457
01:07:51,540 --> 01:07:53,530
Takže můžu zvednout vaše
telefon na chvilku?

1458
01:07:53,530 --> 01:07:57,504
Takže doufejme, že pokud jste v přístupu
to by mělo vypadat téměř nečitelný.

1459
01:07:57,504 --> 01:07:59,920
Je to still-- Myslím, že je to
nečitelný kvůli latiny.

1460
01:07:59,920 --> 01:08:01,920
Ale je to také nečitelný
z jakého jiného důvodu?

1461
01:08:01,920 --> 01:08:03,775
Stejně jako to, co vám nelíbí o tom?

1462
01:08:03,775 --> 01:08:04,650
Diváků: Je to malý.

1463
01:08:04,650 --> 01:08:06,420
David J. Malan: Je to super, super malý.

1464
01:08:06,420 --> 01:08:07,920
Tak jak můžeme tento problém vyřešit?

1465
01:08:07,920 --> 01:08:09,730
Je to super, super malý
Na Victoria telefonu

1466
01:08:09,730 --> 01:08:11,400
a pokud jste stáhl
it up sami, nejspíš

1467
01:08:11,400 --> 01:08:14,660
malá na telefonu stejně, není-li vás
mít zapnutý nastavení přístupnosti.

1468
01:08:14,660 --> 01:08:15,530
Co to je?

1469
01:08:15,530 --> 01:08:18,497
Dalo by se prostě štípat a
zoom, který je funkční,

1470
01:08:18,497 --> 01:08:20,330
ale pak uvidíte pouze
několik slov najednou.

1471
01:08:20,330 --> 01:08:20,859
Tak počkej.

1472
01:08:20,859 --> 01:08:21,720
Vím, jak to opravit.

1473
01:08:21,720 --> 01:08:22,219
Právo?

1474
01:08:22,219 --> 01:08:26,130
Mohl bych použít CSS, a já mohl změnit
velikost písma z 12 bodů na 24-bod.

1475
01:08:26,130 --> 01:08:29,020
Ale vedlejší účinek, který,
Samozřejmě, bude teď,

1476
01:08:29,020 --> 01:08:32,630
na stolním počítači nebo notebooku,
Nyní text je dvakrát tak velký.

1477
01:08:32,630 --> 01:08:35,810
A tak to by bylo hezké druh
rozlišovat mezi zařízeními,

1478
01:08:35,810 --> 01:08:37,840
a to dopadá tam
jsou způsoby, jak dělat to.

1479
01:08:37,840 --> 01:08:39,590
Existuje několik
různé způsoby, ve skutečnosti,

1480
01:08:39,590 --> 01:08:44,189
přičemž pomocí CSS a pokročilejších funkcí
že nebudeme jít do velmi podrobně,

1481
01:08:44,189 --> 01:08:46,960
můžete v podstatě dotaz
prohlížeč a říkají,

1482
01:08:46,960 --> 01:08:51,550
Jestliže je Vaše obrazovka menší než toto
Mnoho pixelů, použít tuto velikost písma.

1483
01:08:51,550 --> 01:08:55,180
Pokud obrazovka je větší než toto
Mnoho pixelů, použijte tento jiný velikost písma.

1484
01:08:55,180 --> 01:08:57,080
>> Můžete být stále ještě chovatel.

1485
01:08:57,080 --> 01:09:00,140
Pokud jste někdy navštívil
webová stránka, že na stole,

1486
01:09:00,140 --> 01:09:04,404
Má velkou nabídku možná off na
boční a poté veškerý obsah

1487
01:09:04,404 --> 01:09:07,029
je na straně, která menu--
to je druh společného paradigmatu.

1488
01:09:07,029 --> 01:09:09,670
Menu na levé straně, obsah
Na pravé straně, nebo naopak.

1489
01:09:09,670 --> 01:09:13,569
Není opravdu pracovat na mobil, když si
Obrazovka je pouze tato řada pixelů.

1490
01:09:13,569 --> 01:09:16,233
Takže běžnější na mobil,
Vaše nabídka se náhle dostanete

1491
01:09:16,233 --> 01:09:18,399
zhroutil, a budete muset
kliknout na tlačítko vidět,

1492
01:09:18,399 --> 01:09:22,404
nebo webové stránky bude klást na nabídku
nad ní a dát obsah pod ním.

1493
01:09:22,404 --> 01:09:24,779
A můžete implementovat tyto
věci různými způsoby, taky.

1494
01:09:24,779 --> 01:09:28,340
Můžete požádat své programátory,
hej, týmu, kdykoliv

1495
01:09:28,340 --> 01:09:34,450
vidíte požadavku HTTP z Androidu
zařízení, zařízení Microsoft, je Google

1496
01:09:34,450 --> 01:09:39,930
zařízení Apple zařízení, použijte tento
velikost písma a používat toto rozvržení menu

1497
01:09:39,930 --> 01:09:42,670
jinak použít výchozí větší rozložení.

1498
01:09:42,670 --> 01:09:45,410
>> Nyní, s použitím co
Základním technika dnes

1499
01:09:45,410 --> 01:09:48,529
mohli inženýři používají
vědět, zda je to

1500
01:09:48,529 --> 01:09:53,660
iPhone, Android, telefon, laptop,
desktop hostující serveru společnosti?

1501
01:09:53,660 --> 01:09:55,310
Ve kterém se dostat tyto informace?

1502
01:09:55,310 --> 01:09:56,080
>> Diváků: Hlavička?

1503
01:09:56,080 --> 01:09:57,740
>> David J. Malan: Jo, hlavička HTTP.

1504
01:09:57,740 --> 01:10:01,714
Takže každý požadavek HTTP přicházející z
jejich zákazníci do svých serverech

1505
01:10:01,714 --> 01:10:03,880
patří, uvnitř které virtuální
obálka, celá parta

1506
01:10:03,880 --> 01:10:08,260
hlaviček HTTP, z nichž jeden je
prohlížeč a operační systém

1507
01:10:08,260 --> 01:10:10,290
dokonce, pokud vám záleží na
že úroveň detailu.

1508
01:10:10,290 --> 01:10:13,790
Nyní je to mystická vypadající řetězec, ale
existuje software, který bude jen

1509
01:10:13,790 --> 01:10:18,530
zjednodušit to, a můžete se zeptat
programování code-- PHP, Java, C ++,

1510
01:10:18,530 --> 01:10:23,650
whatever-- co telefon je tohle--
jaké zařízení je tento uživatel používat?

1511
01:10:23,650 --> 01:10:27,501
A pak si můžete říct, ukázat jim to
verze stránek, jestli je to telefon.

1512
01:10:27,501 --> 01:10:30,250
Ukažte jim tuto verzi
webové stránky, jestli je to notebook nebo desktop.

1513
01:10:30,250 --> 01:10:32,316
Ale vy ani nemusíte
na straně serveru složitost.

1514
01:10:32,316 --> 01:10:33,940
Můžete to udělat i ty nejjednodušší věci.

1515
01:10:33,940 --> 01:10:34,815
>> Chystám se to udělat.

1516
01:10:34,815 --> 01:10:38,995
Chystám se pokračovat do
můj Cloud9 prostředí,

1517
01:10:38,995 --> 01:10:41,370
a jdu přidat značku
že jste viděli v Googlu předtím.

1518
01:10:41,370 --> 01:10:42,770
Je to nazývá metatag.

1519
01:10:42,770 --> 01:10:45,520
A nikdy Vzpomínám si tohle, tak
Chystám se ji přepsat zde.

1520
01:10:45,520 --> 01:10:50,552
Meta name = "viewportu" a poté
content = "width = šířka zařízení, intital

1521
01:10:50,552 --> 01:11:02,060
scale = 1 "a to je vše.

1522
01:11:02,060 --> 01:11:06,230
>> Tak, že to může být i
jako magické zaříkávání.

1523
01:11:06,230 --> 01:11:11,300
To není všechno, že jasné, ale to má
něco společného s průzoru,

1524
01:11:11,300 --> 01:11:15,070
a výřezu je jen tělo
webová stránka je obdélníková oblast, která

1525
01:11:15,070 --> 01:11:16,690
definuje většinu stránky.

1526
01:11:16,690 --> 01:11:19,060
A to je právě říká
prohlížeč, víš co?

1527
01:11:19,060 --> 01:11:22,589
Udělat šířku této stránce
účinně rovná šířce zařízení.

1528
01:11:22,589 --> 01:11:25,380
Jinými slovy, nepředpokládejte, že
Máte jakési neomezený prostor.

1529
01:11:25,380 --> 01:11:29,920
Předpokládejme, že máte jen tolik, kolik
Prostor jak samotného zařízení je velký.

1530
01:11:29,920 --> 01:11:34,454
A tak teď, když jsem znovu toto
ve svém prohlížeči, nevidím žádnou změnu.

1531
01:11:34,454 --> 01:11:37,370
Ale kdybych to udělal correctly-- a
dovolte mi na mou fingers-- pokud vám všem

1532
01:11:37,370 --> 01:11:42,920
přeložit své telefony, viď
viz přesvědčivé změnu?

1533
01:11:42,920 --> 01:11:43,620
Jo, je to--

1534
01:11:43,620 --> 01:11:45,067
>> Diváků: [neslyšitelné]

1535
01:11:45,067 --> 01:11:45,900
David J. Malan: Ano.

1536
01:11:45,900 --> 01:11:46,400
OK.

1537
01:11:46,400 --> 01:11:47,850
Takže pravděpodobně čitelnější teď?

1538
01:11:47,850 --> 01:11:53,070
Ještě malý, abychom byli spravedliví, ale ne
tak malý, aby byl neovladatelný.

1539
01:11:53,070 --> 01:11:56,920
A mohl bych určitě přepsat
dále s CSS nebo na straně serveru,

1540
01:11:56,920 --> 01:12:00,120
ale stále to, co jste
vidění je stále více a více funkcí

1541
01:12:00,120 --> 01:12:02,900
přidávané
na straně klienta environments--

1542
01:12:02,900 --> 01:12:06,530
JavaScript, jak budeme diskutovat
Zítra, CSS, a tak HTML--

1543
01:12:06,530 --> 01:12:09,190
že všechny tyto dotazy
lze provést na straně klienta

1544
01:12:09,190 --> 01:12:11,910
tak, aby se obtěžovat
Server mnohem méně, a nikoli

1545
01:12:11,910 --> 01:12:14,530
muset držet krok s, pro
instance, konstantní nápor

1546
01:12:14,530 --> 01:12:17,210
nového operačního systému
verze, nové verze prohlížeče.

1547
01:12:17,210 --> 01:12:20,190
Stačí si jen nechat prohlížeč
zeptejte zařízení, jak velké jsou ti,

1548
01:12:20,190 --> 01:12:22,890
a pak se poněkud logickým
rozhodnutí založená na tom.

1549
01:12:22,890 --> 01:12:25,140
Ale uvidíme více příležitostí
pro logické rozhodování

1550
01:12:25,140 --> 01:12:27,223
Zítra v kontextu
programovacího jazyka.

1551
01:12:27,223 --> 01:12:29,800

1552
01:12:29,800 --> 01:12:32,760
>> Takže nějaké otázky, poté,
na vývoj webových aplikací?

1553
01:12:32,760 --> 01:12:36,130
V současné době není webové programování, per
o sobě, protože většina všechno, co jsme udělali

1554
01:12:36,130 --> 01:12:38,370
Byl velmi estetický, chcete-li.

1555
01:12:38,370 --> 01:12:41,750
Neexistuje žádný rozhodování v
kód, který jsme napsali,

1556
01:12:41,750 --> 01:12:44,990
a tak to je důvod, proč HTML je značkovací
jazyk, není programovací jazyk.

1557
01:12:44,990 --> 01:12:47,140
Ale zítra budeme brát
letmý pohled, v konečném důsledku,

1558
01:12:47,140 --> 01:12:49,340
v JavaScriptu, který je
skutečný programování

1559
01:12:49,340 --> 01:12:54,220
jazyk, který nám umožňuje dělat trochu víc.

1560
01:12:54,220 --> 01:12:56,800
>> Nějaké otázky?

1561
01:12:56,800 --> 01:13:00,480
No, dovolte mi navrhnout dvě
Příležitosti pro nepovinné úkoly.

1562
01:13:00,480 --> 01:13:02,900
Jeden je-- tyto Cloud9
účty nevyprší.

1563
01:13:02,900 --> 01:13:04,669
Jste vítáni k využití
aby pohrát.

1564
01:13:04,669 --> 01:13:05,960
Je to volná úroveň služeb.

1565
01:13:05,960 --> 01:13:08,754
Uvědomte si, že pokud při vytváření
Váš pracovní prostor, můžete zveřejnili,

1566
01:13:08,754 --> 01:13:11,670
že nemá znamenat, že kdokoli na straně
internet může vidět, co píšete.

1567
01:13:11,670 --> 01:13:15,104
Takže možná jen za
ne do rozpaků sami

1568
01:13:15,104 --> 01:13:18,020
pokud jste uvedení své první web
Strana tam veřejně náhodou,

1569
01:13:18,020 --> 01:13:20,134
ale nikdo to bude
vědí, že vypadají stejně.

1570
01:13:20,134 --> 01:13:23,760
>> A two-- dovolte mi přehazovat
up této adrese také,

1571
01:13:23,760 --> 01:13:28,250
zvláště pokud jste přišel dnes
trochu méně pohodlné než ostatní,

1572
01:13:28,250 --> 01:13:30,430
jisti, co tohle všechno znamená.

1573
01:13:30,430 --> 01:13:36,780
Uvědomte si, že mnohem více o tomto videu
která je jak dobrý způsob, jak usnout

1574
01:13:36,780 --> 01:13:39,380
a také se smát chvíli
Přitom je také

1575
01:13:39,380 --> 01:13:44,300
hodně společensky zajímavé
a bezpečnostní relevantní diskuse

1576
01:13:44,300 --> 01:13:47,370
v něm od Johna Oliver,
byť komik.

1577
01:13:47,370 --> 01:13:55,456
>> Ale pokud nejsou k dispozici žádné další otázky,
To nás přivádí k recepci.

1578
01:13:55,456 --> 01:13:56,830
Tak proč ne zapnu hudby.

1579
01:13:56,830 --> 01:13:58,610
Mělo by být nápojů
a občerstvení venku.

1580
01:13:58,610 --> 01:14:00,220
Jsem rád, že se mísí tak
Dokud lidé chtěli,

1581
01:14:00,220 --> 01:14:01,600
odpovědět na otázky více one-on-one.

1582
01:14:01,600 --> 01:14:03,330
Ale jinak, není zač
vzlétnout na jakémkoli místě,

1583
01:14:03,330 --> 01:14:05,740
a uvidíme se zase
Zítra ráno trochu víc.

1584
01:14:05,740 --> 01:14:07,290
Dobře, díky.

1585
01:14:07,290 --> 01:14:10,428