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

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

3
00:00:01,210 --> 00:00:02,160
Ne-am intors.

4
00:00:02,160 --> 00:00:05,810
Așa că, obiectivul acestei sesiuni finale
este de a introduce câteva concepte

5
00:00:05,810 --> 00:00:09,290
dar, de asemenea, da tuturor o șansă
să se întindă un fel de degete

6
00:00:09,290 --> 00:00:11,270
și de fapt, a face ceva
un pic hands-on.

7
00:00:11,270 --> 00:00:13,897
Scopul nu este de a transforma
noi toți în dezvoltatori web

8
00:00:13,897 --> 00:00:16,230
prin orice mijloace, dar într-adevăr doar
pentru a vă oferi un gust de unele

9
00:00:16,230 --> 00:00:21,750
din construcțiile fundamentale ale ceea ce
merge în programare web și astăzi web

10
00:00:21,750 --> 00:00:23,980
dezvoltare, astfel încât
partea statica a lucruri--

11
00:00:23,980 --> 00:00:26,660
nici o logică, nici o programare
limbă, doar conținut static.

12
00:00:26,660 --> 00:00:29,660
Și ne va da o oportunitate
pentru a vedea de fapt ce este un server de web este,

13
00:00:29,660 --> 00:00:34,140
vezi ce un fișier HTML este, a se vedea ce
este HTTP este, de fapt care servește în sus.

14
00:00:34,140 --> 00:00:38,600
Dar înainte de a se arunca cu capul în orice retrospectivă
întrebări despre cloud computing

15
00:00:38,600 --> 00:00:43,922
sau de securitate sau orice altceva între?

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

17
00:00:44,890 --> 00:00:47,181
Bine, bine, hai
a face acest lucru, doar în cazul în

18
00:00:47,181 --> 00:00:49,680
procesul de înscriere pentru
ceva durează câteva minute.

19
00:00:49,680 --> 00:00:51,221
Ne vom lăsa să-l facem în fundal.

20
00:00:51,221 --> 00:00:56,860
Du-te mai departe, dacă ai putea,
la această adresă URL aici-- c9.io.

21
00:00:56,860 --> 00:01:02,810
Aceasta este o terță parte service--
platforma ca un serviciu, în cazul în care will--

22
00:01:02,810 --> 00:01:05,190
care va va invita
să se înscrie pentru un cont,

23
00:01:05,190 --> 00:01:08,650
și va da fiecăruia dintre voi
un cont în așa-numitul nor

24
00:01:08,650 --> 00:01:11,330
pe infrastructura altcuiva,
o companie numita Cloud9.

25
00:01:11,330 --> 00:01:13,350
Dar ceea ce e frumos despre
acest lucru este că ei vă dau

26
00:01:13,350 --> 00:01:15,990
o aproximare a unei
actual de dezvoltare, lumea reală

27
00:01:15,990 --> 00:01:18,530
mediu, chiar dacă în
nor și într-un browser web,

28
00:01:18,530 --> 00:01:21,175
și vom folosi asta de fapt
experiment un pic astăzi.

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

30
00:01:27,116 --> 00:01:30,260
Și apoi mergeți mai departe și doar să navigați
drumul spre procesul de înscriere

31
00:01:30,260 --> 00:01:32,630
dacă ai putea.

32
00:01:32,630 --> 00:01:36,080
Așa că se întâmplă să folosească acest lucru în clasa
Eu predau pentru toți studenții noștri,

33
00:01:36,080 --> 00:01:39,140
atât în ​​campus și în afara acum, și
este înlocuit ceea ce punct de vedere istoric

34
00:01:39,140 --> 00:01:41,390
a fost software-ul în alt mod descărcabil.

35
00:01:41,390 --> 00:01:44,620
Deci, ce ai avea acces la
este una dintre aceste mașini virtuale,

36
00:01:44,620 --> 00:01:46,460
în esență, că am descris mai devreme.

37
00:01:46,460 --> 00:01:50,260
Așa că această companie Cloud9, probabil,
chiriile de la un al treilea, într-adevăr party--

38
00:01:50,260 --> 00:01:52,760
în acest caz, Google-- un întreg
grămadă de mașini virtuale

39
00:01:52,760 --> 00:01:56,500
că ei cumva se taie în sus, în
iluzia de servere individuale

40
00:01:56,500 --> 00:01:58,610
că fiecare dintre noi are un control deplin asupra.

41
00:01:58,610 --> 00:02:01,640
Nu e destul de precisă pentru a spune
că acestea sunt mașini virtuale,

42
00:02:01,640 --> 00:02:04,550
deși, pentru că ceea ce
Cloud9 folosește de fapt

43
00:02:04,550 --> 00:02:07,570
este o tehnologie relativ nouă
numita conteinerizare.

44
00:02:07,570 --> 00:02:13,150
Și lasă-mă apuca de această imagine
aici pentru a picta această imagine.

45
00:02:13,150 --> 00:02:16,540
>> Un container este, dacă
vă amintiți imaginea

46
00:02:16,540 --> 00:02:19,900
de la mai devreme, un pic mai usor
greutate decât o mașină virtuală.

47
00:02:19,900 --> 00:02:22,090
De fapt, în timp ce ultima
timp despre care am vorbit acolo

48
00:02:22,090 --> 00:02:25,170
fiind o funcționare
sistem și un hypervisor

49
00:02:25,170 --> 00:02:28,260
și apoi sistemul de operare oaspete, vizitatorule
sistem de operare, de operare vizitator

50
00:02:28,260 --> 00:02:30,940
sistem, pe partea de sus a ta
hardware fizic,

51
00:02:30,940 --> 00:02:33,740
diferența cu această nouă
tehnologie, containerizare,

52
00:02:33,740 --> 00:02:37,290
este că toate acestea într-un fel împărtășesc
același sistem de operare.

53
00:02:37,290 --> 00:02:39,970
Dar ei încă creează
iluzia tuturor

54
00:02:39,970 --> 00:02:44,590
având propriul său exclusiv
drepturi administrative și fișiere

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

56
00:02:45,400 --> 00:02:48,230
Dar nu e mai puțin software
între tine și hardware-ul.

57
00:02:48,230 --> 00:02:52,260
Rezultatul, care este, în
Teoretic, o performanță mai mare,

58
00:02:52,260 --> 00:02:55,470
deoarece utilizați sau
pierdem mai puține resurse

59
00:02:55,470 --> 00:02:57,360
pe faptul că așa-numitul strat de virtualizare.

60
00:02:57,360 --> 00:02:59,420
Deci, acest lucru se numește
conteinerizare prin natura

61
00:02:59,420 --> 00:03:02,920
prin intermediul unei tehnologii numite Docker,
care este foarte mult să intre în propria sa.

62
00:03:02,920 --> 00:03:05,086
Și acest lucru este ceva ce
inginerii de la compania dvs.

63
00:03:05,086 --> 00:03:08,610
ar putea un fel de tip începe să vorbești
despre curând dacă acestea nu au deja,

64
00:03:08,610 --> 00:03:11,590
deși nu există cu siguranță nici
motiv pentru a sari pe orice aliniază.

65
00:03:11,590 --> 00:03:15,410
>> Deci, cu care a spus, ce
probabil te vezi acum

66
00:03:15,410 --> 00:03:22,670
este un ecran care arata un pic ca asta.

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

68
00:03:23,170 --> 00:03:25,260
Și, sună-mă dacă nu peste.

69
00:03:25,260 --> 00:03:27,440
Și, dacă deci-- voi veni dacă nu.

70
00:03:27,440 --> 00:03:30,244
Mergeți mai departe și faceți clic pe acel mare
în plus pentru a crea un spațiu de lucru,

71
00:03:30,244 --> 00:03:31,660
și veți vedea un ecran de genul asta.

72
00:03:31,660 --> 00:03:35,020
Puteți apela în spațiul de lucru
nume tot ce vrei acum.

73
00:03:35,020 --> 00:03:38,660
Și, de fapt, doar pentru simplitate,
du-te si-- bine, unii dintre voi

74
00:03:38,660 --> 00:03:39,660
au deja spații de lucru.

75
00:03:39,660 --> 00:03:47,050
Spune-i cum ai afaceri o doresti,
Harvard, joi, orice doriți.

76
00:03:47,050 --> 00:03:48,800
Nu aveți nevoie de o descriere.

77
00:03:48,800 --> 00:03:52,380
Puteți să-l lăsați un privat, cu excepția cazului în tine
au deja o grămadă de spații de lucru.

78
00:03:52,380 --> 00:03:55,280
În cazul în care ești forțat să o facă publică,
e bine pentru scopurile de azi.

79
00:03:55,280 --> 00:03:56,750
Aici, de asemenea, este una dintre upsells.

80
00:03:56,750 --> 00:03:59,939
Primești un singur spațiu de lucru privat de
Mod implicit. Dar, dacă vrei mai mult,

81
00:03:59,939 --> 00:04:00,980
va trebui să plătească pentru mai mult.

82
00:04:00,980 --> 00:04:02,870
În caz contrar, ei te forța
pentru a face publice dvs. de lucru.

83
00:04:02,870 --> 00:04:05,600
Dar asta e bine, pentru că, de asemenea,
țintă acest lucru la comunitățile open-source

84
00:04:05,600 --> 00:04:07,700
pentru a încuraja oamenii să
de fapt, să colaboreze.

85
00:04:07,700 --> 00:04:10,699
>> Și ultimul lucru important,
deși, este, după ce alegeți un nume

86
00:04:10,699 --> 00:04:17,140
și după ce alegeți privat sau public,
faceți clic pe HTML5, pictograma mare portocaliu

87
00:04:17,140 --> 00:04:22,430
al doilea din stânga, și
apoi faceți clic pe Creare spațiu de lucru.

88
00:04:22,430 --> 00:04:24,580
Și va, probabil,
să ia un minut sau cam asa ceva,

89
00:04:24,580 --> 00:04:26,540
dar veți avea atunci un
mediu, odată ce

90
00:04:26,540 --> 00:04:30,544
face acest lucru, care arată amintește de
ceea ce am pe ecran aici, acum.

91
00:04:30,544 --> 00:04:33,210
Dar, din nou, ar putea dura un minut
sau mai mult pentru a ajunge la acest ecran

92
00:04:33,210 --> 00:04:34,770
odată ce ați făcut clic pe Creare spațiu de lucru.

93
00:04:34,770 --> 00:04:37,936
Dar, pur și simplu mă semnalați peste dacă m-ai dori
pentru a arunca o privire la orice sau sfătui.

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

95
00:04:40,191 --> 00:04:40,690
In regula.

96
00:04:40,690 --> 00:04:42,390
Asa ca voi fundal asta pentru acum.

97
00:04:42,390 --> 00:04:44,260
Sună-mă dacă ai peste par să
aveți dificultăți tehnice.

98
00:04:44,260 --> 00:04:46,210
Dar, din nou, ar putea dura
puțin pentru că, pentru a deschide.

99
00:04:46,210 --> 00:04:49,570
Și să mergem mai departe și să vorbim despre ce
aceasta înseamnă de fapt pentru a face o pagină web,

100
00:04:49,570 --> 00:04:52,780
ce HTML este, și cum toate acestea
acum interconectează așa cum începem

101
00:04:52,780 --> 00:04:54,730
să utilizeze efectiv o parte din tehnologia.

102
00:04:54,730 --> 00:04:58,310
Deci, se pare că eu pot
du-te pe micul meu Mac aici,

103
00:04:58,310 --> 00:05:01,650
deschide un simplu program numit
TextEdit, sau pe Windows am putut

104
00:05:01,650 --> 00:05:04,480
ceva deschis numit Notepad.exe.

105
00:05:04,480 --> 00:05:08,260
Și aș putea pur și simplu, pur și simplu face ceva
cum ar fi astea-- "Bună ziua, lume."

106
00:05:08,260 --> 00:05:12,020
Și apoi am putea salva acest lucru ca
hello.txt Deci, nici o magie acolo.

107
00:05:12,020 --> 00:05:15,200
Acest lucru nu are nimic de-a face cu web
programare, nimic de-a face cu HTML.

108
00:05:15,200 --> 00:05:16,790
Doar crearea unui fișier text simplu.

109
00:05:16,790 --> 00:05:20,600
Dar se pare că un web
pagina doar este literalmente.

110
00:05:20,600 --> 00:05:24,020
Este un text simplu fișier text care conține
că s-ar putea tastați la tastatură,

111
00:05:24,020 --> 00:05:30,070
dar de obicei, dar nu întotdeauna
se termină în care nu .txt, dar .html sau .htm.

112
00:05:30,070 --> 00:05:32,050
Și tu nu faci doar
tastați cuvinte în fișierul.

113
00:05:32,050 --> 00:05:35,280
de fapt, va trebui să utilizați lucruri numite
tag-uri sau, mai general, ceva

114
00:05:35,280 --> 00:05:37,190
numit limbaj de marcare.

115
00:05:37,190 --> 00:05:40,510
>> Așa că am de gând să tastați foarte repede
și apoi să explice următoarele.

116
00:05:40,510 --> 00:05:42,290
Mă duc să mai întâi
acest tip, care spune,

117
00:05:42,290 --> 00:05:45,730
hei, browser-ul, aici vine un
pagina de web scrise în HTML.

118
00:05:45,730 --> 00:05:51,850
Și aceste două lucruri împreună spun, hei,
browser-ul, cu următorul text este într-adevăr HTML.

119
00:05:51,850 --> 00:05:55,790
Hei, browser-ul, aici vine
cap sau în partea de sus a paginii mele.

120
00:05:55,790 --> 00:05:59,900
Hei, browser-ul, în interiorul vârfului
pagina mea, a pus un titlu care este, "Bună ziua,

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

122
00:06:01,610 --> 00:06:08,370
Hei, browser-ul, după ce șeful meu
pagina, aici vine corpul paginii mele.

123
00:06:08,370 --> 00:06:12,170
Si, hei, browser-ul, corpul meu
pagină ar trebui să spun, de asemenea, "Hello World".

124
00:06:12,170 --> 00:06:15,500
Deci, ce sunt detaliile importante aici?

125
00:06:15,500 --> 00:06:17,960
Aceasta este ceea ce este, în general,
numit o declarație de tip doc,

126
00:06:17,960 --> 00:06:20,190
și, sincer, este un pic
greu să memoreze acest lucru la început.

127
00:06:20,190 --> 00:06:21,481
Pur si simplu un fel de copy-paste-l.

128
00:06:21,481 --> 00:06:23,760
Aceasta este calea formală
de a spune, hei, browser-ul,

129
00:06:23,760 --> 00:06:28,030
Sunt folosind HTML versiunea 5, care
a ieșit oarecum recent.

130
00:06:28,030 --> 00:06:31,380
Este o incantație magică pe care unii
oamenii cu un sentiment de proiectare slaba

131
00:06:31,380 --> 00:06:33,640
a decis să pună la
foarte de sus a fișierului.

132
00:06:33,640 --> 00:06:35,473
Chiar daca este o
putin arcane, asta e tot

133
00:06:35,473 --> 00:06:38,250
ea hei înseamnă:, browser-ul, aici
vine cu versiunea 5 a HTML.

134
00:06:38,250 --> 00:06:41,741
>> Restul a fost cu noi
de ceva timp, punct de vedere istoric,

135
00:06:41,741 --> 00:06:44,740
dar a evoluat, și este
probabil a fost obtinerea un pic mai simplu.

136
00:06:44,740 --> 00:06:47,320
Observă câteva caracteristici
din ceea ce am evidențiat.

137
00:06:47,320 --> 00:06:49,890
Există aceste lucruri cu unghi
brackets-- consola stângă

138
00:06:49,890 --> 00:06:51,040
și suportul de dreapta.

139
00:06:51,040 --> 00:06:52,490
Și observați simetrie aici.

140
00:06:52,490 --> 00:06:57,340
Și prin simetrie, vreau să spun, la fel cum am
au această etichetă de început aici sau o etichetă deschisă

141
00:06:57,340 --> 00:07:01,560
dacă vrei, aici am o
tag închidere sau un tag final care este

142
00:07:01,560 --> 00:07:06,460
diferită numai în măsura în care acest lucru are
slash la începutul cuvântului

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

144
00:07:07,360 --> 00:07:09,360
Și vă puteți gândi
acest lucru ca am fost la întâmplare

145
00:07:09,360 --> 00:07:12,280
înainte de a propune, hei,
browser-ul, aici vine unele HTML.

146
00:07:12,280 --> 00:07:16,060
Și, în schimb, hei, browser-ul, asta
ea pentru începutul și sfârșitul anului HTML--.

147
00:07:16,060 --> 00:07:18,440
>> Între timp, hei, browser-ul, aici
vine capul paginii mele.

148
00:07:18,440 --> 00:07:20,140
Hei, browser-ul, asta-i pentru cap.

149
00:07:20,140 --> 00:07:22,240
Hei, browser-ul, aici este
corpul paginii mele.

150
00:07:22,240 --> 00:07:24,020
Hei, browser-ul, asta este pentru corp.

151
00:07:24,020 --> 00:07:26,940
Și în interiorul, care este o parte
text arbitrar pentru acum.

152
00:07:26,940 --> 00:07:30,520
Și în interiorul capului, între timp,
este o parte arbitrară, dar etichetată,

153
00:07:30,520 --> 00:07:34,410
ca să spunem așa, textul care spune, titlul
pagina mea va fi "Bună ziua, lume."

154
00:07:34,410 --> 00:07:37,470
Acum, pentru acum, poți
presupunem că browsere

155
00:07:37,470 --> 00:07:41,762
au only-- sau, mai degrabă, pagini web au
doar două parts-- capul și corpul.

156
00:07:41,762 --> 00:07:44,220
Și capul este, în general, doar
cum ar fi bara de meniu, chestii

157
00:07:44,220 --> 00:07:45,510
într-adevăr doar la foarte sus.

158
00:07:45,510 --> 00:07:48,910
Iar corpul este intestinele paginii,
tot în acel dreptunghi mare

159
00:07:48,910 --> 00:07:50,239
care umple ecranul.

160
00:07:50,239 --> 00:07:51,780
Așa că am de gând să merg mai departe și de a face acest lucru.

161
00:07:51,780 --> 00:07:54,400
Am de gând să merg mai departe și
faceți clic pe Salvare, Salvare fișier.

162
00:07:54,400 --> 00:07:58,580
Si voi salva
acest lucru ca hello.html,

163
00:07:58,580 --> 00:08:00,870
și eu sunt doar de gând să
pune-l pe desktop-ul meu.

164
00:08:00,870 --> 00:08:03,520
Iar eu mă duc
înainte și faceți clic pe Salvare.

165
00:08:03,520 --> 00:08:05,806
Si notice-- Mac-ul meu la
cel țipă la mine.

166
00:08:05,806 --> 00:08:07,180
Sunteți sigur că vrei să faci asta?

167
00:08:07,180 --> 00:08:08,710
Si eu voi spune, da, utilizați HTML.

168
00:08:08,710 --> 00:08:10,400
Știu mai bine în acest caz.

169
00:08:10,400 --> 00:08:14,686
Și acum am de gând să merg la desktop-ul meu
în cazul în care am acest fișier dintr-o dată.

170
00:08:14,686 --> 00:08:16,060
Și am de gând să faceți dublu-clic.

171
00:08:16,060 --> 00:08:18,268
Și veți observa că, prin
implicit, Chrome deschis.

172
00:08:18,268 --> 00:08:19,996
Asta pentru asta
browser-ul prestabilit.

173
00:08:19,996 --> 00:08:21,370
Și se spune: "Bună ziua, lume."

174
00:08:21,370 --> 00:08:23,078
Dar se spune "Bună ziua,
Lumea "în două locuri.

175
00:08:23,078 --> 00:08:23,979
Observă partea din stânga sus.

176
00:08:23,979 --> 00:08:25,020
Destul de greu să ratezi asta.

177
00:08:25,020 --> 00:08:26,180
Este mare și îndrăzneț.

178
00:08:26,180 --> 00:08:30,690
Si unde altundeva nu pare
să spună: "Bună ziua, lume"?

179
00:08:30,690 --> 00:08:31,470
>> AUDIENTA: fila.

180
00:08:31,470 --> 00:08:33,100
>> David J. MALAN: Da, tab-ul în sine.

181
00:08:33,100 --> 00:08:35,159
Așa că, atunci când am spus șeful de
Pagina este totul top--

182
00:08:35,159 --> 00:08:36,367
și într-adevăr, acest lucru este titlul.

183
00:08:36,367 --> 00:08:37,710
Doar în tab-ul aici.

184
00:08:37,710 --> 00:08:40,320
Și eu pot trage această filă
astfel încât să nu se confunde.

185
00:08:40,320 --> 00:08:43,360
Aceasta este doar o singură filă acum,
și într-adevăr, vom vedea "Bună ziua, lume"

186
00:08:43,360 --> 00:08:45,970
aici și "Bună ziua, lume" aici jos.

187
00:08:45,970 --> 00:08:47,160
Așa că destul de simplă.

188
00:08:47,160 --> 00:08:49,050
Dar este, de asemenea, destul de simplu.

189
00:08:49,050 --> 00:08:50,440
Si, de fapt, am mărită.

190
00:08:50,440 --> 00:08:53,272
Pot schimba dimensiunea fontului doar
pentru a mări pentru accesibilitate.

191
00:08:53,272 --> 00:08:56,830
Dar hai să facem acum ceva
un pic mai interesant.

192
00:08:56,830 --> 00:08:59,760
>> Mă duc la go-- hopa, să
mă întorc la fișierul meu text.

193
00:08:59,760 --> 00:09:02,400
Mă duc înapoi pentru a-mi
fișier text, și voi

194
00:09:02,400 --> 00:09:06,320
pentru a schimba acest lucru și spune
"Bună ziua, Disney World."

195
00:09:06,320 --> 00:09:07,970
Salvați.

