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

2
00:00:00,127 --> 00:00:01,210
Дейвид Дж Малан: Добре.

3
00:00:01,210 --> 00:00:02,160
Върнахме се.

4
00:00:02,160 --> 00:00:05,810
Така че, целта на тази финална сесия
е да се въведат още няколко понятия

5
00:00:05,810 --> 00:00:09,290
но също така дава възможност на всеки
някак да се простират вашите пръсти

6
00:00:09,290 --> 00:00:11,270
и действително направи нещо
малко практически.

7
00:00:11,270 --> 00:00:13,897
Целта не да се превърне е
всички нас в уеб разработчици

8
00:00:13,897 --> 00:00:16,230
с всякакви средства, но наистина само
да ви даде вкус на някои

9
00:00:16,230 --> 00:00:21,750
на основните конструкции на това, което
отива в уеб програмиране и днес уеб

10
00:00:21,750 --> 00:00:23,980
развитие, така че
статична страна на things--

11
00:00:23,980 --> 00:00:26,660
няма логика, не програмиране
език, просто статично съдържание.

12
00:00:26,660 --> 00:00:29,660
И това ще ни даде възможност
действително да видим какво е уеб сървър,

13
00:00:29,660 --> 00:00:34,140
Вижте какво е HTML файл е, да видим какво
това е HTTP всъщност се сервира.

14
00:00:34,140 --> 00:00:38,600
Но преди да се потопите в, който и да е ретроспективен
въпроси за изчислителни облаци

15
00:00:38,600 --> 00:00:43,922
или сигурност или нещо по средата?

16
00:00:43,922 --> 00:00:44,890
>> Не?

17
00:00:44,890 --> 00:00:47,181
Добре, добре, нека
направите това, само в случай,

18
00:00:47,181 --> 00:00:49,680
процеса на записването за
нещо отнема няколко минути.

19
00:00:49,680 --> 00:00:51,221
Ние ще го оставете да го направи във фонов режим.

20
00:00:51,221 --> 00:00:56,860
Давай напред, ако може,
до този URL here-- c9.io.

21
00:00:56,860 --> 00:01:02,810
Това е трета страна service--
платформа като услуга, ако will--

22
00:01:02,810 --> 00:01:05,190
че няма да ви поканя
да се запишете за една сметка,

23
00:01:05,190 --> 00:01:08,650
и това ще даде на всеки от вас
сметка в т.нар облака

24
00:01:08,650 --> 00:01:11,330
на инфраструктурата на някой друг,
една компания, наречена Cloud9.

25
00:01:11,330 --> 00:01:13,350
Но това, което е хубаво за
това е, че те ви дават

26
00:01:13,350 --> 00:01:15,990
приближение на
действителното развитие в реалния свят

27
00:01:15,990 --> 00:01:18,530
среда, макар и в
облак и в уеб браузър,

28
00:01:18,530 --> 00:01:21,175
и ще използваме това, за да всъщност
експериментирате малко днес.

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

30
00:01:27,116 --> 00:01:30,260
И тогава давай напред и просто да навигирате
пътя си към процеса на регистрация

31
00:01:30,260 --> 00:01:32,630
ако можеш.

32
00:01:32,630 --> 00:01:36,080
Така че ние се случи да използвате тази в класа
Аз преподавам на всички наши ученици,

33
00:01:36,080 --> 00:01:39,140
както на територията на колежа и извън предприятието, и
тя е заменена какво исторически

34
00:01:39,140 --> 00:01:41,390
иначе за сваляне на софтуер.

35
00:01:41,390 --> 00:01:44,620
Така че това, което се получи достъп до
е един от тези виртуални машини,

36
00:01:44,620 --> 00:01:46,460
по същество, че описах по-рано.

37
00:01:46,460 --> 00:01:50,260
Така че тази компания Cloud9 вероятно
наеми от трета party-- наистина

38
00:01:50,260 --> 00:01:52,760
в този случай, Google-- цяло
куп виртуални машини

39
00:01:52,760 --> 00:01:56,500
че те някак си котлет нагоре в
илюзията за отделни сървъри

40
00:01:56,500 --> 00:01:58,610
че всеки от нас има пълен контрол над.

41
00:01:58,610 --> 00:02:01,640
Това не е съвсем точно да се каже
че те са виртуални машини,

42
00:02:01,640 --> 00:02:04,550
все пак, защото това, което
Cloud9 действително използва

43
00:02:04,550 --> 00:02:07,570
е малко по-нова технология
наречен контейнеризация.

44
00:02:07,570 --> 00:02:13,150
И нека да вземете тази снимка
тук, за да нарисува тази картина.

45
00:02:13,150 --> 00:02:16,540
>> Контейнер е, ако
Ако си спомняте на снимката

46
00:02:16,540 --> 00:02:19,900
от по-рано, малко по-леко
тегло, отколкото на виртуална машина.

47
00:02:19,900 --> 00:02:22,090
В действителност, докато миналата
време говорихме за там

48
00:02:22,090 --> 00:02:25,170
като оперативен
система и хипервайзор

49
00:02:25,170 --> 00:02:28,260
и след това гост операционна система, гост
операционна система, гост операционна

50
00:02:28,260 --> 00:02:30,940
система, в горната част на вашия
физически хардуер,

51
00:02:30,940 --> 00:02:33,740
разликата с тази нова
технология, контейнеризация,

52
00:02:33,740 --> 00:02:37,290
е, че всички те по някакъв начин да споделят
същата операционна система.

53
00:02:37,290 --> 00:02:39,970
Но те все още се създаде
илюзията за всеки

54
00:02:39,970 --> 00:02:44,590
като неговата или нейната собствена изключителен
административни права и файлове

55
00:02:44,590 --> 00:02:45,400
на сървъра.

56
00:02:45,400 --> 00:02:48,230
Но има и по-малко софтуер в
между вас и хардуера.

57
00:02:48,230 --> 00:02:52,260
В резултат на което е, в
теория, по-висока производителност,

58
00:02:52,260 --> 00:02:55,470
защото използвате или
губите по-малко ресурси

59
00:02:55,470 --> 00:02:57,360
на този така наречен виртуализиране слой.

60
00:02:57,360 --> 00:02:59,420
Така че това се нарича
контейнеризация от природата

61
00:02:59,420 --> 00:03:02,920
чрез технология, наречена докер,
който е много влизат в себе си.

62
00:03:02,920 --> 00:03:05,086
И това е нещо, което
инженерите на компанията

63
00:03:05,086 --> 00:03:08,610
може вид на нещо като започнат да говорят
около скоро, ако не сте го направили,

64
00:03:08,610 --> 00:03:11,590
макар че със сигурност не
причина за скок на всякакви bandwagons.

65
00:03:11,590 --> 00:03:15,410
>> Така че с това каза, какво
Вие вероятно виждате сега

66
00:03:15,410 --> 00:03:22,670
е екран, който изглежда малко като този.

67
00:03:22,670 --> 00:03:23,170
ДОБРЕ.

68
00:03:23,170 --> 00:03:25,260
И току-що ми се обади над ако не.

69
00:03:25,260 --> 00:03:27,440
И ако so-- аз ще дойда, ако не.

70
00:03:27,440 --> 00:03:30,244
Давай напред и да кликнете, че голяма
плюс, за да се създаде работно място,

71
00:03:30,244 --> 00:03:31,660
и ще видите екран като този.

72
00:03:31,660 --> 00:03:35,020
Можете да се обадите на работното пространство
назовем всичко, което искате за сега.

73
00:03:35,020 --> 00:03:38,660
И точно в действителност за простота,
отидете and-- добре, някои от вас

74
00:03:38,660 --> 00:03:39,660
вече имат работни пространства.

75
00:03:39,660 --> 00:03:47,050
Наречете го каквото и да want-- бизнес,
Харвард, четвъртък, каквото искате.

76
00:03:47,050 --> 00:03:48,800
Вие не се нуждаят от описание.

77
00:03:48,800 --> 00:03:52,380
Можете да го оставите лично, освен ако не
вече има куп работни пространства.

78
00:03:52,380 --> 00:03:55,280
Ако сте принудени да се огласява публично,
това е добре за днешните цели.

79
00:03:55,280 --> 00:03:56,750
Тук също е един от най upsells.

80
00:03:56,750 --> 00:03:59,939
Можете да получите един частен работно място чрез
по подразбиране. Но ако искате повече,

81
00:03:59,939 --> 00:04:00,980
ще трябва да плащат за повече.

82
00:04:00,980 --> 00:04:02,870
В противен случай, те ви принуди
да направи работата ви публично.

83
00:04:02,870 --> 00:04:05,600
Но това е добре, защото те също
насочване на тази при отворен код общности

84
00:04:05,600 --> 00:04:07,700
да насърчи хората да
всъщност си сътрудничат.

85
00:04:07,700 --> 00:04:10,699
>> И последното нещо, което е важно,
обаче, е, след като сте избрали име

86
00:04:10,699 --> 00:04:17,140
и след като сте избрали частна или публична,
кликнете HTML5, оранжево иконата на голям

87
00:04:17,140 --> 00:04:22,430
вторият от ляво, и
След това кликнете върху Създаване на Workspace.

88
00:04:22,430 --> 00:04:24,580
И това вероятно ще
отнеме минута или така,

89
00:04:24,580 --> 00:04:26,540
но след това ще има
среда, след като

90
00:04:26,540 --> 00:04:30,544
направи това, което изглежда напомня на
това, което имам на екрана тук сега.

91
00:04:30,544 --> 00:04:33,210
Но, отново, това може да отнеме няколко минути
или повече, за да стигнем до този екран

92
00:04:33,210 --> 00:04:34,770
след като веднъж сте кликнали Създаване Workspace.

93
00:04:34,770 --> 00:04:37,936
Но просто ми знамето, ако искате да ми харесва
за да разгледаме нещо или съвети.

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

95
00:04:40,191 --> 00:04:40,690
Добре.

96
00:04:40,690 --> 00:04:42,390
Така че аз ще фон това за сега.

97
00:04:42,390 --> 00:04:44,260
Обади ми свършва, ако вие като че ли
някакви технически трудности.

98
00:04:44,260 --> 00:04:46,210
Но, отново, това може да отнеме известно
малко за това да се отвори.

99
00:04:46,210 --> 00:04:49,570
И да вървим напред и да се говори за това, което
тя всъщност означава да се направи уеб страница,

100
00:04:49,570 --> 00:04:52,780
какво е HTML и как цялата
Сега свързва както ние започваме

101
00:04:52,780 --> 00:04:54,730
действително да използвате някои от технологиите.

102
00:04:54,730 --> 00:04:58,310
Така се оказва, че не мога да
отида на малкото ми Mac тук,

103
00:04:58,310 --> 00:05:01,650
отвори една проста програма, наречена
TextEdit, или на Windows можех

104
00:05:01,650 --> 00:05:04,480
отворен нещо, наречено notepad.exe.

105
00:05:04,480 --> 00:05:08,260
И аз може просто просто направи нещо
като this-- "Здравей, свят".

106
00:05:08,260 --> 00:05:12,020
И тогава може да спаси това, както е
hello.txt Така че няма магическа там.

107
00:05:12,020 --> 00:05:15,200
Това няма нищо общо с уеб
програмиране, няма нищо общо с HTML.

108
00:05:15,200 --> 00:05:16,790
Просто създаване на обикновен текстов файл.

109
00:05:16,790 --> 00:05:20,600
Но се оказва, че един уеб
страница е буквално точно това.

110
00:05:20,600 --> 00:05:24,020
Това е прост текстов файл, съдържащ текст
че може да напишете в клавиатурата,

111
00:05:24,020 --> 00:05:30,070
но обикновено, но не винаги
завършва не .txt но .html или .htm.

112
00:05:30,070 --> 00:05:32,050
И вие не само
Типове думи във файла.

113
00:05:32,050 --> 00:05:35,280
Вие действително трябва да използвате неща, наречени
тагове или, по-общо, нещо

114
00:05:35,280 --> 00:05:37,190
наречен език за маркиране.

115
00:05:37,190 --> 00:05:40,510
>> Така че аз ще много бързо пишете
и след това се обяснява по-долу.

116
00:05:40,510 --> 00:05:42,290
Отивам да се първо
въведете този, който казва,

117
00:05:42,290 --> 00:05:45,730
хей, браузър, тук идва
уеб страница, написана на HTML.

118
00:05:45,730 --> 00:05:51,850
И тези две неща заедно казват, хей,
браузър, следното е наистина HTML.

119
00:05:51,850 --> 00:05:55,790
Хей, браузър, тук идва
главата или в горната част на страницата ми.

120
00:05:55,790 --> 00:05:59,900
Хей, браузър, от вътрешната страна на горната част на
страницата ми, сложи заглавие, което е, "Здравей,

121
00:05:59,900 --> 00:06:01,610
свят. "

122
00:06:01,610 --> 00:06:08,370
Хей, браузър, след главата на моя
страница, тук идва тялото на моята страница.

123
00:06:08,370 --> 00:06:12,170
И, хей, браузър, тялото ми
страница също трябва да се каже, "Hello World".

124
00:06:12,170 --> 00:06:15,500
Така че какви са характерните детайли тук?

125
00:06:15,500 --> 00:06:17,960
Това е това, което е като цяло
наречената декларация док-тип,

126
00:06:17,960 --> 00:06:20,190
и, честно казано, това е малко
Трудно е да запомните това на първо време.

127
00:06:20,190 --> 00:06:21,481
Ти просто вид копиране и поставяне него.

128
00:06:21,481 --> 00:06:23,760
Това е формален начин
да се каже, хей, браузър,

129
00:06:23,760 --> 00:06:28,030
Аз съм с HTML версия 5, която
излезе малко по-наскоро.

130
00:06:28,030 --> 00:06:31,380
Това е един магически заклинания, че някои
хората с лошо чувство за дизайн

131
00:06:31,380 --> 00:06:33,640
реши да постави в
много началото на файла.

132
00:06:33,640 --> 00:06:35,473
Въпреки, че това е
малко тайнствена, това е всичко,

133
00:06:35,473 --> 00:06:38,250
тя means-- хей, браузър, тук
идва с версия 5 на HTML.

134
00:06:38,250 --> 00:06:41,741
>> Останалата част от този е бил с нас
от известно време насам, исторически,

135
00:06:41,741 --> 00:06:44,740
но това е било развива, и това е
вероятно е била става малко по-просто.

136
00:06:44,740 --> 00:06:47,320
Забележете няколко характеристики
от това, което съм подчертани.

137
00:06:47,320 --> 00:06:49,890
Има тези неща с ъглова
brackets-- лявата скоба

138
00:06:49,890 --> 00:06:51,040
и дясната скоба.

139
00:06:51,040 --> 00:06:52,490
И забележи симетрията тук.

140
00:06:52,490 --> 00:06:57,340
И от симетрия, искам да кажа, точно както аз
имам този начален маркер тук или отворен таг

141
00:06:57,340 --> 00:07:01,560
ако щете, тук имам
близо тагове или краен маркер, който е

142
00:07:01,560 --> 00:07:06,460
различно само дотолкова, доколкото го има този
наклонена черта в началото на думата

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

144
00:07:07,360 --> 00:07:09,360
И вие може да се мисли за
това като бях небрежно

145
00:07:09,360 --> 00:07:12,280
предложи преди, хей,
браузър, тук идва някои HTML.

146
00:07:12,280 --> 00:07:16,060
И, обратно, хей, браузър, който е
то за началото на HTML-- и края.

147
00:07:16,060 --> 00:07:18,440
>> Междувременно хей, браузър, тук
идва на главата на моята страница.

148
00:07:18,440 --> 00:07:20,140
Хей, браузър, че това е за главата.

149
00:07:20,140 --> 00:07:22,240
Хей, браузър, тук е
тялото на моята страница.

150
00:07:22,240 --> 00:07:24,020
Хей, браузър, че това е за тялото.

151
00:07:24,020 --> 00:07:26,940
И вътре, че е известна
произволен текст за сега.

152
00:07:26,940 --> 00:07:30,520
И вътре в главата, междувременно,
е някаква произволна но маркирани,

153
00:07:30,520 --> 00:07:34,410
така да се каже, текст, който казва, заглавието
на моята страница е "Hello, World".

154
00:07:34,410 --> 00:07:37,470
Сега, за сега, можете да
Предполагам, че браузъри

155
00:07:37,470 --> 00:07:41,762
Трябва only-- или, по-скоро, уеб страници имат
само две parts-- главата и тялото.

156
00:07:41,762 --> 00:07:44,220
И главата обикновено е просто
като лентата с менюта, нещата

157
00:07:44,220 --> 00:07:45,510
наистина само най-горната част.

158
00:07:45,510 --> 00:07:48,910
И тялото е смелостта на страницата,
всичко в този голям правоъгълник

159
00:07:48,910 --> 00:07:50,239
която изпълва екрана.

160
00:07:50,239 --> 00:07:51,780
Така че аз ще отида напред и да направим това.

161
00:07:51,780 --> 00:07:54,400
Аз ще отида напред и
кликнете Save, File Save.

162
00:07:54,400 --> 00:07:58,580
И аз ще се спаси
това като hello.html,

163
00:07:58,580 --> 00:08:00,870
и аз съм просто ще
Казано на компютъра си.

164
00:08:00,870 --> 00:08:03,520
И аз ще отида
напред и кликнете върху Запазване.

165
00:08:03,520 --> 00:08:05,806
И notice-- ми Mac в
малко е да ми крещи.

166
00:08:05,806 --> 00:08:07,180
Сигурни ли сте че искате да направите това?

167
00:08:07,180 --> 00:08:08,710
И аз отивам да се каже, да, използвайте HTML.

168
00:08:08,710 --> 00:08:10,400
Аз знам по-добре в този случай.

169
00:08:10,400 --> 00:08:14,686
И сега аз ще отида да ми десктоп
където имам този файл изведнъж.

170
00:08:14,686 --> 00:08:16,060
И аз отивам да щракнете двукратно върху него.

171
00:08:16,060 --> 00:08:18,268
И вие ще забележите, че като
подразбиране Chrome отвори.

172
00:08:18,268 --> 00:08:19,996
Това е, защото това е
моят браузър по подразбиране.

173
00:08:19,996 --> 00:08:21,370
И тя просто казва: "Здравей, свят".

174
00:08:21,370 --> 00:08:23,078
Но тя казва "здравей,
свят "на две места.

175
00:08:23,078 --> 00:08:23,979
Забележете горния ляв.

176
00:08:23,979 --> 00:08:25,020
Доста трудно да пропуснете това.

177
00:08:25,020 --> 00:08:26,180
Това е голям и смел.

178
00:08:26,180 --> 00:08:30,690
И къде другаде пък изглежда
да се каже, "Здравей, свят"?

179
00:08:30,690 --> 00:08:31,470
>> АУДИТОРИЯ: В раздела.

180
00:08:31,470 --> 00:08:33,100
>> Дейвид Дж Малан: Да, самата раздела.

181
00:08:33,100 --> 00:08:35,159
Така че, когато каза ръководителят на
страница е всичко top--

182
00:08:35,159 --> 00:08:36,367
и наистина това е заглавието.

183
00:08:36,367 --> 00:08:37,710
Това е просто в раздела тук.

184
00:08:37,710 --> 00:08:40,320
И аз може да тегли този раздел
така, че да не се обърка.

185
00:08:40,320 --> 00:08:43,360
Това е само един раздел сега,
и наистина виждаме "Здравей, свят"

186
00:08:43,360 --> 00:08:45,970
до тук и "Hello, World" тук долу.

187
00:08:45,970 --> 00:08:47,160
Така че доста ясен.

188
00:08:47,160 --> 00:08:49,050
Но тя също е доста проста.

189
00:08:49,050 --> 00:08:50,440
И, всъщност, аз мащаба.

190
00:08:50,440 --> 00:08:53,272
Мога да промените размера на шрифта просто
да увеличаваме за достъпност.

191
00:08:53,272 --> 00:08:56,830
Но нека сега да направим нещо
малко по-интересна.

192
00:08:56,830 --> 00:08:59,760
>> Отивам да go-- Опа, нека
ми се върна към текст моето досие.

193
00:08:59,760 --> 00:09:02,400
Връщам се към моята
текстов файл, и аз ще съм

194
00:09:02,400 --> 00:09:06,320
да се промени това и да каже
"Здравей, Disney World."

195
00:09:06,320 --> 00:09:07,970
Запазване.

196
00:09:07,970 --> 00:09:10,919
И се върна в моя
браузър и натиснете Reload.

197
00:09:10,919 --> 00:09:12,710
И сега, разбира се, тя
казва "Disney World."