196
00:09:07,970 --> 00:09:10,919
Și du-te înapoi pentru a-mi
browser-ul și faceți clic pe Reîncărcare.

197
00:09:10,919 --> 00:09:12,710
Și acum, desigur,
spune ca "Disney World."

198
00:09:12,710 --> 00:09:15,500
Și voi mări în mod artificial
în doar așa că este mai ușor de văzut.

199
00:09:15,500 --> 00:09:19,012
Așa că acum, din păcate, am cam vreau
sa-- de fapt, este o caracteristică pentru Mac.

200
00:09:19,012 --> 00:09:21,720
Vreau să faceți clic pe Disney World
și du-te undeva ca disney.com,

201
00:09:21,720 --> 00:09:23,290
dar care nu funcționează.

202
00:09:23,290 --> 00:09:26,850
Deci, un principiu de bază al web este
hyperlink-uri, link-uri care merg în altă parte.

203
00:09:26,850 --> 00:09:28,390
Deci, cum fac asta?

204
00:09:28,390 --> 00:09:34,690
Ei bine, aș putea spune,
"Bună ziua, http://www.disney.com."

205
00:09:34,690 --> 00:09:36,110
Salvați această.

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

207
00:09:37,620 --> 00:09:39,400
Dar acest lucru prea, nu se poate face clic.

208
00:09:39,400 --> 00:09:42,930
Și ce e frumos aici, chiar dacă
acest lucru nu este funcțional încă,

209
00:09:42,930 --> 00:09:45,930
este că se pare că
browser-ul nu literalmente numai

210
00:09:45,930 --> 00:09:46,950
ce-am spus să fac.

211
00:09:46,950 --> 00:09:50,110
Așa că, dacă am introduce o adresă URL de genul asta,
este doar o să-mi arate adresa URL.

212
00:09:50,110 --> 00:09:54,270
Am nevoie pentru a utiliza tag-uri sau de marcare
limba pentru a spune de fapt

213
00:09:54,270 --> 00:09:55,621
browser-ul pentru a face chiar mai mult.

214
00:09:55,621 --> 00:09:57,870
Așa că am de gând să merg mai departe și
șterge acest lucru pentru un moment.

215
00:09:57,870 --> 00:10:00,980
Si eu voi spune, hei,
browser-ul, începe o ancora aici,

216
00:10:00,980 --> 00:10:02,650
un link ca să spunem așa.

217
00:10:02,650 --> 00:10:07,500
Iar hiper-referință, destinația
din această ancoră, ar trebui să fie această adresă URL.

218
00:10:07,500 --> 00:10:08,750
Și observați citatele mele.

219
00:10:08,750 --> 00:10:11,590
Aș putea folosi ghilimele simple, de asemenea,
dar trebuie să fie coerente,

220
00:10:11,590 --> 00:10:14,270
și, în general, aș folosi doar
ghilimele duble să-l păstrați simplu.

221
00:10:14,270 --> 00:10:16,820
Observă am de gând să închidă tag-ul.

222
00:10:16,820 --> 00:10:21,160
Și apoi aici voi
să spunem, "Disney World."

223
00:10:21,160 --> 00:10:26,890
Și acum am nevoie de niște symmetry--
Suport deschis, / o, închis paranteză.

224
00:10:26,890 --> 00:10:28,090
>> Deci, ce am introdus?

225
00:10:28,090 --> 00:10:30,100
Am avut deja câteva tag-uri.

226
00:10:30,100 --> 00:10:32,410
HTML, Head, titlu, Trup,
sunt toate etichetele, ca să spunem așa,

227
00:10:32,410 --> 00:10:34,280
cu omologii deschise și închise.

228
00:10:34,280 --> 00:10:36,530
Dar observați, acest lucru este un fel
de fundamental diferite.

229
00:10:36,530 --> 00:10:39,140
Aceasta este ceea ce vom numi
în HTML un atribut.

230
00:10:39,140 --> 00:10:41,451
Și un atribut este
doar o pereche de chei-valoare.

231
00:10:41,451 --> 00:10:43,950
Acesta este un lucru obișnuit în
calculator science-- pereche cheie-valoare.

232
00:10:43,950 --> 00:10:45,770
Este un fel de instrument al comerțului.

233
00:10:45,770 --> 00:10:47,040
O cheie și o valoare.

234
00:10:47,040 --> 00:10:49,390
Un cuvânt și apoi unele
alt cuvânt sau cuvinte.

235
00:10:49,390 --> 00:10:53,790
Și, în acest caz, cheia este href,
iar valoarea este acea adresă URL completă.

236
00:10:53,790 --> 00:10:57,890
Și ce un atribut nu este
influențează comportamentul unei etichete.

237
00:10:57,890 --> 00:11:01,010
Și, în acest caz, avem nevoie de a influența
comportamentul etichetei ancoră,

238
00:11:01,010 --> 00:11:04,140
pentru că avem nevoie pentru a ancora
această legătură undeva.

239
00:11:04,140 --> 00:11:06,960
Si cum faci asta este
prin intermediul atributului.

240
00:11:06,960 --> 00:11:08,970
>> Așa că am de gând să merg mai departe
și salvați fișierul acum.

241
00:11:08,970 --> 00:11:11,300
Du-te înapoi la browser-ul si reincarca.

242
00:11:11,300 --> 00:11:14,580
Și voila, avem acum
începutul unei pagini web legitime.

243
00:11:14,580 --> 00:11:18,420
Super-simplu, dar dacă eu plutesc peste
Notă astea-- în colțul din stânga jos,

244
00:11:18,420 --> 00:11:19,830
E super-mici.

245
00:11:19,830 --> 00:11:21,730
Dar, vezi tu faci www.disney.com.

246
00:11:21,730 --> 00:11:27,076
Și, dacă faceți clic pe el, într-adevăr, acest lucru
mă whisks departe de disney.com.

247
00:11:27,076 --> 00:11:29,380
Acum, lucru curios
aici este că nu este

248
00:11:29,380 --> 00:11:33,940
URL-ul best-- cea mai vandabilă, dar
asta e bine, deoarece acest fișier nu

249
00:11:33,940 --> 00:11:35,360
exista pe World Wide Web.

250
00:11:35,360 --> 00:11:39,740
Ea există ca un fișier local în aparență
Utilizatorii mei directory-- / jharvard--

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

252
00:11:41,890 --> 00:11:42,634
Dar ea are o adresă URL.

253
00:11:42,634 --> 00:11:43,800
Se întâmplă să fie locale.

254
00:11:43,800 --> 00:11:47,050
Din păcate, nici unul dintre voi nu poate vizita
acest lucru, pentru că dacă tastați această adresă URL,

255
00:11:47,050 --> 00:11:49,980
v-ar fi spune browser-ul dvs.,
căutați un fișier numit hello.html

256
00:11:49,980 --> 00:11:50,772
pe hard disk-ul.

257
00:11:50,772 --> 00:11:53,271
Și, desigur, cu excepția cazului în care ați
urmat de-a lungul manual,

258
00:11:53,271 --> 00:11:54,530
nu va exista acolo.

259
00:11:54,530 --> 00:11:55,190
>> Deci asta e bine.

260
00:11:55,190 --> 00:11:57,815
Avem încă nevoie de un mod, în cele din urmă,
pentru a obține acest fișier în web,

261
00:11:57,815 --> 00:12:01,180
dar hai sa tachineze in afara de un cuplu
implicațiile de securitate a ceea ce tocmai am

262
00:12:01,180 --> 00:12:04,850
a văzut și cravată-l înapoi la mai devreme
discuția din această dimineață.

263
00:12:04,850 --> 00:12:08,200
Se dovedește că, în cazul în care un
browser-ul literalmente face

264
00:12:08,200 --> 00:12:12,560
ce-am spus să fac, și se pare că
pentru a fi cazul în care o etichetă ancoră este

265
00:12:12,560 --> 00:12:17,380
influențat de valoarea
acest atribut numit href

266
00:12:17,380 --> 00:12:20,810
dar afișează acest lucru
text, acest lucru s-ar părea

267
00:12:20,810 --> 00:12:26,520
pentru a sugera că aș putea pune URL
în ambele locuri și apoi reîncărcați

268
00:12:26,520 --> 00:12:29,100
și vedeți acum URL-ul și du-te la URL-ul.

269
00:12:29,100 --> 00:12:32,680
Observați, dacă treceți cursorul peste partea de jos-stânga,
Mă duc într-adevăr, încă disney.com.

270
00:12:32,680 --> 00:12:38,340
>> Așa că, dacă ai fost vreodată
phished-- P-H-I-S-H-E-D--

271
00:12:38,340 --> 00:12:42,820
cu unul dintre aceste e-mailuri false
de la PayPal cum ar fi banca ta,

272
00:12:42,820 --> 00:12:46,470
ați ajuns, probabil, link-uri în interiorul
din e-mail pe care le citești asta

273
00:12:46,470 --> 00:12:49,970
vă spune să faceți clic aici pentru a merge de confirmare
parola sau confirmați data de naștere

274
00:12:49,970 --> 00:12:53,840
sau socială sau ceva de vedere social
inginerie să dezvăluie

275
00:12:53,840 --> 00:12:54,920
informație.

276
00:12:54,920 --> 00:12:57,625
Aș putea lua un fel de
Avantajul acestui fapt, nu aș putea?

277
00:12:57,625 --> 00:13:01,240
Aș putea spune ceva
cum ar fi, www.paypal.com.

278
00:13:01,240 --> 00:13:11,340
Și în loc de disney.com, eu
ar putea merge la, cum ar fi, badguy.com.

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

280
00:13:12,850 --> 00:13:16,620
Și, cât de ușor este să păcălească,
în special un cititor de non-tehnic

281
00:13:16,620 --> 00:13:20,649
sau o citire cu curiozitate
cititor decât să faceți clic

282
00:13:20,649 --> 00:13:23,940
un link ca aceasta, care, dacă am it-- clic pe
Eu de fapt, nu vreau să merg badguy.com.

283
00:13:23,940 --> 00:13:25,398
Nu știu ce e de fapt acolo.

284
00:13:25,398 --> 00:13:30,080
Așa că paypal.com, anunț, este
ceea ce spune că va,

285
00:13:30,080 --> 00:13:33,210
dar, desigur, dacă mă uit în jos
super-redus, este un pic neclare,

286
00:13:33,210 --> 00:13:34,230
dar spune badguy.com.

287
00:13:34,230 --> 00:13:38,644
Asta e chiar acum spune doar
că mă duc la locul nepotrivit.

288
00:13:38,644 --> 00:13:41,560
Iar când am spus mai devreme că băncile
într-adevăr, nu ar trebui să încurajeze sau să tren

289
00:13:41,560 --> 00:13:44,510
utilizatorii în linkuri clic, acest lucru
este doar o manifestare a acesteia.

290
00:13:44,510 --> 00:13:45,430
Și este atât de simplu.

291
00:13:45,430 --> 00:13:48,120
Acum ești un adversar dacă
ai face ceva de genul asta

292
00:13:48,120 --> 00:13:51,000
și să încerce să păcălească un utilizator
să viziteze site-ul tau.

293
00:13:51,000 --> 00:13:53,320
Dar, pentru moment, vom păstra
lucruri frumoase și curate.

294
00:13:53,320 --> 00:13:55,640
Vom merge mai departe
și înapoi aceste modificări.

295
00:13:55,640 --> 00:13:56,530
Reîncarcă pagina.

296
00:13:56,530 --> 00:13:57,740
Și mă duc înapoi la disney.com.

297
00:13:57,740 --> 00:14:00,660
>> Să vedem dacă nu putem șicana
acest lucru în afară un pic mai mult.

298
00:14:00,660 --> 00:14:04,160
Deci, "Bună ziua, Disney World."

299
00:14:04,160 --> 00:14:05,950
Mă duc să spun aici jos.

300
00:14:05,950 --> 00:14:08,220
Poate că voi face loc.

301
00:14:08,220 --> 00:14:12,730
"Sperăm să vă bucurați-vă șederea!"

302
00:14:12,730 --> 00:14:13,830
Salvați.

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

304
00:14:15,850 --> 00:14:19,010
Nu e rea-- asta nu e
ceea ce am intenționat, nu?

305
00:14:19,010 --> 00:14:21,870
Vreau să spun, dacă îmi tratez textul meu
fișier ca un procesor de text,

306
00:14:21,870 --> 00:14:24,894
Ce ai spera s-ar întâmpla aici?

307
00:14:24,894 --> 00:14:27,060
Da, mă simt ca acolo
ar trebui să fie o pauză de linie aici,

308
00:14:27,060 --> 00:14:28,799
asa ca se simte buggy într-un fel.

309
00:14:28,799 --> 00:14:31,090
Dar asta e de fapt în mod deliberat,
pentru că la fel ca înainte,

310
00:14:31,090 --> 00:14:33,381
browser-ul merge doar
faci ce spune sa faci.

311
00:14:33,381 --> 00:14:34,806
Nu l-am spus să se rupă de linii.

312
00:14:34,806 --> 00:14:37,930
Nu am spus să se mute în jos, chiar
deși, în mod intuitiv, mă simt ca și cum am făcut-o.

313
00:14:37,930 --> 00:14:39,805
Deci, se pare că avem nevoie
un mai mic marcaj,

314
00:14:39,805 --> 00:14:41,390
și voi rezolva această problemă, după cum urmează.

315
00:14:41,390 --> 00:14:46,160
Voi prefața la această primă salut
cu ceea ce se numește un paragraf etichetă.

316
00:14:46,160 --> 00:14:48,920
Și apoi am de gând să merg mai departe
și încheiem altă teză

317
00:14:48,920 --> 00:14:54,370
într-un alt paragraf tag-ul, chiar dacă
acestea sunt punctele de super-scurt.

318
00:14:54,370 --> 00:14:55,930
Acum am de gând să salveze.

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

320
00:14:57,160 --> 00:14:59,070
Și acum avem asta
spațiu, și am un fel de

321
00:14:59,070 --> 00:15:01,680
au semantica
două paragrafe separate.

322
00:15:01,680 --> 00:15:05,290
>> Asta e tot fin și bun, dar ar
fi frumos pentru a adăuga o imagine la această pagină,

323
00:15:05,290 --> 00:15:08,710
așa că am de gând să merg caut
Mickey Mouse-ul pe Google Images.

324
00:15:08,710 --> 00:15:12,830
Și doar pentru distracție, sunt
va apuca această imagine.

325
00:15:12,830 --> 00:15:15,350
Mă duc să merg mai departe acum și
apuca URL-ul acestei imagini,

326
00:15:15,350 --> 00:15:16,510
deși există diferite
moduri de a face acest lucru.

327
00:15:16,510 --> 00:15:18,520
Deocamdată, eu sunt doar de gând să copiați URL-ul.

328
00:15:18,520 --> 00:15:24,770
Mă duc să mă întorc în textul meu
fișier, și voi spune aici,

329
00:15:24,770 --> 00:15:31,160
img src = citat unquote
că URL-ul, super-lung.

330
00:15:31,160 --> 00:15:34,580
Și apoi noțiunea de
imagine este un pic diferit.

331
00:15:34,580 --> 00:15:38,640
Nu există într-adevăr nici o noțiune de pornire
o imagine și se încheie o imagine,

332
00:15:38,640 --> 00:15:40,630
cum ar fi un start tag-ul o eticheta de final.

333
00:15:40,630 --> 00:15:43,840
Deci, se simte un pic ciudat la
mă să fac acest lucru semantically,

334
00:15:43,840 --> 00:15:45,390
să aibă o etichetă close-imagine.

335
00:15:45,390 --> 00:15:46,780
Nu e incorect.

336
00:15:46,780 --> 00:15:48,840
Este perfect corect,
și este încurajată,

337
00:15:48,840 --> 00:15:50,870
dar există notație prescurtare.

338
00:15:50,870 --> 00:15:53,780
Pot cam simultan
deschide și închide aceeași etichetă,

339
00:15:53,780 --> 00:15:55,510
și care va face browser-ul fericit.

340
00:15:55,510 --> 00:15:56,950
Deci, e doar un pic
mai succinte pentru lucruri

341
00:15:56,950 --> 00:15:59,408
că într-adevăr nu conceptual
sens pentru a începe și se termină.

342
00:15:59,408 --> 00:16:01,190
Ei pur și simplu sunt acolo, sau nu sunt.

343
00:16:01,190 --> 00:16:06,020
>> Așa că am de gând să salveze și du-te înapoi
pentru a-mi "Bună ziua, lume", pagina de reîncărcare.

344
00:16:06,020 --> 00:16:09,880
Și este un pic de sub control,
pentru că această imagine este de fapt

345
00:16:09,880 --> 00:16:12,210
un pic mai mare, dar asta e în regulă.

346
00:16:12,210 --> 00:16:13,710
Am putea redimensiona într-un program.

347
00:16:13,710 --> 00:16:14,900
Sau știi ce.

348
00:16:14,900 --> 00:16:17,350
Doar pentru a demonstra, sunt
va spune de fapt

349
00:16:17,350 --> 00:16:21,760
că lățimea acestui lucru ar trebui
fie doar 200 de pixeli, 200 puncte.

350
00:16:21,760 --> 00:16:24,360
Lasă-mă să merg mai departe și de a salva
și reîncărcați, iar acum pagina

351
00:16:24,360 --> 00:16:25,690
arată un pic mai rezonabil.

352
00:16:25,690 --> 00:16:27,260
Dar observați modelul.

353
00:16:27,260 --> 00:16:30,030
Ei bine, m-am cam învățat voi toți
de HTML într-un anumit sens, cel puțin

354
00:16:30,030 --> 00:16:33,531
conceptual, deoarece toate HTML este este
aceste tags-- tag-uri deschise, tag-uri închise,

355
00:16:33,531 --> 00:16:35,280
și atribute care
modifice comportamentul lor.

356
00:16:35,280 --> 00:16:38,380
Si, se pare că, în fiecare
tag-ul poate avea zero sau unu

357
00:16:38,380 --> 00:16:43,005
sau două sau mai multe atribute, fiecare dintre
care face ceva un pic diferit.

358
00:16:43,005 --> 00:16:44,380
Acum, de unde știi ce există?

359
00:16:44,380 --> 00:16:46,800
Trebuie doar sa asculti pe cineva
ca mine să-ți spun ce există,

360
00:16:46,800 --> 00:16:50,860
sau pur și simplu ai Google în jurul pentru un tutorial
pe HTML, și într-adevăr este atât de simplu.

361
00:16:50,860 --> 00:16:54,030
>> Într-adevăr, când am fost un student
de ani în urmă și am învățat HTML,

362
00:16:54,030 --> 00:16:56,530
unul dintre învățătura mea matematică
asistenți tocmai a cheltuit

363
00:16:56,530 --> 00:16:59,600
un pic de timp mă tutoring
pentru ca și o jumătate de oră, o oră,

364
00:16:59,600 --> 00:17:00,660
și apoi am fost pe drum.

365
00:17:00,660 --> 00:17:03,300
Eram pe drum spre a face
site-urile cele mai hidoase vreodată,

366
00:17:03,300 --> 00:17:05,549
care, aparent, nu am
într-adevăr a progresat dincolo.

367
00:17:05,549 --> 00:17:09,849
Dar ideea este că, odată ce
să înțeleagă aceste ideas-- simplu

368
00:17:09,849 --> 00:17:13,450
dacă text-- Arcane, dar acestea simplu
idei de a începe un gând

369
00:17:13,450 --> 00:17:15,960
și închiderea unui gând, păstrarea
totul frumos echilibrat,

370
00:17:15,960 --> 00:17:19,150
cauta ceva, care modifică
Comportamentul acestei tag-ul, asta e tot

371
00:17:19,150 --> 00:17:20,079
există la acesta.

372
00:17:20,079 --> 00:17:28,140
Și, de fapt, dacă am du-te acum la
ceva de genul google.com-- de fapt,

373
00:17:28,140 --> 00:17:31,920
Să mergem un loc un pic mai mult
reasonable-- stanford.edu.

374
00:17:31,920 --> 00:17:37,800
Și am de gând să merg la View,
Dezvoltator, View Source.

375
00:17:37,800 --> 00:17:41,400
Este urât, dar notice--
și voi mări Notă

376
00:17:41,400 --> 00:17:43,432
unele lucruri pe care e familiarizat deja.

377
00:17:43,432 --> 00:17:45,140
Nu e asta de aici,
care este un browser.

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

379
00:17:46,800 --> 00:17:47,634
Nu există HTML.

380
00:17:47,634 --> 00:17:49,550
Se pare că există o
atribut pe care nu am făcut-o

381
00:17:49,550 --> 00:17:51,540
utilizați care specifică
limba paginii,

382
00:17:51,540 --> 00:17:54,380
iar acest lucru poate ajuta cu automată
Traducere și chestii de genul asta.

383
00:17:54,380 --> 00:17:55,546
Iată capul paginii.

384
00:17:55,546 --> 00:17:57,790
Iată titlul paginii Stanford.

385
00:17:57,790 --> 00:17:59,832
E o etichetă nu am
vorbesc despre tag-ul yet-- Meta.

386
00:17:59,832 --> 00:18:01,540
E doar un fel de
informații generale.

387
00:18:01,540 --> 00:18:04,210
El ajută cu SEO, sau
Optimizare motor de căutare,

388
00:18:04,210 --> 00:18:06,320
sau rezultate Google de căutare sau altele asemenea.

389
00:18:06,320 --> 00:18:09,029
Dar, dacă vom căuta în continuare, să păstreze
în căutarea, aici e tot corpul tag-ul.

390
00:18:09,029 --> 00:18:11,570
Și nu există buchete de altele
tag-uri noi nu am vorbit încă.

391
00:18:11,570 --> 00:18:13,750
Dar Div este una pentru o
diviziune a paginii.

392
00:18:13,750 --> 00:18:16,680
E ca un dreptunghi invizibil
în cazul în care un fel de care doriți să mental

393
00:18:16,680 --> 00:18:20,160
împărțiți pagina în
diferite unități on-line.

394
00:18:20,160 --> 00:18:22,650
Și apoi o mulțime de divuri I
a se vedea, ceva numit clasa,

395
00:18:22,650 --> 00:18:24,440
dar vom reveni la asta.

396
00:18:24,440 --> 00:18:26,200
>> Acest lucru este Formulare interesting--.

397
00:18:26,200 --> 00:18:27,730
Formele sunt peste tot pe web.

398
00:18:27,730 --> 00:18:30,310
Orice casetă de căutare pe
folosit vreodată este o formă.

399
00:18:30,310 --> 00:18:31,490
Si, deci, să vedem de fapt.

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

401
00:18:32,790 --> 00:18:33,910
Acțiune.

402
00:18:33,910 --> 00:18:37,660
Acțiunea acestei forme, oricare ar fi
din motive istorice, este acea adresă URL.

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

404
00:18:38,840 --> 00:18:44,060
Se pare că cererile HTTP pot utiliza
verbul "a lua", așa cum am văzut mai înainte,

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

406
00:18:45,070 --> 00:18:47,030
Și se va vedea o diferență
din acest lucru într-un moment.

407
00:18:47,030 --> 00:18:48,363
Hai să vedem de fapt ce este asta.

408
00:18:48,363 --> 00:18:49,830
Lasă-mă să mă întorc la pagina Stanford.

409
00:18:49,830 --> 00:18:53,330
Ce formă sunt ele vorbesc
despre, crezi?

410
00:18:53,330 --> 00:18:54,485
Ce sare la tine?

411
00:18:54,485 --> 00:18:54,970
>> AUDIENTA: caseta de căutare.

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

413
00:18:55,845 --> 00:18:58,410
Așa că până la partea din dreapta sus
aici este această casetă de căutare.

414
00:18:58,410 --> 00:19:02,441
Și asta e modul în care au pus în aplicare un it--
tag-ul, care este literalmente formă agatate deschisă.

415
00:19:02,441 --> 00:19:03,940
Și apoi să caute ceva.

416
00:19:03,940 --> 00:19:09,220
Să căutăm un amic
din mine-- "Nick Parlante."

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

418
00:19:11,380 --> 00:19:13,750
Și, desigur, a mers la
un ușor URL-uri diferite.

419
00:19:13,750 --> 00:19:15,140
Lasă-mă să mă întorc aici.

420
00:19:15,140 --> 00:19:18,960
Să căutăm pentru "cursuri".

421
00:19:18,960 --> 00:19:19,460
La naiba.

422
00:19:19,460 --> 00:19:20,484
Am fost la o altă adresă URL.

423
00:19:20,484 --> 00:19:23,400
Așa că, Stanford adăugând ceva magie
că nu mă duci la adresa URL

424
00:19:23,400 --> 00:19:25,820
că am văzut în
acțiune atribut acolo.

425
00:19:25,820 --> 00:19:32,480
Dar, acest formular aici este pus în aplicare pur
prin intermediul acestui marcaj aici, aceste tag-uri.

426
00:19:32,480 --> 00:19:35,710
De fapt, aici e intrarea pentru
tipul de căutare pe care doriți.

427
00:19:35,710 --> 00:19:38,940
Aici este de intrare pentru
un alt tip de căutare.

428
00:19:38,940 --> 00:19:41,960
Aici este de intrare pentru șirul în sine.

429
00:19:41,960 --> 00:19:45,394
Și astfel, scopul nu este să-și încheie
mintea noastră în jurul valorii de toate aceste tag-uri

430
00:19:45,394 --> 00:19:46,060
ci doar pentru a vedea.

431
00:19:46,060 --> 00:19:48,300
Doar că deschiderea și închiderea
tag-uri și lucruri uita în sus.

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

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

434
00:19:48,920 --> 00:19:49,795
>> AUDIENTA: [inaudibil]

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

436
00:19:51,925 --> 00:19:53,550
David J. MALAN: E o întrebare bună.

437
00:19:53,550 --> 00:19:54,660
Asta e un pic mai complicat pentru a vedea.

438
00:19:54,660 --> 00:19:56,300
Lasă-mă să vin înapoi la asta
întrebare în doar câteva minute

439
00:19:56,300 --> 00:19:59,000
atunci când ne uităm la ceva numit
foi CSS, sau de stil în cascadă,

440
00:19:59,000 --> 00:20:02,500
și putem încerca să deducem
la fel de mult din pagina.

441
00:20:02,500 --> 00:20:08,090
Așa că, dacă luăm acum o privire la google.com,
să vedem ce pagina lor arată.

442
00:20:08,090 --> 00:20:09,840
Te-ar Sunt-- că e drăguț azi.

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

444
00:20:12,490 --> 00:20:12,990
O.K.

445
00:20:12,990 --> 00:20:13,690
Totul este gata.

446
00:20:13,690 --> 00:20:15,260
Bine, deci View Source.

447
00:20:15,260 --> 00:20:19,590
Ați crede că Google are
într-adevăr frumos codul sursă.

448
00:20:19,590 --> 00:20:24,970
Așa că, se pare, ce se întâmplă aici?

449
00:20:24,970 --> 00:20:27,880
Și, de fapt, acest lucru nu este chiar HTML.

450
00:20:27,880 --> 00:20:30,930
Acest lucru este ceva numit JavaScript.

451
00:20:30,930 --> 00:20:32,344
Și să păstreze merge și merge.

452
00:20:32,344 --> 00:20:34,010
Nici nu știu de unde începe pagina.

453
00:20:34,010 --> 00:20:37,240
Am de gând să folosiți comanda
F, HTML placuta deschis.

454
00:20:37,240 --> 00:20:38,200
Bine, acolo este.

455
00:20:38,200 --> 00:20:44,150
Am găsit începutul paginii, și
există atât de multe lucruri aici.

456
00:20:44,150 --> 00:20:45,310
>> Ce este, de fapt se întâmplă?

457
00:20:45,310 --> 00:20:47,460
Ei bine, știi ce,
putem curăța asta.

458
00:20:47,460 --> 00:20:52,109
Dacă, în schimb mă duc la această Inspect
Bara de instrumente, acest instrument special de diagnosticare,

459
00:20:52,109 --> 00:20:54,150
și du-te să nu de rețea,
unde ne continuăm astăzi,

460
00:20:54,150 --> 00:20:56,420
dar dacă mă duc la elemente,
ceea ce este într-adevăr frumos

461
00:20:56,420 --> 00:20:59,990
este că un browser are o mulțime
ochi mult mai bine decât mine.

462
00:20:59,990 --> 00:21:02,670
Iar browser-ul poate citi
mizeria unei pagini web,

463
00:21:02,670 --> 00:21:04,700
că HTML e-mail noi doar
sa uitat la, și poate

464
00:21:04,700 --> 00:21:08,340
analiza sau citit și
analizati si reformata-l

465
00:21:08,340 --> 00:21:09,910
într-un mod uman prietenos frumos.

466
00:21:09,910 --> 00:21:11,740
Deci, ce mă văd acum
în acest ecran aici

467
00:21:11,740 --> 00:21:15,470
sub elemente, același conținut exact,
dar au crestate totul,

468
00:21:15,470 --> 00:21:18,140
le-l colorized, dar
este exact același text,

469
00:21:18,140 --> 00:21:19,620
pe care am descarcat de pe server.

470
00:21:19,620 --> 00:21:23,630
>> Și ce e frumos este acum eu pot vedea
în organism, pentru o notificare instance--,

471
00:21:23,630 --> 00:21:26,480
pagina este încă compusă
de doar un cap și un corp,

472
00:21:26,480 --> 00:21:28,660
și mă pot arunca cu capul ierarhic aici.

473
00:21:28,660 --> 00:21:32,420
Observați că Google pare să aibă
la divs-- acesta și acesta.

474
00:21:32,420 --> 00:21:33,310
Pot extinde asta.

475
00:21:33,310 --> 00:21:35,370
Există o întreagă grămadă de alte divuri.

476
00:21:35,370 --> 00:21:36,900
Deci, e un pic mai complexă.

477
00:21:36,900 --> 00:21:37,400
Dar asteapta.

478
00:21:37,400 --> 00:21:40,970
Acest lucru pare atât de mult mai mult
care poate fi citit, relativ, decât aceasta.

479
00:21:40,970 --> 00:21:43,840
De ce este Google jenant
în sine doar prin trimiterea

480
00:21:43,840 --> 00:21:50,400
această mare mizerie de cod unora
sortare doar pentru a pune în aplicare ceva

481
00:21:50,400 --> 00:21:53,640
care arată atât de simplu la prima vedere?

482
00:21:53,640 --> 00:21:55,270
Cum ar fi, de ce nu adăuga mai multe spații?

483
00:21:55,270 --> 00:21:56,811
De ce nu l-au lovit Enter așa cum am făcut-o?

484
00:21:56,811 --> 00:21:59,110
Uite ce bine am fost
la scrierea unei pagini web.

485
00:21:59,110 --> 00:22:00,680
Am lovit Enter atât de sârguință.

486
00:22:00,680 --> 00:22:03,760
I indentate astfel încât totul
este atât de frumos și ușor de citit.

487
00:22:03,760 --> 00:22:08,463
De ce Google nu practică același lucru?

488
00:22:08,463 --> 00:22:11,409
>> AUDIENTA: [inaudibil]

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

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

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

492
00:22:14,270 --> 00:22:16,650
Ei nu au unele
persoană la Google manual

493
00:22:16,650 --> 00:22:18,160
actualizarea paginii de start mai.

494
00:22:18,160 --> 00:22:20,010
Nu-i mai 1999.

495
00:22:20,010 --> 00:22:21,140
Deci, ei au software-ul.

496
00:22:21,140 --> 00:22:25,397
Ei au alte instrumente care
genera în mod dinamic sunt HTML.

497
00:22:25,397 --> 00:22:27,480
Desigur, acest cod în sine
a fost scris de oameni,

498
00:22:27,480 --> 00:22:30,220
dar realitatea este,
este destul de corect să spunem,

499
00:22:30,220 --> 00:22:33,340
browser-ul cu siguranță nu
de îngrijire cât de murdar este codul.

500
00:22:33,340 --> 00:22:35,940
Dar, există o chiar mai mult
motiv tehnic convingător

501
00:22:35,940 --> 00:22:42,580
că Google distribuie HTML lor
cod într-un astfel de neglijent, aparent

502
00:22:42,580 --> 00:22:48,350
mod copleșitor toate ambalate împreună
cu foarte puțin way-- foarte puțin

503
00:22:48,350 --> 00:22:51,274
în modul de formatare așa cum am făcut-o.

504
00:22:51,274 --> 00:22:52,570
>> AUDIENTA: [inaudibil]

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

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

507
00:22:54,040 --> 00:22:55,680
Și ce i-ai spus, Lydia?

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

509
00:22:56,240 --> 00:22:57,281
De ce mai repede?

510
00:22:57,281 --> 00:22:58,156
AUDIENTA: [inaudibil]

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

512
00:23:00,522 --> 00:23:02,230
David J. MALAN: E
nici un spațiu pentru a citi.

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

514
00:23:02,730 --> 00:23:04,560
Deci, gândiți ce este un spațiu.

515
00:23:04,560 --> 00:23:08,394
Astfel încât fiecare personaj pe tastatură ia
o anumită cantitate de spațiu pentru a reprezenta,

516
00:23:08,394 --> 00:23:10,560
fie fizic, cum ar fi ea
ocupă mult spațiu că,

517
00:23:10,560 --> 00:23:13,250
sau cumva sub
hota, care are nevoie de memorie.

518
00:23:13,250 --> 00:23:15,740
Și, ca un aside-- și o vom
vorbesc mai multe despre aceasta mâine

519
00:23:15,740 --> 00:23:19,930
fiecare caracter de pe tastatură
necesită în mod obișnuit de 8 biți, sau un octet.

520
00:23:19,930 --> 00:23:23,360
Deci, un model de 8 zerouri sau
cele, sau doar 1 octet, așa cum am

521
00:23:23,360 --> 00:23:24,720
oamenii s-ar spune în mod tipic.

522
00:23:24,720 --> 00:23:27,690
Deci asta e mic, dar
este încă non-zero.

523
00:23:27,690 --> 00:23:29,940
Este încă o anumită cantitate de spațiu.

524
00:23:29,940 --> 00:23:36,082
Prin urmare, dacă un inginer sau Google hit-uri
bara de spațiu doar o dată, și să presupunem

525
00:23:36,082 --> 00:23:38,540
Google-- este super-popular--
să presupunem că un miliard de oameni

526
00:23:38,540 --> 00:23:40,780
vizita pagina lor de origine o zi,
sau un număr de persoane

527
00:23:40,780 --> 00:23:43,290
vizitați pagina de start A
miliarde de ori pe zi,

528
00:23:43,290 --> 00:23:48,890
cati bytes suplimentari are acea
inginer de software pur și simplu costa Google

529
00:23:48,890 --> 00:23:51,310
prin lovirea lui sau ei spațiu bar de o dată?

530
00:23:51,310 --> 00:23:52,692
>> AUDIENTA: [inaudibil]

531
00:23:52,692 --> 00:23:54,150
David J. MALAN: Nu chiar așa de rău.

532
00:23:54,150 --> 00:23:57,070
Doar un singur ori byte un miliard.

533
00:23:57,070 --> 00:23:57,871
Așa că a--

534
00:23:57,871 --> 00:23:59,120
Audiența: 8 miliarde de GB.

535
00:23:59,120 --> 00:24:00,370
David J. MALAN: Nu a fost de 8 miliarde.

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

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

538
00:24:02,410 --> 00:24:04,080
1 gigabyte ar fi unitatea de măsură.

539
00:24:04,080 --> 00:24:08,240
În cazul în care el sau ea are două
spatii, 2 gigaocteți.

540
00:24:08,240 --> 00:24:09,030
Trei gigaocteți.

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

542
00:24:09,530 --> 00:24:11,860
Ea cântare costisitoare.

543
00:24:11,860 --> 00:24:16,150
Și astfel, în cazuri cum ar fi Google,
care, acordat, sunt cazuri extreme,

544
00:24:16,150 --> 00:24:21,450
există și alte probleme care apar doar
prin luarea de decizii foarte rezonabile

545
00:24:21,450 --> 00:24:25,744
sau de a lua măsuri umane foarte simplu,
deoarece are acest efect amplificat.

546
00:24:25,744 --> 00:24:27,660
Unul din motivele
acest lucru pare atât de comprimat

547
00:24:27,660 --> 00:24:30,660
este exact așa cum a fost Victoria said--
doar generate de calculatoare oricum.

548
00:24:30,660 --> 00:24:31,900
Așa că nu e mare.

549
00:24:31,900 --> 00:24:33,309
Lasa browser-l dau seama.

550
00:24:33,309 --> 00:24:35,350
Dar, de asemenea în mod deliberat
nu are prea mult spațiu,

551
00:24:35,350 --> 00:24:36,766
deoarece spațiul nu este necesar.

552
00:24:36,766 --> 00:24:38,250
Iar spațiul de fapt, costurile de bani.

553
00:24:38,250 --> 00:24:40,670
>> Ori costă timp,
pentru că pur și simplu pentru a împinge

554
00:24:40,670 --> 00:24:44,670
că mult mai multe date din
Sediul google.com tocmai

555
00:24:44,670 --> 00:24:47,710
a ajuns să ia o anumită cantitate de
timp, chiar dacă este milisecunde

556
00:24:47,710 --> 00:24:51,190
sau microsecunde, dar care se adaugă până
peste atât de mulți utilizatori, sau mai probabil,

557
00:24:51,190 --> 00:24:52,270
probabil costă bani.

558
00:24:52,270 --> 00:24:54,690
probabil Google se conectează la
altcineva din lume, unul

559
00:24:54,690 --> 00:24:56,398
din cei peering
puncte, iar în cazul în care acestea au

560
00:24:56,398 --> 00:24:59,880
un fel de relație financiară
prin care datele lor costurile de bani,

561
00:24:59,880 --> 00:25:01,730
s-ar putea la fel de bine
a minimiza date cât de mult

562
00:25:01,730 --> 00:25:04,530
acestea sunt scuipand pe
conexiunea lor la internet.

563
00:25:04,530 --> 00:25:07,630
>> Așa că amuzant lucru, cu toate că, în cele din urmă,
sau poate un lucru liniștitor,

564
00:25:07,630 --> 00:25:11,030
este faptul că, chiar dacă acest lucru pare teribil
copleșitoare, la sfârșitul zilei,

565
00:25:11,030 --> 00:25:16,750
este încă exact aceleași principii ca
această pagină foarte simplu aici de HTML

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

567
00:25:17,390 --> 00:25:20,610
Deci, doar pentru a rezuma și astfel încât să
au o versiune canonică, dacă nu au fost

568
00:25:20,610 --> 00:25:25,900
în urma de-a lungul de alegere aici, aici
ar putea fi cel mai simplu de pagini web,

569
00:25:25,900 --> 00:25:28,240
astfel încât ceva să se joace cu, probabil, mai târziu.

570
00:25:28,240 --> 00:25:30,790
>> Ei bine, să introducă un
alte câteva idei acum.

571
00:25:30,790 --> 00:25:33,420
Suntem pe cale să se introducă
ceva numit un tag stil.

572
00:25:33,420 --> 00:25:38,110
Noi putem stiliza această pagină
într-un mod mai interesant.

573
00:25:38,110 --> 00:25:40,860
Așadar, în timp HTML e-mail
este totul despre marcarea

574
00:25:40,860 --> 00:25:44,470
datele, un fel de specificarea unui
browser-ul modul de structurare a datelor,

575
00:25:44,470 --> 00:25:48,110
în cazul în care să-l pună, CSS, sau
foi de stil în cascadă,

576
00:25:48,110 --> 00:25:52,640
este oa doua limbă pe care
în general, devine cu HTML amestecat

577
00:25:52,640 --> 00:25:55,670
așa cum vom see-- dar putem curăța
că într-un moment-- care ia

578
00:25:55,670 --> 00:25:59,850
ea mila finală, și-l stylizes.

579
00:25:59,850 --> 00:26:02,460
Ea devine culorile doar dreapta,
font dimensiuni doar dreptul,

580
00:26:02,460 --> 00:26:03,860
pozitionarea doar dreapta.

581
00:26:03,860 --> 00:26:06,510
Este vorba de estetica
sau formatare, nu despre

582
00:26:06,510 --> 00:26:08,330
datele fundamentale în sine.

583
00:26:08,330 --> 00:26:11,390
Si cel mai simplu mod de a arăta
acest lucru este, probabil, de exemplu.

584
00:26:11,390 --> 00:26:15,320
Așa că am de gând să merg peste
la fișierul meu text simplu.

585
00:26:15,320 --> 00:26:17,970
Și, în doar un moment, eu voi
ne-a lungul procesului de

586
00:26:17,970 --> 00:26:19,360
de a face acest lucru noi înșine.

587
00:26:19,360 --> 00:26:23,310
>> Mă duc să mă întorc la dosarul meu
aici și reîncărcați pagina doar

588
00:26:23,310 --> 00:26:25,800
pentru a confirma ceea ce pare.

589
00:26:25,800 --> 00:26:27,190
Asta e în cazul în care ne aflăm acum.

590
00:26:27,190 --> 00:26:31,170
Mă simt ca și cum s-ar bucura de copii
având o anumită culoare la această pagină web.

591
00:26:31,170 --> 00:26:34,480
Așa că am de gând să merg aici
în capul paginii.

592
00:26:34,480 --> 00:26:38,130
Si am de gând să fac stil, / stil.

593
00:26:38,130 --> 00:26:44,060
Și apoi în interiorul acestui fapt, voi
pentru a spune corpul page-- meu

594
00:26:44,060 --> 00:26:46,870
iar acest format este, în
prima vedere, probabil, un pic

595
00:26:46,870 --> 00:26:49,400
ciudat, dar convențional.

596
00:26:49,400 --> 00:26:55,010
Am de gând să spun că fundalul
Culoarea acestei pagini ar trebui să fie de culoare verde.

597
00:26:55,010 --> 00:26:57,960
Și acest lucru este, din păcate,
un fel nu, cel mai bun design.

598
00:26:57,960 --> 00:27:00,710
Observați că anterior
în lumea HTML,

599
00:27:00,710 --> 00:27:03,190
Am spus că atributele
sunt aceste perechi cheie-valoare.

600
00:27:03,190 --> 00:27:05,760
Ceva este egal cu citat
unquote "ceva."

601
00:27:05,760 --> 00:27:08,810
În lumea CSS, care a fost
proiectat de unii oameni diferiți,

602
00:27:08,810 --> 00:27:11,020
au decis că, în lor
lume, perechi cheie-valoare

603
00:27:11,020 --> 00:27:13,920
ar fi un cuvânt de colon ceva.

604
00:27:13,920 --> 00:27:15,220
Deci, e aceeași idee, totuși.

605
00:27:15,220 --> 00:27:18,620
Este asocierea unei valori
cu unele cheie pe care într-un fel

606
00:27:18,620 --> 00:27:20,330
influențează comportamentul acestei pagini.

607
00:27:20,330 --> 00:27:21,901
>> Și probabil poți ghici.

608
00:27:21,901 --> 00:27:24,150
Ce este acest lucru, probabil, va
pentru a face chiar dacă nu ai niciodată

609
00:27:24,150 --> 00:27:27,867
văzut HTML sau CSS inainte?

610
00:27:27,867 --> 00:27:29,450
Audiența: Modificarea culorii de fundal.

611
00:27:29,450 --> 00:27:30,560
David J. MALAN: Da,
schimba culoarea de fundal.

612
00:27:30,560 --> 00:27:33,280
Și în mod specific
culoarea de fond a corpului.