198
00:09:12,710 --> 00:09:15,500
И аз ще изкуствено увеличение
в точно така е по-лесно да се види.

199
00:09:15,500 --> 00:09:19,012
Така че сега, за съжаление, аз вид искате
to-- всъщност, това е функция Mac.

200
00:09:19,012 --> 00:09:21,720
Искам да кликнете върху Disney World
и отидете някъде като disney.com,

201
00:09:21,720 --> 00:09:23,290
но това не работи.

202
00:09:23,290 --> 00:09:26,850
Така че основен принцип на мрежата е
хипервръзки, връзки, които отиват другаде.

203
00:09:26,850 --> 00:09:28,390
И така, как мога да направя това?

204
00:09:28,390 --> 00:09:34,690
Е, аз може просто да се каже,
"Здравей, http://www.disney.com."

205
00:09:34,690 --> 00:09:36,110
Запази това.

206
00:09:36,110 --> 00:09:37,620
Презареди.

207
00:09:37,620 --> 00:09:39,400
Но това също не може да се кликва.

208
00:09:39,400 --> 00:09:42,930
И това, което е хубаво тук, въпреки че
това все още не е функционален,

209
00:09:42,930 --> 00:09:45,930
е, че изглежда, че
браузър прави буквално само

210
00:09:45,930 --> 00:09:46,950
това, което аз го кажа, за да се направи.

211
00:09:46,950 --> 00:09:50,110
Така че, ако аз просто въведете URL като този,
това е просто щеше да ми покаже URL.

212
00:09:50,110 --> 00:09:54,270
Трябва да се използват тагове и маркиране
език действително да кажа

213
00:09:54,270 --> 00:09:55,621
браузъра, за да направи дори повече.

214
00:09:55,621 --> 00:09:57,870
Така че аз ще отида напред и
изтриете това за момент.

215
00:09:57,870 --> 00:10:00,980
И аз ще кажа, хей,
браузър, започнете котва тук,

216
00:10:00,980 --> 00:10:02,650
линк така да се каже.

217
00:10:02,650 --> 00:10:07,500
И на хипер-препратка, дестинацията
на които котва, трябва да бъде този URL.

218
00:10:07,500 --> 00:10:08,750
И забележи моите кавички.

219
00:10:08,750 --> 00:10:11,590
Мога да използвам единични кавички, твърде,
но трябва да бъде последователна,

220
00:10:11,590 --> 00:10:14,270
и аз по принцип би просто използвайте
двойни кавички, за да го прости.

221
00:10:14,270 --> 00:10:16,820
Забележете, аз отивам да затворите тага.

222
00:10:16,820 --> 00:10:21,160
И тогава тук Отивам
да се каже, "Disney World."

223
00:10:21,160 --> 00:10:26,890
И сега имам нужда от малко symmetry--
отворена скоба, / а, затворена скоба.

224
00:10:26,890 --> 00:10:28,090
>> Така че това, което съм, въведена?

225
00:10:28,090 --> 00:10:30,100
Ние сме имали няколко тагове вече.

226
00:10:30,100 --> 00:10:32,410
HTML, Head, дял, тяло,
са всички тагове, така да се каже,

227
00:10:32,410 --> 00:10:34,280
с отворени и затворени колеги.

228
00:10:34,280 --> 00:10:36,530
Но забележете, че това е нещо като
на коренно различна.

229
00:10:36,530 --> 00:10:39,140
Това е, което ние ще наричаме
в HTML атрибут.

230
00:10:39,140 --> 00:10:41,451
И атрибут е
само ключ-стойност чифт.

231
00:10:41,451 --> 00:10:43,950
Това е често срещано нещо в
компютър science-- ключ-стойност чифт.

232
00:10:43,950 --> 00:10:45,770
Това е нещо като инструмент на търговията.

233
00:10:45,770 --> 00:10:47,040
Ключов и стойност.

234
00:10:47,040 --> 00:10:49,390
Една дума и след това някои
друга дума или думи.

235
00:10:49,390 --> 00:10:53,790
И в този случай, най-важното е HREF,
и стойността е, че пълното URL.

236
00:10:53,790 --> 00:10:57,890
И това, което атрибут прави, че е
оказва влияние върху поведението на един маркер.

237
00:10:57,890 --> 00:11:01,010
И в този случай, ние трябва да се повлияе
поведението на маркера на котва,

238
00:11:01,010 --> 00:11:04,140
защото ние трябва да се закотви
тази връзка някъде.

239
00:11:04,140 --> 00:11:06,960
И как се прави това е
по пътя на атрибута.

240
00:11:06,960 --> 00:11:08,970
>> Така че аз ще отида напред
и запишете файла сега.

241
00:11:08,970 --> 00:11:11,300
Върни се в моя браузър и презареждане.

242
00:11:11,300 --> 00:11:14,580
И готово, сега имаме
начало на легитимен уеб страница.

243
00:11:14,580 --> 00:11:18,420
Super-прост, но ако аз мишката върху
this-- известие долния ляв ъгъл на,

244
00:11:18,420 --> 00:11:19,830
това е супер-малък.

245
00:11:19,830 --> 00:11:21,730
Но нали виждате www.disney.com.

246
00:11:21,730 --> 00:11:27,076
И ако го натиснете, наистина това
ме отвлече в disney.com.

247
00:11:27,076 --> 00:11:29,380
Сега, на любопитното
тук е, че не е

248
00:11:29,380 --> 00:11:33,940
на best-- най-продаваеми URL, но
това е добре, защото този файл не

249
00:11:33,940 --> 00:11:35,360
съществува на World Wide Web.

250
00:11:35,360 --> 00:11:39,740
Тя съществува като локални файлове в привидно
моите Потребители directory-- / jharvard--

251
00:11:39,740 --> 00:11:41,890
за Джон Harvard-- / десктоп.

252
00:11:41,890 --> 00:11:42,634
Но тя има URL.

253
00:11:42,634 --> 00:11:43,800
Тя просто се случва да бъде местен.

254
00:11:43,800 --> 00:11:47,050
За съжаление, никой от вас не може да посетите
това, защото, ако сте написали този URL,

255
00:11:47,050 --> 00:11:49,980
вие искате да се казва на браузъра,
за даден файл, наречен hello.html погледнем

256
00:11:49,980 --> 00:11:50,772
на твърдия ви диск.

257
00:11:50,772 --> 00:11:53,271
И, разбира се, освен ако не сте
е следната заедно ръчно,

258
00:11:53,271 --> 00:11:54,530
това няма да съществува там.

259
00:11:54,530 --> 00:11:55,190
>> Така че това е добре.

260
00:11:55,190 --> 00:11:57,815
Ние все още се нуждаят от начин, в крайна сметка,
за да получите този файл в мрежата,

261
00:11:57,815 --> 00:12:01,180
но нека да дразни с изключение на няколко
последствия за сигурността на това, което ние просто

262
00:12:01,180 --> 00:12:04,850
видях и го връзвам обратно към по-рано
обсъждане от тази сутрин.

263
00:12:04,850 --> 00:12:08,200
Оказва се, че, ако един
браузър буквално прави

264
00:12:08,200 --> 00:12:12,560
това, което аз го кажа, за да се направи, и изглежда,
да се окаже, че котва маркер е

265
00:12:12,560 --> 00:12:17,380
влияе от стойността на
този атрибут наречен HREF

266
00:12:17,380 --> 00:12:20,810
но той показва това
текст, това би изглеждало

267
00:12:20,810 --> 00:12:26,520
да се предполага, че може да изложи на URL адреса
и на двете места и след това презареди

268
00:12:26,520 --> 00:12:29,100
и сега ще видим URL и отидете на URL адреса.

269
00:12:29,100 --> 00:12:32,680
Забележете, ако мишката върху долния ляв,
Аз съм наистина става още да disney.com.

270
00:12:32,680 --> 00:12:38,340
>> Така че, ако някога сте били
phished-- Р-Н-I-S-H-E-D--

271
00:12:38,340 --> 00:12:42,820
с един от тези фалшиви имейли
от подобно PayPal вашата банка,

272
00:12:42,820 --> 00:12:46,470
Вие вероятно сте придобили връзки вътре
на имейла, че четете, че

273
00:12:46,470 --> 00:12:49,970
ви казва да кликнете тук, за да отидете, потвърдят
парола или да потвърди датата си на раждане

274
00:12:49,970 --> 00:12:53,840
или социална или нещо социално
вие инженерство, за да разкрие

275
00:12:53,840 --> 00:12:54,920
информация.

276
00:12:54,920 --> 00:12:57,625
Е, мога да вид вземе
Предимството на този, не бих могъл?

277
00:12:57,625 --> 00:13:01,240
Бих могъл да кажа нещо
като, www.paypal.com.

278
00:13:01,240 --> 00:13:11,340
И вместо disney.com, I
може да отиде до тях, като, badguy.com.

279
00:13:11,340 --> 00:13:12,850
Презареди.

280
00:13:12,850 --> 00:13:16,620
И колко лесно е това да измамят,
особено нетехническо четец

281
00:13:16,620 --> 00:13:20,649
или бегло четене
четец, отколкото да кликнете

282
00:13:20,649 --> 00:13:23,940
връзка като тази, която, ако кликнете it--
Аз всъщност не искам да отида badguy.com.

283
00:13:23,940 --> 00:13:25,398
Аз не знам какво е всъщност там.

284
00:13:25,398 --> 00:13:30,080
Така paypal.com, известие, е
това, което той казва, че ще,

285
00:13:30,080 --> 00:13:33,210
но, разбира се, ако аз гледам надолу
супер-ниско, това е малко неясно,

286
00:13:33,210 --> 00:13:34,230
но тя казва badguy.com.

287
00:13:34,230 --> 00:13:38,644
Това е единственият кажа сега,
че аз ще грешното място.

288
00:13:38,644 --> 00:13:41,560
И когато казах по-рано, че банките
Наистина не трябва да насърчават или влак

289
00:13:41,560 --> 00:13:44,510
потребители да кликват линкове, този
е само една проява на него.

290
00:13:44,510 --> 00:13:45,430
И това е толкова просто.

291
00:13:45,430 --> 00:13:48,120
Вече сте противник, ако
правиш нещо подобно

292
00:13:48,120 --> 00:13:51,000
и се опитват да подведат потребителя
в посещение на вашия сайт.

293
00:13:51,000 --> 00:13:53,320
Но за сега, ние ще продължаваме
нещата хубаво и чисто.

294
00:13:53,320 --> 00:13:55,640
Ние ще вървим напред
и назад тези промени.

295
00:13:55,640 --> 00:13:56,530
Презареждане на страницата.

296
00:13:56,530 --> 00:13:57,740
И аз се върна в disney.com.

297
00:13:57,740 --> 00:14:00,660
>> Нека да видим дали не можем да дразни
това освен малко повече.

298
00:14:00,660 --> 00:14:04,160
Така "здравей, Disney World."

299
00:14:04,160 --> 00:14:05,950
Отивам да кажа тук.

300
00:14:05,950 --> 00:14:08,220
Може би аз ще се направят някои стая.

301
00:14:08,220 --> 00:14:12,730
"Надяваме се да се насладите на престоя си!"

302
00:14:12,730 --> 00:14:13,830
Запазване.

303
00:14:13,830 --> 00:14:15,850
Презареди.

304
00:14:15,850 --> 00:14:19,010
Това не е rea--, че не е
това, което възнамерявах, нали?

305
00:14:19,010 --> 00:14:21,870
Искам да кажа, ако аз съм лечение на моя текст
файл като текстообработваща програма,

306
00:14:21,870 --> 00:14:24,894
какво си се надявам да се случи тук?

307
00:14:24,894 --> 00:14:27,060
Да, аз се чувствам като там
трябва да е знак за нов ред тук,

308
00:14:27,060 --> 00:14:28,799
така тя се чувства бъги по някакъв начин.

309
00:14:28,799 --> 00:14:31,090
Но това е всъщност умишлено,
защото както преди,

310
00:14:31,090 --> 00:14:33,381
браузърът ще само да
направите това, което го кажа, за да се направи.

311
00:14:33,381 --> 00:14:34,806
Не съм го казал, за да се прекъсне линии.

312
00:14:34,806 --> 00:14:37,930
Аз не съм го казал, за да се движи надолу, дори
макар, интуитивно, имам чувството, че го направих.

313
00:14:37,930 --> 00:14:39,805
Така се оказва, че трябва
малко повече за маркиране,

314
00:14:39,805 --> 00:14:41,390
и аз отивам да се определи това, както следва.

315
00:14:41,390 --> 00:14:46,160
Отивам да предговор този първи здравей
с това, което се нарича точка маркер.

316
00:14:46,160 --> 00:14:48,920
И тогава аз ще отида напред
и увийте тази друга присъда

317
00:14:48,920 --> 00:14:54,370
в друг параграф таг, въпреки че
те са супер-кратки параграфи.

318
00:14:54,370 --> 00:14:55,930
Сега аз ще се спаси.

319
00:14:55,930 --> 00:14:57,160
Презареди.

320
00:14:57,160 --> 00:14:59,070
И сега ние имаме, че
пространство, и ние нещо

321
00:14:59,070 --> 00:15:01,680
има семантиката на
две отделни параграфи.

322
00:15:01,680 --> 00:15:05,290
>> Това е всичко, глоба и добра, но би
било хубаво да добавите изображение към тази страница,

323
00:15:05,290 --> 00:15:08,710
така че аз ще отида за да изглежда
Мики Маус на Google Images.

324
00:15:08,710 --> 00:15:12,830
И просто за забавление, аз съм
Ще вземете този образ.

325
00:15:12,830 --> 00:15:15,350
Отивам да се продължи напред сега и
вземете адреса на този образ,

326
00:15:15,350 --> 00:15:16,510
въпреки че там е различно
начина да направите това.

327
00:15:16,510 --> 00:15:18,520
За сега, аз съм просто ще копирате адреса.

328
00:15:18,520 --> 00:15:24,770
Отивам да се върна в моя текст
файл, и аз ще кажа тук,

329
00:15:24,770 --> 00:15:31,160
IMG SRC = цитат цитата
че URL, супер-дълго.

330
00:15:31,160 --> 00:15:34,580
И тогава понятието за
изображението е малко по-различна.

331
00:15:34,580 --> 00:15:38,640
Има наистина няма понятие за отправна
изображение и завършва на изображение,

332
00:15:38,640 --> 00:15:40,630
като начален маркер край маркер.

333
00:15:40,630 --> 00:15:43,840
Така че тя се чувства малко странно да
ми семантично да направите това,

334
00:15:43,840 --> 00:15:45,390
да имат етикет близък кадър.

335
00:15:45,390 --> 00:15:46,780
Това не е неправилно.

336
00:15:46,780 --> 00:15:48,840
Това е съвсем верен,
и това е насърчавани,

337
00:15:48,840 --> 00:15:50,870
но има стенограмите нотация.

338
00:15:50,870 --> 00:15:53,780
Аз мога вид едновременно
отваряне и затваряне на същия маркер,

339
00:15:53,780 --> 00:15:55,510
и че ще направи браузъра щастлив.

340
00:15:55,510 --> 00:15:56,950
Така че това е само малко
по-кратък за неща

341
00:15:56,950 --> 00:15:59,408
че концептуално наистина не правя
да има смисъл да се започне и край.

342
00:15:59,408 --> 00:16:01,190
Те просто са там, или те не са.

343
00:16:01,190 --> 00:16:06,020
>> Така че аз отивам да спаси това и да се върна
да ми "Hello, World" страница и презареждане.

344
00:16:06,020 --> 00:16:09,880
И това е малко извън контрол,
защото този образ е всъщност

345
00:16:09,880 --> 00:16:12,210
малко голям, но това е ОК.

346
00:16:12,210 --> 00:16:13,710
Можех да го преоразмерите в една програма.

347
00:16:13,710 --> 00:16:14,900
Или знаеш ли какво.

348
00:16:14,900 --> 00:16:17,350
Само за да се докаже, че съм
Ще всъщност казват,

349
00:16:17,350 --> 00:16:21,760
че ширината на това нещо трябва
да бъде само на 200 пиксела, 200 точки.

350
00:16:21,760 --> 00:16:24,360
Нека да вървим напред и да спаси
и се презарежда, и сега на страницата

351
00:16:24,360 --> 00:16:25,690
изглежда малко по-разумен.

352
00:16:25,690 --> 00:16:27,260
Но забележете модела.

353
00:16:27,260 --> 00:16:30,030
Е, аз съм нещо като научи всичко
на HTML в някакъв смисъл, най-малко

354
00:16:30,030 --> 00:16:33,531
концептуално, защото всички HTML е е
тези tags-- отворени тагове, затворени тагове,

355
00:16:33,531 --> 00:16:35,280
и атрибути, които
променят поведението си.

356
00:16:35,280 --> 00:16:38,380
И, очевидно, всеки
маркер може да има нула или един

357
00:16:38,380 --> 00:16:43,005
или две или повече атрибути, всяка от
който прави нещо по-различно.

358
00:16:43,005 --> 00:16:44,380
Сега, как да знам това, което съществува?

359
00:16:44,380 --> 00:16:46,800
Можете просто да слушате някого
като мен да ви кажа това, което съществува,

360
00:16:46,800 --> 00:16:50,860
или просто Google наоколо за начинаещи
на HTML, и той наистина е този прост.

361
00:16:50,860 --> 00:16:54,030
>> Наистина, когато бях студент
Преди години и научих, HTML,

362
00:16:54,030 --> 00:16:56,530
един от моите математика преподаване
асистенти просто изразходвани

363
00:16:56,530 --> 00:16:59,600
малко време ми уроци
за подобно половин час, час,

364
00:16:59,600 --> 00:17:00,660
и след това аз бях на път.

365
00:17:00,660 --> 00:17:03,300
Аз бях на път към вземане
най-отвратителен интернет сайта всякога,

366
00:17:03,300 --> 00:17:05,549
който, както изглежда, не съм
наистина напредна отвъд.

367
00:17:05,549 --> 00:17:09,849
Но въпросът е, че, след като
разберат тези прости ideas--

368
00:17:09,849 --> 00:17:13,450
ако тайнствена text-- но тези прости
идеи за стартиране на мисълта

369
00:17:13,450 --> 00:17:15,960
и затваряне на една мисъл, запазвайки
всичко добре балансиран,

370
00:17:15,960 --> 00:17:19,150
търси нещо, за изменение на
поведение на този етикет, че е наистина всичко

371
00:17:19,150 --> 00:17:20,079
има за него.

372
00:17:20,079 --> 00:17:28,140
И в действителност, ако сега отидете
нещо като google.com-- всъщност,

373
00:17:28,140 --> 00:17:31,920
нека да отидем на място, малко по-
reasonable-- stanford.edu.

374
00:17:31,920 --> 00:17:37,800
И аз ще отида да ги видите,
Developer, View Source.

375
00:17:37,800 --> 00:17:41,400
Това е грозно, но notice--
и аз ще увеличите известие

376
00:17:41,400 --> 00:17:43,432
някои неща, които са запознати вече.

377
00:17:43,432 --> 00:17:45,140
Има това до тук,
който е браузър.

378
00:17:45,140 --> 00:17:46,800
Тук идва HTML5.

379
00:17:46,800 --> 00:17:47,634
Има HTML.

380
00:17:47,634 --> 00:17:49,550
Очевидно, има един
атрибут, че не го направих

381
00:17:49,550 --> 00:17:51,540
използвате, която определя
език на страницата,

382
00:17:51,540 --> 00:17:54,380
и това може да помогне с автоматична
превод и подобни неща.

383
00:17:54,380 --> 00:17:55,546
Ето главата на страницата.

384
00:17:55,546 --> 00:17:57,790
Ето заглавието на страницата на Станфорд.

385
00:17:57,790 --> 00:17:59,832
Има един етикет не го направих
говорим за yet-- Мета таг.

386
00:17:59,832 --> 00:18:01,540
Това е просто нещо
обща информация.

387
00:18:01,540 --> 00:18:04,210
Той помага с SEO, или
Оптимизация за търсачки,

388
00:18:04,210 --> 00:18:06,320
или Google-резултати от търсенето или други подобни.

389
00:18:06,320 --> 00:18:09,029
Но ако ние продължаваме да търсим, имайте
търси, тук е маркер за тяло.

390
00:18:09,029 --> 00:18:11,570
А има и букети от друга
тагове ние все още не сме говорили за.

391
00:18:11,570 --> 00:18:13,750
Но Div е за
разделение на страницата.

392
00:18:13,750 --> 00:18:16,680
Това е като един невидим правоъгълник
ако нещо искате да умствено