613
00:27:33,280 --> 00:27:36,290
Dar, în măsura în care
corp pentru acum este web

614
00:27:36,290 --> 00:27:38,870
page-- este singurul lucru
sub really-- bara de titlu

615
00:27:38,870 --> 00:27:40,870
este, probabil, va
influențează același lucru.

616
00:27:40,870 --> 00:27:41,430
Așa că hai să vedem.

617
00:27:41,430 --> 00:27:42,490
Hai să salvăm acest lucru.

618
00:27:42,490 --> 00:27:44,310
Du-te aici și reîncărcați.

619
00:27:44,310 --> 00:27:46,140
Este destul de oribil.

620
00:27:46,140 --> 00:27:48,070
Și ce se întâmplă
aici este un efect secundar.

621
00:27:48,070 --> 00:27:49,850
Am ales această imagine la întâmplare.

622
00:27:49,850 --> 00:27:53,305
De ce nu este verde
pătrunzând în spatele Mickey?

623
00:27:53,305 --> 00:27:54,180
AUDIENTA: [inaudibil]

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

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

626
00:27:57,880 --> 00:28:01,750
Se pare că, imagini, destul de
mult toate imaginile pe care le-ar putea folosi,

627
00:28:01,750 --> 00:28:03,670
sunt toate rectangles-- de dreptunghiuri.

628
00:28:03,670 --> 00:28:07,710
Chiar dacă Mickey are unele curbe
pentru el însuși și are un fundal,

629
00:28:07,710 --> 00:28:09,330
acest context trebuie să fie ceva.

630
00:28:09,330 --> 00:28:10,280
Ea trebuie să fie de culoare albă.

631
00:28:10,280 --> 00:28:11,910
Ea trebuie să fie negru sau altceva.

632
00:28:11,910 --> 00:28:13,650
Acesta poate fi transparent.

633
00:28:13,650 --> 00:28:16,100
Și, de fapt, am putut
Deschide Mickey Mouse aici

634
00:28:16,100 --> 00:28:18,590
într-un program numit Photoshop
sau ceva similar

635
00:28:18,590 --> 00:28:21,176
și schimbe toate că alb
fundal transparent,

636
00:28:21,176 --> 00:28:22,550
astfel încât verdele să strălucească.

637
00:28:22,550 --> 00:28:25,980
Dar asta e ceva ce ar avea nevoie de
pentru a cere de la mine sau de un artist grafic

638
00:28:25,980 --> 00:28:28,130
sau un designer de la meu
companie, de exemplu,

639
00:28:28,130 --> 00:28:31,490
de a face, mai ales că eu doar
împrumutat asta de pe internet.

640
00:28:31,490 --> 00:28:33,030
Dar, de aceea acest lucru se întâmplă.

641
00:28:33,030 --> 00:28:34,980
>> Deci, ce altceva ar putea să vrem să facem?

642
00:28:34,980 --> 00:28:41,040
Ei bine, ne-am putea dori să spunem
chiar sper sa se bucure de șederea.

643
00:28:41,040 --> 00:28:44,150
Și, pentru a sublinia, vreau
pentru a face acest lucru puternic,

644
00:28:44,150 --> 00:28:48,310
și așa că voi spune deschis și puternic
închide puternic și apoi reîncărcați.

645
00:28:48,310 --> 00:28:50,320
Și e un pic cam greu
pentru a vedea pe proiector

646
00:28:50,320 --> 00:28:53,250
dar, poate, într-adevăr acum
sare la tine un pic mai mult.

647
00:28:53,250 --> 00:28:56,180
Astfel încât să puteți adăuga caractere cursive în acest
Astfel, cu care se confruntă cu caractere aldine în acest fel.

648
00:28:56,180 --> 00:28:57,500
Am putea schimba culorile.

649
00:28:57,500 --> 00:29:01,610
De fapt, doar pentru lovituri, eu sunt
O să meargă mai departe și de a face acest lucru.

650
00:29:01,610 --> 00:29:05,120
Nu-mi place foarte mult cum mi
paragrafe sunt atât de aproape împreună,

651
00:29:05,120 --> 00:29:06,870
așa că s-ar putea face ceva de genul asta.

652
00:29:06,870 --> 00:29:13,310
Mă duc să-i spun browser-ul,
schimba in fiecare paragraf tag-ul pentru a avea,

653
00:29:13,310 --> 00:29:16,952
Să say-- de fapt, știi ce,
să alinieze-l text-align, centru.

654
00:29:16,952 --> 00:29:19,410
Și din nou, știu doar
pentru că cineva a învățat să-mi

655
00:29:19,410 --> 00:29:21,118
sau l-am uitat în sus, în
o referință on-line.

656
00:29:21,118 --> 00:29:22,450
Așa că lasă-mă să salveze acest lucru.

657
00:29:22,450 --> 00:29:25,070
Si, ah, acum am
centrat pe imaginea acolo.

658
00:29:25,070 --> 00:29:28,490
Și, de fapt, știi ce, dacă
Am muta imaginea mea într-un paragraf

659
00:29:28,490 --> 00:29:34,510
tag-- astfel încât un al treilea paragraf,
chiar dacă nu este text.

660
00:29:34,510 --> 00:29:36,917
Hai să salvăm asta și reîncărcați.

661
00:29:36,917 --> 00:29:40,000
Acum pagina incepe sa arate un fel
de-- Vreau sa spun, este încă destul de urât,

662
00:29:40,000 --> 00:29:43,180
dar cel puțin se pare ca am petrecut
de două minute, în loc un minut

663
00:29:43,180 --> 00:29:43,950
făcându-l.

664
00:29:43,950 --> 00:29:47,200
>> Și astfel, treptat, putem face
aceste modificări estetice acum pagina?

665
00:29:47,200 --> 00:29:50,860
Nu am schimbat cu adevărat datele cuprinse în
pagina, altele decât adăugarea cuvântului într-adevăr.

666
00:29:50,860 --> 00:29:52,650
Am adăugat metadate, dacă vreți.

667
00:29:52,650 --> 00:29:54,830
Hei, browser-ul, efectuați
cuvântul "într-adevăr" caractere aldine.

668
00:29:54,830 --> 00:29:56,940
Dar datele nu este puternic.

669
00:29:56,940 --> 00:29:57,830
Asta e metadate.

670
00:29:57,830 --> 00:29:59,410
Datele sunt "într-adevăr."

671
00:29:59,410 --> 00:30:02,200
Așa că mai avem încă unele
aceleași concepte ca și mai înainte.

672
00:30:02,200 --> 00:30:05,990
Acum, desigur, acest lucru nu este pe web,
așa că am de gând să fac un singur pas final aici.

673
00:30:05,990 --> 00:30:10,300
>> Mă duc să merg la hello.html
și doar evidențiați și copiați-l.

674
00:30:10,300 --> 00:30:12,285
Și acum voi
du-te în Cloud9, care

675
00:30:12,285 --> 00:30:13,910
O să te plimbi printr-în doar o clipă.

676
00:30:13,910 --> 00:30:17,080
Și cotele sunt vei fi în curând, dacă
nu a fost deja, la un ecran de genul asta.

677
00:30:17,080 --> 00:30:21,080
Și lasă-mă să-ți dau un rapid
tur a ceea ce Cloud9 este de fapt.

678
00:30:21,080 --> 00:30:26,590
Deci, din nou nor 9 este
acest serviciu bazat pe cloud

679
00:30:26,590 --> 00:30:30,580
că tu și-mi dă iluzia
de a avea propria noastră mașină virtuală

680
00:30:30,580 --> 00:30:33,090
în nor, punct de vedere tehnic
un container în nor,

681
00:30:33,090 --> 00:30:35,160
că avem deplină
privilegii administrative.

682
00:30:35,160 --> 00:30:37,130
Deci, în teorie, nimeni nu
altcineva din lume nu are

683
00:30:37,130 --> 00:30:39,152
accesul la ecran Sunt
uita la dreapta acum,

684
00:30:39,152 --> 00:30:40,860
cu excepția, poate, oamenii
care conduc site-ul,

685
00:30:40,860 --> 00:30:43,470
pentru că ei au punct de vedere tehnic
acces fizic și așa mai departe.

686
00:30:43,470 --> 00:30:44,740
>> Deci ce vedem în acest mediu?

687
00:30:44,740 --> 00:30:46,230
Mă duc să micșora,
pentru că este un pic mai mic.

688
00:30:46,230 --> 00:30:48,104
Și lasă-mă peste punctul
aici doar pentru un moment.

689
00:30:48,104 --> 00:30:53,210
Pe partea stângă a mea și a ta
ecran, există un browser de fișiere de la stânga.

690
00:30:53,210 --> 00:30:55,362
Atât de asemănătoare în spirit
pentru Mac OS și Windows.

691
00:30:55,362 --> 00:30:57,070
Acestea sunt toate de
fișierele din contul meu.

692
00:30:57,070 --> 00:30:59,250
Și, în mod implicit, dacă dumneavoastră
cont este ca a mea,

693
00:30:59,250 --> 00:31:05,090
veți vedea sau a se vedea în curând
helloworld.html și readme.md.

694
00:31:05,090 --> 00:31:07,950
Aici pe dreapta, acest lucru este
în cazul în care fișierele text mele vor merge.

695
00:31:07,950 --> 00:31:11,620
Dacă v-ați folosit vreodată Microsoft
Word sau Notepad sau TextEdit,

696
00:31:11,620 --> 00:31:14,100
acest lucru este cuvântul de editare mea
de fișiere este de gând să meargă.

697
00:31:14,100 --> 00:31:16,540
Și apoi cel mai Arcane
caracteristică a acestui mediu

698
00:31:16,540 --> 00:31:20,100
că nu vom cu adevărat nevoie să utilizați este
aici numit-o fereastră Terminal.

699
00:31:20,100 --> 00:31:23,390
Dacă ați utilizat DOS de la
odinioară, acest lucru este Linux

700
00:31:23,390 --> 00:31:25,450
sau echivalentul Linux DOS.

701
00:31:25,450 --> 00:31:28,190
Este un interface-- bazat pe text
fără clicuri de mouse, fără tragere.

702
00:31:28,190 --> 00:31:30,770
Tot ce poți face este de tip
comenzi, dar aceste comenzi

703
00:31:30,770 --> 00:31:34,400
poate crea fișiere, muta fișiere, deschide
directoare, directoare apropiate,

704
00:31:34,400 --> 00:31:35,740
face orice număr de lucruri.

705
00:31:35,740 --> 00:31:38,060
Dar, pentru moment, vom doar
petrece timpul aici.

706
00:31:38,060 --> 00:31:39,050
>> Și așa să facem acest lucru.

707
00:31:39,050 --> 00:31:41,008
Dacă vă aflați în această
mediu, care trebuie

708
00:31:41,008 --> 00:31:45,900
fie în cazul în care ați creat un spațiu de lucru
deja, du-te mai departe și doar du-te în sus

709
00:31:45,900 --> 00:31:48,690
la File, New pentru un moment.

710
00:31:48,690 --> 00:31:51,740
Și asta îți va da o nouă
tab-ul chiar aici în mijloc.

711
00:31:51,740 --> 00:31:54,250
Iar eu doar-- și hai
mergeți mai departe și de a face acest lucru.

712
00:31:54,250 --> 00:31:59,910
Hai să mergem mai departe și acum fac fișier, Salvare
și mergeți mai departe și numesc hello.html,

713
00:31:59,910 --> 00:32:02,740
nu trebuie confundat cu
helloworld.html, care

714
00:32:02,740 --> 00:32:06,910
a venit cu noul dvs. cont gratuit,
care este doar un fișier mostră.

715
00:32:06,910 --> 00:32:11,020
Veti vedea apare dintr-o dată,
cel mai probabil, pe partea stângă,

716
00:32:11,020 --> 00:32:12,810
iar tab-ul va fi în continuare deschis.

717
00:32:12,810 --> 00:32:21,300
Și lasă-mă să vă încurajez acum să recreeze
acest fișier sau unele variante ale acestora.

718
00:32:21,300 --> 00:32:24,607
Și, dacă nu se poate chiar vedea pe
ecran, acest lucru este identic cu slide-uri

719
00:32:24,607 --> 00:32:26,190
că, probabil, aveți într-o altă filă.

720
00:32:26,190 --> 00:32:29,296
>> Deci, pe scurt, face prima pagină web,
salvați-l, și apoi într-o clipă,

721
00:32:29,296 --> 00:32:31,170
O să-ți arăt cum
se poate vedea de fapt acest lucru.

722
00:32:31,170 --> 00:32:32,970
Dar, schimba cel puțin un lucru.

723
00:32:32,970 --> 00:32:35,400
Helloworld schimba la
ceva din propria ta alegere,

724
00:32:35,400 --> 00:32:39,821
astfel încât să fiți convinși că este ta
fișier și nu cel pe care tocmai l-am creat.

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

726
00:32:40,320 --> 00:32:43,804
Iar atunci când nu ready--
rush-- când ești gata,

727
00:32:43,804 --> 00:32:46,220
mergeți mai departe și salvați fișierul
odată ce ați făcut aceste modificări.

728
00:32:46,220 --> 00:32:49,540
Și, dacă faceți clic pe
Butonul sus alerga sus, acest lucru

729
00:32:49,540 --> 00:32:53,610
ar trebui să deschidă o nouă filă, care va spune
vă ce adresă URL puteți accesa fișierul la,

730
00:32:53,610 --> 00:32:56,380
dar ar putea dura un moment pentru a
citat unquote "start Apache", care

731
00:32:56,380 --> 00:32:58,820
este numele serverului web.

732
00:32:58,820 --> 00:33:02,430
Deci, să fie atent pentru a face exact
ceea ce este în dosar în cele din urmă.

733
00:33:02,430 --> 00:33:04,610
Deci, chiar acum, voi mări.

734
00:33:04,610 --> 00:33:07,780
Dacă aș începe să tastați
Agatate deschis HTML, Notă

735
00:33:07,780 --> 00:33:09,650
Mi-a determinat să termin gândul meu.

736
00:33:09,650 --> 00:33:13,750
Și, dacă am terminat gândul meu, ea
automat îmi dă eticheta de închidere.

737
00:33:13,750 --> 00:33:17,190
Dar așteptarea este atunci voi lovi
Enter și apoi mutați în interiorul acolo

738
00:33:17,190 --> 00:33:21,180
și de a face cap în interior și
atunci eu fac corp înăuntru.

739
00:33:21,180 --> 00:33:24,430
Și e un pic ciudat la început,
pentru că face de lucru pentru tine,

740
00:33:24,430 --> 00:33:27,110
dar dau seama că în cele din urmă
vă salvează intrarile de la tastatura.

741
00:33:27,110 --> 00:33:30,500
Și, de fapt, o caracteristică foarte comună
Programarea medii aceste zile

742
00:33:30,500 --> 00:33:33,260
atât pentru dezvoltarea web cum ar fi
acest lucru și programarea efectivă,

743
00:33:33,260 --> 00:33:36,960
care vom vorbi despre mâine,
este aceste caracteristici auto-complete,

744
00:33:36,960 --> 00:33:39,710
lucruri care pur și simplu permit o
programator sau un designer

745
00:33:39,710 --> 00:33:42,010
pentru a introduce mai puține taste pentru
realiza același lucru.

746
00:33:42,010 --> 00:33:43,176
Uneori e bine, totuși.

747
00:33:43,176 --> 00:33:44,560
Uneori e doar enervant.

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

749
00:33:49,290 --> 00:33:54,010
Și, din nou, odată ce ați transcris
diapozitiv sau o variantă a acesteia,

750
00:33:54,010 --> 00:33:57,360
aveți posibilitatea să faceți clic pe butonul Executare până sus.

751
00:33:57,360 --> 00:33:59,910
Și apoi, în partea de jos
fereastră, veți fi informat

752
00:33:59,910 --> 00:34:04,290
la ce adresă URL, puteți vizita pagina web.

753
00:34:04,290 --> 00:34:08,790
A mea, de exemplu, este la
business-daharvard.c9users.io

754
00:34:08,790 --> 00:34:11,480
si asa mai departe.

755
00:34:11,480 --> 00:34:14,580
Bine, deci, să mine-- întrebări?

756
00:34:14,580 --> 00:34:19,460
Orice alte întrebări despre doar obtinerea
acest lucru de lucru înainte de a adăuga caracteristici?

757
00:34:19,460 --> 00:34:21,692
Și lasă-mă să propună, doar
pentru a obține oameni comfortable--

758
00:34:21,692 --> 00:34:24,400
pentru că este un lucru doar la
copy-paste orbește ceea ce am făcut.

759
00:34:24,400 --> 00:34:27,177
Dar, pur și simplu, astfel încât oamenii se luptă
cu cel puțin un to-do,

760
00:34:27,177 --> 00:34:28,510
Voi porni muzica.

761
00:34:28,510 --> 00:34:32,630
Voi propune o listă de
lucruri pe care le puteți adăuga potențial.

762
00:34:32,630 --> 00:34:34,086
Și vă puteți folosi cu siguranță Google.

763
00:34:34,086 --> 00:34:36,210
Și de ce nu ne-am
propun să încercați să rezolve

764
00:34:36,210 --> 00:34:38,710
cel puțin o problemă particulară aici.

765
00:34:38,710 --> 00:34:45,090
Deci, în termeni de tag-uri,
lasă-mă să reutilizați asta aici.

766
00:34:45,090 --> 00:34:48,280
>> De fapt, dați-mi voie
într-o formă textuală.

767
00:34:48,280 --> 00:35:02,380
Hai să spunem că printre tag-uri s-ar putea
utilizați aici sunt unele etichete aici.

768
00:35:02,380 --> 00:35:06,090
Am văzut punctul tag-ul.

769
00:35:06,090 --> 00:35:07,850
Acum se va auto-complete.

770
00:35:07,850 --> 00:35:12,220
Punctul tag-ul, tag-ul ancora.

771
00:35:12,220 --> 00:35:15,250
Să presupunem că doriți să
face ceva mai mare,

772
00:35:15,250 --> 00:35:19,480
astfel încât s-ar putea like--
tag-ul etalon poate ajuta.

773
00:35:19,480 --> 00:35:23,010
Ei bine, ai putea avea nevoie de ajutor
pentru că, în doar un moment.

774
00:35:23,010 --> 00:35:24,830
Am mai văzut div.

775
00:35:24,830 --> 00:35:26,170
Vei vedea acolo e masă.

776
00:35:26,170 --> 00:35:27,928
Există ceva numit 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
Întoarce-te la asta într-un moment.

780
00:35:34,770 --> 00:35:36,590
Ce altceva ar putea fi la îndemână?

781
00:35:36,590 --> 00:35:38,310
Acolo e puternic.

782
00:35:38,310 --> 00:35:43,640
Nu există un accent, sau mai degrabă em.

783
00:35:43,640 --> 00:35:50,110
There's-- ce altceva
ar putea să vă place aici?

784
00:35:50,110 --> 00:35:51,930
Ei bine, vom lua o
uita-te la asta împreună.

785
00:35:51,930 --> 00:35:53,230
Formularul, pe care le-am văzut.

786
00:35:53,230 --> 00:35:54,130
Nu există formă.

787
00:35:54,130 --> 00:35:56,500
Nu există intrare și alte câteva.

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

789
00:35:58,924 --> 00:36:00,090
Bine, așa că hai să facem acest lucru.

790
00:36:00,090 --> 00:36:02,330
Pentru a răspunde la un Victoria
întrebare, lasă-mă mai întâi

791
00:36:02,330 --> 00:36:05,020
doar asigurați-vă că toată lumea este
capabil de a obține lor de lucru salut.

792
00:36:05,020 --> 00:36:06,900
Atunci lasă-mă să introducă
un cuplu alte idei.

793
00:36:06,900 --> 00:36:09,209
Apoi, vom lăsa oameni rezolva
unele probleme pe cont propriu.

794
00:36:09,209 --> 00:36:11,500
Apoi vom veni de fapt înapoi
la această noțiune de o formă,

795
00:36:11,500 --> 00:36:14,950
și vom de fapt re-punerea în aplicare
împreună interfața front-end,

796
00:36:14,950 --> 00:36:16,450
ca să spunem așa, pentru Google în sine.

797
00:36:16,450 --> 00:36:19,700
Vom folosi Google ca la sfârșitul spate și lăsați
le face munca grea, căutarea,

798
00:36:19,700 --> 00:36:22,760
dar vom recrea front-end
Google și formularul de căutare

799
00:36:22,760 --> 00:36:24,520
că ei au pe pagina lor de origine proprii.

800
00:36:24,520 --> 00:36:27,050
Și așa ne vom întoarce la
aceste tag-uri în doar un moment.

801
00:36:27,050 --> 00:36:30,270
>> Deci, acest lucru a fost ceea ce am
a propus doar un moment în urmă.

802
00:36:30,270 --> 00:36:33,940
Putem adăuga stilizarea unui
pagină în interiorul acestui tag stil,

803
00:36:33,940 --> 00:36:36,950
și putem stiliza fundalul
culoare, alinierea textului,

804
00:36:36,950 --> 00:36:39,000
fie că e vorba de centru sau la stânga sau la dreapta.

805
00:36:39,000 --> 00:36:41,630
Dar, foarte repede v-ar
găsi sau un web designer

806
00:36:41,630 --> 00:36:44,060
s-ar găsi că această
devine un pic mai dificil de gestionat,

807
00:36:44,060 --> 00:36:48,330
pentru că tu faci ce-i
numitul conținut de amestecare

808
00:36:48,330 --> 00:36:50,120
cu prezentarea acestora.

809
00:36:50,120 --> 00:36:53,756
În care amestecați datele
și estetica acestora.

810
00:36:53,756 --> 00:36:56,380
Și, de fapt, dacă ia în considerare
ce se va întâmpla peste time--

811
00:36:56,380 --> 00:36:58,350
aceasta este o foarte mică
pagina de web, desigur.