393
00:18:16,680 --> 00:18:20,160
разделят на страницата си в
различни единици онлайн.

394
00:18:20,160 --> 00:18:22,650
И тогава много divs I
виж, нещо, наречено клас,

395
00:18:22,650 --> 00:18:24,440
но ние ще се върнем към това.

396
00:18:24,440 --> 00:18:26,200
>> Това е interesting-- форми.

397
00:18:26,200 --> 00:18:27,730
Формулярите са всички в мрежата.

398
00:18:27,730 --> 00:18:30,310
Всяко поле за търсене сте
някога са използвали е форма.

399
00:18:30,310 --> 00:18:31,490
И така, нека действително види.

400
00:18:31,490 --> 00:18:32,790
Форма.

401
00:18:32,790 --> 00:18:33,910
Действие.

402
00:18:33,910 --> 00:18:37,660
Действието на тази форма, за каквато
исторически причини, е, че URL.

403
00:18:37,660 --> 00:18:38,840
Метод е "пост".

404
00:18:38,840 --> 00:18:44,060
Оказва се, че исканията HTTP могат да използват
глагола "да", като видяхме преди,

405
00:18:44,060 --> 00:18:45,070
или "пост".

406
00:18:45,070 --> 00:18:47,030
И ще видите разликата
на това в един миг.

407
00:18:47,030 --> 00:18:48,363
Нека наистина да видим какво е това.

408
00:18:48,363 --> 00:18:49,830
Нека се върнем към страницата на Станфорд.

409
00:18:49,830 --> 00:18:53,330
Под каква форма са те говорят
около, как мислиш?

410
00:18:53,330 --> 00:18:54,485
Какво скача при вас?

411
00:18:54,485 --> 00:18:54,970
>> АУДИТОРИЯ: полето за търсене.

412
00:18:54,970 --> 00:18:55,845
>> Дейвид Дж Малан: Да.

413
00:18:55,845 --> 00:18:58,410
Така нагоре в горния десен ъгъл
тук е този на полето за търсене.

414
00:18:58,410 --> 00:19:02,441
И това е, как те изпълняват it-- на
маркер, който е буквално отворена скоба форма.

415
00:19:02,441 --> 00:19:03,940
И тогава нека да търси нещо.

416
00:19:03,940 --> 00:19:09,220
Да търси за един приятел
на mine-- "Ник Parlante."

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

418
00:19:11,380 --> 00:19:13,750
И, разбира се, тя отиде да
малко по-различен URL.

419
00:19:13,750 --> 00:19:15,140
Нека да се върнем тук.

420
00:19:15,140 --> 00:19:18,960
Нека да търси за "курсове."

421
00:19:18,960 --> 00:19:19,460
По дяволите.

422
00:19:19,460 --> 00:19:20,484
Ходих на различен URL.

423
00:19:20,484 --> 00:19:23,400
Така че, Станфорд добавяне на някаква магия
че те не са ме води на адреса

424
00:19:23,400 --> 00:19:25,820
че видяхме в
действие атрибут там.

425
00:19:25,820 --> 00:19:32,480
Но тази форма тук се изпълнява чисто
по пътя на това маркиране тук, тези тагове.

426
00:19:32,480 --> 00:19:35,710
Всъщност, тук е входът за
типа на търсене, който искате.

427
00:19:35,710 --> 00:19:38,940
Тук е суровина за
друг вид търсене.

428
00:19:38,940 --> 00:19:41,960
Тук е входът за самата низ.

429
00:19:41,960 --> 00:19:45,394
И така, целта не е да се увива
съзнанието ни, около всички тези тагове

430
00:19:45,394 --> 00:19:46,060
но само за да видя.

431
00:19:46,060 --> 00:19:48,300
Това е просто отваряне и затваряне
тагове и търсят нещата.

432
00:19:48,300 --> 00:19:48,560
Да?

433
00:19:48,560 --> 00:19:48,920
Виктория?

434
00:19:48,920 --> 00:19:49,795
>> АУДИТОРИЯ: [недоловим]

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

436
00:19:51,925 --> 00:19:53,550
Дейвид Дж Малан: Това е добър въпрос.

437
00:19:53,550 --> 00:19:54,660
Това е малко по-сложни, за да видите.

438
00:19:54,660 --> 00:19:56,300
Нека да се върнем към това
въпрос само за няколко минути

439
00:19:56,300 --> 00:19:59,000
когато гледаме нещо, наречено
CSS, или Cascading Style Sheets,

440
00:19:59,000 --> 00:20:02,500
и можем да се опитаме да се направи извод
като много от страницата.

441
00:20:02,500 --> 00:20:08,090
Така че, ако ние сега да разгледаме google.com,
нека да видим какво им страница прилича.

442
00:20:08,090 --> 00:20:09,840
Може би they're--, че е сладък днес.

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

444
00:20:12,490 --> 00:20:12,990
ДОБРЕ.

445
00:20:12,990 --> 00:20:13,690
Готово.

446
00:20:13,690 --> 00:20:15,260
Добре, така View Source.

447
00:20:15,260 --> 00:20:19,590
Може би мислят, Google има
много хубаво изходния код.

448
00:20:19,590 --> 00:20:24,970
Така че, както изглежда, това, което се случва тук?

449
00:20:24,970 --> 00:20:27,880
И в действителност, това не е дори HTML.

450
00:20:27,880 --> 00:20:30,930
Това е нещо, наречено JavaScript.

451
00:20:30,930 --> 00:20:32,344
И нека да продължава напред, и си отиват.

452
00:20:32,344 --> 00:20:34,010
Аз дори не знам къде на страницата започва.

453
00:20:34,010 --> 00:20:37,240
Отивам да използвате Command
F, отворена скоба HTML.

454
00:20:37,240 --> 00:20:38,200
Добре, ето го.

455
00:20:38,200 --> 00:20:44,150
Открих началото на страницата, и
има толкова много неща тук.

456
00:20:44,150 --> 00:20:45,310
>> Какво всъщност се случва?

457
00:20:45,310 --> 00:20:47,460
Ами, знаете ли какво,
ние може да се почисти това нагоре.

458
00:20:47,460 --> 00:20:52,109
Ако вместо това отидете на този Огледайте
лента с инструменти, този специален инструмент за диагностика,

459
00:20:52,109 --> 00:20:54,150
и не ходи да мрежа,
където ние продължаваме да става днес,

460
00:20:54,150 --> 00:20:56,420
но ако отида да Elements,
това, което е много хубаво

461
00:20:56,420 --> 00:20:59,990
е, че браузърът има много
много по-добри очи от мен.

462
00:20:59,990 --> 00:21:02,670
И на браузъра може да чете
че бъркотия на уеб страница,

463
00:21:02,670 --> 00:21:04,700
че HTML ние пощата просто
погледна, и може да

464
00:21:04,700 --> 00:21:08,340
тя анализира или чете и
анализира го и го преформатира

465
00:21:08,340 --> 00:21:09,910
в хубав човек-лесен начин.

466
00:21:09,910 --> 00:21:11,740
Така че това, което аз виждам сега
в този екран тук

467
00:21:11,740 --> 00:21:15,470
под Elements, точно същото съдържание,
но те са с отстъп всичко,

468
00:21:15,470 --> 00:21:18,140
те го Оцветени, но
това е точно същия текст

469
00:21:18,140 --> 00:21:19,620
че съм изтеглен от сървъра.

470
00:21:19,620 --> 00:21:23,630
>> И това, което е хубаво сега е Виждам
в тялото, за instance-- предизвестие,

471
00:21:23,630 --> 00:21:26,480
страницата все още е съставен
на само на главата и тялото,

472
00:21:26,480 --> 00:21:28,660
и мога да йерархично потопите в тук.

473
00:21:28,660 --> 00:21:32,420
Забележете, че Google изглежда да има
да divs-- този един и този един.

474
00:21:32,420 --> 00:21:33,310
Мога да се разшири, че.

475
00:21:33,310 --> 00:21:35,370
Има цял куп други divs.

476
00:21:35,370 --> 00:21:36,900
Така че е малко по-сложна.

477
00:21:36,900 --> 00:21:37,400
Но почакай.

478
00:21:37,400 --> 00:21:40,970
Това изглежда много по-
четим, относително, отколкото това.

479
00:21:40,970 --> 00:21:43,840
Защо е Google неудобно
Самата само с изпращането

480
00:21:43,840 --> 00:21:50,400
тази огромна бъркотия на код на някои
подреди просто да приложи нещо

481
00:21:50,400 --> 00:21:53,640
че изглежда толкова проста на пръв поглед?

482
00:21:53,640 --> 00:21:55,270
Подобно, защо не те добавят повече пространства?

483
00:21:55,270 --> 00:21:56,811
Защо не те удари Въведете както направих аз?

484
00:21:56,811 --> 00:21:59,110
Виж колко добър бях
при написването на уеб страница.

485
00:21:59,110 --> 00:22:00,680
Ударих Въведете толкова усърдно.

486
00:22:00,680 --> 00:22:03,760
Аз разчленена, така че всичко
е толкова красива и четлив.

487
00:22:03,760 --> 00:22:08,463
Защо Google не практикуват същото?

488
00:22:08,463 --> 00:22:11,409
>> АУДИТОРИЯ: [недоловим]

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

490
00:22:12,305 --> 00:22:13,180
Дейвид Дж Малан: Добро.

491
00:22:13,180 --> 00:22:14,270
Много честно.

492
00:22:14,270 --> 00:22:16,650
Те не разполагат с някои
човек в Google ръчно

493
00:22:16,650 --> 00:22:18,160
актуализиране на началната страница вече.

494
00:22:18,160 --> 00:22:20,010
Това не е 1999 вече.

495
00:22:20,010 --> 00:22:21,140
Така че те имат софтуер.

496
00:22:21,140 --> 00:22:25,397
Те имат и други инструменти, които
генерира динамично те са HTML.

497
00:22:25,397 --> 00:22:27,480
Разбира се, че този код се
е написана от хора,

498
00:22:27,480 --> 00:22:30,220
но реалността е,
това е съвсем справедливо да се каже,

499
00:22:30,220 --> 00:22:33,340
браузъра със сигурност не прави
интересува колко разхвърлян кодът е.

500
00:22:33,340 --> 00:22:35,940
Но има и още по-
непреодолими технически причини

501
00:22:35,940 --> 00:22:42,580
че Google разпространява тяхното HTML
код по такъв помия, привидно

502
00:22:42,580 --> 00:22:48,350
поразителен начин всички опаковани заедно
с много малко way-- много малко

503
00:22:48,350 --> 00:22:51,274
в начина на форматиране, както направих аз.

504
00:22:51,274 --> 00:22:52,570
>> АУДИТОРИЯ: [недоловим]

505
00:22:52,570 --> 00:22:53,528
>> Дейвид Дж Малан: По-бързо?

506
00:22:53,528 --> 00:22:54,040
Защо?

507
00:22:54,040 --> 00:22:55,680
И това, което казахте, Лидия?

508
00:22:55,680 --> 00:22:56,240
По-бързо?

509
00:22:56,240 --> 00:22:57,281
Защо по-бързо?

510
00:22:57,281 --> 00:22:58,156
АУДИТОРИЯ: [недоловим]

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

512
00:23:00,522 --> 00:23:02,230
Дейвид Дж Малан: Няма
няма място за четене.

513
00:23:02,230 --> 00:23:02,730
Да.

514
00:23:02,730 --> 00:23:04,560
Така че мисля за това какво място е.

515
00:23:04,560 --> 00:23:08,394
Така че всеки символ от клавиатурата отнема
някои големи пространства за представяне,

516
00:23:08,394 --> 00:23:10,560
или физически, като го
заема, че много пространство,

517
00:23:10,560 --> 00:23:13,250
или по някакъв начин под
качулка, която изисква памет.

518
00:23:13,250 --> 00:23:15,740
И като aside-- и ние ще
говорим повече за това tomorrow--

519
00:23:15,740 --> 00:23:19,930
всеки символ от клавиатурата
обикновено изисква 8 бита, или един байт.

520
00:23:19,930 --> 00:23:23,360
Така модел на 8 нули или
такива, или само 1 байт, както ние

521
00:23:23,360 --> 00:23:24,720
хората обикновено биха казали.

522
00:23:24,720 --> 00:23:27,690
Така че това е малка, но
тя все още не е нула.

523
00:23:27,690 --> 00:23:29,940
Това е все още някои големи пространства.

524
00:23:29,940 --> 00:23:36,082
Така че, ако един инженер или Google удря
бар пространство, само веднъж, и предполагам

525
00:23:36,082 --> 00:23:38,540
Google-- това е супер-popular--
Предполагам, че един милиард души

526
00:23:38,540 --> 00:23:40,780
посети дома им страница на ден,
или някакъв брой хора

527
00:23:40,780 --> 00:23:43,290
посетете началната страница за по
милиард пъти на ден,

528
00:23:43,290 --> 00:23:48,890
колко допълнителни байта има, че
софтуерен инженер просто струва Google

529
00:23:48,890 --> 00:23:51,310
от удря си пространство бар веднъж?

530
00:23:51,310 --> 00:23:52,692
>> АУДИТОРИЯ: [недоловим]

531
00:23:52,692 --> 00:23:54,150
Дейвид Дж Малан: Не съвсем, че лошо.

532
00:23:54,150 --> 00:23:57,070
Само на един байт пъти милиарда долара.

533
00:23:57,070 --> 00:23:57,871
Така A--

534
00:23:57,871 --> 00:23:59,120
АУДИТОРИЯ: 8 милиарда гигабайта.

535
00:23:59,120 --> 00:24:00,370
Дейвид Дж Малан: Не е 8 милиарда.

536
00:24:00,370 --> 00:24:01,240
8 милиарда байта.

537
00:24:01,240 --> 00:24:02,410
Но 1 гигабайт.

538
00:24:02,410 --> 00:24:04,080
1 гигабайт ще бъде единица мярка.

539
00:24:04,080 --> 00:24:08,240
Ако той или тя прави две
пространства, 2 гигабайта.

540
00:24:08,240 --> 00:24:09,030
Три гигабайта.

541
00:24:09,030 --> 00:24:09,530
Така ли е?

542
00:24:09,530 --> 00:24:11,860
Тя везни скъпо.

543
00:24:11,860 --> 00:24:16,150
И така, в случаи като Google,
които, предоставени, са крайни случаи,

544
00:24:16,150 --> 00:24:21,450
има и други въпроси, които възникват само
като направи много разумни решения

545
00:24:21,450 --> 00:24:25,744
или като много прости човешки действия,
защото има това увеличено ефект.

546
00:24:25,744 --> 00:24:27,660
Така че една от причините,
това изглежда толкова сгъстен

547
00:24:27,660 --> 00:24:30,660
е точно като Виктория said-- че е
просто, генерирани от компютри, така или иначе.

548
00:24:30,660 --> 00:24:31,900
Така че не е голяма работа.

549
00:24:31,900 --> 00:24:33,309
Нека браузъра го разбера.

550
00:24:33,309 --> 00:24:35,350
Но той също така умишлено
не разполага с много пространство,

551
00:24:35,350 --> 00:24:36,766
защото пространството не е необходимо.

552
00:24:36,766 --> 00:24:38,250
И пространството всъщност струва пари.

553
00:24:38,250 --> 00:24:40,670
>> То било струва време,
защото просто да натиснете

554
00:24:40,670 --> 00:24:44,670
че много повече данни от
седалище google.com просто

555
00:24:44,670 --> 00:24:47,710
има да отнеме известно количество
време, дори ако това е милисекунди

556
00:24:47,710 --> 00:24:51,190
или микросекунди, но това добавя до
над толкова много потребители, или по-вероятно,

557
00:24:51,190 --> 00:24:52,270
то вероятно струва пари.

558
00:24:52,270 --> 00:24:54,690
Google вероятно се свързва с
някой друг в света, една

559
00:24:54,690 --> 00:24:56,398
на тези, взирайки
точки, и ако те имат

560
00:24:56,398 --> 00:24:59,880
някакъв вид финансова отношения
при което техните данни струва пари,

561
00:24:59,880 --> 00:25:01,730
те може и да
минимизиране колко данни

562
00:25:01,730 --> 00:25:04,530
те плюят върху
тяхната интернет връзка.

563
00:25:04,530 --> 00:25:07,630
>> Така че нещо странно, макар че, в крайна сметка,
или може би успокоително нещо,

564
00:25:07,630 --> 00:25:11,030
е, че въпреки че това изглежда ужасно
поразителен, в края на деня,

565
00:25:11,030 --> 00:25:16,750
тя все още е с точно същите принципи като
тази много проста страница тук на HTML

566
00:25:16,750 --> 00:25:17,390
стр.

567
00:25:17,390 --> 00:25:20,610
Така че просто да се обобщят и, така че да
да има каноничен версия, ако не бяха

568
00:25:20,610 --> 00:25:25,900
след заедно с избор тук, тук
може да се окаже най-простите на уеб страници,

569
00:25:25,900 --> 00:25:28,240
така нещо да си играе с може би по-късно.

570
00:25:28,240 --> 00:25:30,790
>> Ами, нека да се въведе
Няколко други идеи сега.

571
00:25:30,790 --> 00:25:33,420
Ние сме на път да се въведе
нещо, наречено маркер стил.

572
00:25:33,420 --> 00:25:38,110
Ние можем да стилизирам тази страница
в по-интересни начини.

573
00:25:38,110 --> 00:25:40,860
Така че, докато HTML имейл
е всичко за маркиране

574
00:25:40,860 --> 00:25:44,470
данните, нещо като определящи за
браузър как да се структурира данните,

575
00:25:44,470 --> 00:25:48,110
къде да се постави това, CSS, или
Cascading Style Sheets,

576
00:25:48,110 --> 00:25:52,640
е втори език, който
обикновено получава примесени с HTML

577
00:25:52,640 --> 00:25:55,670
както ще see-- но ние можем да се почисти
че в един moment-- че отнема

578
00:25:55,670 --> 00:25:59,850
то крайната миля, и тя го stylizes.

579
00:25:59,850 --> 00:26:02,460
Той получава цветовете точно,
на размера на шрифта точно,

580
00:26:02,460 --> 00:26:03,860
позиционирането точно.

581
00:26:03,860 --> 00:26:06,510
Това е всичко за естетиката
или форматиране, не за

582
00:26:06,510 --> 00:26:08,330
самата основна данни.

583
00:26:08,330 --> 00:26:11,390
И най-лесният начин да се покаже
това е може би чрез пример.

584
00:26:11,390 --> 00:26:15,320
Така че аз ще отида
да ми обикновен текстов файл.

585
00:26:15,320 --> 00:26:17,970
И в един момент, аз ще
ни преведе през процеса

586
00:26:17,970 --> 00:26:19,360
на това прави себе си.

587
00:26:19,360 --> 00:26:23,310
>> Отивам да се върна в моя файл
тук и се презарежда страницата само

588
00:26:23,310 --> 00:26:25,800
за да се потвърди това, което изглежда.

589
00:26:25,800 --> 00:26:27,190
Това е, когато ние сме в момента.

590
00:26:27,190 --> 00:26:31,170
Имам чувството, че децата ще се радват
като цвят към тази уеб страница.

591
00:26:31,170 --> 00:26:34,480
Така че аз ще отида до тук
в главата на страницата.

592
00:26:34,480 --> 00:26:38,130
И аз ще направя стил, / стил.

593
00:26:38,130 --> 00:26:44,060
И след това вътре на това, аз ще съм
да каже на тялото на моя page--

594
00:26:44,060 --> 00:26:46,870
и това е форматиране, в
пръв поглед, може би малко по-

595
00:26:46,870 --> 00:26:49,400
Странно, но конвенционален.

596
00:26:49,400 --> 00:26:55,010
Отивам да се каже, че на фона
Цвят на тази страница трябва да е зелен.

597
00:26:55,010 --> 00:26:57,960
И това е за съжаление
сортиране на не най-добрия дизайн.

598
00:26:57,960 --> 00:27:00,710
Забележете, че по-рано
в света на HTML,

599
00:27:00,710 --> 00:27:03,190
Казах, че атрибути
са тези двойки ключ-стойност.

600
00:27:03,190 --> 00:27:05,760
Нещо се равнява цитат
край на цитата "нещо."

601
00:27:05,760 --> 00:27:08,810
В света на CSS, което беше
проектирана от няколко различни хора,

602
00:27:08,810 --> 00:27:11,020
те решиха, че в техния
свят, двойки ключ-стойност

603
00:27:11,020 --> 00:27:13,920
Би било дума нещо на дебелото черво.

604
00:27:13,920 --> 00:27:15,220
Така че това е една и съща идея, все пак.

605
00:27:15,220 --> 00:27:18,620
Той е асоциирането на стойност
с някои ключови, че по някакъв начин

606
00:27:18,620 --> 00:27:20,330
оказва влияние върху поведението на тази страница.

607
00:27:20,330 --> 00:27:21,901
>> И вероятно можете да се досетите.

608
00:27:21,901 --> 00:27:24,150
Какво е това най-вероятно ще
да се направи, дори ако никога не сте

609
00:27:24,150 --> 00:27:27,867
виждал HTML или CSS преди?

610
00:27:27,867 --> 00:27:29,450
АУДИТОРИЯ: Промяна на цвета на фона.

611
00:27:29,450 --> 00:27:30,560
Дейвид Дж Малан: Да,
промените цвета на фона.

612
00:27:30,560 --> 00:27:33,280
И по-конкретно
фоновия цвят на тялото.

613
00:27:33,280 --> 00:27:36,290
Но доколкото
тяло за сега е в интернет

614
00:27:36,290 --> 00:27:38,870
page-- това е единственото нещо,
под заглавната лента really-- на

615
00:27:38,870 --> 00:27:40,870
това е най-вероятно ще
повлияе на едно и също нещо.

616
00:27:40,870 --> 00:27:41,430
Така че нека да видим.

617
00:27:41,430 --> 00:27:42,490
Да спасим това.

618
00:27:42,490 --> 00:27:44,310
Отидете тук и се презарежда.

619
00:27:44,310 --> 00:27:46,140
Това е доста отвратително.

620
00:27:46,140 --> 00:27:48,070
И какво се случва
тук е страничен ефект.

621
00:27:48,070 --> 00:27:49,850
Аз просто избрах тази снимка на случаен принцип.

622
00:27:49,850 --> 00:27:53,305
Защо е не зелено
проникваща зад Мики?

623
00:27:53,305 --> 00:27:54,180
АУДИТОРИЯ: [недоловим]

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

625
00:27:56,880 --> 00:27:57,880
Дейвид Дж Малан: Точно така.

626
00:27:57,880 --> 00:28:01,750
Оказва се, че изображенията, доста
много на всички изображения, които могат да използват,

627
00:28:01,750 --> 00:28:03,670
всички са rectangles-- на правоъгълници.

628
00:28:03,670 --> 00:28:07,710
Дори ако Мики има някои криви
за себе си и има опит,

629
00:28:07,710 --> 00:28:09,330
В този контекст трябва да има нещо.

630
00:28:09,330 --> 00:28:10,280
Тя трябва да бъде бял.

631
00:28:10,280 --> 00:28:11,910
Тя трябва да бъде черен или нещо друго.

632
00:28:11,910 --> 00:28:13,650
Тя може да бъде прозрачен.

633
00:28:13,650 --> 00:28:16,100
И в действителност, можех
отворите Mickey Mouse тук

634
00:28:16,100 --> 00:28:18,590
в една програма, наречена Photoshop
или нещо подобно

635
00:28:18,590 --> 00:28:21,176
и променят всичко това бяло
фона на прозрачен,

636
00:28:21,176 --> 00:28:22,550
така зеленото ще блесне.

637
00:28:22,550 --> 00:28:25,980
Но това е нещо, което ще ми трябва
да поиска за себе си или графичен дизайнер

638
00:28:25,980 --> 00:28:28,130
или проектант в моя
компания, например,

639
00:28:28,130 --> 00:28:31,490
да се направи, особено след като току-що
назаем тази една от интернет.

640
00:28:31,490 --> 00:28:33,030
Но това е, защо това се случва.

641
00:28:33,030 --> 00:28:34,980
>> И така, какво друго да искаме да направим?

642
00:28:34,980 --> 00:28:41,040
Е, ние може да искате да казваме
наистина се надявам да се насладите на престоя си.

643
00:28:41,040 --> 00:28:44,150
И за да подчертае, искам
да направи това силна,

644
00:28:44,150 --> 00:28:48,310
и така аз ще кажа открито силна и
затворите силен и след това презареди.

645
00:28:48,310 --> 00:28:50,320
И това е малко трудно
да се види на проектора

646
00:28:50,320 --> 00:28:53,250
но може би наистина сега
скача при вас малко повече.

647
00:28:53,250 --> 00:28:56,180
Така че можете да добавите курсив в тази
начин, смели настилка по този начин.

648
00:28:56,180 --> 00:28:57,500
Бихме могли да се променят цветовете.

649
00:28:57,500 --> 00:29:01,610
В действителност, само за ритници, аз съм
ще отида напред и да направим това.

650
00:29:01,610 --> 00:29:05,120
Аз наистина не харесвам как ми
параграфи са толкова близо заедно,

651
00:29:05,120 --> 00:29:06,870
така че може да се направи нещо подобно.

652
00:29:06,870 --> 00:29:13,310
Отивам да се каже на браузъра,
променят всяка точка таг, за да имат,

653
00:29:13,310 --> 00:29:16,952
нека say-- всъщност, знаеш ли какво,
нека да се приведе в съответствие го текстови подравняване, център.

654
00:29:16,952 --> 00:29:19,410
И отново, знам, че това само
защото някой го научи да ме

655
00:29:19,410 --> 00:29:21,118
или аз да го погледна в
онлайн справки.

656
00:29:21,118 --> 00:29:22,450
Така че нека да спаси това.

657
00:29:22,450 --> 00:29:25,070
И, ах, сега съм
центриран изображението там.

658
00:29:25,070 --> 00:29:28,490
И всъщност, знаеш ли какво, ако
Аз се движат моя образ в параграф

659
00:29:28,490 --> 00:29:34,510
tag-- така трета точка,
въпреки че това не е текст.

660
00:29:34,510 --> 00:29:36,917
Да спасим, че и презареди.

661
00:29:36,917 --> 00:29:40,000
Сега на страницата започва да изглежда вид
of-- Искам да кажа, тя все още е доста грозно,

662
00:29:40,000 --> 00:29:43,180
но поне тя изглежда като прекарах
две минути, вместо една минута

663
00:29:43,180 --> 00:29:43,950
което го прави.

664
00:29:43,950 --> 00:29:47,200
>> И така, постепенно, можем да направим
тези естетически промени сега, за да страницата?

665
00:29:47,200 --> 00:29:50,860
Аз не съм наистина се промени данните в
страница, различна от добавянето на думата наистина.

666
00:29:50,860 --> 00:29:52,650
Добавих метаданни, ако щете.

667
00:29:52,650 --> 00:29:54,830
Хей, браузър, направи
Думата "наистина" смели.

668
00:29:54,830 --> 00:29:56,940
Но данните не е силен.

669
00:29:56,940 --> 00:29:57,830
Това е метаданни.

670
00:29:57,830 --> 00:29:59,410
Данните са "наистина."

671
00:29:59,410 --> 00:30:02,200
Така че ние все още имаме някои от
същите концепции, както преди.

672
00:30:02,200 --> 00:30:05,990
Сега, разбира се, това не е в интернет,
така че аз ще направя една последна стъпка тук.

673
00:30:05,990 --> 00:30:10,300
>> Отивам да отида да hello.html
и просто маркирате и копирате това.

674
00:30:10,300 --> 00:30:12,285
И сега аз ще
отидат в Cloud9, които

675
00:30:12,285 --> 00:30:13,910
Аз ще ви преведе през в един момент.

676
00:30:13,910 --> 00:30:17,080
И шансовете са ви скоро ще бъде, ако
не вече, на екран като този.

677
00:30:17,080 --> 00:30:21,080
И нека само да ви дам един бърз
обиколка на какво Cloud9 всъщност е.

678
00:30:21,080 --> 00:30:26,590
Така че отново Облак 9 е
този облак-базирана услуга

679
00:30:26,590 --> 00:30:30,580
че ти и ми дава илюзията
от с нашата собствена виртуална машина

680
00:30:30,580 --> 00:30:33,090
в облака, технически
контейнер в облака

681
00:30:33,090 --> 00:30:35,160
че имаме пълно
административни привилегии на.

682
00:30:35,160 --> 00:30:37,130
Така че на теория, никой
другаде по света има

683
00:30:37,130 --> 00:30:39,152
достъп до екрана съм
гледаш в момента,

684
00:30:39,152 --> 00:30:40,860
с изключение може би на хората
който тече на сайта,

685
00:30:40,860 --> 00:30:43,470
защото технически те имат
физически достъп и така нататък.

686
00:30:43,470 --> 00:30:44,740
>> Така че това, което виждаме в тази среда?

687
00:30:44,740 --> 00:30:46,230
Отивам да се отдалечите,
защото това е малко малък.

688
00:30:46,230 --> 00:30:48,104
И нека да се отбележи над
тук само за миг.

689
00:30:48,104 --> 00:30:53,210
На лявата ръка на моя и вашия
екран, има файлов браузър в ляво.

690
00:30:53,210 --> 00:30:55,362
Така че подобен по дух
за Mac OS и Windows.

691
00:30:55,362 --> 00:30:57,070
Това са всички по-
файлове в моя профил.

692
00:30:57,070 --> 00:30:59,250
И по подразбиране, ако си
сметка е като моя,

693
00:30:59,250 --> 00:31:05,090
ще видите или скоро виж
helloworld.html и readme.md.

694
00:31:05,090 --> 00:31:07,950
Над тук в дясно, това е
където моите текстови файлове ще отида.

695
00:31:07,950 --> 00:31:11,620
Ако някога сте се използва Microsoft
Word или Notepad или TextEdit,

696
00:31:11,620 --> 00:31:14,100
това е думата ми редактиране
на файлове е да отиде.

697
00:31:14,100 --> 00:31:16,540
И тогава най-тайнствена
характеристика на тази среда

698
00:31:16,540 --> 00:31:20,100
че ние не наистина ще трябва да се използва, е
тук се нарича терминален прозорец.

699
00:31:20,100 --> 00:31:23,390
Ако сте използвали DOS от
недалечното минало, това е Linux

700
00:31:23,390 --> 00:31:25,450
или Linux еквивалент на DOS.

701
00:31:25,450 --> 00:31:28,190
Това е базиран на текст interface--
не кликвания на мишката, без плъзгане.

702
00:31:28,190 --> 00:31:30,770
Всичко, което може да направите, е да въведете
команди, но тези команди

703
00:31:30,770 --> 00:31:34,400
да създавате файлове, преместване на файлове, отворени
директории, близки указатели,

704
00:31:34,400 --> 00:31:35,740
направите произволен брой неща.

705
00:31:35,740 --> 00:31:38,060
Но за сега, ние просто ще
прекарваме времето си тук.

706
00:31:38,060 --> 00:31:39,050
>> И така, нека да направим това.

707
00:31:39,050 --> 00:31:41,008
Ако сте в тази
среда, които трябва да

708
00:31:41,008 --> 00:31:45,900
било, ако сте създали работно място
вече, давай напред и просто отиде

709
00:31:45,900 --> 00:31:48,690
във файл, New за миг.

710
00:31:48,690 --> 00:31:51,740
И това ще ви даде нов
раздела точно тук, в центъра.

711
00:31:51,740 --> 00:31:54,250
И аз just-- И нека
давай напред и да направим това.

712
00:31:54,250 --> 00:31:59,910
Да вървим напред и сега се File, Save
и давай напред и да го наричаме hello.html,

713
00:31:59,910 --> 00:32:02,740
да не се бърка с
helloworld.html, които

714
00:32:02,740 --> 00:32:06,910
дойде с новия си безплатен акаунт,
което е само примерен файл.

715
00:32:06,910 --> 00:32:11,020
Вие ще видите, че изведнъж се появи,
Най-вероятно на лявата ръка,

716
00:32:11,020 --> 00:32:12,810
и раздела все още ще бъде отворен.

717
00:32:12,810 --> 00:32:21,300
И нека да ви насърчи сега, за да пресъздаде
този файл или някои техни варианти.

718
00:32:21,300 --> 00:32:24,607
И ако може да не е съвсем го видите на
екран, е идентичен с препаратите

719
00:32:24,607 --> 00:32:26,190
че най-вероятно са в друг раздел.

720
00:32:26,190 --> 00:32:29,296
>> Така че в кратко, направи първата си уеб страница,
освен това, и след това в един момент,

721
00:32:29,296 --> 00:32:31,170
Аз ще ви покажа как можете
всъщност може да видите това.

722
00:32:31,170 --> 00:32:32,970
Но промените поне едно нещо.

723
00:32:32,970 --> 00:32:35,400
Промяна HelloWorld да
нещо по ваш избор,

724
00:32:35,400 --> 00:32:39,821
така че вие ​​сте убедени, че това е вашето
файл и не тази, която току-що създадохте.

725
00:32:39,821 --> 00:32:40,320
Добре.

726
00:32:40,320 --> 00:32:43,804
И когато сте ready-- не
rush--, когато сте готови,

727
00:32:43,804 --> 00:32:46,220
давай напред и да запишете файла
след като веднъж сте направили тези промени.

728
00:32:46,220 --> 00:32:49,540
И ако кликнете на
Стартирай бутон до върха, този

729
00:32:49,540 --> 00:32:53,610
трябва да отваряте нов раздел, който ще разкаже
вие какво URL можете да посетите вашия файл в,

730
00:32:53,610 --> 00:32:56,380
но това може да отнеме известно време, за да
цитат цитата "започне Apache," които

731
00:32:56,380 --> 00:32:58,820
е името на уеб сървъра.

732
00:32:58,820 --> 00:33:02,430
Така че бъдете внимателни, за да се направи точно
това, което е във файла в крайна сметка.

733
00:33:02,430 --> 00:33:04,610
Така че точно сега, аз ще я вътре.

734
00:33:04,610 --> 00:33:07,780
Ако започнете да пишете
отворена скоба HTML, известие

735
00:33:07,780 --> 00:33:09,650
Това ме накара да завърши мисълта си.

736
00:33:09,650 --> 00:33:13,750
И ако аз завърши мисълта ми го,
автоматично ми дава затварящия маркер.

737
00:33:13,750 --> 00:33:17,190
Но очакването е тогава аз ще удари
Въведете, и след това се премести вътре има

738
00:33:17,190 --> 00:33:21,180
и се отправят вътре и
След това правя тяло вътре.

739
00:33:21,180 --> 00:33:24,430
И това е малко странно на пръв поглед,
защото това прави работата за вас,

740
00:33:24,430 --> 00:33:27,110
но осъзнавам, че в крайна сметка
той ви спестява клавиши.

741
00:33:27,110 --> 00:33:30,500
И в действителност, много често срещана характеристика на
програмни среди тези дни

742
00:33:30,500 --> 00:33:33,260
както за уеб програмиране като
това и действителната програмиране,

743
00:33:33,260 --> 00:33:36,960
които ние ще говорим за утре,
е тези авто-пълна функции,

744
00:33:36,960 --> 00:33:39,710
неща, които просто дават възможност на
програмист или дизайнер

745
00:33:39,710 --> 00:33:42,010
да въведете малко натискания на
постигне едно и също нещо.

746
00:33:42,010 --> 00:33:43,176
Понякога е по-добре, все пак.

747
00:33:43,176 --> 00:33:44,560
Понякога това е просто досадно.

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

749
00:33:49,290 --> 00:33:54,010
И, отново, след като веднъж сте транскрибира
слайда или някакъв вариант от него,

750
00:33:54,010 --> 00:33:57,360
можете да щракнете върху бутона Run до върха.

751
00:33:57,360 --> 00:33:59,910
И след това в долната част
прозорец, ще бъде информиран

752
00:33:59,910 --> 00:34:04,290
на каква URL можете да посетите уеб страницата си.

753
00:34:04,290 --> 00:34:08,790
Mine, например, е най-
business-daharvard.c9users.io

754
00:34:08,790 --> 00:34:11,480
и т.н.

755
00:34:11,480 --> 00:34:14,580
Добре, така че, нека me-- някакви въпроси?

756
00:34:14,580 --> 00:34:19,460
Всякакви други въпроси за само за да се
тази работа, преди да добавите функции?

757
00:34:19,460 --> 00:34:21,692
И нека да предложи, просто
за да получите хора comfortable--

758
00:34:21,692 --> 00:34:24,400
защото това е едно нещо, просто да
копиране и поставяне на сляпо, което съм направил.

759
00:34:24,400 --> 00:34:27,177
Но само толкова, че хората се борят
с най-малко един за задача,

760
00:34:27,177 --> 00:34:28,510
Отивам да включите малко музика.

761
00:34:28,510 --> 00:34:32,630
Отивам да предложи списък на
неща, които могат потенциално да добавите.

762
00:34:32,630 --> 00:34:34,086
И със сигурност може да се използва Google.

763
00:34:34,086 --> 00:34:36,210
И защо не можем просто
предлагам да опитате да решите

764
00:34:36,210 --> 00:34:38,710
най-малко един особен проблем тук.

765
00:34:38,710 --> 00:34:45,090
Така че от гледна точка на етикети,
нека да използвате отново този тук.

766
00:34:45,090 --> 00:34:48,280
>> Всъщност, нека да сложи
то във форма, описание.

767
00:34:48,280 --> 00:35:02,380
Да кажем, че сред таговете бихме могли да
използвате ето някои тагове тук.

768
00:35:02,380 --> 00:35:06,090
Виждали сме в параграф маркер.

769
00:35:06,090 --> 00:35:07,850
Сега тя ще се попълни автоматично.

770
00:35:07,850 --> 00:35:12,220
Параграф тагове, котва маркер.

771
00:35:12,220 --> 00:35:15,250
Да кажем, че искате да
направи нещо по-голямо,

772
00:35:15,250 --> 00:35:19,480
така че може да like--
маркер за регулиране на чувствителността може да помогне.

773
00:35:19,480 --> 00:35:23,010
Е, може би трябва малко помощ
за които в един момент.

774
00:35:23,010 --> 00:35:24,830
Виждали сме Разделение.

775
00:35:24,830 --> 00:35:26,170
Ще видите, че има маса.

776
00:35:26,170 --> 00:35:27,928
Има нещо, наречено 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
Върни се, че в един момент.

780
00:35:34,770 --> 00:35:36,590
Какво друго може да е удобно?

781
00:35:36,590 --> 00:35:38,310
Има силна.

782
00:35:38,310 --> 00:35:43,640
Има акцент, или по-скоро ги.

783
00:35:43,640 --> 00:35:50,110
There's-- какво друго
може да ти харесва тук?

784
00:35:50,110 --> 00:35:51,930
Е, ние ще се
погледнете, че заедно.

785
00:35:51,930 --> 00:35:53,230
Форма, които сме виждали.

786
00:35:53,230 --> 00:35:54,130
Има форма.

787
00:35:54,130 --> 00:35:56,500
Има вход и няколко други.

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

789
00:35:58,924 --> 00:36:00,090
Добре, така че нека да направим това.

790
00:36:00,090 --> 00:36:02,330
За да отговорите на Виктория
въпрос, нека първо

791
00:36:02,330 --> 00:36:05,020
Просто се уверете, че всеки е
в състояние да получи тяхната здравей работен.

792
00:36:05,020 --> 00:36:06,900
Тогава нека представим
Няколко други идеи.

793
00:36:06,900 --> 00:36:09,209
След това ще позволи хора решават
някои проблеми на техните собствени.

794
00:36:09,209 --> 00:36:11,500
Тогава ние всъщност ще се върне
за това понятие за форма,

795
00:36:11,500 --> 00:36:14,950
и ние всъщност ще приведе отново в действие
заедно предния край интерфейс,

796
00:36:14,950 --> 00:36:16,450
така да се каже, за себе си Google.

797
00:36:16,450 --> 00:36:19,700
Ще използваме Google като задния край и нека
ги вършат тежката работа, търсенето,

798
00:36:19,700 --> 00:36:22,760
но ние ще пресъздаде предния край
на Google и формата за търсене

799
00:36:22,760 --> 00:36:24,520
че те имат по своя начална страница.

800
00:36:24,520 --> 00:36:27,050
И така, ние ще се върнем към
тези тагове в един момент.

801
00:36:27,050 --> 00:36:30,270
>> Така че това е, което аз
предложен само преди миг.

802
00:36:30,270 --> 00:36:33,940
Можем да добавим стилизация на
страница вътре в този стил маркер,

803
00:36:33,940 --> 00:36:36,950
и ние можем да стилизирам фона
цвят, подравняване на текст,

804
00:36:36,950 --> 00:36:39,000
дали това е център или наляво или надясно.

805
00:36:39,000 --> 00:36:41,630
Но много бързо бихте
намери или уеб дизайнер