812
00:36:58,350 --> 00:37:01,590
Dar, dacă am adăuga conținut la această pagină
și am adăuga stil la această pagină,

813
00:37:01,590 --> 00:37:04,650
pagina devine foarte repede
mai mult și mai mult și mai mult.

814
00:37:04,650 --> 00:37:07,510
Și să presupunem că vreau
au oa doua pagină web care

815
00:37:07,510 --> 00:37:09,010
împărtășește unele dintre aceste atribute.

816
00:37:09,010 --> 00:37:12,350
Să presupunem că pagina mea de web a doua pentru meu
site-- De asemenea, vreau centru totul,

817
00:37:12,350 --> 00:37:14,960
și eu doresc, de asemenea, totul
cu un fundal verde.

818
00:37:14,960 --> 00:37:17,940
Sunt destul de mult va trebui să
copiați și inserați unele dintre aceste linii

819
00:37:17,940 --> 00:37:20,730
în acest al doilea dosar, care se simte bine.

820
00:37:20,730 --> 00:37:22,030
Acesta va rezolva problema.

821
00:37:22,030 --> 00:37:26,060
>> Dar dacă vreau oa treia pagină
sau o pagină de 30 sau o pagină de 40?

822
00:37:26,060 --> 00:37:28,730
Acum am de gând să fie copiat și
lipirea o mulțime de cod duplicat

823
00:37:28,730 --> 00:37:30,430
în mai multe fișiere.

824
00:37:30,430 --> 00:37:32,600
Și așa să presupunem că
Eu decid sau mi-am spus,

825
00:37:32,600 --> 00:37:34,780
hei, nu utilizăm un
fundal verde mai.

826
00:37:34,780 --> 00:37:36,380
Vom incepe folosind portocaliu.

827
00:37:36,380 --> 00:37:38,690
Ce trebuie să schimbi?

828
00:37:38,690 --> 00:37:42,900
Ei bine, trebuie să schimbi acest stil
de la verde la portocaliu în cât de multe locuri?

829
00:37:42,900 --> 00:37:44,920
La fel ca 30 sau 40 de locuri.

830
00:37:44,920 --> 00:37:45,900
Este plictisitor.

831
00:37:45,900 --> 00:37:47,039
Este predispus la erori.

832
00:37:47,039 --> 00:37:49,580
Exista o serie de motive
în cazul în care nu s-ar dori să inducă

833
00:37:49,580 --> 00:37:51,840
acest tip de durere pentru tine.

834
00:37:51,840 --> 00:37:54,760
Și așa n-ar fi frumos
dacă am putea lua ceea ce tocmai am

835
00:37:54,760 --> 00:37:58,240
a pus între aceste două galbene
tag-uri, aceste etichete de stil,

836
00:37:58,240 --> 00:38:04,050
factor-l, și pune toate mele
stilizare într-un singur fișier central

837
00:38:04,050 --> 00:38:08,470
că toate cele 30 sau 40 de alte fișiere mele
imprumuta de la sau într-un fel de referință,

838
00:38:08,470 --> 00:38:11,640
nu spre deosebire de rețea
diagrame am făcut mai înainte?

839
00:38:11,640 --> 00:38:15,030
>> Așa că, dacă mă duc aici, eu sunt
va propune de fapt,

840
00:38:15,030 --> 00:38:17,880
că înlocuim
tag-ul stil cu ceva

841
00:38:17,880 --> 00:38:21,620
numit tag-ul link-ul, care
este oribil, oribil cu numele,

842
00:38:21,620 --> 00:38:24,370
pentru că nu utilizați
link-ul tag-ul pentru a crea ceea ce

843
00:38:24,370 --> 00:38:26,380
noi, oamenii stiu ca un link dintr-o pagină web.

844
00:38:26,380 --> 00:38:29,750
Pentru asta, utilizați tag-ul pe care?

845
00:38:29,750 --> 00:38:31,464
Cum creati un link dintr-o pagină web?

846
00:38:31,464 --> 00:38:32,130
AUDIENTA: 'A.

847
00:38:32,130 --> 00:38:34,870
David J. MALAN: A, sau ancora
tag-ul, care a mers la Disney inainte.

848
00:38:34,870 --> 00:38:39,090
Link-ul de tag-ul de aici este de a spune
astea-- link către un fișier numit

849
00:38:39,090 --> 00:38:44,350
styles.css, relația cu care
va fi că este stylesheet meu.

850
00:38:44,350 --> 00:38:48,290
Deci, aceasta este una dintre cele mai S. în
foi de stil în cascadă. CSS--

851
00:38:48,290 --> 00:38:50,490
Stilul sheet-- doi dintre S. în CSS.

852
00:38:50,490 --> 00:38:52,550
Cascadă foaie de stil.

853
00:38:52,550 --> 00:38:58,640
Acest lucru înseamnă pur și simplu, hei, browser-ul, du-te
găsi styles.css pe serverul local

854
00:38:58,640 --> 00:39:01,870
și-l utilizați ca foaia de stil,
ceea ce înseamnă în interiorul acelui fișier

855
00:39:01,870 --> 00:39:05,310
va fi cele de mai
stilizări pe care le-am făcut doar.

856
00:39:05,310 --> 00:39:07,396
Și ce acel fișier
ar putea arata ca este aceasta.

857
00:39:07,396 --> 00:39:10,020
Și eu voi face doar acest lucru este un rapid
de exemplu, pentru că nu avem nevoie

858
00:39:10,020 --> 00:39:12,000
pentru a obține prea mult în buruienile de aici.

859
00:39:12,000 --> 00:39:17,840
Dar, dacă am copia asta, ce propun eu
este faptul că un programator a crea un nou fișier,

860
00:39:17,840 --> 00:39:24,450
paste în aceste lines--
whoops-- lipiți în aceste linii,

861
00:39:24,450 --> 00:39:32,270
salvați-l ca styles.css, și apoi, în
celălalt fișier, ștergeți toate acestea

862
00:39:32,270 --> 00:39:35,450
și înlocuiți-l în schimb
cu acest link tag.

863
00:39:35,450 --> 00:39:43,090
Astfel că, dacă am link-ului href = "styles.css",
relația trebuie să fie "stylesheet"

864
00:39:43,090 --> 00:39:44,170
close tag-ul.

865
00:39:44,170 --> 00:39:45,250
Salvați-l.

866
00:39:45,250 --> 00:39:47,000
Du-te înapoi la helloworld meu.

867
00:39:47,000 --> 00:39:48,690
Reload.

868
00:39:48,690 --> 00:39:51,290
>> Literalmente nu sa întâmplat nimic.

869
00:39:51,290 --> 00:39:54,710
Acesta este un lucru bun, deoarece
înseamnă că este de fapt totul de lucru.

870
00:39:54,710 --> 00:39:58,860
Pentru a dovedi la fel de mult, să presupunem că eu fac o
typo, și eu numesc acest "styles.css"

871
00:39:58,860 --> 00:40:03,080
cu un capital de S, care este
incorecte, și apoi reîncărcați.

872
00:40:03,080 --> 00:40:05,470
Acum puteți vedea pur și simplu nu funcționează.

873
00:40:05,470 --> 00:40:06,362
Acum, de ce?

874
00:40:06,362 --> 00:40:08,070
Ei bine, hai să folosim un
Tehnica de mai devreme.

875
00:40:08,070 --> 00:40:10,153
Lasă-mă să merg mai departe și, în
browser-ul meu, în Chrome, sunt

876
00:40:10,153 --> 00:40:12,900
O să deschidă acea specială
tab-ul de rețea ca și mai înainte,

877
00:40:12,900 --> 00:40:15,560
și lasă-mă să reîncărcați pagina.

878
00:40:15,560 --> 00:40:19,341
Ceea ce nu te surprins să vezi acum?

879
00:40:19,341 --> 00:40:20,840
Sau poate că ești surprins să-l văd.

880
00:40:20,840 --> 00:40:23,225
Oricum ar fi, ce vezi acum?

881
00:40:23,225 --> 00:40:24,100
AUDIENTA: [inaudibil]

882
00:40:24,100 --> 00:40:24,770
David J. MALAN: Nu găsit.

883
00:40:24,770 --> 00:40:25,680
De ce nu este găsit?

884
00:40:25,680 --> 00:40:28,480
Ei bine, capitala Styles.css--
Nu există S-.

885
00:40:28,480 --> 00:40:29,230
L-am greșit în botezarea.

886
00:40:29,230 --> 00:40:30,430
greșeală de tipar simplu.

887
00:40:30,430 --> 00:40:33,816
Dar eu sunt obtinerea de înțeles acum
404, deoarece serverul este de a spune, hei,

888
00:40:33,816 --> 00:40:34,440
nu a găsit.

889
00:40:34,440 --> 00:40:36,300
La propriu, nu știu
în cazul în care fișierul este.

890
00:40:36,300 --> 00:40:38,880
Deci, ca urmare, browser
vă arată ce poate,

891
00:40:38,880 --> 00:40:42,860
conținutul brut al paginii,
care a fost de 200, HTML,

892
00:40:42,860 --> 00:40:45,390
dar stilizarea nu poate
se adaugă ulterior.

893
00:40:45,390 --> 00:40:47,120
Și acest lucru este ceea ce se înțelege prin cascadă.

894
00:40:47,120 --> 00:40:49,070
Poti adauga un fel de
după, și un fel de

895
00:40:49,070 --> 00:40:50,874
rafinează estetica paginii web.

896
00:40:50,874 --> 00:40:53,790
Și tu poți trece peste chiar și cele
stiluri cu încă alte fișiere stylesheet

897
00:40:53,790 --> 00:40:54,700
daca vrei.

898
00:40:54,700 --> 00:40:57,780
Nu a găsit, totuși, în acest caz,
pentru că, desigur, am greșit în botezarea.

899
00:40:57,780 --> 00:41:00,330
Așa că va trebui să se stabilească faptul că mai întâi.

900
00:41:00,330 --> 00:41:04,667
>> Așa că hai să mergem mai departe și
propune următoarele.

901
00:41:04,667 --> 00:41:07,410

902
00:41:07,410 --> 00:41:11,140
Hai să mergem mai departe și de a face acest lucru.

903
00:41:11,140 --> 00:41:14,220
Incepand cu probabil
fișierul helloworld,

904
00:41:14,220 --> 00:41:17,740
permiteți-mi să invitați un cuplu
caracteristicii sugestii.

905
00:41:17,740 --> 00:41:20,400
Așa că, Victoria, ai vrut să
face un text mai mare, nu?

906
00:41:20,400 --> 00:41:24,555
Bine, deci putem
fac text mai mare.

907
00:41:24,555 --> 00:41:26,860
Și ne vom smulge fiecare off
doar o singură problemă pentru a rezolva.

908
00:41:26,860 --> 00:41:30,867
Asigurați-text mai mare.

909
00:41:30,867 --> 00:41:32,700
Nu am de gând să deranjez
scris acest lucru atunci când ne

910
00:41:32,700 --> 00:41:35,600
au tehnologie glonț chiar aici.

911
00:41:35,600 --> 00:41:39,970
Deci, unele probleme.

912
00:41:39,970 --> 00:41:44,670
Asa ca vom incerca
pentru a face text mai mare.

913
00:41:44,670 --> 00:41:45,170
In regula.

914
00:41:45,170 --> 00:41:48,360
Ce altceva ar propune cineva?

915
00:41:48,360 --> 00:41:50,332
Ce altceva ar putea să ne-o dorim
pentru a face într-o pagină web?

916
00:41:50,332 --> 00:41:52,040
Hai să vină cu un
lista scurtă de lucruri

917
00:41:52,040 --> 00:41:55,366
și apoi delegat la
grup pentru a figura asta.

918
00:41:55,366 --> 00:41:56,270
>> AUDIENTA: [inaudibil]

919
00:41:56,270 --> 00:42:02,251
>> David J. MALAN: OK, textul poziției
pe diferite părți ale paginii?

920
00:42:02,251 --> 00:42:02,750
In regula.

921
00:42:02,750 --> 00:42:04,620
Altceva.

922
00:42:04,620 --> 00:42:05,784
>> AUDIENTA: [inaudibil]

923
00:42:05,784 --> 00:42:06,700
David J. MALAN: Este.

924
00:42:06,700 --> 00:42:08,720
Deci, un gif este doar un
format de fișier diferit.

925
00:42:08,720 --> 00:42:12,830
Tocmai ne-am folosit, ceea ce, un
png sau jpg, probabil?

926
00:42:12,830 --> 00:42:14,480
Am folosit un jpg.

927
00:42:14,480 --> 00:42:16,780
Dacă sunteți curios, un exces
răspuns la întrebarea dvs.

928
00:42:16,780 --> 00:42:19,404
este un jpg este folosit în general pentru
fotografii, deoarece acceptă

929
00:42:19,404 --> 00:42:21,500
milioane de culori sau pe 24 de biți de culoare.

930
00:42:21,500 --> 00:42:26,930
Un gif este utilizat în general pentru, cum ar fi,
meme internet aceste animatii days--,

931
00:42:26,930 --> 00:42:28,810
gif-uri animate, cum ar fi.

932
00:42:28,810 --> 00:42:32,320
Dar se întâmplă să folosească o culoare mai mică
paleta, numai 256 de culori posibile,

933
00:42:32,320 --> 00:42:35,230
dar suporta
transparență și de animație.

934
00:42:35,230 --> 00:42:40,330
Și apoi există png, care sprijină
transparență și mai multe culori

935
00:42:40,330 --> 00:42:41,300
dar nu și animație.

936
00:42:41,300 --> 00:42:42,133
Deci, e un compromis.

937
00:42:42,133 --> 00:42:44,144

938
00:42:44,144 --> 00:42:46,060
Adăugând astfel un gif, deși,
ar fi funcțional

939
00:42:46,060 --> 00:42:48,396
echivalent cu adăugarea unui fișier jpg sau png.

940
00:42:48,396 --> 00:42:49,110
Da.

941
00:42:49,110 --> 00:42:50,550
Image source este egal.

942
00:42:50,550 --> 00:42:51,590
Așa că altceva.

943
00:42:51,590 --> 00:42:57,288
Hai să vină cu ceva care
am trimis la Victoria pentru a face aici.

944
00:42:57,288 --> 00:42:59,209
>> AUDIENTA: Adăugați butoane pentru un formular.

945
00:42:59,209 --> 00:43:00,000
David J. MALAN: OK.

946
00:43:00,000 --> 00:43:02,179
Așa că adăugați butoane pentru un formular.

947
00:43:02,179 --> 00:43:03,470
Si noi vom face asta una împreună.

948
00:43:03,470 --> 00:43:07,220
Astfel că va fi o Segue perfectă
imediat după această provocare.

949
00:43:07,220 --> 00:43:10,357
Altceva?

950
00:43:10,357 --> 00:43:11,440
Ce s-ar putea plăcea să faci?

951
00:43:11,440 --> 00:43:14,040

952
00:43:14,040 --> 00:43:16,516
Web-ul se simte foarte SCENARIUL
în cazul în care acest lucru este tot ce putem face.

953
00:43:16,516 --> 00:43:18,140
AUDIENTA: Schimbarea culorii textului.

954
00:43:18,140 --> 00:43:19,500
David J. MALAN: Schimbarea ce?

955
00:43:19,500 --> 00:43:20,666
Audiența: Culoarea textului.

956
00:43:20,666 --> 00:43:22,311
David J. MALAN: Schimbarea culorii textului.

957
00:43:22,311 --> 00:43:22,810
In regula.

958
00:43:22,810 --> 00:43:23,790
Așa că, hai să facem asta.

959
00:43:23,790 --> 00:43:27,209
Pur și simplu din nou, astfel încât să nu că tu ești, pur și simplu
pe de rost, fac exact ceea ce fac,

960
00:43:27,209 --> 00:43:29,500
Mă duc să activați muzica
timp de cinci minute, poate, aici.

961
00:43:29,500 --> 00:43:30,450
Sunteți binevenit să utilizați Google.

962
00:43:30,450 --> 00:43:33,130
Sunteți binevenit să mă întrebi, și
O să șoptesc un indiciu în ureche.

963
00:43:33,130 --> 00:43:35,171
Sunteți binevenit să se uite
peste pe umerii celuilalt.

964
00:43:35,171 --> 00:43:37,340
Dar, rezolva doar una dintre aceste probleme.

965
00:43:37,340 --> 00:43:40,190
Dar, vom face ultima,
formează una, dacă am putea, împreună.

966
00:43:40,190 --> 00:43:42,790
Deci cinci minute pentru a rezolva
oricare dintre aceste probleme

967
00:43:42,790 --> 00:43:46,780
utilizând Google, intuiție, sau orice
alte mijloace disponibile pentru tine.

968
00:43:46,780 --> 00:43:48,630
>> [MUZICĂ]

969
00:43:48,630 --> 00:43:49,130
In regula.

970
00:43:49,130 --> 00:43:50,838
Nu vă faceți griji în cazul în care doriți
pentru a păstra tinkering,

971
00:43:50,838 --> 00:43:53,880
dar voi strica un cuplu
din aceste răspunsuri.

972
00:43:53,880 --> 00:43:57,986
Deci, prima sugestie de la
Victoria a fost de a face text mai mare.

973
00:43:57,986 --> 00:43:59,360
Așa că există câteva modalități de a face acest lucru.

974
00:43:59,360 --> 00:44:01,530
Am restaurat în prezent
ecranul meu la această dimensiune,

975
00:44:01,530 --> 00:44:04,310
deși am mărit
în mod artificial doar pentru a vedea lucrurile.

976
00:44:04,310 --> 00:44:07,470
Și să facem acest lucru.

977
00:44:07,470 --> 00:44:11,380
Lasă-mă să merg mai departe și apuca
un text generic latin

978
00:44:11,380 --> 00:44:19,540
doar așa că avem ceva de a lucra cu.

979
00:44:19,540 --> 00:44:20,715
Așa că dă-mi doar un moment.

980
00:44:20,715 --> 00:44:21,840
Voi face trei paragrafe.

981
00:44:21,840 --> 00:44:53,430

982
00:44:53,430 --> 00:44:53,930
O.K.

983
00:44:53,930 --> 00:44:55,560
Acesta va fi un exemplu mai bun.

984
00:44:55,560 --> 00:44:57,840
Deci, pentru curioși, în
hello.html mea, eu doar

985
00:44:57,840 --> 00:45:01,645
lipite trei fără sens
punctele latine

986
00:45:01,645 --> 00:45:03,270
doar așa că avem un text pentru a lucra cu.

987
00:45:03,270 --> 00:45:06,720
Și scopul Victoria a fost acela de a
fac parte din text mai mare.

988
00:45:06,720 --> 00:45:09,879
Așa că am putea, la fel ca înainte, du-te aici.

989
00:45:09,879 --> 00:45:11,170
Și lasă-mă să o fac drumul corect.

990
00:45:11,170 --> 00:45:13,253
Am de gând să aibă o legătură
tag-ul care indică spre un fișier

991
00:45:13,253 --> 00:45:20,560
numita "styles.css," relația
din care este din nou "stylesheet".

992
00:45:20,560 --> 00:45:25,221
Și apoi am de gând să salveze
și deschide acest "styles.css."

993
00:45:25,221 --> 00:45:28,940
>> Așa că, la fel ca înainte, am
abilitate în acest fișier CSS

994
00:45:28,940 --> 00:45:31,569
pentru a suprascrie de fapt implicit
estetica unei pagini web,

995
00:45:31,569 --> 00:45:33,860
și estetica implicit,
desigur, sunt destul de plictisitoare.

996
00:45:33,860 --> 00:45:36,943
Este un fel de dimensiunea normală a fontului, negru
text, fundal alb, și așa mai departe.

997
00:45:36,943 --> 00:45:39,440
Așa că să presupunem că vreau să fac
toate acestea text mai mare.

998
00:45:39,440 --> 00:45:40,460
Aș putea face câteva lucruri.

999
00:45:40,460 --> 00:45:43,750
În fișierul meu styles.css, am
ar putea spune, știi ce,

1000
00:45:43,750 --> 00:45:46,950
se aplică următoarele la
corpul paginii mele.

1001
00:45:46,950 --> 00:45:51,390
Du-te mai departe și să facă
dimensiunea fontului 24 de puncte,

1002
00:45:51,390 --> 00:45:54,130
care este un număr I s-ar putea
utilizați în Microsoft Word.

1003
00:45:54,130 --> 00:45:57,620
Lasă-mă să mă întorc la mea web
pagină aici și reîncărca,

1004
00:45:57,620 --> 00:45:59,640
și puteți vedea că
este deja mult mai mare.

1005
00:45:59,640 --> 00:46:02,223
Și noi putem obține un pic nebun,
la fel ca și cum putem pe un desktop--

1006
00:46:02,223 --> 00:46:03,670
face cu 96 de puncte.

1007
00:46:03,670 --> 00:46:04,950
Reload.

1008
00:46:04,950 --> 00:46:07,610
Și este un pic cam
greu de manipulat în acest moment.

1009
00:46:07,610 --> 00:46:09,500
>> Dar, aș putea fi un pic mai precis.

1010
00:46:09,500 --> 00:46:14,530
În loc să aplice acest
stylesheet la corpul paginii mele,

1011
00:46:14,530 --> 00:46:21,740
ce altceva s-ar putea să o aplice în schimb,
ce alte tag-ul care s-ar putea încă

1012
00:46:21,740 --> 00:46:25,445
funcționează în același mod?

1013
00:46:25,445 --> 00:46:26,444
>> AUDIENTA: p tag-ul?

1014
00:46:26,444 --> 00:46:27,360
David J. MALAN: P tag-ul.

1015
00:46:27,360 --> 00:46:29,350
Astfel încât capul nu ar fi
corectă, deoarece capul,

1016
00:46:29,350 --> 00:46:31,300
nu poți de fapt
controlul estetica.