806
00:36:41,630 --> 00:36:44,060
ще откриете, че това
става малко тромаво,

807
00:36:44,060 --> 00:36:48,330
защото правиш това, което е
нарича смесване съдържание

808
00:36:48,330 --> 00:36:50,120
с представяне от него.

809
00:36:50,120 --> 00:36:53,756
Вие сте смесване на данните ви
и естетиката него.

810
00:36:53,756 --> 00:36:56,380
И в действителност, ако се счита,
какво ще се случи през time--

811
00:36:56,380 --> 00:36:58,350
това е много малък
уеб страница, разбира се.

812
00:36:58,350 --> 00:37:01,590
Но ако мога да добавя съдържание към тази страница
и да добавя стил към тази страница,

813
00:37:01,590 --> 00:37:04,650
страницата много бързо получава
по-дълго и по-дълго.

814
00:37:04,650 --> 00:37:07,510
И предполагам, че искам
има втори уеб страница, която

815
00:37:07,510 --> 00:37:09,010
споделя някои от тези атрибути.

816
00:37:09,010 --> 00:37:12,350
Да предположим, че втората ми уеб страница за моя
site-- също, искам всичко център,

817
00:37:12,350 --> 00:37:14,960
и аз също искам всичко
със зелен фон.

818
00:37:14,960 --> 00:37:17,940
Аз съм доста много ще трябва да се
копирате и поставите някои от тези линии

819
00:37:17,940 --> 00:37:20,730
в този втори файл, който се чувства добре.

820
00:37:20,730 --> 00:37:22,030
Това ще реши проблема.

821
00:37:22,030 --> 00:37:26,060
>> Но какво, ако искам трета страница
или 30-ти страница или на 40-то страница?

822
00:37:26,060 --> 00:37:28,730
Сега ще трябва да се копира и
поставите много дубликат код

823
00:37:28,730 --> 00:37:30,430
в множество файлове.

824
00:37:30,430 --> 00:37:32,600
И така, да предположим, че
Реша или аз съм казал,

825
00:37:32,600 --> 00:37:34,780
хей, ние не използвате
Вече зелен фон.

826
00:37:34,780 --> 00:37:36,380
Отиваме да започнете да използвате оранжево.

827
00:37:36,380 --> 00:37:38,690
Какво трябва да се промени?

828
00:37:38,690 --> 00:37:42,900
Е, ще трябва да се промени, че стил
от зелен на оранжев в колко много места?

829
00:37:42,900 --> 00:37:44,920
Подобно на 30 или 40 места.

830
00:37:44,920 --> 00:37:45,900
Това е досадно.

831
00:37:45,900 --> 00:37:47,039
Това е склонен към грешки.

832
00:37:47,039 --> 00:37:49,580
Има редица причини
където не бихте искали да се индуцира

833
00:37:49,580 --> 00:37:51,840
този вид болка за себе си.

834
00:37:51,840 --> 00:37:54,760
И така, не би ли било хубаво
ако можем да вземе това, което току-що

835
00:37:54,760 --> 00:37:58,240
поставя между тези две жълто
тагове, тези тагове стил,

836
00:37:58,240 --> 00:38:04,050
то фактор навън, и сложи всичко на моя
стилизация в един централен файл

837
00:38:04,050 --> 00:38:08,470
че всички 30 или 40 на други мои файлове
назаем от или по някакъв начин справка,

838
00:38:08,470 --> 00:38:11,640
не за разлика от работата в мрежа
диаграми, което правехме преди?

839
00:38:11,640 --> 00:38:15,030
>> Така че, ако аз отида в тук, аз съм
Ще всъщност предложи

840
00:38:15,030 --> 00:38:17,880
че заменяме
стил етикет с нещо

841
00:38:17,880 --> 00:38:21,620
наречен маркер връзка, която
е ужасно, ужасно име,

842
00:38:21,620 --> 00:38:24,370
защото вие не използвате
линк маркер, за да се създаде това, което

843
00:38:24,370 --> 00:38:26,380
ние, хората знаят като връзка в уеб страница.

844
00:38:26,380 --> 00:38:29,750
За това, можете да използвате която маркер?

845
00:38:29,750 --> 00:38:31,464
Как да се създаде връзка в уеб страница?

846
00:38:31,464 --> 00:38:32,130
АУДИТОРИЯ: А.

847
00:38:32,130 --> 00:38:34,870
Дейвид Дж Малан: А, или котва
маркер, който отиде в Disney преди.

848
00:38:34,870 --> 00:38:39,090
Маркерът за връзка тук се казва,
this-- връзка към файл, наречен

849
00:38:39,090 --> 00:38:44,350
styles.css, връзката, към която
ще бъде, че това е моята стилове.

850
00:38:44,350 --> 00:38:48,290
Така че това е един от най-S в
CSS-- Cascading Style Sheets.

851
00:38:48,290 --> 00:38:50,490
Стил sheet-- две от S в CSS.

852
00:38:50,490 --> 00:38:52,550
Cascading лист стил.

853
00:38:52,550 --> 00:38:58,640
Това просто означава, хей, браузър, отидете
намерите styles.css на локалния сървър

854
00:38:58,640 --> 00:39:01,870
и да го използвате като стилове,
което означава, вътре в този файл

855
00:39:01,870 --> 00:39:05,310
ще бъде всичко на
стилизациите че ние току-що направено.

856
00:39:05,310 --> 00:39:07,396
И така, какво този файл
може да изглежда така е това.

857
00:39:07,396 --> 00:39:10,020
И аз просто ще направите това е бърз
Например, тъй като ние не се нуждаем

858
00:39:10,020 --> 00:39:12,000
за да получите твърде много в бурените тук.

859
00:39:12,000 --> 00:39:17,840
Но ако копирам това, което аз съм предлагане
е, че един програмист създаде нов файл,

860
00:39:17,840 --> 00:39:24,450
поставете в тези lines--
whoops-- поставете в тези линии,

861
00:39:24,450 --> 00:39:32,270
да го запишете като styles.css, и след това, в
От друга файл, изтрийте всички, които

862
00:39:32,270 --> 00:39:35,450
и да го замени, вместо
с този линк маркер.

863
00:39:35,450 --> 00:39:43,090
Така че, ако свържа HREF = "styles.css",
връзката е "стилове"

864
00:39:43,090 --> 00:39:44,170
близо тагове.

865
00:39:44,170 --> 00:39:45,250
Запази го.

866
00:39:45,250 --> 00:39:47,000
Върни се в моя HelloWorld.

867
00:39:47,000 --> 00:39:48,690
Презареди.

868
00:39:48,690 --> 00:39:51,290
>> Буквално нищо не се е случило.

869
00:39:51,290 --> 00:39:54,710
Това е нещо добро, защото тя
означава, че всъщност цялата работа.

870
00:39:54,710 --> 00:39:58,860
За да се докаже, тъй като много, предполагам, че се направи
печатна грешка, и аз наричам това "styles.css"

871
00:39:58,860 --> 00:40:03,080
с капитал S, който е
неправилно, и след това се презареди.

872
00:40:03,080 --> 00:40:05,470
Сега можете да видите това просто не работи.

873
00:40:05,470 --> 00:40:06,362
Сега, защо?

874
00:40:06,362 --> 00:40:08,070
Ами, нека да се използва
техника от по-рано.

875
00:40:08,070 --> 00:40:10,153
Нека да вървим напред и, в
браузъра ми, в Chrome, аз съм

876
00:40:10,153 --> 00:40:12,900
Ще се отвори този специален
раздела мрежа, както и преди,

877
00:40:12,900 --> 00:40:15,560
и нека да се презарежда страницата.

878
00:40:15,560 --> 00:40:19,341
Какво не сте изненадани да видим сега?

879
00:40:19,341 --> 00:40:20,840
Или може би сте изненадани да го видите.

880
00:40:20,840 --> 00:40:23,225
Така или иначе, това, което виждате сега?

881
00:40:23,225 --> 00:40:24,100
АУДИТОРИЯ: [недоловим]

882
00:40:24,100 --> 00:40:24,770
Дейвид Дж Малан: Това не е намерен.

883
00:40:24,770 --> 00:40:25,680
Защо е не е намерен?

884
00:40:25,680 --> 00:40:28,480
Е, Styles.css-- капитал
S-- не съществува.

885
00:40:28,480 --> 00:40:29,230
Аз го сполучлив термин.

886
00:40:29,230 --> 00:40:30,430
Обикновено печатна грешка.

887
00:40:30,430 --> 00:40:33,816
Но аз съм се разбираемо сега е
404, защото сървърът се казва, хей,

888
00:40:33,816 --> 00:40:34,440
това не е намерен.

889
00:40:34,440 --> 00:40:36,300
Буквално, аз не знам
когато този файл е.

890
00:40:36,300 --> 00:40:38,880
Така че, в резултат, на браузъра
показва какво може,

891
00:40:38,880 --> 00:40:42,860
суровата съдържанието на страницата,
който е бил 200, на HTML,

892
00:40:42,860 --> 00:40:45,390
но стилизация не мога
се добавя след това.

893
00:40:45,390 --> 00:40:47,120
И това е, което е писано от каскадни.

894
00:40:47,120 --> 00:40:49,070
Вие нещо да го добавите
след, и това нещо

895
00:40:49,070 --> 00:40:50,874
усъвършенства естетиката на уеб страницата.

896
00:40:50,874 --> 00:40:53,790
И дори може да замени тези,
стилове с още други каскадни стилове файлове

897
00:40:53,790 --> 00:40:54,700
ако искаш.

898
00:40:54,700 --> 00:40:57,780
Това не е намерено, все пак, в този случай,
защото, разбира се, аз го сполучлив термин.

899
00:40:57,780 --> 00:41:00,330
Така че аз ще трябва да се определи, че на първо място.

900
00:41:00,330 --> 00:41:04,667
>> Така че нека да вървим напред и да
предлагам следното.

901
00:41:04,667 --> 00:41:07,410

902
00:41:07,410 --> 00:41:11,140
Да вървим напред и да направим това.

903
00:41:11,140 --> 00:41:14,220
Като се започне с може би
Вашата HelloWorld файл,

904
00:41:14,220 --> 00:41:17,740
нека просто да покани няколко
на функцията предложения.

905
00:41:17,740 --> 00:41:20,400
Така че, Виктория, което исках да
направи някакъв текст по-голяма, нали?

906
00:41:20,400 --> 00:41:24,555
Добре, така че можем да
правят текст по-голяма.

907
00:41:24,555 --> 00:41:26,860
И ние ще всеки разкъсаш
само един проблем за решаване.

908
00:41:26,860 --> 00:41:30,867
Направи текст по-голяма.

909
00:41:30,867 --> 00:41:32,700
Аз няма да се занимавам
написването на тази, когато ние

910
00:41:32,700 --> 00:41:35,600
има куршум технология право върху тук.

911
00:41:35,600 --> 00:41:39,970
Така че някои проблеми.

912
00:41:39,970 --> 00:41:44,670
Така че ние ще се опитаме
да се направи текст по-голяма.

913
00:41:44,670 --> 00:41:45,170
Добре.

914
00:41:45,170 --> 00:41:48,360
Какво друго би някой да предложи?

915
00:41:48,360 --> 00:41:50,332
Какво друго може да искаме
да се направи в дадена уеб страница?

916
00:41:50,332 --> 00:41:52,040
Нека да излезе с
кратък списък на нещата,

917
00:41:52,040 --> 00:41:55,366
и след това да делегира на
група да разбера това.

918
00:41:55,366 --> 00:41:56,270
>> АУДИТОРИЯ: [недоловим]

919
00:41:56,270 --> 00:42:02,251
>> Дейвид Дж Малан: ОК, текст позиция
върху различни страни на страницата?

920
00:42:02,251 --> 00:42:02,750
Добре.

921
00:42:02,750 --> 00:42:04,620
Нещо друго.

922
00:42:04,620 --> 00:42:05,784
>> АУДИТОРИЯ: [недоловим]

923
00:42:05,784 --> 00:42:06,700
Дейвид Дж Малан: Това е.

924
00:42:06,700 --> 00:42:08,720
Така че един GIF е просто
различен формат.

925
00:42:08,720 --> 00:42:12,830
Ние просто се използва, какво, а
PNG или JPG вероятно?

926
00:42:12,830 --> 00:42:14,480
Ние използвахме JPG.

927
00:42:14,480 --> 00:42:16,780
Ако сте любопитни, прекомерен
отговоря на вашия въпрос

928
00:42:16,780 --> 00:42:19,404
е JPG обикновено се използва за
фотографии, защото той подкрепя

929
00:42:19,404 --> 00:42:21,500
милиони цветове или 24-битов цвят.

930
00:42:21,500 --> 00:42:26,930
А GIF обикновено се използва за, като,
интернет меми тези days-- анимации,

931
00:42:26,930 --> 00:42:28,810
като анимирани GIF файлове.

932
00:42:28,810 --> 00:42:32,320
Но това се случва, за да се използва по-малък цветен
палитра, само 256 възможни цветове,

933
00:42:32,320 --> 00:42:35,230
но поддържа
прозрачност и анимация.

934
00:42:35,230 --> 00:42:40,330
И тогава там е PNG, който поддържа
прозрачност и повече цвята

935
00:42:40,330 --> 00:42:41,300
но не анимация.

936
00:42:41,300 --> 00:42:42,133
Така че това е компромис.

937
00:42:42,133 --> 00:42:44,144

938
00:42:44,144 --> 00:42:46,060
Така че добавянето на GIF, все пак,
ще бъде функционално

939
00:42:46,060 --> 00:42:48,396
еквивалентен на добавяне на PNG или JPG.

940
00:42:48,396 --> 00:42:49,110
Да.

941
00:42:49,110 --> 00:42:50,550
Източник на изображението е равен.

942
00:42:50,550 --> 00:42:51,590
Така че нещо друго.

943
00:42:51,590 --> 00:42:57,288
Нека да излезе с нещо, че
ние изпратихме до Виктория да правим тук.

944
00:42:57,288 --> 00:42:59,209
>> АУДИТОРИЯ: Добавете бутони за форма.

945
00:42:59,209 --> 00:43:00,000
Дейвид Дж Малан: OK.

946
00:43:00,000 --> 00:43:02,179
Така добавите бутони за форма.

947
00:43:02,179 --> 00:43:03,470
И ние ще направим, че един заедно.

948
00:43:03,470 --> 00:43:07,220
Така че ще бъде перфектен Segue
веднага след това предизвикателство.

949
00:43:07,220 --> 00:43:10,357
Нещо друго?

950
00:43:10,357 --> 00:43:11,440
Какво може да искате да направите?

951
00:43:11,440 --> 00:43:14,040

952
00:43:14,040 --> 00:43:16,516
В Мрежата се чувства много underwhelming
ако това е всичко, което можем да направим.

953
00:43:16,516 --> 00:43:18,140
АУДИТОРИЯ: Промяна на цвета на текста.

954
00:43:18,140 --> 00:43:19,500
Дейвид Дж Малан: Промяна на какво?

955
00:43:19,500 --> 00:43:20,666
АУДИТОРИЯ: Цвят на текста.

956
00:43:20,666 --> 00:43:22,311
Дейвид Дж Малан: Промяна на цвета на текста.

957
00:43:22,311 --> 00:43:22,810
Добре.

958
00:43:22,810 --> 00:43:23,790
Така че, нека да направим това.

959
00:43:23,790 --> 00:43:27,209
Просто отново така не, че сте, просто
наизуст, без да прави точно това, което правя,

960
00:43:27,209 --> 00:43:29,500
Отивам да включите музика
за може би пет минути тук.

961
00:43:29,500 --> 00:43:30,450
Вие сте добре дошли да използват Google.

962
00:43:30,450 --> 00:43:33,130
Вие сте добре дошли да ме пита, и
Аз ще шепна намек в ухото си.

963
00:43:33,130 --> 00:43:35,171
Вие сте добре дошли да търсят
над на раменете на другите.

964
00:43:35,171 --> 00:43:37,340
Но реши само един от тези проблеми.

965
00:43:37,340 --> 00:43:40,190
Но ние ще направим последната, на
образува един, ако бихме могли заедно.

966
00:43:40,190 --> 00:43:42,790
Така пет минути за решаване
всяка една от тези проблеми

967
00:43:42,790 --> 00:43:46,780
използване на Google, интуиция, или който и да е
други достъпни за вас начин.

968
00:43:46,780 --> 00:43:48,630
>> [МУЗИКА]

969
00:43:48,630 --> 00:43:49,130
Добре.

970
00:43:49,130 --> 00:43:50,838
Не се тревожете, ако искате
да запази бърникането,

971
00:43:50,838 --> 00:43:53,880
но аз ще се развали няколко
на тези отговори.

972
00:43:53,880 --> 00:43:57,986
Така че първото предложение от
Виктория беше да се направи текст по-голяма.

973
00:43:57,986 --> 00:43:59,360
Така че има няколко начина да направите това.

974
00:43:59,360 --> 00:44:01,530
Аз съм в момента възстановено
екрана ми до този размер,

975
00:44:01,530 --> 00:44:04,310
че съм увеличени в
изкуствено, само за да види нещата.

976
00:44:04,310 --> 00:44:07,470
И нека да направим това.

977
00:44:07,470 --> 00:44:11,380
Нека да вървим напред и да вземете
някои генерични латински текст

978
00:44:11,380 --> 00:44:19,540
Просто така че ние имаме нещо да се работи.

979
00:44:19,540 --> 00:44:20,715
Така че ми даде само един миг.

980
00:44:20,715 --> 00:44:21,840
Аз ще направя три точки.

981
00:44:21,840 --> 00:44:53,430

982
00:44:53,430 --> 00:44:53,930
ДОБРЕ.

983
00:44:53,930 --> 00:44:55,560
Това ще бъде по-добър пример.

984
00:44:55,560 --> 00:44:57,840
Така за по-любопитните, в
ми hello.html, аз просто

985
00:44:57,840 --> 00:45:01,645
поставили три безсмислен
Латинска параграфи

986
00:45:01,645 --> 00:45:03,270
Просто така че ние имаме някакъв текст, за да се работи.

987
00:45:03,270 --> 00:45:06,720
И гол Виктория беше да
направи някои от текста по-голяма.

988
00:45:06,720 --> 00:45:09,879
Така че бих могъл, както и преди, отидете тук.

989
00:45:09,879 --> 00:45:11,170
И нека да го направим по правилния начин.

990
00:45:11,170 --> 00:45:13,253
Отивам да имат връзка
етикет, който сочи към файл

991
00:45:13,253 --> 00:45:20,560
наречен "styles.css" връзката
на която е отново "стилове."

992
00:45:20,560 --> 00:45:25,221
И тогава аз ще се спаси, че
и отварянето на тази "styles.css."

993
00:45:25,221 --> 00:45:28,940
>> Така, както преди, имам
способност в този CSS файл

994
00:45:28,940 --> 00:45:31,569
действително да замени по подразбиране
естетика на уеб страница,

995
00:45:31,569 --> 00:45:33,860
и естетиката по подразбиране,
разбира се, са доста скучна.

996
00:45:33,860 --> 00:45:36,943
Това е нещо нормално размер на шрифта, черен
текст, бял фон, и така нататък.

997
00:45:36,943 --> 00:45:39,440
Така че предполагам, че искам да направя
Всички този текст по-голяма.

998
00:45:39,440 --> 00:45:40,460
Мога да направя няколко неща.

999
00:45:40,460 --> 00:45:43,750
В моя styles.css файл, I
Може да се каже, че знаете какво,

1000
00:45:43,750 --> 00:45:46,950
Прилагат се следните да
тялото на моята страница.

1001
00:45:46,950 --> 00:45:51,390
Давай напред и да направи
размер на шрифта 24 пункта,

1002
00:45:51,390 --> 00:45:54,130
който е номер мога да
използвате в Microsoft Word.

1003
00:45:54,130 --> 00:45:57,620
Нека се върнем към моя уеб
страница тук и се презарежда,

1004
00:45:57,620 --> 00:45:59,640
и може да се види, че
това е вече много по-голям.

1005
00:45:59,640 --> 00:46:02,223
И ние можем да се получи малко луд,
точно както можем, по desktop--

1006
00:46:02,223 --> 00:46:03,670
направи 96 точки.

1007
00:46:03,670 --> 00:46:04,950
Презареди.

1008
00:46:04,950 --> 00:46:07,610
И става все по-малко
тромава в този момент.

1009
00:46:07,610 --> 00:46:09,500
>> Но мога да бъда малко по-прецизно.

1010
00:46:09,500 --> 00:46:14,530
Вместо да прилага тази
стилове на тялото на моята страница,

1011
00:46:14,530 --> 00:46:21,740
какво друго бих могъл да го прилага за вместо,
това, което е друг маркер, че все още може да

1012
00:46:21,740 --> 00:46:25,445
функция по същия начин?

1013
00:46:25,445 --> 00:46:26,444
>> АУДИТОРИЯ: стр маркер?

1014
00:46:26,444 --> 00:46:27,360
Дейвид Дж Малан: P маркер.

1015
00:46:27,360 --> 00:46:29,350
Така че главата не би било
правилно, защото в главата,

1016
00:46:29,350 --> 00:46:31,300
Вие не може действително
контролиране на естетиката на.

1017
00:46:31,300 --> 00:46:32,700
Има един текст там или не.

1018
00:46:32,700 --> 00:46:36,760
Но стр tag-- мога да се потопите в малко
по-дълбоко, така да се каже, да параграфа

1019
00:46:36,760 --> 00:46:37,350
тагове.

1020
00:46:37,350 --> 00:46:41,600
И въпреки, че те са три,
това е съвършено глоба, защото в CSS,

1021
00:46:41,600 --> 00:46:44,900
когато аз просто казват "р", това
означава прилагат следните

1022
00:46:44,900 --> 00:46:48,300
за всеки таг, който съвпада с този
селектор, селектора просто

1023
00:46:48,300 --> 00:46:49,430
е името на маркера.

1024
00:46:49,430 --> 00:46:52,350
Така че, където и да видите
"Р", прилага размера на шрифта,

1025
00:46:52,350 --> 00:46:55,222
и нека да го направи по-
разумен again-- 24 точка.

1026
00:46:55,222 --> 00:46:56,930
И знаеш ли какво,
просто за добра мярка,

1027
00:46:56,930 --> 00:46:59,810
нека да направи цвета
червен само за момента.

1028
00:46:59,810 --> 00:47:03,740
И сега, ако аз се презареди, сега ние
виж три грозни точки.

1029
00:47:03,740 --> 00:47:07,180
>> Но сега предполагам, че аз съм нещо като
of-- Искам първа алинея

1030
00:47:07,180 --> 00:47:08,210
да скочи на потребителя.

1031
00:47:08,210 --> 00:47:11,150
Аз не искам да се увеличи само
размер на шрифта от всичко.

1032
00:47:11,150 --> 00:47:16,105
И така, аз всъщност искат да се идентифицират или
разграничат сред тези параграфи.

1033
00:47:16,105 --> 00:47:18,730
Така че нека да се отървете от червеното,
защото това е просто вид на лош вкус,

1034
00:47:18,730 --> 00:47:23,885
и да вървим напред и да направи
размер на шрифта 12 пункта по подразбиране,

1035
00:47:23,885 --> 00:47:26,260
така че ние сме назад с нещо
малко по-разумен.

1036
00:47:26,260 --> 00:47:29,190
И сега аз просто искам да се увеличи
размер на шрифта от първия параграф.

1037
00:47:29,190 --> 00:47:31,440
Мога да направя това в някои
начини, но един начин, който е

1038
00:47:31,440 --> 00:47:37,180
може би най-инструктаж в
момент е да направите следното.

1039
00:47:37,180 --> 00:47:43,280
Нека да вървим напред и да се каже, това
параграф има уникален идентификатор на "първия".

1040
00:47:43,280 --> 00:47:45,000
Аз може да се нарече това нещо, което искам.

1041
00:47:45,000 --> 00:47:46,874
Аз може да се нарече това "Foo"
или всяка друга дума,

1042
00:47:46,874 --> 00:47:49,290
но аз ще го дам някои
семантично смислено име

1043
00:47:49,290 --> 00:47:50,320
като "първи".

1044
00:47:50,320 --> 00:47:54,790
Това е уникален идентификатор,
идентификационния номер, за първата си точка.

1045
00:47:54,790 --> 00:47:59,360
>> Това, което сега мога да направя в моя стилове
е да бъде малко по-прецизно.

1046
00:47:59,360 --> 00:48:02,330
Вместо да кажем, се прилагат
следната към стр тагове,

1047
00:48:02,330 --> 00:48:04,890
Мога да кажа на following--
прилага следното,

1048
00:48:04,890 --> 00:48:11,000
или изберете, на HTML елемент
че има уникален идентификатор на "първия".

1049
00:48:11,000 --> 00:48:12,350
Какво искам да се прилагат за него?

1050
00:48:12,350 --> 00:48:15,250
A размер на шрифта от 24-точка.

1051
00:48:15,250 --> 00:48:16,640
Така че аз имам две селектори сега.

1052
00:48:16,640 --> 00:48:19,690
Един прави всичко на
точки 12 точки.

1053
00:48:19,690 --> 00:48:24,960
Но това, особено след като става въпрос
second-- става въпрос последно в file--

1054
00:48:24,960 --> 00:48:27,090
това е с каскаден ефект.

1055
00:48:27,090 --> 00:48:30,200
Току-що направени всички от моето
параграф тагове 12-точкови,

1056
00:48:30,200 --> 00:48:34,350
но това сега каскади и
има предимство, че за всички елементи

1057
00:48:34,350 --> 00:48:38,800
в страницата, всеки маркер в страницата, чиито
уникален идентификатор е цитат цитата "на първо място."

1058
00:48:38,800 --> 00:48:41,720
И таг в този контекст
просто означава "единен идентификационен код".

1059
00:48:41,720 --> 00:48:43,750
Аз не го сложи в HTML файл.

1060
00:48:43,750 --> 00:48:46,880
Аз, тук, само да кажа,
цитат цитата "на първо място."

1061
00:48:46,880 --> 00:48:48,470
>> Така че нека да се презареди.

1062
00:48:48,470 --> 00:48:49,919
И сега виждам, ах, OK.

1063
00:48:49,919 --> 00:48:51,710
Искам да кажа, че не е толкова
доста, но това е вид

1064
00:48:51,710 --> 00:48:53,600
на подобно предговора към
книга или нещо подобно,

1065
00:48:53,600 --> 00:48:55,100
където първия параграф е по-голям.

1066
00:48:55,100 --> 00:48:57,933
Може да е още по-прецизно с
само първите букви, но най-малко

1067
00:48:57,933 --> 00:48:59,110
Аз бях упражнява по-голям контрол.

1068
00:48:59,110 --> 00:49:04,760
Сега maybe-- може би искам да направя това
от време на време, независимо от причината,

1069
00:49:04,760 --> 00:49:09,010
и така аз не искам това да се
прилага само за един HTML таг.

1070
00:49:09,010 --> 00:49:15,110
По-скоро, нека say-- нека
Също така направете следното.

1071
00:49:15,110 --> 00:49:18,810
Клас = "внос".

1072
00:49:18,810 --> 00:49:23,970
Като има предвид, ID се използва за еднозначно
идентифицира едно нещо, един маркер,

1073
00:49:23,970 --> 00:49:30,190
в уеб страницата си, един клас има за цел да бъде
използва на произволен брой елементи или тагове

1074
00:49:30,190 --> 00:49:30,950
на вашата уеб страница.

1075
00:49:30,950 --> 00:49:31,710
Така че това е за многократна употреба.

1076
00:49:31,710 --> 00:49:33,090
Един ID не е за многократна употреба.

1077
00:49:33,090 --> 00:49:34,450
А клас е за многократна употреба.

1078
00:49:34,450 --> 00:49:37,830
>> И знаеш ли какво, за каквото и
философска reasons--

1079
00:49:37,830 --> 00:49:40,180
Аз не си довърша
thought-- Отивам да се каже,

1080
00:49:40,180 --> 00:49:44,300
че първият параграф и
втори параграф, са важни.

1081
00:49:44,300 --> 00:49:48,600
Така че аз ще се прилага за този клас, наречен
"Важно", че, ако запишете файла ми

1082
00:49:48,600 --> 00:49:51,510
и се презарежда, не разполага с
още функционално въздействие.

1083
00:49:51,510 --> 00:49:53,780
Но аз добавя някои
метаданни във файла,

1084
00:49:53,780 --> 00:49:56,610
сортиране на нещо отделно
от основните данни на файла,

1085
00:49:56,610 --> 00:50:02,300
така че сега в моя стилове, ако аз
вместо да каже ".important" - знаете,

1086
00:50:02,300 --> 00:50:07,110
нещо, което е важно, че съм
ще направи шрифт цвят, red--

1087
00:50:07,110 --> 00:50:09,930
или по-скоро не шрифт цвят, просто цвят.

1088
00:50:09,930 --> 00:50:12,930
Има несъответствия
в CSS за съжаление.

1089
00:50:12,930 --> 00:50:14,120
И презареди.

1090
00:50:14,120 --> 00:50:17,640
Сега забележите първите
две точки са червени

1091
00:50:17,640 --> 00:50:20,880
но не и на третия, защото аз само
прилага класа на "важни"

1092
00:50:20,880 --> 00:50:25,020
за първите две от тези неща.

1093
00:50:25,020 --> 00:50:28,030
>> Така че в IDs, имате възможност
да се уточни, много прецизно.

1094
00:50:28,030 --> 00:50:30,110
С класи, имате възможност за повторно използване.

1095
00:50:30,110 --> 00:50:33,800
Но и в двата случая, обявлението за
сортиране на принцип добър дизайн

1096
00:50:33,800 --> 00:50:39,072
където I отчетени всички от
естетика на моя styles.css файл.

1097
00:50:39,072 --> 00:50:40,280
Така че няма обърканост тук.

1098
00:50:40,280 --> 00:50:44,490
Няма никакво споменаване на червено или
смела изложение или големината на шрифта в този файл.

1099
00:50:44,490 --> 00:50:49,430
По-скоро имам семантично,
по значение характеризира моите данни като,

1100
00:50:49,430 --> 00:50:51,240
тук е някои важни данни.

1101
00:50:51,240 --> 00:50:52,800
Ето някои по-важни данни.

1102
00:50:52,800 --> 00:50:56,500
Освен това, тук е
"Първо" на моите важни данни.

1103
00:50:56,500 --> 00:51:01,050
Така че HTML е всичко за сортиране
на маркиране, буквално думи

1104
00:51:01,050 --> 00:51:05,270
и параграфи и конструкции във вашия
страница с тези малки намеци, ако

1105
00:51:05,270 --> 00:51:07,640
ще, че можете да
някак си наберат използвайки

1106
00:51:07,640 --> 00:51:10,880
други техники като CSS по този начин.

1107
00:51:10,880 --> 00:51:14,760
>> Така че в отговор на въпроса на Виктория,
можем да направим текст по-голяма по този начин.

1108
00:51:14,760 --> 00:51:18,380
Има много други начини, но
шрифта tag-- отворена скоба "шрифт" -

1109
00:51:18,380 --> 00:51:19,770
всъщност няколко години.

1110
00:51:19,770 --> 00:51:21,410
И това е проблем,
също с разчитайки само

1111
00:51:21,410 --> 00:51:23,485
на онлайн resources--
те са склонни да се остарял.

1112
00:51:23,485 --> 00:51:26,110
И наистина, което не се използва,
защото светът осъзна,

1113
00:51:26,110 --> 00:51:28,970
какво означава "шрифта = 7" означава?

1114
00:51:28,970 --> 00:51:29,670
Не.

1115
00:51:29,670 --> 00:51:32,770
И така, в продължение на много години и
това day-- един от страничните

1116
00:51:32,770 --> 00:51:36,060
отбелязва тук е, че е действително
невероятно болезнено все още понякога

1117
00:51:36,060 --> 00:51:38,900
да развиват обектите за
уеб, защото Microsoft

1118
00:51:38,900 --> 00:51:44,220
и Google и Mozilla и
други често не са съгласни за това как

1119
00:51:44,220 --> 00:51:47,480
да тълкува спецификация като HTML.

1120
00:51:47,480 --> 00:51:52,490
>> Налице е набор от правила за HTML, че
обикновено казва, какво означава всеки таг.

1121
00:51:52,490 --> 00:51:55,690
Но понякога това е оставено на
преценка изпълнението на,

1122
00:51:55,690 --> 00:51:57,290
дискретност и Google Microsoft.

1123
00:51:57,290 --> 00:52:00,000
И така че ще много често
виж на уебсайт нещо

1124
00:52:00,000 --> 00:52:04,954
изглежда по различен начин на компютър
отколкото го прави на Mac,

1125
00:52:04,954 --> 00:52:06,995
и това е наистина, защото,
в края на деня,

1126
00:52:06,995 --> 00:52:08,891
те не го тестваме
и на двете платформи.

1127
00:52:08,891 --> 00:52:11,390
Но това е също тъй разумно,
умни хора ще са съгласни

1128
00:52:11,390 --> 00:52:14,970
и фирми ще са съгласни, и така
едно от предизвикателствата на програмиране

1129
00:52:14,970 --> 00:52:16,980
за мрежата или проектиране
неща за мрежата

1130
00:52:16,980 --> 00:52:21,700
пише вашия сайт по начин,
който работи на всеки уеб браузър.

1131
00:52:21,700 --> 00:52:23,410
Но дори и това е неразумно, нали?

1132
00:52:23,410 --> 00:52:27,807
Има толкова много версии на толкова много
браузъри там, че в някакъв момент,

1133
00:52:27,807 --> 00:52:30,890
вие също трябва да се направи преценка повикване
и вие трябва да решите като компания,

1134
00:52:30,890 --> 00:52:33,082
особено за електронна търговия стил
сайтове, където сте

1135
00:52:33,082 --> 00:52:36,290
се опитват да използват най-новите и най-великият
технологии, за да дадат един наистина добър потребител

1136
00:52:36,290 --> 00:52:37,110
опит.

1137
00:52:37,110 --> 00:52:41,019
Но някакъв процент от вашите потребители може да
все още да е с помощта на Internet Explorer 6 или 7

1138
00:52:41,019 --> 00:52:43,810
или 8, особено в зависимост от
страна, че те идват от.

1139
00:52:43,810 --> 00:52:46,760
>> И така, много често
консултирани нещо

1140
00:52:46,760 --> 00:52:50,920
като "статистика на уеб браузъра."

1141
00:52:50,920 --> 00:52:56,560
И ако се върнем to-- нека видим Wikipedia
и да видим как до актуална тази таблица е

1142
00:52:56,560 --> 00:52:59,320
ако има такъв.

1143
00:52:59,320 --> 00:53:02,420
Така че тук можете да видите
където браузъри всъщност

1144
00:53:02,420 --> 00:53:06,160
са, според декември 2015 г.,
според правителството на САЩ.

1145
00:53:06,160 --> 00:53:11,170
Chrome е при 42% пазарен дял, следвана
от IE до голяма степен в корпоративни настройки

1146
00:53:11,170 --> 00:53:14,490
или настройките на PC, разбира се,
последвано от Firefox,

1147
00:53:14,490 --> 00:53:17,440
След Safari, тогава Opera не е направил
направи карта тук по някаква причина,

1148
00:53:17,440 --> 00:53:18,210
и след това останалите.

1149
00:53:18,210 --> 00:53:19,500
Може би това е под др.

1150
00:53:19,500 --> 00:53:27,700
Но по-проблематично, отколкото, че is--
нека да видим дали Wikipedia също има

1151
00:53:27,700 --> 00:53:35,194
версии на браузърите version--

1152
00:53:35,194 --> 00:53:36,160

1153
00:53:36,160 --> 00:53:39,190
>> Нека се върнем към статистиката на браузъра.

1154
00:53:39,190 --> 00:53:40,680
IE.

1155
00:53:40,680 --> 00:53:42,030
Дори и това не е достатъчно.

1156
00:53:42,030 --> 00:53:44,854
статистики браузър.

1157
00:53:44,854 --> 00:53:45,353
Моята версия.

1158
00:53:45,353 --> 00:53:48,980

1159
00:53:48,980 --> 00:53:50,540
Това няма да бъде прав.

1160
00:53:50,540 --> 00:53:53,414
Нека видим версии.

1161
00:53:53,414 --> 00:53:54,830
Browser пазарен дял.

1162
00:53:54,830 --> 00:53:57,110
Да видим дали това идва.

1163
00:53:57,110 --> 00:53:57,610
ДОБРЕ.

1164
00:53:57,610 --> 00:54:00,010
Сега това става все по-
малко по-полезни.

1165
00:54:00,010 --> 00:54:04,870
Така че тук, забележи, че имаме всички
различни версии на браузъри.

1166
00:54:04,870 --> 00:54:09,887
И, Боже мой, ако look-- Chrome
48, Chrome 47, Chrome 31, Chrome 45.

1167
00:54:09,887 --> 00:54:12,970
Искам да кажа, браузърите все актуализира,
и понякога някои от тези промени

1168
00:54:12,970 --> 00:54:16,430
са значително по
от гледна точка на функционалност.

1169
00:54:16,430 --> 00:54:20,630
И така, в един момент, в
продуктови мениджъри или инженерите

1170
00:54:20,630 --> 00:54:23,620
Трябва да се направи decision-- ви
знае какво, само 1% от света

1171
00:54:23,620 --> 00:54:24,740
е все още използват IE 7.

1172
00:54:24,740 --> 00:54:25,490
Да вървят по дяволите.

1173
00:54:25,490 --> 00:54:27,470
Ние просто не започваш да се
подкрепа на този браузър.

1174
00:54:27,470 --> 00:54:28,740
И какво означава това да не подкрепят?

1175
00:54:28,740 --> 00:54:31,170
Това може да означава, че бутоните
не работят на вашата уеб страница,

1176
00:54:31,170 --> 00:54:33,050
или тя може да означава
форматиране е напълно изключен.

1177
00:54:33,050 --> 00:54:35,091
Или може би трябва да се направи
същото това решение повикване

1178
00:54:35,091 --> 00:54:39,089
в мобилните тези дни, когато сме
Няма да подкрепя IOS 5 вече.

1179
00:54:39,089 --> 00:54:40,380
Така че хората просто трябва да ъпгрейд.

1180
00:54:40,380 --> 00:54:45,850
Или ние няма да подкрепи Cupcake
на Android OS за устройства с Android,

1181
00:54:45,850 --> 00:54:48,629
тъй като world-- като
тек света иска да се движи напред,

1182
00:54:48,629 --> 00:54:51,170
то вид иска да плъзнете
свят с него, така че те не го правят

1183
00:54:51,170 --> 00:54:53,295
трябва да продължи да бъде
обратно съвместим, така че те

1184
00:54:53,295 --> 00:54:54,920
могат да предложат нови и добри характеристики.

1185
00:54:54,920 --> 00:54:57,878
Това наистина е една от причините,
защо толкова много компании се въвеждат поетапно

1186
00:54:57,878 --> 00:55:01,440
автоматични актуализации и сортиране на принуждавайки
най-новите версии на софтуера за нас.

1187
00:55:01,440 --> 00:55:04,010
И дори компании
като Apple ще сортира на

1188
00:55:04,010 --> 00:55:07,280
ви принуди почти или принудят
ти по отношение на пазарните сили

1189
00:55:07,280 --> 00:55:11,164
да си купите нов телефон, защото те просто
не ще актуализира стария си телефон вече.

1190
00:55:11,164 --> 00:55:13,330
Така че ви пропуснат
Най-новото и най-големите възможности,

1191
00:55:13,330 --> 00:55:17,520
защото това е скъпо да ги като
фирма за поддържане на по-стара, може би

1192
00:55:17,520 --> 00:55:19,330
низши версии на софтуера.

1193
00:55:19,330 --> 00:55:23,660
Но нетният ефект е, че
ние също страдат това, както добре.

1194
00:55:23,660 --> 00:55:26,550
>> Така че нека да разгледаме най-точно
Няколко финални неща тук.

1195
00:55:26,550 --> 00:55:29,740
Нека да свалям доста бързо някои от
тези други куршуми, ако любопитен.

1196
00:55:29,740 --> 00:55:33,440
Така че, ако сте се опитвали да,
например, позиция

1197
00:55:33,440 --> 00:55:36,420
текста на различни страни на
страница, аз ще направя един бърз начин,

1198
00:55:36,420 --> 00:55:38,360
но там е различно
начини за това.

1199
00:55:38,360 --> 00:55:42,610
Нека да вървим напред и да eliminate--
опрости това, както следва.

1200
00:55:42,610 --> 00:55:45,330
Нека само да се върна в моя
прости, прости точки.

1201
00:55:45,330 --> 00:55:47,760
Нека се върнем към моя styles.css.

1202
00:55:47,760 --> 00:55:51,040
И аз съм просто ще използвате simple--
който може да си видял на Google

1203
00:55:51,040 --> 00:55:54,430
или извикайте от earlier--
текст-да е отдясно.