1017
00:46:31,300 --> 00:46:32,700
Nu e fie text acolo sau nu.

1018
00:46:32,700 --> 00:46:36,760
Dar p tag-- mă pot arunca cu capul într-un pic
mai adânc, ca să spunem așa, la paragraful

1019
00:46:36,760 --> 00:46:37,350
Etichete.

1020
00:46:37,350 --> 00:46:41,600
Și chiar dacă există trei,
asta e foarte bine, pentru că în CSS,

1021
00:46:41,600 --> 00:46:44,900
când eu spun doar "p", acest lucru
înseamnă aplică următoarele

1022
00:46:44,900 --> 00:46:48,300
la orice etichetă care se potrivește cu această
Selector, selectorul doar

1023
00:46:48,300 --> 00:46:49,430
fiind numele etichetei.

1024
00:46:49,430 --> 00:46:52,350
Așa că ori de câte ori vedeți o
"P", aplica dimensiunea fontului,

1025
00:46:52,350 --> 00:46:55,222
și să-l facă mai mult
rezonabil again-- 24 puncte.

1026
00:46:55,222 --> 00:46:56,930
Și știi ce,
doar pentru o bună măsură,

1027
00:46:56,930 --> 00:46:59,810
hai să facem culoarea
doar roșu pentru moment.

1028
00:46:59,810 --> 00:47:03,740
Și acum, dacă reincarc, acum
a se vedea trei paragrafe urâte.

1029
00:47:03,740 --> 00:47:07,180
>> Dar acum, să presupunem că eu sunt un fel
de-- Vreau primul paragraf

1030
00:47:07,180 --> 00:47:08,210
să sară la utilizator.

1031
00:47:08,210 --> 00:47:11,150
Nu vreau să crească doar
dimensiunea fontului totul.

1032
00:47:11,150 --> 00:47:16,105
Și, așa că am dori de fapt să identifice sau
distinge între aceste paragrafe.

1033
00:47:16,105 --> 00:47:18,730
Așa că hai să scăpăm de roșu,
pentru că e doar un fel de prost gust,

1034
00:47:18,730 --> 00:47:23,885
și să mergem mai departe și să facă
dimensiunea fontului 12 puncte în mod implicit,

1035
00:47:23,885 --> 00:47:26,260
astfel încât să ne întoarcem la ceva
un pic mai rezonabil.

1036
00:47:26,260 --> 00:47:29,190
Și acum vreau doar să se sporească
dimensiunea fontului din primul paragraf.

1037
00:47:29,190 --> 00:47:31,440
Pot face acest lucru în câteva
moduri, dar într-un fel care este

1038
00:47:31,440 --> 00:47:37,180
probabil cel mai de instruire la cele mai
moment este de a face următoarele.

1039
00:47:37,180 --> 00:47:43,280
Lasă-mă să merg mai departe și spun, acest lucru
alineatul are un ID unic "primul".

1040
00:47:43,280 --> 00:47:45,000
Aș putea numi asta orice vreau.

1041
00:47:45,000 --> 00:47:46,874
Aș putea numi asta "foo"
sau orice alt cuvânt,

1042
00:47:46,874 --> 00:47:49,290
dar am de gând să-l dau câteva
nume semnificativ semantically

1043
00:47:49,290 --> 00:47:50,320
cum ar fi "mai întâi."

1044
00:47:50,320 --> 00:47:54,790
Acesta este identificatorul unic,
ID-ul, pentru primul meu paragraf.

1045
00:47:54,790 --> 00:47:59,360
>> Ce pot face acum în stylesheet mea
este un pic mai precis.

1046
00:47:59,360 --> 00:48:02,330
În loc de a spune, se aplică
următoarele la p tag-ul,

1047
00:48:02,330 --> 00:48:04,890
Pot spune following--
se aplică următoarele,

1048
00:48:04,890 --> 00:48:11,000
sau selectați, elementul HTML
care are un ID unic "primul".

1049
00:48:11,000 --> 00:48:12,350
Ce vreau să i se aplice?

1050
00:48:12,350 --> 00:48:15,250
O dimensiune font de 24 puncte.

1051
00:48:15,250 --> 00:48:16,640
Asa ca am doi selectori acum.

1052
00:48:16,640 --> 00:48:19,690
Unul face ca cele de mai
punctele 12 puncte.

1053
00:48:19,690 --> 00:48:24,960
Dar asta, mai ales că este vorba
second-- ea vine ultimul în file--

1054
00:48:24,960 --> 00:48:27,090
acest lucru are un efect în cascadă.

1055
00:48:27,090 --> 00:48:30,200
Tocmai am făcut toate mele
punctul etichete 12 puncte,

1056
00:48:30,200 --> 00:48:34,350
dar acest lucru acum și cascade
suprascrie ca pentru orice element

1057
00:48:34,350 --> 00:48:38,800
în pagina, orice etichetă din pagină a cărei
ID-ul unic este citat unquote "mai întâi."

1058
00:48:38,800 --> 00:48:41,720
Iar hashtag-ul în acest context,
înseamnă doar "identificator unic."

1059
00:48:41,720 --> 00:48:43,750
Nu-l pune în fișierul HTML.

1060
00:48:43,750 --> 00:48:46,880
Eu, aici, spun doar
citat unquote "mai întâi."

1061
00:48:46,880 --> 00:48:48,470
>> Așa că lasă-mă să reîncărcați.

1062
00:48:48,470 --> 00:48:49,919
Și acum văd, ah, OK.

1063
00:48:49,919 --> 00:48:51,710
Adică, nu e așa
destul, dar este un fel

1064
00:48:51,710 --> 00:48:53,600
de cum ar fi prefața la o
carte sau ceva de genul asta,

1065
00:48:53,600 --> 00:48:55,100
în cazul în care primul paragraf este mai mare.

1066
00:48:55,100 --> 00:48:57,933
Ar putea fi chiar și mai precis, cu
doar primele litere, dar cel puțin

1067
00:48:57,933 --> 00:48:59,110
Am exercitat mai mult control.

1068
00:48:59,110 --> 00:49:04,760
Acum maybe-- poate că vreau să fac acest lucru
ocazional, indiferent de motiv,

1069
00:49:04,760 --> 00:49:09,010
și așa că nu vreau asta
se aplică doar o singură etichetă HTML.

1070
00:49:09,010 --> 00:49:15,110
Mai degrabă, să say-- să
face, de asemenea, următoarele.

1071
00:49:15,110 --> 00:49:18,810
Class = "import".

1072
00:49:18,810 --> 00:49:23,970
Întrucât un ID unic este utilizat pentru a
identifica un singur lucru, o etichetă,

1073
00:49:23,970 --> 00:49:30,190
în pagina de web, o clasă este menit să fie
utilizat pe orice număr de elemente sau tag-uri

1074
00:49:30,190 --> 00:49:30,950
pe pagina web.

1075
00:49:30,950 --> 00:49:31,710
Deci, e de unică folosință.

1076
00:49:31,710 --> 00:49:33,090
Un ID-ul nu este de unică folosință.

1077
00:49:33,090 --> 00:49:34,450
O clasă este de unică folosință.

1078
00:49:34,450 --> 00:49:37,830
>> Și știi ce, pentru orice
reasons-- filosofică

1079
00:49:37,830 --> 00:49:40,180
N-am terminat meu
thought-- am de gând să spun

1080
00:49:40,180 --> 00:49:44,300
că primul paragraf și al
al doilea paragraf sunt importante.

1081
00:49:44,300 --> 00:49:48,600
Așa că am de gând să aplice clasa numită
"Important", că, dacă am salva fișierul meu

1082
00:49:48,600 --> 00:49:51,510
și reîncărcați, nu are nici o
Impactul funcțional încă.

1083
00:49:51,510 --> 00:49:53,780
Dar am adăugat niște
metadate la dosar,

1084
00:49:53,780 --> 00:49:56,610
un fel de ceva separat
din datele de bază ale fișierului,

1085
00:49:56,610 --> 00:50:02,300
astfel încât acum în stylesheet mea, dacă am
în loc să spunem ".important" - știi,

1086
00:50:02,300 --> 00:50:07,110
tot ceea ce este important, sunt
va face font-culoare, red--

1087
00:50:07,110 --> 00:50:09,930
sau mai degrabă nu font-culoare, doar culoarea.

1088
00:50:09,930 --> 00:50:12,930
Nu există neconcordanțe
în CSS, din păcate.

1089
00:50:12,930 --> 00:50:14,120
Și reîncărcați.

1090
00:50:14,120 --> 00:50:17,640
Acum observați prima
două paragrafe sunt roșii

1091
00:50:17,640 --> 00:50:20,880
dar nu și al treilea, pentru că numai eu
aplicată clasei de "importante"

1092
00:50:20,880 --> 00:50:25,020
la primele două din aceste lucruri.

1093
00:50:25,020 --> 00:50:28,030
>> Deci, în ID-uri, aveți posibilitatea
pentru a specifica foarte precis.

1094
00:50:28,030 --> 00:50:30,110
Cu clase, ai reutilizabil.

1095
00:50:30,110 --> 00:50:33,800
Dar, în ambele cazuri, observați
un fel de principiu bun-design

1096
00:50:33,800 --> 00:50:39,072
unde am luat toate din
estetica la dosarul meu. styles.css

1097
00:50:39,072 --> 00:50:40,280
Deci, nu există nici o messiness aici.

1098
00:50:40,280 --> 00:50:44,490
Nu există nici o mențiune de roșu sau
îndrăzneț cu care se confruntă sau dimensiunea fontului în acest fișier.

1099
00:50:44,490 --> 00:50:49,430
Mai degrabă am semantically,
caracterizat prin aceea ca in mod semnificativ datele mele,

1100
00:50:49,430 --> 00:50:51,240
aici este unele date importante.

1101
00:50:51,240 --> 00:50:52,800
Iată câteva date mai importante.

1102
00:50:52,800 --> 00:50:56,500
Mai mult decât atât, aici este
"Primul" datele mele importante.

1103
00:50:56,500 --> 00:51:01,050
Așa că HTML este totul despre un fel
de etichetare, literalmente, cuvinte

1104
00:51:01,050 --> 00:51:05,270
și paragrafe și construcții din contul dvs.
pagina cu aceste indicii mici, dacă vă

1105
00:51:05,270 --> 00:51:07,640
va, că poți
într-un fel de pârghie folosind

1106
00:51:07,640 --> 00:51:10,880
alte tehnici, cum ar fi CSS în acest fel.

1107
00:51:10,880 --> 00:51:14,760
>> Deci, în răspuns la întrebarea Victoria,
putem face text mai mare în acest fel.

1108
00:51:14,760 --> 00:51:18,380
Sunt atât de multe alte moduri, dar
font tag-- paranteză deschis "font" -

1109
00:51:18,380 --> 00:51:19,770
este de fapt vechi de mai mulți ani.

1110
00:51:19,770 --> 00:51:21,410
Și aceasta este problema,
de asemenea, cu bazându-se doar

1111
00:51:21,410 --> 00:51:23,485
pe resources-- on-line
ele tind să fie depășite.

1112
00:51:23,485 --> 00:51:26,110
Și într-adevăr, asta este depreciat,
pentru că lumea a realizat,

1113
00:51:26,110 --> 00:51:28,970
ce inseamna "font-size = 7" înseamnă?

1114
00:51:28,970 --> 00:51:29,670
Nu.

1115
00:51:29,670 --> 00:51:32,770
Și așa de mulți ani și să
aceasta ziua-- una dintre latura

1116
00:51:32,770 --> 00:51:36,060
observă aici este că acesta este de fapt
incredibil de dureros, uneori, încă

1117
00:51:36,060 --> 00:51:38,900
pentru a dezvolta situri pentru
web, deoarece Microsoft

1118
00:51:38,900 --> 00:51:44,220
și Google și Mozilla și
alții de multe ori nu sunt de acord cu privire la modul în care

1119
00:51:44,220 --> 00:51:47,480
pentru a interpreta o specificație cum ar fi HTML.

1120
00:51:47,480 --> 00:51:52,490
>> Există un set de reguli pentru HTML
în general, spune ceea ce înseamnă că fiecare etichetă.

1121
00:51:52,490 --> 00:51:55,690
Dar, uneori, este lăsată în seama
marjă de apreciere de punere în aplicare a lui,

1122
00:51:55,690 --> 00:51:57,290
discreția Microsoft și Google.

1123
00:51:57,290 --> 00:52:00,000
Astfel că nu veți foarte des
a se vedea pe un site ceva

1124
00:52:00,000 --> 00:52:04,954
arată diferit pe un PC
decât o face pe un Mac,

1125
00:52:04,954 --> 00:52:06,995
și asta e într-adevăr, deoarece,
la sfarsitul zilei,

1126
00:52:06,995 --> 00:52:08,891
ei nu l-am testat
bine pe ambele platforme.

1127
00:52:08,891 --> 00:52:11,390
Dar este, de asemenea, pentru că rezonabil,
oameni inteligenți vor fi de acord

1128
00:52:11,390 --> 00:52:14,970
iar companiile nu sunt de acord, și așa mai departe
una dintre provocările programării

1129
00:52:14,970 --> 00:52:16,980
pentru web sau proiectarea
lucruri pentru web

1130
00:52:16,980 --> 00:52:21,700
este scris site-ul dvs. într-un mod
care funcționează pe orice browser web.

1131
00:52:21,700 --> 00:52:23,410
Dar chiar și asta este rezonabil, nu?

1132
00:52:23,410 --> 00:52:27,807
Sunt atât de multe versiuni de atât de multe
browsere acolo, care, la un moment dat,

1133
00:52:27,807 --> 00:52:30,890
trebuie, de asemenea, să facă un apel hotărâre
și va trebui să decidă ca o companie,

1134
00:52:30,890 --> 00:52:33,082
în special pentru e-commerce-stil
site-uri în cazul în care sunteți

1135
00:52:33,082 --> 00:52:36,290
încercând să folosească cele mai recente și mai mare
tehnologii pentru a da un utilizator foarte bun

1136
00:52:36,290 --> 00:52:37,110
experienţă.

1137
00:52:37,110 --> 00:52:41,019
Dar unii procent de utilizatori s-ar putea
fie în continuare folosind Internet Explorer 6 sau 7

1138
00:52:41,019 --> 00:52:43,810
sau 8, în special în funcție de
țară care provin aceștia.

1139
00:52:43,810 --> 00:52:46,760
>> Și așa foarte frecvent
este ceva consultat

1140
00:52:46,760 --> 00:52:50,920
cum ar fi "statisticile browser-ul web."

1141
00:52:50,920 --> 00:52:56,560
Și dacă vom merge sa-- să vedem Wikipedia
și a vedea modul în care până la data de această diagramă este

1142
00:52:56,560 --> 00:52:59,320
dacă există unul.

1143
00:52:59,320 --> 00:53:02,420
Deci, aici puteți vedea
în cazul în care de fapt browsere

1144
00:53:02,420 --> 00:53:06,160
sunt, în conformitate cu decembrie 2015,
potrivit guvernului Statelor Unite.

1145
00:53:06,160 --> 00:53:11,170
Chrome este la cota de piață de 42%, urmat
de IE în mare măsură în setările corporative

1146
00:53:11,170 --> 00:53:14,490
sau setările PC, desigur,
urmat de Firefox,

1147
00:53:14,490 --> 00:53:17,440
apoi Safari, Opera apoi nu a făcut-o
face harta aici pentru un motiv oarecare,

1148
00:53:17,440 --> 00:53:18,210
și apoi alții.

1149
00:53:18,210 --> 00:53:19,500
Poate e sub alții.

1150
00:53:19,500 --> 00:53:27,700
Dar, mai problematică decât este--
Să vedem dacă Wikipedia are, de asemenea,

1151
00:53:27,700 --> 00:53:35,194
versiuni de browsere version--

1152
00:53:35,194 --> 00:53:36,160

1153
00:53:36,160 --> 00:53:39,190
>> Hai să mergem la statisticile browser.

1154
00:53:39,190 --> 00:53:40,680
IE.

1155
00:53:40,680 --> 00:53:42,030
Chiar și asta nu e suficient.

1156
00:53:42,030 --> 00:53:44,854
Statistica de browser.

1157
00:53:44,854 --> 00:53:45,353
Versiunea mea.

1158
00:53:45,353 --> 00:53:48,980

1159
00:53:48,980 --> 00:53:50,540
Asta nu va fi corect.

1160
00:53:50,540 --> 00:53:53,414
Hai să vedem versiuni.

1161
00:53:53,414 --> 00:53:54,830
cota de piață browser-ul.

1162
00:53:54,830 --> 00:53:57,110
Hai să vedem dacă asta vine în sus.

1163
00:53:57,110 --> 00:53:57,610
O.K.

1164
00:53:57,610 --> 00:54:00,010
Acum, acest lucru este obtinerea
un pic mai util.

1165
00:54:00,010 --> 00:54:04,870
Deci, aici, observați că avem toate
versiuni diferite de browsere.

1166
00:54:04,870 --> 00:54:09,887
Si, Doamne, dacă ai look-- Chrome
48, Chrome 47, Chrome 31, Chrome 45.

1167
00:54:09,887 --> 00:54:12,970
Vreau să spun, browsere actualizate din ce în ce,
și, uneori, unele dintre aceste modificări

1168
00:54:12,970 --> 00:54:16,430
sunt semnificative în
termeni de funcționalitate.

1169
00:54:16,430 --> 00:54:20,630
Și așa, la un moment dat,
manageri de produs sau inginerii

1170
00:54:20,630 --> 00:54:23,620
au nevoie pentru a face o decision-- tine
știu ce, doar 1% din lume

1171
00:54:23,620 --> 00:54:24,740
este în continuare folosind IE 7.

1172
00:54:24,740 --> 00:54:25,490
La dracu cu ei.

1173
00:54:25,490 --> 00:54:27,470
pur și simplu nu ne vom
susține că browser-ul.

1174
00:54:27,470 --> 00:54:28,740
Și ce înseamnă să nu sprijine?

1175
00:54:28,740 --> 00:54:31,170
S-ar putea însemna că butoanele
nu funcționează pe pagina web,

1176
00:54:31,170 --> 00:54:33,050
sau ar putea însemna
Formatarea este complet oprit.

1177
00:54:33,050 --> 00:54:35,091
Sau s-ar putea să facă
că același apel hotărâre

1178
00:54:35,091 --> 00:54:39,089
în aceste zile mobile, în cazul în care, suntem
nu va mai sprijini IOS 5.

1179
00:54:39,089 --> 00:54:40,380
Așa că oamenii trebuie doar să faceți upgrade.

1180
00:54:40,380 --> 00:54:45,850
Sau nu ne vom sprijini Cupcake
pe Android sistem de operare pentru dispozitive Android,

1181
00:54:45,850 --> 00:54:48,629
deoarece ca world-- sub numele de
tech vrea mondială să avanseze,

1182
00:54:48,629 --> 00:54:51,170
este un fel de vrea să trageți
lume cu ea, astfel încât acestea să nu facă

1183
00:54:51,170 --> 00:54:53,295
trebuie să continue să fie
înapoi compatibile, astfel încât acestea

1184
00:54:53,295 --> 00:54:54,920
poate oferi caracteristici noi și bune.

1185
00:54:54,920 --> 00:54:57,878
Acesta este într-adevăr unul dintre motivele
de ce atât de multe companii rulare

1186
00:54:57,878 --> 00:55:01,440
actualizări automate și un fel de forțând
cele mai recente versiuni ale software-ului pe noi.

1187
00:55:01,440 --> 00:55:04,010
Și chiar și companii
ca Apple va sorta de

1188
00:55:04,010 --> 00:55:07,280
ai forța aproape sau să oblige
vă în ceea ce privește forțele pieței

1189
00:55:07,280 --> 00:55:11,164
pentru a cumpăra un telefon nou, deoarece ei doar
nu va actualiza vechiul telefon mai.

1190
00:55:11,164 --> 00:55:13,330
Astfel încât să ratați
cele mai recente și cele mai mari caracteristici,

1191
00:55:13,330 --> 00:55:17,520
pentru că este costisitor pentru ei ca
companie pentru a menține mai în vârstă, fără îndoială

1192
00:55:17,520 --> 00:55:19,330
Versiunile inferioare ale software-ului.

1193
00:55:19,330 --> 00:55:23,660
Dar efectul net este că
suferim, de asemenea, acest lucru, de asemenea.

1194
00:55:23,660 --> 00:55:26,550
>> Așa că hai să aruncăm o privire la doar
câteva lucruri finale aici.

1195
00:55:26,550 --> 00:55:29,740
Hai să bat foarte repede unele
aceste alte gloanțe, dacă este curios.

1196
00:55:29,740 --> 00:55:33,440
Așa că, dacă ați încercat să,
de exemplu, poziția

1197
00:55:33,440 --> 00:55:36,420
textul de pe părți diferite ale
pagină, am de gând să fac o modalitate rapidă,

1198
00:55:36,420 --> 00:55:38,360
dar există diferite
moduri de a face acest lucru.

1199
00:55:38,360 --> 00:55:42,610
Lasă-mă să merg mai departe și eliminate--
simplifica acest lucru, după cum urmează.

1200
00:55:42,610 --> 00:55:45,330
Lasă-mă să mă întorc pentru a-mi
, paragrafe simple, simple.

1201
00:55:45,330 --> 00:55:47,760
Lasă-mă să mă întorc la styles.css mea.

1202
00:55:47,760 --> 00:55:51,040
Si eu sunt doar de gând să folosească simple--
pe care le-ar fi văzut pe Google

1203
00:55:51,040 --> 00:55:54,430
sau amintesc de la earlier--
text aliniat dreapta.

1204
00:55:54,430 --> 00:55:56,220
Și reîncărcați această pagină.

1205
00:55:56,220 --> 00:55:58,470
Acum totul pare
să fie aliniate la dreapta,

1206
00:55:58,470 --> 00:56:00,770
după cum s-ar putea vedea pe deasupra capului aici.