1204
00:55:54,430 --> 00:55:56,220
И презаредете тази страница.

1205
00:55:56,220 --> 00:55:58,470
Сега всичко изглежда
да бъде прав подравнен,

1206
00:55:58,470 --> 00:56:00,770
както може да се види на режийните тук.

1207
00:56:00,770 --> 00:56:04,470
>> Ние можем да го правят да изглежда малко по-
резервират-подобни, и ние можем да кажем "оправдае"

1208
00:56:04,470 --> 00:56:05,640
и се презарежда.

1209
00:56:05,640 --> 00:56:09,870
Сега това е хубаво и квадрат на двете
страни, което е вид хубаво.

1210
00:56:09,870 --> 00:56:12,220
Друга цел, която имахме тук
е промяна на цвета на текст.

1211
00:56:12,220 --> 00:56:13,650
Така че ние видяхме, че с моя червен текст.

1212
00:56:13,650 --> 00:56:15,630
И сега се добавят бутони за форма.

1213
00:56:15,630 --> 00:56:19,390
Така че защо да не се опитваме да правим точно това?

1214
00:56:19,390 --> 00:56:23,656
Но първо нека да отиде на място, че
повечето от нас използват всеки day-- Google.

1215
00:56:23,656 --> 00:56:25,780
И нека да разгледаме най-
как Google всъщност работи.

1216
00:56:25,780 --> 00:56:26,821
Но аз ще направя това.

1217
00:56:26,821 --> 00:56:31,930
Първо нека да го направи in-- Аха,
да ме пусне да Google първи.

1218
00:56:31,930 --> 00:56:34,530
Отивам да се наложи да отида
в настройките на услугата,

1219
00:56:34,530 --> 00:56:40,660
защото искам да деактивирате
нещо, наречено Мигновени резултати.

1220
00:56:40,660 --> 00:56:43,580
>> Така че може би сте забелязали в
Google тези days-- нека се върнем

1221
00:56:43,580 --> 00:56:44,850
и се превърне това в.

1222
00:56:44,850 --> 00:56:47,900
Така че, ако започне да търси
за "котки", като този,

1223
00:56:47,900 --> 00:56:50,120
забележите, че не само, че
Получавам автоматично завършване на

1224
00:56:50,120 --> 00:56:54,520
отгоре, всички изведнъж, на самата страница
Изглежда, да се променят доста бързо, както и,

1225
00:56:54,520 --> 00:56:58,750
и това е Google с помощта на език
нарича JavaScript опитва да бъде от полза.

1226
00:56:58,750 --> 00:57:01,540
Но за съжаление, това вид
на бъркотии нашата дискусия

1227
00:57:01,540 --> 00:57:04,010
на какво всъщност се случва
под капака тук.

1228
00:57:04,010 --> 00:57:09,070
Така че аз съм просто вид на бързо
изключите мигновени резултати.

1229
00:57:09,070 --> 00:57:11,510
И аз отивам да кликнете върху Запазване.

1230
00:57:11,510 --> 00:57:13,930
И сега аз ще отворя
че диагностично лента с инструменти, които аз

1231
00:57:13,930 --> 00:57:16,150
запази отвор в раздела Network.

1232
00:57:16,150 --> 00:57:17,720
Така че нека да направим това.

1233
00:57:17,720 --> 00:57:21,960
Нека me-- whoops--
превъртете това надолу малко.

1234
00:57:21,960 --> 00:57:24,410
И нека да търси за "котки".

1235
00:57:24,410 --> 00:57:26,790
>> И сега notice-- всъщност,
това е добра възможност

1236
00:57:26,790 --> 00:57:28,840
за да обсъдят за миг.

1237
00:57:28,840 --> 00:57:32,460
Обърнете внимание на момента, в който type-- го спре.

1238
00:57:32,460 --> 00:57:35,250
Спри.

1239
00:57:35,250 --> 00:57:35,790
ДОБРЕ.

1240
00:57:35,790 --> 00:57:40,870
Обърнете внимание на момента, в който въвеждате буквата
C, да гледате на долната част на екрана.

1241
00:57:40,870 --> 00:57:48,600
A- T- S. Какво дъното
на този екран, ми раздела Network,

1242
00:57:48,600 --> 00:57:53,320
Предлагам се случва всеки
път пиша писмо?

1243
00:57:53,320 --> 00:57:57,700
За съжаление, на жаба е много
разсейващи днес или детелина

1244
00:57:57,700 --> 00:58:00,339
или каквото и да е.

1245
00:58:00,339 --> 00:58:01,880
Какво се случва всеки път, когато написах?

1246
00:58:01,880 --> 00:58:04,230
И нека да изчистите
буфер и го въведете отново.

1247
00:58:04,230 --> 00:58:06,580
So-- Опа.

1248
00:58:06,580 --> 00:58:13,280
Всеки път, когато въвеждате буква, C- A- T--
така нов ред очевидно продължава да се появява.

1249
00:58:13,280 --> 00:58:16,530
Какво означава всеки един от тези редове представляват,
въз основа на това, което сме виждали и обсъдени

1250
00:58:16,530 --> 00:58:17,339
до този момент?

1251
00:58:17,339 --> 00:58:18,130
АУДИТОРИЯ: A търсене?

1252
00:58:18,130 --> 00:58:21,770
Дейвид Дж Малан: A търсене, или
по-общо, заявка за HTTP

1253
00:58:21,770 --> 00:58:23,125
от браузъра си, за да сървър.

1254
00:58:23,125 --> 00:58:29,090
Е, защо се направи HTTP моя браузър
да поиска всеки път, когато въвеждате буква?

1255
00:58:29,090 --> 00:58:30,502
>> АУДИТОРИЯ: [недоловим]

1256
00:58:30,502 --> 00:58:33,210
Дейвид Дж Малан: Да, това е даване
мен тези авто-пълна резултати.

1257
00:58:33,210 --> 00:58:35,190
Подобно, когато правя тези
Резултатите от търсенето идват от?

1258
00:58:35,190 --> 00:58:38,120
Е, всеки път, когато въведете
писмо, Google изпраща повече

1259
00:58:38,120 --> 00:58:40,460
и все повече и повече на
думата Аз съм пишете.

1260
00:58:40,460 --> 00:58:41,040
Защо?

1261
00:58:41,040 --> 00:58:44,540
Защото те искат да ми даде
по-добре и по-добре, по-добро предложение,

1262
00:58:44,540 --> 00:58:48,880
списък с предложения, за какво дума
Опитвам се да всъщност пълна.

1263
00:58:48,880 --> 00:58:53,030
Така че това е, за да се каже, буквално всеки
характер, който въвеждате в Google

1264
00:58:53,030 --> 00:58:56,900
се изпраща, в крайна сметка в
насипно състояние, но също така понякога един

1265
00:58:56,900 --> 00:59:00,620
в момент, за да се приложат
тези авто-пълна отличителни знаци, когато

1266
00:59:00,620 --> 00:59:03,000
данните са, разбира се, в интернет.

1267
00:59:03,000 --> 00:59:08,780
>> Сега, нека да разгледаме какво всъщност
се случва, когато щракнете Google Search.

1268
00:59:08,780 --> 00:59:10,420
И тогава ние ще използваме този себе си.

1269
00:59:10,420 --> 00:59:15,320
Така че, ако превъртите надолу, сега до самия
първата заявка, че току-що се е случило.

1270
00:59:15,320 --> 00:59:17,130
Обърнете внимание на следното.

1271
00:59:17,130 --> 00:59:25,550
Той е изпратен в един доста дълъг URL--
https://www.google.com/search?

1272
00:59:25,550 --> 00:59:27,100
и след това цял куп неща.

1273
00:59:27,100 --> 00:59:29,620
Нека да видим това всъщност сега
в раздела браузър себе си.

1274
00:59:29,620 --> 00:59:31,310
Нека да се отървете от лентата с инструменти тук.

1275
00:59:31,310 --> 00:59:33,140
Ето страницата с резултати от търсенето.

1276
00:59:33,140 --> 00:59:34,790
И известие тук е URL адреса.

1277
00:59:34,790 --> 00:59:37,430
Сега, най-вероятно да се досетите
това, което се случва тук в част.

1278
00:59:37,430 --> 00:59:39,090
Така че на първо място, определение.

1279
00:59:39,090 --> 00:59:42,570
Това очевидно е дестинацията
където се подава формата.

1280
00:59:42,570 --> 00:59:44,910
Така че, когато аз напечатани в
думи "Котки" и натиснете Enter,

1281
00:59:44,910 --> 00:59:48,460
Очевидно Google изпратен
вход моя текст за този URL

1282
00:59:48,460 --> 00:59:50,770
че съм подчертано
там, наклонена черта търсене.

1283
00:59:50,770 --> 00:59:56,530
Оказва се, в един URL, нищо, че
се случва, след като въпросителен знак е,

1284
00:59:56,530 --> 01:00:01,270
като ние продължаваме да казва, двойка ключ-стойност
че е бил въведен във формата или по някакъв начин

1285
01:00:01,270 --> 01:00:04,500
предавани от
браузър на сървъра.

1286
01:00:04,500 --> 01:00:07,180
>> Така че всеки път, когато въведете вход
във форма в интернет

1287
01:00:07,180 --> 01:00:10,000
и това е изпратен като ние сме
Обсъждахме, чрез GET,

1288
01:00:10,000 --> 01:00:12,400
една от тези виртуални
пликове, съдържанието

1289
01:00:12,400 --> 01:00:15,510
на които envelope-- да, държа
Първи пълнени физически

1290
01:00:15,510 --> 01:00:19,010
в плика в клас
днес, но технологично

1291
01:00:19,010 --> 01:00:21,110
това е действително пуснати в URL адреса.

1292
01:00:21,110 --> 01:00:22,940
Така че в действителност, нека да се пресее през тази.

1293
01:00:22,940 --> 01:00:25,010
Къде виждате приноса на потребителите?

1294
01:00:25,010 --> 01:00:27,490
Къде виждате нещо
че аз се въведе до тук?

1295
01:00:27,490 --> 01:00:32,100

1296
01:00:32,100 --> 01:00:33,491
Да, така че "котки".

1297
01:00:33,491 --> 01:00:33,990
Така ли е?

1298
01:00:33,990 --> 01:00:36,380
Така че нека да дестилират това
в нещо по-просто.

1299
01:00:36,380 --> 01:00:39,917
Отивам да изтрие всичко за
този URL, че аз не разбирам,

1300
01:00:39,917 --> 01:00:42,250
и аз съм просто ще напусне
то като this-- / търсите? Q = котки.

1301
01:00:42,250 --> 01:00:45,640

1302
01:00:45,640 --> 01:00:47,890
Ще видим, където Q
идва от в момент,

1303
01:00:47,890 --> 01:00:51,220
но, че се чувства като минимум
количество информация, че аз условие.

1304
01:00:51,220 --> 01:00:53,050
И сега аз ще удари Enter.

1305
01:00:53,050 --> 01:00:55,520
И забележи, че все още работи.

1306
01:00:55,520 --> 01:00:57,950
Ние все още се върна цял куп котки.

1307
01:00:57,950 --> 01:01:00,340
Така че Google е любител
отколкото това тези дни.

1308
01:01:00,340 --> 01:01:01,934
Това е 2016, а не 1999 година.

1309
01:01:01,934 --> 01:01:04,600
Така че има и други неща, които ми
браузър изпраща към сървъра.

1310
01:01:04,600 --> 01:01:07,100
Но това е минимално
всичко, което е необходимо.

1311
01:01:07,100 --> 01:01:08,380
>> Е, какво става?

1312
01:01:08,380 --> 01:01:14,320
Ами, първо, нека отида напред и да отидете
обратно към Cloud9 и ме пусна напред

1313
01:01:14,320 --> 01:01:15,620
и затвори моите раздели по-рано.

1314
01:01:15,620 --> 01:01:18,230
И аз ще направя това на моя
притежава само за миг.

1315
01:01:18,230 --> 01:01:20,730
Отивам да се продължи напред
и да се създаде нов файл.

1316
01:01:20,730 --> 01:01:23,739
И аз отивам да го запишете като google.html.

1317
01:01:23,739 --> 01:01:26,280
И аз ще много quickly--
Отивам да се открадне, всъщност,

1318
01:01:26,280 --> 01:01:28,510
някои от този текст, само за да се спести време.

1319
01:01:28,510 --> 01:01:30,610
Отивам да поставите този тук.

1320
01:01:30,610 --> 01:01:33,850
Аз няма да се занимавам с
всеки стилизация този път.

1321
01:01:33,850 --> 01:01:38,340
Ние ще наричаме това "My Google."

1322
01:01:38,340 --> 01:01:41,230
И аз отивам да се отърват
на всичко в организма.

1323
01:01:41,230 --> 01:01:42,740
И аз ще направя следното.

1324
01:01:42,740 --> 01:01:45,690
Нека да я увеличите инча

1325
01:01:45,690 --> 01:01:50,620
Форма action-- и както аз накратко споменато
earlier-- whoops-- както аз накратко

1326
01:01:50,620 --> 01:01:54,130
споменато по-рано, на действието на
форма е мястото, където можете да изпрати данните, да.

1327
01:01:54,130 --> 01:01:56,620
Така google.com/search.

1328
01:01:56,620 --> 01:01:59,390
И метода Искам да използвам
може да бъде едно от следните две неща.

1329
01:01:59,390 --> 01:02:02,870
Това може да бъде или "да", тъй като ние продължаваме
обсъждане, или тя може да бъде "пост".

1330
01:02:02,870 --> 01:02:05,340
За сега, фундаменталните
Разликата е, ако използвате "получи"

1331
01:02:05,340 --> 01:02:09,590
цялата информация, че
потребителят предоставя се предават в URL адреса.

1332
01:02:09,590 --> 01:02:13,530
>> Това е чудесно за неща като търсене
двигатели и няколко други приложения,

1333
01:02:13,530 --> 01:02:17,080
но при какви обстоятелства би
Вие не искате да попълните формуляр

1334
01:02:17,080 --> 01:02:21,620
и са на информацията, до края на
URL, като в адресната лента на браузъра си?

1335
01:02:21,620 --> 01:02:25,470

1336
01:02:25,470 --> 01:02:26,605
Какви форми you-- направя

1337
01:02:26,605 --> 01:02:27,480
АУДИТОРИЯ: [недоловим]

1338
01:02:27,480 --> 01:02:28,450
Дейвид Дж Малан: Да, като това, което?

1339
01:02:28,450 --> 01:02:29,270
АУДИТОРИЯ: Паролите.

1340
01:02:29,270 --> 01:02:31,936
Дейвид Дж Малан: Да, така че можете да влезете
в Facebook или някой сайт.

1341
01:02:31,936 --> 01:02:34,395
Това е приноса на потребителите от
форма, текстово поле,

1342
01:02:34,395 --> 01:02:37,020
но най-вероятно не го искат
показва в URL на браузъра.

1343
01:02:37,020 --> 01:02:38,121
Защо?

1344
01:02:38,121 --> 01:02:40,870
Искам да кажа, може би има някои,
последствия за сигурността на мрежата,

1345
01:02:40,870 --> 01:02:44,830
но MORE-харесва, по-просто, това, което, ако
съквартиранта, вашият значими други,

1346
01:02:44,830 --> 01:02:47,710
децата си, съпругата ви изглежда
чрез историята на браузъра ви?

1347
01:02:47,710 --> 01:02:50,762
Има си прав парола
има в историята на браузъра ви.

1348
01:02:50,762 --> 01:02:52,220
Това не се чувствам като добър дизайн.

1349
01:02:52,220 --> 01:02:54,500
Или още по-технически,
Предполагам, че се опитвате

1350
01:02:54,500 --> 01:02:59,180
да качите снимка на Flickr
или Facebook или wherever--

1351
01:02:59,180 --> 01:03:03,010
че е приноса на потребителите, въпреки че
това е малко по-interesting-- как

1352
01:03:03,010 --> 01:03:05,530
мога да тъпча на изображение в лентата за URL?

1353
01:03:05,530 --> 01:03:06,730
Можете вид на вид не може.

1354
01:03:06,730 --> 01:03:07,396
Можете вид може.

1355
01:03:07,396 --> 01:03:10,210
Но, наистина, аз съм отруден
да си представим това, че.

1356
01:03:10,210 --> 01:03:13,470
Така че аз трябва друг метод за
качване на снимки в уебсайт,

1357
01:03:13,470 --> 01:03:15,657
и че друг метод се нарича "пост".

1358
01:03:15,657 --> 01:03:18,740
Но за сега, ние ще говорим само за
"Получите", която е най-простият от двете.

1359
01:03:18,740 --> 01:03:21,100
Тя просто поставя всички
приноса на потребителите в URL адреса.

1360
01:03:21,100 --> 01:03:22,830
>> Така че тук е формата аз съм създаване.

1361
01:03:22,830 --> 01:03:24,070
Искам един вход.

1362
01:03:24,070 --> 01:03:24,820
И знаеш ли какво?

1363
01:03:24,820 --> 01:03:26,111
Отивам да се направи предположение тук.

1364
01:03:26,111 --> 01:03:31,600
Отивам да си припомни ми
вход "Q" за "заявка".

1365
01:03:31,600 --> 01:03:34,970
И мисля, че това е един от най-
оригинален дизайн, може би, от 1999 година.

1366
01:03:34,970 --> 01:03:39,560
И след това вида на този вход
е просто ще бъде "текст".

1367
01:03:39,560 --> 01:03:43,040
И тогава аз ще има друг вход
че не се нуждае от име, тъй като скоро ще

1368
01:03:43,040 --> 01:03:45,120
виж, видът на които е "бутона."

1369
01:03:45,120 --> 01:03:47,070
И това ще е
дайте ми специален бутон.

1370
01:03:47,070 --> 01:03:48,320
И това е.

1371
01:03:48,320 --> 01:03:50,790
>> Така че нека да вървим напред и да запазите този файл.

1372
01:03:50,790 --> 01:03:54,910
Отивам да се върна в моя
браузър и отидете на google.html.

1373
01:03:54,910 --> 01:03:56,140
Enter.

1374
01:03:56,140 --> 01:03:59,680
И това е вид рядка
меко казано.

1375
01:03:59,680 --> 01:04:03,110
Но нека да продължа напред
и търсене на "котки".

1376
01:04:03,110 --> 01:04:06,510
И забележи момента съм
На този URL Cloud9.

1377
01:04:06,510 --> 01:04:09,240
Но в момента, аз щракнете това,
където се надявате, че ще свърши?

1378
01:04:09,240 --> 01:04:10,160
>> АУДИТОРИЯ: Google.

1379
01:04:10,160 --> 01:04:11,118
>> Дейвид Дж Малан: Google.

1380
01:04:11,118 --> 01:04:12,740
Така че нека да кликнете върху Изпращане.

1381
01:04:12,740 --> 01:04:15,200
И наистина съм отново реализира Google.

1382
01:04:15,200 --> 01:04:15,700
Така ли е?

1383
01:04:15,700 --> 01:04:16,480
Това е по-просто.

1384
01:04:16,480 --> 01:04:17,120
Това е по-лек.

1385
01:04:17,120 --> 01:04:20,350
Искам да кажа, моя код е ясно по-добре, отколкото
тяхна, от бъркотията видяхме по-рано.

1386
01:04:20,350 --> 01:04:21,100
И знаеш ли какво?

1387
01:04:21,100 --> 01:04:22,610
Отивам да се подправят това до малко.

1388
01:04:22,610 --> 01:04:23,860
Аз не спомена това по-рано.

1389
01:04:23,860 --> 01:04:27,860
Има тагове като H1, за функция 1,
най-важната функция на страница.

1390
01:04:27,860 --> 01:04:30,570
"My Google," Ще се обадя на този.

1391
01:04:30,570 --> 01:04:31,940
Нека да се презареди.

1392
01:04:31,940 --> 01:04:33,772
Това изглежда малко по-добре вече.

1393
01:04:33,772 --> 01:04:34,980
И, всъщност, знаеш ли какво?

1394
01:04:34,980 --> 01:04:36,430
Аз бях already-- излъгах.

1395
01:04:36,430 --> 01:04:40,200
Казах, че няма да оформите това,
но аз отивам да оформите това като преди.

1396
01:04:40,200 --> 01:04:46,860
И тялото ми ще бъде,
да речем, текст-приравни център.

1397
01:04:46,860 --> 01:04:48,800
Той гледа по-скоро като Google вече.

1398
01:04:48,800 --> 01:04:51,090
>> Имам нужда от нов ред, въпреки че,
за това бутона Submit.