1207
00:56:00,770 --> 00:56:04,470
>> Noi putem face sa para un pic mai mult
carte cum ar fi, și putem spune "justifica"

1208
00:56:04,470 --> 00:56:05,640
și reîncărcați.

1209
00:56:05,640 --> 00:56:09,870
Acum este frumos și pătrat pe ambele
părți, care este un fel de frumos.

1210
00:56:09,870 --> 00:56:12,220
Un alt scop pe care am avut-o aici
a fost schimbarea culorii textului.

1211
00:56:12,220 --> 00:56:13,650
Așa că am văzut că cu textul meu roșu.

1212
00:56:13,650 --> 00:56:15,630
Și acum adăugați butoane pentru un formular.

1213
00:56:15,630 --> 00:56:19,390
Deci, de ce nu încercăm să facem exact acest lucru?

1214
00:56:19,390 --> 00:56:23,656
Dar, mai întâi lasă-mă să merg la un site care
majoritatea dintre noi folosim fiecare ziua-- Google.

1215
00:56:23,656 --> 00:56:25,780
Și să aruncăm o privire la
modul în care Google lucrează efectiv.

1216
00:56:25,780 --> 00:56:26,821
Dar, voi face asta.

1217
00:56:26,821 --> 00:56:31,930
Mai întâi lasă-mă să fac in-- Yep,
lasă-mă să merg la Google.

1218
00:56:31,930 --> 00:56:34,530
Voi trebuie să mergeți
în Setări Google,

1219
00:56:34,530 --> 00:56:40,660
pentru că vreau să dezactivați
ceva numit rezultate instantanee.

1220
00:56:40,660 --> 00:56:43,580
>> Așa că s-ar putea fi observat în
Google aceste days-- lasă-mă să mă întorc

1221
00:56:43,580 --> 00:56:44,850
și rândul său, acest lucru mai departe.

1222
00:56:44,850 --> 00:56:47,900
Deci, dacă am începe căutarea
pentru "pisici" ca aceasta,

1223
00:56:47,900 --> 00:56:50,120
observați că nu numai
Primesc auto-complete în sus

1224
00:56:50,120 --> 00:56:54,520
de sus, dintr-o dată, pagina în sine
pare să se schimbe destul de repede, de asemenea,

1225
00:56:54,520 --> 00:56:58,750
și că este Google folosind un limbaj
numita JavaScript încearcă să fie de ajutor.

1226
00:56:58,750 --> 00:57:01,540
Dar, din păcate, este un fel
a incurca discuția noastră

1227
00:57:01,540 --> 00:57:04,010
din ceea ce se întâmplă de fapt
sub capota aici.

1228
00:57:04,010 --> 00:57:09,070
Deci, eu sunt doar un fel de rapid
dezactivați rezultate instantanee.

1229
00:57:09,070 --> 00:57:11,510
Și am de gând să faceți clic pe Salvare.

1230
00:57:11,510 --> 00:57:13,930
Și acum am de gând să deschidă
că bara de instrumente de diagnosticare pe care am

1231
00:57:13,930 --> 00:57:16,150
păstrați deschidere sub fila Rețea.

1232
00:57:16,150 --> 00:57:17,720
Așa că hai să facem acest lucru.

1233
00:57:17,720 --> 00:57:21,960
Lasa mine-- whoops--
derulați în acest jos un pic.

1234
00:57:21,960 --> 00:57:24,410
Și lasă-mă caute pentru "pisici".

1235
00:57:24,410 --> 00:57:26,790
>> Și acum notice-- de fapt,
aceasta este o oportunitate bună

1236
00:57:26,790 --> 00:57:28,840
pentru a discuta pentru un moment.

1237
00:57:28,840 --> 00:57:32,460
Remarcați momentul în care am type---l opresc.

1238
00:57:32,460 --> 00:57:35,250
Încetează.

1239
00:57:35,250 --> 00:57:35,790
O.K.

1240
00:57:35,790 --> 00:57:40,870
Remarcați momentul în care am tastați litera
C, ceas în partea de jos a ecranului.

1241
00:57:40,870 --> 00:57:48,600
A- T S. Ce fund
din acest ecran, fila mea de rețea,

1242
00:57:48,600 --> 00:57:53,320
sugerează se întâmplă în fiecare
timp introduc o scrisoare?

1243
00:57:53,320 --> 00:57:57,700
Din păcate, broasca este foarte
astăzi distrage atenția sau Shamrock

1244
00:57:57,700 --> 00:58:00,339
sau ce este.

1245
00:58:00,339 --> 00:58:01,880
Ceea ce se întâmplă de fiecare dată când am tastat?

1246
00:58:01,880 --> 00:58:04,230
Și să-mi Golește
tampon și introduceți-l din nou.

1247
00:58:04,230 --> 00:58:06,580
Hopa deci--.

1248
00:58:06,580 --> 00:58:13,280
De fiecare dată când am introduce o literă, C- A- T--
astfel încât un nou rând, evident, continuă să apară.

1249
00:58:13,280 --> 00:58:16,530
Ce face fiecare dintre aceste rânduri reprezintă,
bazat pe ceea ce am văzut și discutat

1250
00:58:16,530 --> 00:58:17,339
până aici?

1251
00:58:17,339 --> 00:58:18,130
Audiența: O căutare?

1252
00:58:18,130 --> 00:58:21,770
David J. MALAN: O căutare, sau
mai generic, o solicitare HTTP

1253
00:58:21,770 --> 00:58:23,125
din browser-ul meu de la server.

1254
00:58:23,125 --> 00:58:29,090
Ei bine, de ce este browser-ul meu face un HTTP
să solicite de fiecare dată când introduc o scrisoare?

1255
00:58:29,090 --> 00:58:30,502
>> AUDIENTA: [inaudibil]

1256
00:58:30,502 --> 00:58:33,210
David J. MALAN: Da, dă
mi aceste rezultate auto-complete.

1257
00:58:33,210 --> 00:58:35,190
Cum ar fi, în cazul în care acestea fac
Rezultatele căutării provin de la?

1258
00:58:35,190 --> 00:58:38,120
Ei bine, de fiecare dată când introduc o
scrisoare, Google trimite mai mult

1259
00:58:38,120 --> 00:58:40,460
și mai mult de
cuvântul Sunt tastarea.

1260
00:58:40,460 --> 00:58:41,040
De ce?

1261
00:58:41,040 --> 00:58:44,540
Pentru că ei doresc să-mi dea un
mai bine și mai bine, mai bine sugestie,

1262
00:58:44,540 --> 00:58:48,880
o listă de sugestii, pentru ce cuvânt
Am încercat să efectiv complet.

1263
00:58:48,880 --> 00:58:53,030
Deci, acest lucru este de a spune literalmente fiecare
caractere ce tastați în Google

1264
00:58:53,030 --> 00:58:56,900
este trimis, în cele din urmă în
în vrac, dar, de asemenea, uneori unul

1265
00:58:56,900 --> 00:59:00,620
la un moment dat, în scopul de a pune în aplicare
aceste funcții auto complet atunci când

1266
00:59:00,620 --> 00:59:03,000
datele sunt, desigur, pe web.

1267
00:59:03,000 --> 00:59:08,780
>> Acum, hai să aruncăm o privire la ceea ce de fapt
se întâmplă când fac clic pe Google Search.

1268
00:59:08,780 --> 00:59:10,420
Si atunci vom parghie acest lucru noi înșine.

1269
00:59:10,420 --> 00:59:15,320
Deci, dacă am defila în jos acum la foarte
prima cerere care tocmai sa întâmplat.

1270
00:59:15,320 --> 00:59:17,130
Observați următoarele.

1271
00:59:17,130 --> 00:59:25,550
Acesta a fost trimis la o destul de lungă URL--
https://www.google.com/search?

1272
00:59:25,550 --> 00:59:27,100
și apoi o grămadă de lucruri.

1273
00:59:27,100 --> 00:59:29,620
Hai să vedem acest fapt acum
în tab-ul browser-ul propriu-zis.

1274
00:59:29,620 --> 00:59:31,310
Să scăpăm de bara de instrumente aici.

1275
00:59:31,310 --> 00:59:33,140
Iată pagina cu rezultate ale căutării.

1276
00:59:33,140 --> 00:59:34,790
Și remarcați aici e URL-ul.

1277
00:59:34,790 --> 00:59:37,430
Acum, puteți ghici, probabil,
ce se întâmplă aici, în parte.

1278
00:59:37,430 --> 00:59:39,090
Așa că în primul rând, o definiție.

1279
00:59:39,090 --> 00:59:42,570
Acest lucru aparent este destinația
în cazul în care se depune formularul.

1280
00:59:42,570 --> 00:59:44,910
Așa că, atunci când am introdus manual date în
cuvintele "pisici" și apăsați pe Enter,

1281
00:59:44,910 --> 00:59:48,460
se pare că Google a trimis
de introducere a textului meu la această adresă URL

1282
00:59:48,460 --> 00:59:50,770
pe care l-am evidențiat
acolo, slash de căutare.

1283
00:59:50,770 --> 00:59:56,530
Se pare că, într-o adresă URL, orice
se întâmplă după un semn de întrebare este,

1284
00:59:56,530 --> 01:00:01,270
așa cum tot spun, o pereche de chei-valoare
care a fost introdus în formă sau într-un fel

1285
01:00:01,270 --> 01:00:04,500
transmisă de la
browser-ul la server.

1286
01:00:04,500 --> 01:00:07,180
>> Așa că de fiecare dată când tastați intrare
într-o formă pe web

1287
01:00:07,180 --> 01:00:10,000
și este trimis după cum ne-am
au discutat, printr-o prezentare,

1288
01:00:10,000 --> 01:00:12,400
una dintre acestea virtuale
plicuri, conținutul

1289
01:00:12,400 --> 01:00:15,510
din care envelope-- da, păstrați
obtinerea umplute fizic

1290
01:00:15,510 --> 01:00:19,010
în plicul în clasa
în prezent, dar tehnologic

1291
01:00:19,010 --> 01:00:21,110
este de fapt pus în URL-ul.

1292
01:00:21,110 --> 01:00:22,940
Așa că, de fapt, să-mi trece prin asta.

1293
01:00:22,940 --> 01:00:25,010
Unde vezi datele introduse de utilizator?

1294
01:00:25,010 --> 01:00:27,490
Unde vezi ceva
că m-am scris aici?

1295
01:00:27,490 --> 01:00:32,100

1296
01:00:32,100 --> 01:00:33,491
Da, "pisici."

1297
01:00:33,491 --> 01:00:33,990
Dreapta?

1298
01:00:33,990 --> 01:00:36,380
Așa că lasă-mă să distileze acest lucru
în ceva mai simplu.

1299
01:00:36,380 --> 01:00:39,917
Voi șterge totul despre
această adresă URL pe care eu nu înțeleg,

1300
01:00:39,917 --> 01:00:42,250
și eu sunt doar de gând să plece
l ca astea-- / search? q = pisici.

1301
01:00:42,250 --> 01:00:45,640

1302
01:00:45,640 --> 01:00:47,890
Vom vedea unde q
vine de la un moment,

1303
01:00:47,890 --> 01:00:51,220
dar care se simte ca minimul
cantitate de informații pe care am furnizat.

1304
01:00:51,220 --> 01:00:53,050
Și acum am de gând să lovi Enter.

1305
01:00:53,050 --> 01:00:55,520
Și observați încă mai funcționează.

1306
01:00:55,520 --> 01:00:57,950
Noi încă ne întoarcem o grămadă de pisici.

1307
01:00:57,950 --> 01:01:00,340
Așa că Google este crescatorul
decât aceasta în aceste zile.

1308
01:01:00,340 --> 01:01:01,934
Este 2016, nu 1999.

1309
01:01:01,934 --> 01:01:04,600
Deci, nu există alte lucruri pe care mi
Browser-ul trimite la server.

1310
01:01:04,600 --> 01:01:07,100
Dar acest lucru este minim
tot ceea ce este necesar.

1311
01:01:07,100 --> 01:01:08,380
>> Deci ce se întâmplă?

1312
01:01:08,380 --> 01:01:14,320
Ei bine, mai întâi lasă-mă să merg mai departe și du-te
înapoi la Cloud9 și lasă-mă să merg mai departe

1313
01:01:14,320 --> 01:01:15,620
și închideți filele mele anterioare.

1314
01:01:15,620 --> 01:01:18,230
Iar eu voi face acest lucru pe meu
proprii doar pentru un moment.

1315
01:01:18,230 --> 01:01:20,730
Mă duc să merg mai departe
și de a crea fișier nou.

1316
01:01:20,730 --> 01:01:23,739
Și mă duc să-l salvați ca google.html.

1317
01:01:23,739 --> 01:01:26,280
Si voi foarte quickly--
Mă duc să fur, de fapt,

1318
01:01:26,280 --> 01:01:28,510
o parte din acest text doar pentru a economisi timp.

1319
01:01:28,510 --> 01:01:30,610
Am de gând să lipiți asta aici.

1320
01:01:30,610 --> 01:01:33,850
Nu am de gând să deranjez cu
orice stilizare acest moment.

1321
01:01:33,850 --> 01:01:38,340
Noi vom numi acest "My Google."

1322
01:01:38,340 --> 01:01:41,230
Și mă duc să scap
din tot în organism.

1323
01:01:41,230 --> 01:01:42,740
Si eu voi face următoarele.

1324
01:01:42,740 --> 01:01:45,690
Lasă-mă să măriți.

1325
01:01:45,690 --> 01:01:50,620
Forma action-- și după cum am menționat pe scurt
earlier-- whoops-- ca am pe scurt

1326
01:01:50,620 --> 01:01:54,130
menționat mai devreme, acțiunea unui
Formularul este locul unde trimiteți datele.

1327
01:01:54,130 --> 01:01:56,620
Așa că google.com/search.

1328
01:01:56,620 --> 01:01:59,390
Și metoda vreau să folosesc
poate fi una din cele două lucruri.

1329
01:01:59,390 --> 01:02:02,870
Acesta poate fi fie "get", după cum ne păstrăm
discuta, sau poate fi "post."

1330
01:02:02,870 --> 01:02:05,340
Deocamdată, fundamentale
diferența este, dacă utilizați "get"

1331
01:02:05,340 --> 01:02:09,590
toate informa iile pe care
utilizatorul afișează este trimis în adresa URL.

1332
01:02:09,590 --> 01:02:13,530
>> Care este mare pentru lucruri cum ar fi căutare
motoare și alte câteva aplicații,

1333
01:02:13,530 --> 01:02:17,080
dar în ce condiții
nu doriți să completați un formular

1334
01:02:17,080 --> 01:02:21,620
și au informațiile sfarsesc
URL-ul, la fel ca în bara de adrese a browserului dvs.?

1335
01:02:21,620 --> 01:02:25,470

1336
01:02:25,470 --> 01:02:26,605
Ce fel de formulare do Tu--

1337
01:02:26,605 --> 01:02:27,480
AUDIENTA: [inaudibil]

1338
01:02:27,480 --> 01:02:28,450
David J. MALAN: Da, cum ar fi ce?

1339
01:02:28,450 --> 01:02:29,270
AUDIENTA: parole.

1340
01:02:29,270 --> 01:02:31,936
David J. MALAN: Da, deci log
în Facebook sau unele site-ul.

1341
01:02:31,936 --> 01:02:34,395
Asta e de la intrare de utilizator
o formă, o casetă de text,

1342
01:02:34,395 --> 01:02:37,020
dar tu, probabil, nu vrei
afișarea în URL-ul browser-ului.

1343
01:02:37,020 --> 01:02:38,121
De ce?

1344
01:02:38,121 --> 01:02:40,870
Adică, poate că există unele
implicații de securitate în rețea,

1345
01:02:40,870 --> 01:02:44,830
dar more-- ca, mai simplu, ce se întâmplă dacă
colegul tău de cameră, celălalt dvs. semnificative,

1346
01:02:44,830 --> 01:02:47,710
copiii dumneavoastră, soțul tău arată
prin istoria browser-ul dvs.?

1347
01:02:47,710 --> 01:02:50,762
Există, dreptul de parolă
acolo, în istoria browser-ului.

1348
01:02:50,762 --> 01:02:52,220
Care nu se simte ca un design bun.

1349
01:02:52,220 --> 01:02:54,500
Sau chiar mai punct de vedere tehnic,
să presupunem că încerci

1350
01:02:54,500 --> 01:02:59,180
pentru a încărca o fotografie pe Flickr
sau Facebook sau wherever--

1351
01:02:59,180 --> 01:03:03,010
care este introdus de utilizator, chiar dacă
este un pic mai mult interesting-- cum

1352
01:03:03,010 --> 01:03:05,530
pot ghiftui o imagine în bara de adrese URL?

1353
01:03:05,530 --> 01:03:06,730
Sunteți un fel de tip nu se poate.

1354
01:03:06,730 --> 01:03:07,396
Te cam poți.

1355
01:03:07,396 --> 01:03:10,210
Dar, într-adevăr, eu sunt greu de presat
să-și imagineze a face asta.

1356
01:03:10,210 --> 01:03:13,470
Așa că am nevoie de o altă metodă pentru
încărcarea fotografiilor pe un site web,

1357
01:03:13,470 --> 01:03:15,657
și că o altă metodă se numește "post."

1358
01:03:15,657 --> 01:03:18,740
Dar, pentru moment, vom vorbi doar despre
"Get", care este cel mai simplu dintre cele două.

1359
01:03:18,740 --> 01:03:21,100
Pur și simplu pune toate
datele introduse de utilizator în URL-ul.

1360
01:03:21,100 --> 01:03:22,830
>> Deci, aici e formularul Creez.

1361
01:03:22,830 --> 01:03:24,070
Vreau o intrare.

1362
01:03:24,070 --> 01:03:24,820
Si tu ce știi?

1363
01:03:24,820 --> 01:03:26,111
Mă duc să iau o presupunere aici.

1364
01:03:26,111 --> 01:03:31,600
Mă duc să-mi amintesc
intrare "q" pentru "interogare."

1365
01:03:31,600 --> 01:03:34,970
Și cred că acest lucru este unul dintre cele mai
desene sau modele originale, probabil, din 1999.

1366
01:03:34,970 --> 01:03:39,560
Apoi tipul de această intrare
este doar de gând să fie "text".

1367
01:03:39,560 --> 01:03:43,040
Și apoi voi avea o altă intrare
care nu are nevoie de un nume, cum vom mai curând

1368
01:03:43,040 --> 01:03:45,120
a se vedea, tipul de care este "submit".

1369
01:03:45,120 --> 01:03:47,070
Și acest lucru se va
da-mi un buton special.

1370
01:03:47,070 --> 01:03:48,320
Si asta e.

1371
01:03:48,320 --> 01:03:50,790
>> Așa că lasă-mă să merg mai departe și salvați acest fișier.

1372
01:03:50,790 --> 01:03:54,910
Mă duc să mă întorc pentru a-mi
browser-ul și du-te la google.html.

1373
01:03:54,910 --> 01:03:56,140
Introduce.

1374
01:03:56,140 --> 01:03:59,680
Și este un fel de rare
cel putin.

1375
01:03:59,680 --> 01:04:03,110
Dar, lasă-mă să merg mai departe
și căutați "pisici."

1376
01:04:03,110 --> 01:04:06,510
Și observați că sunt în prezent
la această adresă URL Cloud9.

1377
01:04:06,510 --> 01:04:09,240
Dar momentul în care am clic pe asta,
unde crezi sper că voi sfârși?

1378
01:04:09,240 --> 01:04:10,160
>> AUDIENTA: Google.

1379
01:04:10,160 --> 01:04:11,118
>> David J. MALAN: Google.

1380
01:04:11,118 --> 01:04:12,740
Așa că să faceți clic pe Trimite.

1381
01:04:12,740 --> 01:04:15,200
Și, într-adevăr, am re-puse în aplicare Google.

1382
01:04:15,200 --> 01:04:15,700
Dreapta?

1383
01:04:15,700 --> 01:04:16,480
Este mai simplu.

1384
01:04:16,480 --> 01:04:17,120
Este mai ușor.

1385
01:04:17,120 --> 01:04:20,350
Vreau să spun, codul meu este în mod clar mai bine decât
al lor, din mizeria am văzut mai devreme.

1386
01:04:20,350 --> 01:04:21,100
Si tu ce știi?

1387
01:04:21,100 --> 01:04:22,610
Mă duc să condimenteze asta un pic.

1388
01:04:22,610 --> 01:04:23,860
Nu am menționat acest lucru mai devreme.

1389
01:04:23,860 --> 01:04:27,860
Nu există tag-uri, cum ar fi H1, pentru rubrica 1,
cea mai importantă poziție într-o pagină.

1390
01:04:27,860 --> 01:04:30,570
"My Google" O să sun asta.

1391
01:04:30,570 --> 01:04:31,940
Lasă-mă să reîncărcați.

1392
01:04:31,940 --> 01:04:33,772
Este în căutarea un pic mai bine deja.

1393
01:04:33,772 --> 01:04:34,980
Si, de fapt, tu ce știi?

1394
01:04:34,980 --> 01:04:36,430
Am already-- am mințit.

1395
01:04:36,430 --> 01:04:40,200
Am spus că nu am fost de gând să stil acest lucru,
dar am de gând să stil asta ca inainte.

1396
01:04:40,200 --> 01:04:46,860
Iar trupul meu va fi,
să zicem, centru de text-align.

1397
01:04:46,860 --> 01:04:48,800
Se caută mai mult cum ar fi Google deja.

1398
01:04:48,800 --> 01:04:51,090
>> Am nevoie de o pauză de linie, totuși,
pentru că butonul Submit.

1399
01:04:51,090 --> 01:04:52,798
Și se pare, tu
pot utiliza paragrafe,