1399
01:04:51,090 --> 01:04:52,798
И се оказва, можете
да използвате параграфи,

1400
01:04:52,798 --> 01:04:57,320
или можете да по-буквално само да кажа,
дайте ми линия, почивка here-- на BR маркер.

1401
01:04:57,320 --> 01:04:59,319
И ако аз, презаредете, сега тя отива там.

1402
01:04:59,319 --> 01:05:01,610
Това е малко грозна, така че аз
може да направи няколко паузи линия,

1403
01:05:01,610 --> 01:05:03,310
но нека да не се получи прекалено алчни тук.

1404
01:05:03,310 --> 01:05:06,430
Така че сега нека да видим дали ще работи за "кучета."

1405
01:05:06,430 --> 01:05:08,640
Това изглежда да работи за "кучета", както добре.

1406
01:05:08,640 --> 01:05:10,780
Така че това, което е най-завладяваща Takeaway тук?

1407
01:05:10,780 --> 01:05:13,600
One-- не е огромен скок за
представим още няколко тагове,

1408
01:05:13,600 --> 01:05:15,370
като маркер форма във входната маркер.

1409
01:05:15,370 --> 01:05:17,120
Но по-фундаментално
е, всичко, което правим

1410
01:05:17,120 --> 01:05:20,610
е деблокирането на нашето разбиране
на HTTP и факта,

1411
01:05:20,610 --> 01:05:24,900
че форми в крайна сметка да променят
това, което е в URL адреса на браузъра,

1412
01:05:24,900 --> 01:05:28,540
и така, поради това, ние можем да
механично даде своя принос към сървър

1413
01:05:28,540 --> 01:05:33,600
като се направи HTML форма и знаейки
че сървърът разбира HTTP,

1414
01:05:33,600 --> 01:05:36,890
Просто обичам тялото ни разбира, като,
разклащане ръката ми, че един и същ протокол,

1415
01:05:36,890 --> 01:05:40,920
и така се върнем отговор
че ние в крайна сметка се очаква.

1416
01:05:40,920 --> 01:05:44,050
>> Така че нека да се опитаме да направим едно
последно нещо сега с мобилен,

1417
01:05:44,050 --> 01:05:47,052
и аз ще make-- Ще добавите
този код, за да слайдовете.

1418
01:05:47,052 --> 01:05:49,760
Така че, ако искате да калайджия, вие
със сигурност може да го вземе от там.

1419
01:05:49,760 --> 01:05:51,551
Но аз ще отида
напред и да направим едно нещо.

1420
01:05:51,551 --> 01:05:54,120
Отивам да се продължи напред и
отворят моя индекс page--

1421
01:05:54,120 --> 01:05:59,030
ми здравей страница, както и преди, което
има много тази изкуствена-латински текст,

1422
01:05:59,030 --> 01:06:05,470
или безсмислени латински текст, и has--
тя изглежда като този в този размер на шрифта.

1423
01:06:05,470 --> 01:06:07,850
Но нека да вървим напред и да направим това.

1424
01:06:07,850 --> 01:06:09,300
Отивам да отидат в Cloud9.

1425
01:06:09,300 --> 01:06:10,380
И не е нужно да се направи тази стъпка.

1426
01:06:10,380 --> 01:06:11,420
Аз просто ще го направя сам.

1427
01:06:11,420 --> 01:06:12,890
Отивам да щракнете върху Споделяне.

1428
01:06:12,890 --> 01:06:15,170
И това е функция,
само на Cloud9, при което

1429
01:06:15,170 --> 01:06:17,710
Мога да направя моя среда публично.

1430
01:06:17,710 --> 01:06:20,240
>> И само за целите на
демонстрация, позволете ми да направя това.

1431
01:06:20,240 --> 01:06:22,870
Отивам да се направи заявление ми публичен.

1432
01:06:22,870 --> 01:06:25,230
Забележете, че ме предупреди, съм
Аз съм сигурен, че искате да направите това,

1433
01:06:25,230 --> 01:06:28,438
защото това ще направи всички
в света, независимо дали те са тук сега

1434
01:06:28,438 --> 01:06:33,560
или гледане на видео по-късно през
интернет може да види това, което виждам.

1435
01:06:33,560 --> 01:06:34,440
Но това е ОК.

1436
01:06:34,440 --> 01:06:37,870
Отивам да се каже "Готово".

1437
01:06:37,870 --> 01:06:42,080
И нека да ви насърчи, ако го направя
това correctly-- нека го тества първия.

1438
01:06:42,080 --> 01:06:45,590
Давай напред, ако не mind--
в браузъра на вашия компютър,

1439
01:06:45,590 --> 01:06:49,900
отидете на този адрес, и се надяваме,
ще видите моя латински текст.

1440
01:06:49,900 --> 01:06:52,820
И за да бъде ясно, че е
не работи на моя лаптоп.

1441
01:06:52,820 --> 01:06:53,610
Това е в облака.

1442
01:06:53,610 --> 01:06:58,120
Това е на Cloud9, буквално, но
Аз направих моя работен плот на общественото

1443
01:06:58,120 --> 01:07:03,450
така че всеки в интернет
достъп до моята Латинска начална страница.

1444
01:07:03,450 --> 01:07:07,209
>> Отиди в същото URL адреса на
вашия телефон, ако може.

1445
01:07:07,209 --> 01:07:09,750
Ако това ще ви струва, че, вие
просто да погледнете над рамото.

1446
01:07:09,750 --> 01:07:40,688

1447
01:07:40,688 --> 01:07:42,467
АУДИТОРИЯ: [недоловим]

1448
01:07:42,467 --> 01:07:43,550
Дейвид Дж Малан: Съжалявам?

1449
01:07:43,550 --> 01:07:45,390
АУДИТОРИЯ: [недоловим]

1450
01:07:45,390 --> 01:07:47,710
Дейвид Дж Малан: Само латински думи.

1451
01:07:47,710 --> 01:07:48,210
Това е всичко.

1452
01:07:48,210 --> 01:07:49,250
Но това е, което трябва да видите.

1453
01:07:49,250 --> 01:07:49,875
>> АУДИТОРИЯ: Да.

1454
01:07:49,875 --> 01:07:50,790
Дейвид Дж Малан: Да.

1455
01:07:50,790 --> 01:07:51,300
Да.

1456
01:07:51,300 --> 01:07:51,540
ДОБРЕ.

1457
01:07:51,540 --> 01:07:53,530
Така че мога да побере до вашия
телефон само за миг?

1458
01:07:53,530 --> 01:07:57,504
Така че, да се надяваме, ако сте достъп
това, то трябва да изглежда почти нечетлив.

1459
01:07:57,504 --> 01:07:59,920
Това е still-- Искам да кажа, това е
нечетлив, защото на латински.

1460
01:07:59,920 --> 01:08:01,920
Но тя също може да бъде прочетен
за това, което е друга причина?

1461
01:08:01,920 --> 01:08:03,775
Подобно на това, което ви е угодно за това?

1462
01:08:03,775 --> 01:08:04,650
АУДИТОРИЯ: Това е малка.

1463
01:08:04,650 --> 01:08:06,420
Дейвид Дж Малан: Това е супер, супер малък.

1464
01:08:06,420 --> 01:08:07,920
И така, как бихме могли да поправя това?

1465
01:08:07,920 --> 01:08:09,730
Това е супер, супер малък
на телефона на Виктория

1466
01:08:09,730 --> 01:08:11,400
и, ако сте изтеглен
то до себе си, най-вероятно

1467
01:08:11,400 --> 01:08:14,660
малък от телефона си, както и, освен ако не
са активирани настройките за достъпност.

1468
01:08:14,660 --> 01:08:15,530
Какво е това?

1469
01:08:15,530 --> 01:08:18,497
Можете просто да се захванете и
увеличение, което е осъществимо,

1470
01:08:18,497 --> 01:08:20,330
но след това, което виждате само
С няколко думи в даден момент.

1471
01:08:20,330 --> 01:08:20,859
Така че чакай малко.

1472
01:08:20,859 --> 01:08:21,720
Аз знам как да поправя това.

1473
01:08:21,720 --> 01:08:22,219
Така ли е?

1474
01:08:22,219 --> 01:08:26,130
Мога да използвате CSS, и аз може да промени
размер на шрифта от 12 точки за 24-точка.

1475
01:08:26,130 --> 01:08:29,020
Но страничен ефект от това,
разбира се, ще бъде сега,

1476
01:08:29,020 --> 01:08:32,630
на настолен или преносим компютър,
Сега текстът е два пъти по-голям.

1477
01:08:32,630 --> 01:08:35,810
И така вид би било хубаво
да се прави разлика между устройства,

1478
01:08:35,810 --> 01:08:37,840
и се оказва, че
са начини за правене на това.

1479
01:08:37,840 --> 01:08:39,590
Има няколко
различни начини, в действителност,

1480
01:08:39,590 --> 01:08:44,189
при която с помощта на CSS и красиви черти
че ние няма да отидат в по-големи подробности,

1481
01:08:44,189 --> 01:08:46,960
можете да същество заявка
браузъра и да кажа,

1482
01:08:46,960 --> 01:08:51,550
ако екрана е по-малък от този
много пиксели, използват този размер на шрифта.

1483
01:08:51,550 --> 01:08:55,180
Ако екранът ви е по-голям от този
много пиксели, използват този друг размер на шрифта.

1484
01:08:55,180 --> 01:08:57,080
>> Вие може да бъде дори по-красиви все още.

1485
01:08:57,080 --> 01:09:00,140
Ако някога сте посетили
уеб страница, която, на настолен,

1486
01:09:00,140 --> 01:09:04,404
има голямо меню може би до най-
страна, и след това цялото съдържание

1487
01:09:04,404 --> 01:09:07,029
е на страната на която menu--
това е вид на обща парадигма.

1488
01:09:07,029 --> 01:09:09,670
Меню на ляво, съдържание
на полето, или обратното.

1489
01:09:09,670 --> 01:09:13,569
наистина не работи на мобилния, когато си
екран е само това много пиксела.

1490
01:09:13,569 --> 01:09:16,233
Така че по-често на мобилния е,
менюто си изведнъж ще получите

1491
01:09:16,233 --> 01:09:18,399
се срина, а вие трябва да
кликнете на бутона, за да го видите,

1492
01:09:18,399 --> 01:09:22,404
или на интернет страницата ще изведе менюто
над нея и да изложат на съдържанието под него.

1493
01:09:22,404 --> 01:09:24,779
И вие може да прилага тези правила
неща в множество начини, също.

1494
01:09:24,779 --> 01:09:28,340
Можете да зададете своите програмисти,
хей, екип, по всяко време

1495
01:09:28,340 --> 01:09:34,450
виждате заявка за HTTP от Android
устройство, устройство на Microsoft, а Google

1496
01:09:34,450 --> 01:09:39,930
устройство, устройство на Apple, използвайте тази
размер на шрифта и използвате тази оформление меню,

1497
01:09:39,930 --> 01:09:42,670
или пък да използва тази подразбиране голяма оформление.

1498
01:09:42,670 --> 01:09:45,410
>> Сега, като се използва каквото
фундаментална техника днес

1499
01:09:45,410 --> 01:09:48,529
могли инженерите използват
да знам дали това е

1500
01:09:48,529 --> 01:09:53,660
на iPhone, един Android телефон, лаптоп,
настолен посещение на сървъра на компанията?

1501
01:09:53,660 --> 01:09:55,310
При което те ще получат тази информация?

1502
01:09:55,310 --> 01:09:56,080
>> АУДИТОРИЯ: Header?

1503
01:09:56,080 --> 01:09:57,740
>> Дейвид Дж Малан: Да, хедъра на HTTP.

1504
01:09:57,740 --> 01:10:01,714
Така че всяка заявка HTTP, идващи от
своите клиенти до техните сървъри

1505
01:10:01,714 --> 01:10:03,880
включва, вътре в тази виртуална
плик, цял куп

1506
01:10:03,880 --> 01:10:08,260
на HTTP хедъри, една от които е
браузъра и операционната система

1507
01:10:08,260 --> 01:10:10,290
дори, ако те е грижа за
това ниво на детайлност.

1508
01:10:10,290 --> 01:10:13,790
Сега, това е един загадъчен вид низ, но
съществува софтуер, който просто ще

1509
01:10:13,790 --> 01:10:18,530
опрости, че и вие може просто да попитам
в програмирането code-- PHP, Java, C ++,

1510
01:10:18,530 --> 01:10:23,650
whatever-- какво телефон е this--
какво устройство е този потребител, използващ?

1511
01:10:23,650 --> 01:10:27,501
И тогава може да се каже, да им покажем това
версия на сайта, ако това е телефон.

1512
01:10:27,501 --> 01:10:30,250
Покажете им, когато тази версия на
уебсайт, ако това е лаптоп или настолен.

1513
01:10:30,250 --> 01:10:32,316
Но ти дори не е необходимо
от страна на сървъра сложност.

1514
01:10:32,316 --> 01:10:33,940
Можете да направите дори най-простите неща.

1515
01:10:33,940 --> 01:10:34,815
>> Отивам да се направи това.

1516
01:10:34,815 --> 01:10:38,995
Отивам да се продължи напред в
ми Cloud9 среда,

1517
01:10:38,995 --> 01:10:41,370
и аз отивам да добавите маркер
че те видях в Google преди.

1518
01:10:41,370 --> 01:10:42,770
Той е наречен метамаркер.

1519
01:10:42,770 --> 01:10:45,520
И никога не си спомням този един, така че
Отивам да го преписвам тук.

1520
01:10:45,520 --> 01:10:50,552
Мета име = "прозореца за показване" и след това
съдържание = "ширина = ширина устройство, intital

1521
01:10:50,552 --> 01:11:02,060
мащаб = 1 "и това е всичко.

1522
01:11:02,060 --> 01:11:06,230
>> Така че това може и да е
като магическо заклинание.

1523
01:11:06,230 --> 01:11:11,300
Това не е всичко, което ясно, но това е
нещо общо с изгледа,

1524
01:11:11,300 --> 01:11:15,070
и изгледа е само тялото на
уеб страница, на правоъгълна област, която

1525
01:11:15,070 --> 01:11:16,690
определя най на страницата.

1526
01:11:16,690 --> 01:11:19,060
И това е просто казвам
браузъра, знаете ли какво?

1527
01:11:19,060 --> 01:11:22,589
Направете ширината на тази страница
ефективно равна на ширината на устройството.

1528
01:11:22,589 --> 01:11:25,380
С други думи, не мислете, че
Имате ли нещо като неограничено пространство.

1529
01:11:25,380 --> 01:11:29,920
Да предположим, че имате само толкова,
пространство като самото устройство е голям.

1530
01:11:29,920 --> 01:11:34,454
И така, сега, ако аз презаредете
в браузъра ми, аз не виждам промяна.

1531
01:11:34,454 --> 01:11:37,370
Но ако го направя това correctly-- и
нека да пресече ми fingers-- ако всичко, което

1532
01:11:37,370 --> 01:11:42,920
презареди си телефони, което правите
виж убедителна промяна?

1533
01:11:42,920 --> 01:11:43,620
Да, е that--

1534
01:11:43,620 --> 01:11:45,067
>> АУДИТОРИЯ: [недоловим]

1535
01:11:45,067 --> 01:11:45,900
Дейвид Дж Малан: Да.

1536
01:11:45,900 --> 01:11:46,400
ДОБРЕ.

1537
01:11:46,400 --> 01:11:47,850
Така че може би по-разбираемо в момента?

1538
01:11:47,850 --> 01:11:53,070
Все още малък, за да бъде справедлив, но не
толкова малък, че да е неуправляем.

1539
01:11:53,070 --> 01:11:56,920
И аз със сигурност може да отмени това
допълнително с CSS или от страната на сървъра,

1540
01:11:56,920 --> 01:12:00,120
но все по-често това, което сте
виждат се все повече и повече функции

1541
01:12:00,120 --> 01:12:02,900
се прибавя към
от страна на клиента environments--

1542
01:12:02,900 --> 01:12:06,530
JavaScript, тъй като ние ще обсъдим
утре, CSS, и HTML-- така

1543
01:12:06,530 --> 01:12:09,190
че всички тези заявки
може да се направи на клиента

1544
01:12:09,190 --> 01:12:11,910
така че да се притеснява
сървър много по-малко и не

1545
01:12:11,910 --> 01:12:14,530
да се наложи да се справи с, за
Например, на постоянна атака

1546
01:12:14,530 --> 01:12:17,210
на новата операционна система
версии, нови версии на браузъра.

1547
01:12:17,210 --> 01:12:20,190
Можете просто да позволи на браузъра
поиска от устройството, колко голям си ти,

1548
01:12:20,190 --> 01:12:22,890
и след това да си малко по-логично
решения въз основа на това.

1549
01:12:22,890 --> 01:12:25,140
Но ще видим повече възможности
за логични решения

1550
01:12:25,140 --> 01:12:27,223
Утре в контекста
на един език за програмиране.

1551
01:12:27,223 --> 01:12:29,800

1552
01:12:29,800 --> 01:12:32,760
>> Така че, на всички въпроси, а след това,
за уеб програмиране?

1553
01:12:32,760 --> 01:12:36,130
Днес не е уеб програмиране, на
себе си, тъй като почти всичко, което направихме

1554
01:12:36,130 --> 01:12:38,370
Беше много естетически, ако щете.

1555
01:12:38,370 --> 01:12:41,750
Не е за вземане на решения в
кода, че сме написали,

1556
01:12:41,750 --> 01:12:44,990
и така, че затова HTML е за маркиране
език, а не един език за програмиране.

1557
01:12:44,990 --> 01:12:47,140
Но утре ние ще се
един бърз поглед, в крайна сметка,

1558
01:12:47,140 --> 01:12:49,340
в JavaScript, който е
действително програмиране

1559
01:12:49,340 --> 01:12:54,220
език, който ни позволява да направим малко повече.

1560
01:12:54,220 --> 01:12:56,800
>> Някакви въпроси?

1561
01:12:56,800 --> 01:13:00,480
Е, нека да предложи два
възможности по избор за домашна работа.

1562
01:13:00,480 --> 01:13:02,900
Един is-- тези Cloud9
сметки няма да изтича.

1563
01:13:02,900 --> 01:13:04,669
Вие сте добре дошли да използват
тях да калайджия с.

1564
01:13:04,669 --> 01:13:05,960
Това е безплатно ниво на обслужване.

1565
01:13:05,960 --> 01:13:08,754
Осъзнайте, че, ако при създаването на
на вашето работно място, вие го направи публично,

1566
01:13:08,754 --> 01:13:11,670
че не означава, че всеки в
интернет може да видите това, което пишете.

1567
01:13:11,670 --> 01:13:15,104
Така че може би просто помисли
не излагаш себе си

1568
01:13:15,104 --> 01:13:18,020
ако сте пускането първата си уеб
страница там публично случайно,

1569
01:13:18,020 --> 01:13:20,134
но никой няма да
знаете да погледне там така или иначе.

1570
01:13:20,134 --> 01:13:23,760
>> И two-- да ме хвърля
до този URL, както и,

1571
01:13:23,760 --> 01:13:28,250
особено ако дойде в днес
малко по-малко удобни, отколкото други,

1572
01:13:28,250 --> 01:13:30,430
сигурни какво означава всичко това.

1573
01:13:30,430 --> 01:13:36,780
Осъзнайте, че много повече от това видео,
който е едновременно добър начин да заспите

1574
01:13:36,780 --> 01:13:39,380
а също и да се смее, докато
Правейки това, също има

1575
01:13:39,380 --> 01:13:44,300
много societally интересно
и свързани със сигурността дискусии

1576
01:13:44,300 --> 01:13:47,370
в него от Джон Оливър,
макар и комик.

1577
01:13:47,370 --> 01:13:55,456
>> Но ако няма допълнителни въпроси,
това ни води до рецепцията.

1578
01:13:55,456 --> 01:13:56,830
Така че защо да не се включа музиката.

1579
01:13:56,830 --> 01:13:58,610
Не трябва да има напитки
и закуски отвън.

1580
01:13:58,610 --> 01:14:00,220
Аз съм щастлив да се смесят, за колкото
Докато хора биха искали,

1581
01:14:00,220 --> 01:14:01,600
отговори на въпроси по един-на-един.

1582
01:14:01,600 --> 01:14:03,330
Но, в противен случай, вие сте добре дошли
да излети във всеки един момент,

1583
01:14:03,330 --> 01:14:05,740
и ние ще се видим отново
утре сутринта за малко повече.

1584
01:14:05,740 --> 01:14:07,290
Добре, благодаря.

1585
01:14:07,290 --> 01:14:10,428