1400
01:04:52,798 --> 01:04:57,320
sau poti mai mult literalmente spune doar,
da-mi o linie de pauza aici-- tag-ul br.

1401
01:04:57,320 --> 01:04:59,319
Și, dacă reîncarcă, acum merge acolo.

1402
01:04:59,319 --> 01:05:01,610
E un pic urât, așa că am
ar putea face mai multe pauze de linie,

1403
01:05:01,610 --> 01:05:03,310
dar să nu te prea lacomi aici.

1404
01:05:03,310 --> 01:05:06,430
Așa că acum să vedem dacă merge pentru "câini".

1405
01:05:06,430 --> 01:05:08,640
Pare să lucreze pentru "câini", la fel de bine.

1406
01:05:08,640 --> 01:05:10,780
Deci, ce-i MENIUL convingătoare aici?

1407
01:05:10,780 --> 01:05:13,600
Nu a fost un Unu salt uriaș
introduce mai multe câteva tag-uri,

1408
01:05:13,600 --> 01:05:15,370
cum ar fi sub formă tag-ul în tag-ul de intrare.

1409
01:05:15,370 --> 01:05:17,120
Dar, în mod fundamental,
este, tot ce facem

1410
01:05:17,120 --> 01:05:20,610
parghie este înțelegerea noastră
HTTP și faptul

1411
01:05:20,610 --> 01:05:24,900
care se formează în cele din urmă să modifice
ceea ce este în adresa URL a browser-ului,

1412
01:05:24,900 --> 01:05:28,540
și așa mai departe, prin urmare, putem
furnizează mecanic de intrare la un server

1413
01:05:28,540 --> 01:05:33,600
prin a face un formular HTML și cunoașterea
că serverul HTTP înțelege,

1414
01:05:33,600 --> 01:05:36,890
ca doar corpul nostru o înțelege, cum ar fi,
tremura mâna mea, că același protocol,

1415
01:05:36,890 --> 01:05:40,920
și așa ne întoarcem răspunsul
că ne așteptăm ca în cele din urmă.

1416
01:05:40,920 --> 01:05:44,050
>> Așa că hai să încercăm să facem o
ultimul lucru pe care acum cu telefonul mobil,

1417
01:05:44,050 --> 01:05:47,052
și voi make-- voi adăuga
acest cod pentru slide-uri.

1418
01:05:47,052 --> 01:05:49,760
Așa că, dacă doriți să se joace, tu
poate lua cu siguranță de acolo.

1419
01:05:49,760 --> 01:05:51,551
Dar am de gând să merg
înainte și de a face un singur lucru.

1420
01:05:51,551 --> 01:05:54,120
Mă duc să merg mai departe și
deschide indexul meu page--

1421
01:05:54,120 --> 01:05:59,030
pagina mea de salut ca și mai înainte, care
are o mulțime de acest text faux-latin,

1422
01:05:59,030 --> 01:06:05,470
sau text latin fără sens, și has--
se pare ca acest lucru la această dimensiune a fontului.

1423
01:06:05,470 --> 01:06:07,850
Dar, lasă-mă să merg mai departe și fac acest lucru.

1424
01:06:07,850 --> 01:06:09,300
Mă duc să intru în Cloud9.

1425
01:06:09,300 --> 01:06:10,380
Și tu nu trebuie să faci acest pas.

1426
01:06:10,380 --> 01:06:11,420
O să o fac doar eu.

1427
01:06:11,420 --> 01:06:12,890
Am de gând să faceți clic pe Partajare.

1428
01:06:12,890 --> 01:06:15,170
Si aceasta este o caracteristică
doar de Cloud9, prin care

1429
01:06:15,170 --> 01:06:17,710
Pot face publice mediul meu.

1430
01:06:17,710 --> 01:06:20,240
>> Și doar de dragul
demonstrație, lasă-mă să fac asta.

1431
01:06:20,240 --> 01:06:22,870
Mă duc să fac publice cererea mea.

1432
01:06:22,870 --> 01:06:25,230
Observați că mă avertizează, am
Eu sigur că vreau să fac acest lucru,

1433
01:06:25,230 --> 01:06:28,438
pentru că acest lucru va face toată lumea
în lume, indiferent dacă acestea sunt aici acum

1434
01:06:28,438 --> 01:06:33,560
sau vizionarea video mai târziu, pe
internet pentru a putea vedea ceea ce văd eu.

1435
01:06:33,560 --> 01:06:34,440
Dar asta e în regulă.

1436
01:06:34,440 --> 01:06:37,870
Am de gând să spun "Done".

1437
01:06:37,870 --> 01:06:42,080
Și lasă-mă să te încurajeze, dacă am făcut-o
acest correctly-- lasa-ma sa-l testeze mai întâi.

1438
01:06:42,080 --> 01:06:45,590
Du-te mai departe, dacă nu mind--
într-un browser de pe computer,

1439
01:06:45,590 --> 01:06:49,900
du-te la această adresă URL, și sperăm
veți vedea textul meu latin.

1440
01:06:49,900 --> 01:06:52,820
Și ca să fie clar, este
nu rulează pe laptop-ul meu.

1441
01:06:52,820 --> 01:06:53,610
Este în nor.

1442
01:06:53,610 --> 01:06:58,120
Este pe Cloud9, literalmente, dar
Am făcut public meu spațiu de lucru

1443
01:06:58,120 --> 01:07:03,450
astfel încât oricine de pe internet
pot accesa pagina mea de start latină.

1444
01:07:03,450 --> 01:07:07,209
>> Du-te la aceeași adresă URL
telefonul, dacă ai putea.

1445
01:07:07,209 --> 01:07:09,750
În cazul în care va costa, deși,
se pot uita doar peste un umăr.

1446
01:07:09,750 --> 01:07:40,688

1447
01:07:40,688 --> 01:07:42,467
AUDIENTA: [inaudibil]

1448
01:07:42,467 --> 01:07:43,550
David J. MALAN: Îmi pare rău?

1449
01:07:43,550 --> 01:07:45,390
AUDIENTA: [inaudibil]

1450
01:07:45,390 --> 01:07:47,710
David J. MALAN: Doar cuvinte latine.

1451
01:07:47,710 --> 01:07:48,210
Asta e tot.

1452
01:07:48,210 --> 01:07:49,250
Dar asta e ceea ce ar trebui să vedeți.

1453
01:07:49,250 --> 01:07:49,875
>> AUDIENTA: Da.

1454
01:07:49,875 --> 01:07:50,790
David J. MALAN: Da.

1455
01:07:50,790 --> 01:07:51,300
Da.

1456
01:07:51,300 --> 01:07:51,540
O.K.

1457
01:07:51,540 --> 01:07:53,530
Pot să rezista ta
telefon pentru o clipă?

1458
01:07:53,530 --> 01:07:57,504
Așa că, să sperăm, dacă accesați
aceasta, ar trebui să arate aproape imposibil de citit.

1459
01:07:57,504 --> 01:07:59,920
E still-- Vreau să spun, că e
imposibil de citit din cauza latină.

1460
01:07:59,920 --> 01:08:01,920
Dar este, de asemenea, nu poate fi citit
pentru ce alt motiv?

1461
01:08:01,920 --> 01:08:03,775
Cum ar fi, ce displeases despre asta?

1462
01:08:03,775 --> 01:08:04,650
AUDIENTA: Este mic.

1463
01:08:04,650 --> 01:08:06,420
David J. MALAN: Este super, super mici.

1464
01:08:06,420 --> 01:08:07,920
Deci, cum am putea rezolva această problemă?

1465
01:08:07,920 --> 01:08:09,730
Este super, super-mici
pe telefonul Victoria

1466
01:08:09,730 --> 01:08:11,400
și, dacă le-ați tras
-l singur, probabil,

1467
01:08:11,400 --> 01:08:14,660
mici de pe telefon, de asemenea, dacă nu
au setări de accesibilitate activate.

1468
01:08:14,660 --> 01:08:15,530
Ce e aia?

1469
01:08:15,530 --> 01:08:18,497
Ai putea doar să prindeți și
zoom-ul, care este fezabil,

1470
01:08:18,497 --> 01:08:20,330
dar atunci vezi numai
câteva cuvinte la un moment dat.

1471
01:08:20,330 --> 01:08:20,859
Stai un minut.

1472
01:08:20,859 --> 01:08:21,720
Știu cum să se stabilească acest lucru.

1473
01:08:21,720 --> 01:08:22,219
Dreapta?

1474
01:08:22,219 --> 01:08:26,130
Aș putea folosi CSS și am putea schimba
dimensiunea fontului de la 12 puncte la 24 de puncte.

1475
01:08:26,130 --> 01:08:29,020
Dar efectul secundar al că,
desigur, va fi acum,

1476
01:08:29,020 --> 01:08:32,630
pe un desktop sau un laptop,
acum textul este de două ori mai mare.

1477
01:08:32,630 --> 01:08:35,810
Și așa ar fi un fel de frumos
să se facă distincția între dispozitive,

1478
01:08:35,810 --> 01:08:37,840
și se pare că acolo
sunt moduri de a face asta.

1479
01:08:37,840 --> 01:08:39,590
Sunt câteva
moduri diferite, de fapt,

1480
01:08:39,590 --> 01:08:44,189
prin utilizarea CSS și caracteristici fancier
că nu vom intra în în detaliu,

1481
01:08:44,189 --> 01:08:46,960
puteți interoga în esență
browser-ul și spune,

1482
01:08:46,960 --> 01:08:51,550
în cazul în care ecranul este mai mic decât valoarea
mulți pixeli, utilizați această dimensiune font.

1483
01:08:51,550 --> 01:08:55,180
În cazul în care ecranul este mai mare decât acest
mulți pixeli, folosiți această altă dimensiune a fontului.

1484
01:08:55,180 --> 01:08:57,080
>> Poți fi chiar columbofil încă.

1485
01:08:57,080 --> 01:09:00,140
Dacă v-ați vizitat vreodată un
pagina web, care, pe un desktop,

1486
01:09:00,140 --> 01:09:04,404
are un meniu mare poate off la
parte, și apoi toate conținut

1487
01:09:04,404 --> 01:09:07,029
este de partea care menu--
asta e un fel de paradigmă comună.

1488
01:09:07,029 --> 01:09:09,670
Meniu pe stânga, conținut
pe dreapta, sau vice-versa.

1489
01:09:09,670 --> 01:09:13,569
Nu funcționează cu adevărat pe mobil atunci când vă
Ecranul este doar atât de mulți pixeli.

1490
01:09:13,569 --> 01:09:16,233
Așa că mai frecvente pe telefonul mobil este,
meniul va primi dintr-o dată

1491
01:09:16,233 --> 01:09:18,399
sa prăbușit, și trebuie să
faceți clic pe un buton pentru a vedea,

1492
01:09:18,399 --> 01:09:22,404
sau site-ul va pune meniul
deasupra și pune conținutul de dedesubt.

1493
01:09:22,404 --> 01:09:24,779
Și aveți posibilitatea să pună în aplicare aceste
lucrurile în mai multe moduri, de asemenea.

1494
01:09:24,779 --> 01:09:28,340
Puteți cere, programatori,
hei, echipa, în orice moment

1495
01:09:28,340 --> 01:09:34,450
vedeți o cerere HTTP de la un dispozitiv Android
dispozitiv, un dispozitiv de Microsoft, un Google

1496
01:09:34,450 --> 01:09:39,930
dispozitiv, un dispozitiv Apple, utilizați acest
dimensiunea fontului și de a folosi acest aspect meniu,

1497
01:09:39,930 --> 01:09:42,670
sau altfel utiliza aspect acest implicit mai mare.

1498
01:09:42,670 --> 01:09:45,410
>> Acum, folosind ceea ce
tehnica fundamentală astăzi

1499
01:09:45,410 --> 01:09:48,529
ar putea folosi inginerii
pentru a ști dacă este

1500
01:09:48,529 --> 01:09:53,660
un iPhone, un telefon Android, un laptop,
un desktop vizita serverul companiei?

1501
01:09:53,660 --> 01:09:55,310
Care nu primesc aceste informații?

1502
01:09:55,310 --> 01:09:56,080
>> AUDIENTA: Header?

1503
01:09:56,080 --> 01:09:57,740
>> David J. MALAN: Da, antetul HTTP.

1504
01:09:57,740 --> 01:10:01,714
Deci, în fiecare cerere HTTP care vine de la
clienții lor la serverele lor

1505
01:10:01,714 --> 01:10:03,880
includ, în interiorul acelui virtuale
plic, un întreg buchet

1506
01:10:03,880 --> 01:10:08,260
antetelor HTTP, unul dintre care este
browser-ul și sistemul de operare

1507
01:10:08,260 --> 01:10:10,290
chiar, în cazul în care aveți grijă să
acel nivel de detaliu.

1508
01:10:10,290 --> 01:10:13,790
Acum, este un șir criptic aspect, dar
există software care va doar

1509
01:10:13,790 --> 01:10:18,530
simplifica asta și vă puteți cere
in programare PHP code--, Java, C ++,

1510
01:10:18,530 --> 01:10:23,650
whatever-- ce telefon este astea--
ce dispozitiv este acest utilizator folosind?

1511
01:10:23,650 --> 01:10:27,501
Si atunci se poate spune, arată-le acest lucru
versiune a site-ului, dacă este un telefon.

1512
01:10:27,501 --> 01:10:30,250
Arătați-le această versiune a
site-ul în cazul în care este un laptop sau desktop.

1513
01:10:30,250 --> 01:10:32,316
Dar tu nici măcar nu au nevoie
complexitate server-side.

1514
01:10:32,316 --> 01:10:33,940
Puteți face o chiar și cele mai simple lucruri.

1515
01:10:33,940 --> 01:10:34,815
>> Voi face asta.

1516
01:10:34,815 --> 01:10:38,995
Mă duc să merg mai departe în
mediul meu Cloud9,

1517
01:10:38,995 --> 01:10:41,370
și am de gând să adăugați o etichetă
pe care l-ai văzut în Google înainte.

1518
01:10:41,370 --> 01:10:42,770
Se numește metatag.

1519
01:10:42,770 --> 01:10:45,520
Si nu-mi amintesc asta, așa că
Mă duc să-l transcriu aici.

1520
01:10:45,520 --> 01:10:50,552
meta name = "portul de vizualizare" și apoi
content = "width = lățimea dispozitivului, intital

1521
01:10:50,552 --> 01:11:02,060
scală = 1 "și asta este.

1522
01:11:02,060 --> 01:11:06,230
>> Așa că s-ar putea fi la fel de bine
ca o incantație magică.

1523
01:11:06,230 --> 01:11:11,300
Nu e tot ce clar, dar acest lucru are
ceva de-a face cu portul de vizualizare,

1524
01:11:11,300 --> 01:11:15,070
iar portul de vizualizare este doar corpul unui
pagina de web, regiunea dreptunghiulară care

1525
01:11:15,070 --> 01:11:16,690
definește cea mai mare parte a paginii.

1526
01:11:16,690 --> 01:11:19,060
Și acesta este doar a spune
browser-ul, știi ce?

1527
01:11:19,060 --> 01:11:22,589
Asigurați-vă lățimea paginii
efectiv egală cu lățimea dispozitivului.

1528
01:11:22,589 --> 01:11:25,380
Cu alte cuvinte, nu presupune că
aveți un fel de spațiu nelimitat.

1529
01:11:25,380 --> 01:11:29,920
Să presupunem că aveți doar la fel de mult
spațiu ca dispozitivul în sine este mare.

1530
01:11:29,920 --> 01:11:34,454
Și așa acum, dacă reîncarcă
în browser-ul meu, nu văd nici o schimbare.

1531
01:11:34,454 --> 01:11:37,370
Dar, dacă am făcut acest lucru și correctly--
lasă-mă să trec fingers-- mea, dacă voi toți

1532
01:11:37,370 --> 01:11:42,920
reîncărcați telefoanele, nu-i
a se vedea o schimbare convingătoare?

1533
01:11:42,920 --> 01:11:43,620
Da, este that--

1534
01:11:43,620 --> 01:11:45,067
>> AUDIENTA: [inaudibil]

1535
01:11:45,067 --> 01:11:45,900
David J. MALAN: Da.

1536
01:11:45,900 --> 01:11:46,400
O.K.

1537
01:11:46,400 --> 01:11:47,850
Așa că, fără îndoială, mai ușor de citit acum?

1538
01:11:47,850 --> 01:11:53,070
Încă mici, pentru a fi corect, dar nu
atât de mic încât să fie imposibil de gestionat.

1539
01:11:53,070 --> 01:11:56,920
Și aș putea înlocui cu siguranță acest lucru
în continuare cu CSS sau pe partea de server,

1540
01:11:56,920 --> 01:12:00,120
dar din ce în ce ceea ce ești
văzând este tot mai multe caracteristici

1541
01:12:00,120 --> 01:12:02,900
fiind adăugate
environments-- client-side

1542
01:12:02,900 --> 01:12:06,530
JavaScript, așa cum vom discuta
mâine, CSS, si HTML-- asa

1543
01:12:06,530 --> 01:12:09,190
că toate aceste cereri
se poate face pe client

1544
01:12:09,190 --> 01:12:11,910
astfel încât să se deranjeze
server de mult mai puțin și nu

1545
01:12:11,910 --> 01:12:14,530
să trebuie să țină pasul cu, pentru
exemplu, atacul constant

1546
01:12:14,530 --> 01:12:17,210
din nou sistem de operare
versiuni, noi versiuni de browser.

1547
01:12:17,210 --> 01:12:20,190
Puteți lăsa pur și simplu browser-ul
întrebați aparatul, cât de mare ești,

1548
01:12:20,190 --> 01:12:22,890
și apoi face oarecum logic
decizii bazate pe asta.

1549
01:12:22,890 --> 01:12:25,140
Dar vom vedea mai multe oportunități
pentru decizii logice

1550
01:12:25,140 --> 01:12:27,223
mâine, în contextul
a unui limbaj de programare.

1551
01:12:27,223 --> 01:12:29,800

1552
01:12:29,800 --> 01:12:32,760
>> Așa că, orice întrebări, atunci,
pe web development?

1553
01:12:32,760 --> 01:12:36,130
Astăzi nu este programare web, pe
se, din moment ce majoritatea tot ceea ce am făcut-o

1554
01:12:36,130 --> 01:12:38,370
a fost foarte estetic, dacă vreți.

1555
01:12:38,370 --> 01:12:41,750
Nu există nici o luare a deciziilor în
codul pe care l-am scris,

1556
01:12:41,750 --> 01:12:44,990
și așa mai departe de aceea HTML este un marcaj
limbă, nu un limbaj de programare.

1557
01:12:44,990 --> 01:12:47,140
Dar, mâine vom lua
o privire rapidă, în cele din urmă,

1558
01:12:47,140 --> 01:12:49,340
la JavaScript, care este
o programare reală

1559
01:12:49,340 --> 01:12:54,220
un limbaj care ne permite să facem un pic mai mult.

1560
01:12:54,220 --> 01:12:56,800
>> Alte intrebari?

1561
01:12:56,800 --> 01:13:00,480
Ei bine, lasă-mă să propun două
oportunități opționale pentru temele.

1562
01:13:00,480 --> 01:13:02,900
Una este-- aceste Cloud9
conturi nu vor expira.

1563
01:13:02,900 --> 01:13:04,669
Sunteți binevenit să utilizați
le să se joace cu.

1564
01:13:04,669 --> 01:13:05,960
Este nivelul liber al serviciului.

1565
01:13:05,960 --> 01:13:08,754
Dau seama că, în cazul în care atunci când crearea
spațiul de lucru, ați făcut-o publică,

1566
01:13:08,754 --> 01:13:11,670
asta înseamnă că orice persoană de pe
Internet poate vedea ceea ce tastați.

1567
01:13:11,670 --> 01:13:15,104
Deci, poate doar ia în considerare
nu te jenant

1568
01:13:15,104 --> 01:13:18,020
dacă vă pune primul web
pagină acolo în mod public în mod accidental,

1569
01:13:18,020 --> 01:13:20,134
dar nimeni nu va
știu să se uite acolo, oricum.

1570
01:13:20,134 --> 01:13:23,760
>> Și two-- lasă-mă să arunce
up această adresă URL, de asemenea,

1571
01:13:23,760 --> 01:13:28,250
mai ales dacă ați venit astăzi
mai puțin confortabilă decât altele,

1572
01:13:28,250 --> 01:13:30,430
sigur ce înseamnă toate aceste lucruri.

1573
01:13:30,430 --> 01:13:36,780
Dau seama că mult mai mult din acest film,
care este în același timp o modalitate buna de a adormi

1574
01:13:36,780 --> 01:13:39,380
și, de asemenea, să râdă în timp ce
Procedând astfel, de asemenea, are

1575
01:13:39,380 --> 01:13:44,300
o mulțime de societally interesante
și discuții de securitate relevante

1576
01:13:44,300 --> 01:13:47,370
în aceasta din John Oliver,
chiar comic.

1577
01:13:47,370 --> 01:13:55,456
>> Dar, dacă nu există alte întrebări,
care ne aduce la recepție.

1578
01:13:55,456 --> 01:13:56,830
Deci, de ce nu pornesc muzica.

1579
01:13:56,830 --> 01:13:58,610
Ar trebui să existe băuturi
și gustări din afara.

1580
01:13:58,610 --> 01:14:00,220
Sunt fericit să se amestece pentru ca
atâta timp cât oameni ar dori,

1581
01:14:00,220 --> 01:14:01,600
răspundă la mai multe întrebări unu-la-unu.

1582
01:14:01,600 --> 01:14:03,330
Dar, în caz contrar, esti binevenit
să decoleze în orice moment,

1583
01:14:03,330 --> 01:14:05,740
și ne vom vedea din nou
mâine dimineață pentru un pic mai mult.

1584
01:14:05,740 --> 01:14:07,290
Bine, mulțumesc.

1585
01:14:07,290 --> 01:14:10,428