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

2
00:00:00,127 --> 00:00:01,210
DAVID J. Malan: Està bé.

3
00:00:01,210 --> 00:00:02,160
Hem tornat.

4
00:00:02,160 --> 00:00:05,810
Per tant, l'objectiu d'aquesta sessió final
és introduir uns quants conceptes

5
00:00:05,810 --> 00:00:09,290
sinó també donar a tothom l'oportunitat
per estirar la classe dels dits

6
00:00:09,290 --> 00:00:11,270
i en realitat fer alguna cosa
una mica de pràctica.

7
00:00:11,270 --> 00:00:13,897
L'objectiu no és convertir
tots nosaltres en els desenvolupadors web

8
00:00:13,897 --> 00:00:16,230
per qualsevol mitjà, però en realitat només
per donar-li un gust d'alguns

9
00:00:16,230 --> 00:00:21,750
dels constructes fonamentals del que
entra a la programació web i avui Web

10
00:00:21,750 --> 00:00:23,980
el desenvolupament, de manera que la
costat estàtic de coses--

11
00:00:23,980 --> 00:00:26,660
sense lògica, sense necessitat de programació
idioma, simplement el contingut estàtic.

12
00:00:26,660 --> 00:00:29,660
I ens donarà una oportunitat
per veure realment el que és un servidor web,

13
00:00:29,660 --> 00:00:34,140
veure el que és un arxiu HTML, veure què
HTTP és en realitat està servint.

14
00:00:34,140 --> 00:00:38,600
Però abans de submergir-se en qualsevol retrospectiva
preguntes sobre la computació en núvol

15
00:00:38,600 --> 00:00:43,922
o la seguretat o qualsevol altra cosa?

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

17
00:00:44,890 --> 00:00:47,181
Està bé, bé, anem a
fer això, per si de cas

18
00:00:47,181 --> 00:00:49,680
el procés d'inscriure en
cosa que porta uns pocs minuts.

19
00:00:49,680 --> 00:00:51,221
Anem a deixar que ho faci en el fons.

20
00:00:51,221 --> 00:00:56,860
Vagi per davant, si es pogués,
c9.io. a aquest URL aquí--

21
00:00:56,860 --> 00:01:02,810
Es tracta d'un tercer clients--
plataforma com a servei, si voluntat--

22
00:01:02,810 --> 00:01:05,190
que va a convidar a vostè
per registrar en un compte,

23
00:01:05,190 --> 00:01:08,650
i que va a donar a cada un de vosaltres
un compte en l'anomenat núvol

24
00:01:08,650 --> 00:01:11,330
en la infraestructura d'una altra persona,
una companyia anomenada Cloud9.

25
00:01:11,330 --> 00:01:13,350
Però el millor de
això és que et donen

26
00:01:13,350 --> 00:01:15,990
una aproximació d'una
desenvolupament real en el món real

27
00:01:15,990 --> 00:01:18,530
ambient, encara que en el
núvol i en un navegador web,

28
00:01:18,530 --> 00:01:21,175
i utilitzarem això en realitat
experimentar una mica avui.

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

30
00:01:27,116 --> 00:01:30,260
I després seguir endavant i simplement navegar
el seu camí cap al procés de registre

31
00:01:30,260 --> 00:01:32,630
si poguéssis.

32
00:01:32,630 --> 00:01:36,080
Així que ens va passar a utilitzar això en la classe
Dono classes per a tots els estudiants,

33
00:01:36,080 --> 00:01:39,140
tant al campus i fora ara, i
és reemplaçat el que històricament

34
00:01:39,140 --> 00:01:41,390
era el contrari de programari descarregable.

35
00:01:41,390 --> 00:01:44,620
Així que el que estaven guanyant accés a
és una de les màquines virtuals,

36
00:01:44,620 --> 00:01:46,460
en essència, que he descrit anteriorment.

37
00:01:46,460 --> 00:01:50,260
Així que aquesta empresa probablement Cloud9
rendes procedents d'un tercer fet Party--

38
00:01:50,260 --> 00:01:52,760
en aquest cas, Google-- conjunt
manat de màquines virtuals

39
00:01:52,760 --> 00:01:56,500
que d'alguna manera cap amunt en picar
la il·lusió de servidors individuals

40
00:01:56,500 --> 00:01:58,610
que cada un de nosaltres té un control total sobre.

41
00:01:58,610 --> 00:02:01,640
No és exacte dir
que són màquines virtuals,

42
00:02:01,640 --> 00:02:04,550
però, perquè el
Cloud9 s'utilitza en realitat

43
00:02:04,550 --> 00:02:07,570
és una mica més nova tecnologia
crida l'contenerització.

44
00:02:07,570 --> 00:02:13,150
I m'ho dius a mi agafar aquesta foto
aquí per pintar aquest quadre.

45
00:02:13,150 --> 00:02:16,540
>> Un contenidor és, si
recorden la imatge

46
00:02:16,540 --> 00:02:19,900
d'abans, una mica més lleuger
pes que una màquina virtual.

47
00:02:19,900 --> 00:02:22,090
De fet, mentre que l'última
vegada que parlem que hi ha

48
00:02:22,090 --> 00:02:25,170
ser un operatiu
sistema i un hipervisor

49
00:02:25,170 --> 00:02:28,260
i després el sistema operatiu hoste, convidat
sistema operatiu, operatiu convidat

50
00:02:28,260 --> 00:02:30,940
sistema, a la part superior de la seva
maquinari físic,

51
00:02:30,940 --> 00:02:33,740
la diferència amb aquest nou
la tecnologia, la contenerització,

52
00:02:33,740 --> 00:02:37,290
és que tots ells comparteixen alguna manera
el mateix sistema operatiu.

53
00:02:37,290 --> 00:02:39,970
Però encara creen
la il·lusió de tot el món

54
00:02:39,970 --> 00:02:44,590
tot i tenir la seva pròpia i exclusiva
drets administratius i arxius

55
00:02:44,590 --> 00:02:45,400
al servidor.

56
00:02:45,400 --> 00:02:48,230
Però hi ha menys en el programari
entre l'usuari i el maquinari.

57
00:02:48,230 --> 00:02:52,260
El resultat dels quals és, de
teoria, un major rendiment,

58
00:02:52,260 --> 00:02:55,470
perquè vostè està utilitzant o
desaprofitar menys recursos

59
00:02:55,470 --> 00:02:57,360
en què l'anomenada capa de virtualització.

60
00:02:57,360 --> 00:02:59,420
Així que aquest es diu
contenerització per naturalesa

61
00:02:59,420 --> 00:03:02,920
per mitjà d'una tecnologia anomenada acoblable,
que és molt entrar en el seu compte.

62
00:03:02,920 --> 00:03:05,086
I això és una cosa que
enginyers de la seva empresa

63
00:03:05,086 --> 00:03:08,610
podria tipus d'espècie de començar a parlar
sobre aviat si no ho han fet ja,

64
00:03:08,610 --> 00:03:11,590
encara que certament no hi ha
raó per saltar sobre qualsevol bandwagons.

65
00:03:11,590 --> 00:03:15,410
>> Així que amb això dit, el
és probable que veus ara

66
00:03:15,410 --> 00:03:22,670
és una pantalla que s'assembla una mica a això.

67
00:03:22,670 --> 00:03:23,170
D'ACORD.

68
00:03:23,170 --> 00:03:25,260
I només em diuen de nou si no.

69
00:03:25,260 --> 00:03:27,440
I si així que-- Vaig a venir si no.

70
00:03:27,440 --> 00:03:30,244
Vagi per davant i feu clic en aquest gran
a més de crear un espai de treball,

71
00:03:30,244 --> 00:03:31,660
i veureu una pantalla com aquesta.

72
00:03:31,660 --> 00:03:35,020
Pot trucar a l'àrea de treball
nomenar qualsevol cosa que desitgi, per ara.

73
00:03:35,020 --> 00:03:38,660
I de la mateixa realitat, per simplicitat,
i- anar bé, alguns de vostès

74
00:03:38,660 --> 00:03:39,660
ja tenen espais de treball.

75
00:03:39,660 --> 00:03:47,050
Trucar el que want-- negoci,
Harvard, dijous, el que vostè desitja.

76
00:03:47,050 --> 00:03:48,800
No cal una descripció.

77
00:03:48,800 --> 00:03:52,380
Pot deixar-ho privada, llevat que
ja tenen un munt d'espais de treball.

78
00:03:52,380 --> 00:03:55,280
Si un es veu obligat a fer-ho públic,
això està bé per als propòsits de l'actualitat.

79
00:03:55,280 --> 00:03:56,750
Aquí, també, és una de les vendes addicionals.

80
00:03:56,750 --> 00:03:59,939
S'obté un espai de treball privat
predeterminat. Però si vols més,

81
00:03:59,939 --> 00:04:00,980
vostè ha de pagar més.

82
00:04:00,980 --> 00:04:02,870
Altrament, t'obliguen
per fer la seva feina pública.

83
00:04:02,870 --> 00:04:05,600
Però això està bé, perquè també
apuntar això en les comunitats de codi obert

84
00:04:05,600 --> 00:04:07,700
animar la gent a
En realitat col·laborar.

85
00:04:07,700 --> 00:04:10,699
>> I l'última cosa que és important,
però, és, després de triar un nom

86
00:04:10,699 --> 00:04:17,140
i després de la seva elecció privada o pública,
feu clic en HTML 5, la icona taronja gran

87
00:04:17,140 --> 00:04:22,430
segon des de l'esquerra, i
a continuació, feu clic a Crea espai de treball.

88
00:04:22,430 --> 00:04:24,580
I probablement ho farà
prendre un minut més o menys,

89
00:04:24,580 --> 00:04:26,540
però vas a continuació, té una
medi ambient, una vegada que es

90
00:04:26,540 --> 00:04:30,544
fer, que sembla una reminiscència de
el que tinc a la pantalla aquí ara.

91
00:04:30,544 --> 00:04:33,210
Però, de nou, pot ser que prengui un minut
o més per arribar a aquesta pantalla

92
00:04:33,210 --> 00:04:34,770
una vegada que hagi fet clic a Crea espai de treball.

93
00:04:34,770 --> 00:04:37,936
Però només em Indicador sobre si li agradaria mi
per fer una ullada a qualsevol cosa o assessorament.

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

95
00:04:40,191 --> 00:04:40,690
Tot bé.

96
00:04:40,690 --> 00:04:42,390
Així que vaig a aquest fons per ara.

97
00:04:42,390 --> 00:04:44,260
Llámame sobre si sembla
té alguna dificultat tècnica.

98
00:04:44,260 --> 00:04:46,210
Però, de nou, pot ser que prengui una
poc perquè s'obri.

99
00:04:46,210 --> 00:04:49,570
I seguirem endavant i parlar del que
que en realitat vol dir fer una pàgina web,

100
00:04:49,570 --> 00:04:52,780
el que és HTML, i com tot això
Ara interconnecta com estem començant

101
00:04:52,780 --> 00:04:54,730
utilitzar realment part de la tecnologia.

102
00:04:54,730 --> 00:04:58,310
Així resulta que el que pugui
anar al meu petit Mac aquí,

103
00:04:58,310 --> 00:05:01,650
obrir un programa simple anomenat
Edició de textos, o en Windows que vaig poder

104
00:05:01,650 --> 00:05:04,480
obert una cosa que es diu el Bloc de notes.

105
00:05:04,480 --> 00:05:08,260
I podria simplement fer alguna cosa
així- "hola, món".

106
00:05:08,260 --> 00:05:12,020
I llavors podria guardar això com
hola.txt Així que hi ha màgia allà.

107
00:05:12,020 --> 00:05:15,200
Això no té res a veure amb la Web
programació, res a veure amb el llenguatge HTML.

108
00:05:15,200 --> 00:05:16,790
Només la creació d'un arxiu de text simple.

109
00:05:16,790 --> 00:05:20,600
Però resulta que una banda
pàgina és literalment això.

110
00:05:20,600 --> 00:05:24,020
És un simple arxiu de text que conté el text
que podria escriure en el seu teclat,

111
00:05:24,020 --> 00:05:30,070
però típicament, però no sempre
No acaba en .txt però .html o .htm.

112
00:05:30,070 --> 00:05:32,050
I no ho fa només
escriure paraules a l'arxiu.

113
00:05:32,050 --> 00:05:35,280
De fet has de fer servir coses trucades
etiquetes o, més en general, una cosa

114
00:05:35,280 --> 00:05:37,190
anomenat llenguatge de marques.

115
00:05:37,190 --> 00:05:40,510
>> Així que vaig a escriure molt ràpidament
i després explicar el següent.

116
00:05:40,510 --> 00:05:42,290
Vaig a primera
escrigui això, que diu:

117
00:05:42,290 --> 00:05:45,730
Hey, navegador, aquí ve una
pàgina web escrites en HTML.

118
00:05:45,730 --> 00:05:51,850
I aquestes dues coses juntes diuen, escolta,
navegador, la següent és de fet HTML.

119
00:05:51,850 --> 00:05:55,790
Hey, navegador, aquí ve la
cap o la part superior de la meva pàgina.

120
00:05:55,790 --> 00:05:59,900
Hey, navegador, a l'interior de la part superior de
la meva pàgina, posar un títol que és, "hola,

121
00:05:59,900 --> 00:06:01,610
món ".

122
00:06:01,610 --> 00:06:08,370
Hey, navegador, després que el cap de la meva
pàgina, aquí ve el cos de la pàgina.

123
00:06:08,370 --> 00:06:12,170
I, escolta, el navegador, el cos de la meva
pàgina també hauria de dir, "hola món".

124
00:06:12,170 --> 00:06:15,500
Quins són els detalls més destacats en aquesta llista?

125
00:06:15,500 --> 00:06:17,960
Això és el que generalment
diu una declaració de tipus de document,

126
00:06:17,960 --> 00:06:20,190
i, la veritat, que és una mica
difícil de memoritzar això al principi.

127
00:06:20,190 --> 00:06:21,481
Vostè només tipus de copiar-enganxar.

128
00:06:21,481 --> 00:06:23,760
Aquesta és la manera formal
de dir, escolta, navegador,

129
00:06:23,760 --> 00:06:28,030
Estic utilitzant la versió d'HTML 5, la qual cosa
va sortir una mica recentment.

130
00:06:28,030 --> 00:06:31,380
És un encanteri màgic que alguns
els éssers humans amb un pobre sentit del disseny

131
00:06:31,380 --> 00:06:33,640
decidit posar al
molt superior de l'arxiu.

132
00:06:33,640 --> 00:06:35,473
Tot i que es tracta d'una
poc arcà, això és tot

133
00:06:35,473 --> 00:06:38,250
designant totes escolta, navegador, aquí
ve amb la versió 5 d'HTML.

134
00:06:38,250 --> 00:06:41,741
>> La resta del que ha estat amb nosaltres
des de fa algun temps, històricament,

135
00:06:41,741 --> 00:06:44,740
però ha anat evolucionant, i és
Probablement estat rebent una mica més simple.

136
00:06:44,740 --> 00:06:47,320
Notar algunes característiques
del que he ressaltat.

137
00:06:47,320 --> 00:06:49,890
Hi ha aquestes coses amb angle
brackets-- del suport esquerre

138
00:06:49,890 --> 00:06:51,040
i el suport de la dreta.

139
00:06:51,040 --> 00:06:52,490
I notar la simetria aquí.

140
00:06:52,490 --> 00:06:57,340
I per simetria, és a dir, igual que jo
tenir aquesta etiqueta d'inici aquí o una etiqueta oberta

141
00:06:57,340 --> 00:07:01,560
si es vol, aquí tinc una
a prop de l'etiqueta o una etiqueta de tancament que és

142
00:07:01,560 --> 00:07:06,460
diferents només en la mesura que té aquesta
barra al començament de la paraula

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

144
00:07:07,360 --> 00:07:09,360
I que es pugui imaginar
això com jo estava casualment

145
00:07:09,360 --> 00:07:12,280
proposant abans, bé,
navegador, aquí ve una mica d'HTML.

146
00:07:12,280 --> 00:07:16,060
I, al revés, hey, navegador, que és
que per a l'inici i el final HTML--.

147
00:07:16,060 --> 00:07:18,440
>> Mentrestant, escolta, navegador, aquí
ve la capçalera de la meva pàgina.

148
00:07:18,440 --> 00:07:20,140
Hey, navegador, això és tot pel cap.

149
00:07:20,140 --> 00:07:22,240
Hey, navegador, aquí és
el cos de la pàgina.

150
00:07:22,240 --> 00:07:24,020
Hey, navegador, això és tot pel cos.

151
00:07:24,020 --> 00:07:26,940
I dins d'això és cert
text arbitrari per ara.

152
00:07:26,940 --> 00:07:30,520
I a l'interior del cap, per la seva banda,
és arbitrària, sinó que alguns etiquetats,

153
00:07:30,520 --> 00:07:34,410
per així dir-ho, el text que diu, el títol
de la meva pàgina serà "Hola, món".

154
00:07:34,410 --> 00:07:37,470
Ara, per ara, es pot
assumir que els navegadors

155
00:07:37,470 --> 00:07:41,762
tenen only-- o, més aviat, les pàgines web tenen
només dos parts-- el cap i el cos.

156
00:07:41,762 --> 00:07:44,220
I el cap és generalment només
de la mateixa manera que la barra de menús, la matèria

157
00:07:44,220 --> 00:07:45,510
en realitat només en la part superior.

158
00:07:45,510 --> 00:07:48,910
I el cos és el budell de la pàgina,
tot en aquest gran rectangle

159
00:07:48,910 --> 00:07:50,239
que omple la pantalla.

160
00:07:50,239 --> 00:07:51,780
Així que vaig a seguir endavant i fer-ho.

161
00:07:51,780 --> 00:07:54,400
Em va a seguir endavant i
feu clic a Desa, Desa arxiu.

162
00:07:54,400 --> 00:07:58,580
I vaig a estalviar
això com hello.html,

163
00:07:58,580 --> 00:08:00,870
i jo només vaig a
posar-la en el meu escriptori.

164
00:08:00,870 --> 00:08:03,520
I vaig a anar
endavant i feu clic a Desa.

165
00:08:03,520 --> 00:08:05,806
I notice-- al meu Mac
menys està cridant a mi.

166
00:08:05,806 --> 00:08:07,180
Estàs segur que vols fer això?

167
00:08:07,180 --> 00:08:08,710
I vaig a dir, sí, utilitzar HTML.

168
00:08:08,710 --> 00:08:10,400
Jo sé millor en aquest cas.

169
00:08:10,400 --> 00:08:14,686
I ara vaig a anar al meu escriptori
on tinc aquest arxiu sobte.

170
00:08:14,686 --> 00:08:16,060
I vaig fer doble clic.

171
00:08:16,060 --> 00:08:18,268
I s'adonarà que, per
Per defecte, Chrome obert.

172
00:08:18,268 --> 00:08:19,996
Això es deu al fet que és
el meu navegador per defecte.

173
00:08:19,996 --> 00:08:21,370
I que només diu: "hola, món".

174
00:08:21,370 --> 00:08:23,078
Però diu "hola,
món "en dos llocs.

175
00:08:23,078 --> 00:08:23,979
Observi la part superior esquerra.

176
00:08:23,979 --> 00:08:25,020
Bastant difícil passar per alt això.

177
00:08:25,020 --> 00:08:26,180
És gran i en negreta.

178
00:08:26,180 --> 00:08:30,690
I on més fa que sembli
a dir, "hola, món"?

179
00:08:30,690 --> 00:08:31,470
>> AUDIÈNCIA: La pestanya.

180
00:08:31,470 --> 00:08:33,100
>> DAVID J. Malan: Sí, la fitxa en si.

181
00:08:33,100 --> 00:08:35,159
Així que quan li vaig dir al cap de la
la pàgina és tot fins top--

182
00:08:35,159 --> 00:08:36,367
i de fet aquest és el títol.

183
00:08:36,367 --> 00:08:37,710
És només a la pestanya aquí.

184
00:08:37,710 --> 00:08:40,320
I puc tirar d'aquesta fitxa
a terme de manera que no es confongui.

185
00:08:40,320 --> 00:08:43,360
Això és només una única pestanya ara,
i de fet veiem "hola, món"

186
00:08:43,360 --> 00:08:45,970
aquí i "hola, món" aquí baix.

187
00:08:45,970 --> 00:08:47,160
Per tant força senzill.

188
00:08:47,160 --> 00:08:49,050
Però també és bastant simple.

189
00:08:49,050 --> 00:08:50,440
I, en realitat, el zoom.

190
00:08:50,440 --> 00:08:53,272
Puc canviar la mida de la font just
per ampliar l'accessibilitat.

191
00:08:53,272 --> 00:08:56,830
Però ara farem alguna cosa
una mica més interessant.

192
00:08:56,830 --> 00:08:59,760
>> Vaig a vaya-- crits, i molt
Em retorn al meu arxiu de text.

193
00:08:59,760 --> 00:09:02,400
Vaig a tornar al meu
arxiu de text, i vaig

194
00:09:02,400 --> 00:09:06,320
per canviar això i dir
"Hola, Disney World."

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

196
00:09:07,970 --> 00:09:10,919
I tornar al meu
navegador i feu clic a Actualitza.

197
00:09:10,919 --> 00:09:12,710
I ara, per descomptat,
diu "Disney World".

198
00:09:12,710 --> 00:09:15,500
I vaig a enfocar artificialment
en tan sols pel que és fàcil de veure.

199
00:09:15,500 --> 00:09:19,012
Així que ara, per desgràcia, que tipus de desig
A-- realitat, aquesta és una característica de Mac.

200
00:09:19,012 --> 00:09:21,720
Vull fer clic a Disney World
i anar a un lloc com disney.com,

201
00:09:21,720 --> 00:09:23,290
però això no funciona.

202
00:09:23,290 --> 00:09:26,850
Pel que un principi bàsic de la web és
hipervincles, enllaços que van en un altre lloc.

203
00:09:26,850 --> 00:09:28,390
Llavors, com ho faig?

204
00:09:28,390 --> 00:09:34,690
Bé, podria simplement dir,
"Hola, http://www.disney.com."

205
00:09:34,690 --> 00:09:36,110
Desa aquesta.

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

207
00:09:37,620 --> 00:09:39,400
Però això també, no es pot fer clic.

208
00:09:39,400 --> 00:09:42,930
I el que és agradable aquí, tot i que
això encara no és funcional,

209
00:09:42,930 --> 00:09:45,930
és que sembla que la
navegador, literalment, només ho fa

210
00:09:45,930 --> 00:09:46,950
el que li dic que faci.

211
00:09:46,950 --> 00:09:50,110
Així que si acabo d'escriure una adreça URL com aquesta,
només va a mostrar-me la URL.

212
00:09:50,110 --> 00:09:54,270
Necessito utilitzar etiquetes o marques
idioma per explicar realitat

213
00:09:54,270 --> 00:09:55,621
el navegador per fer encara més.

214
00:09:55,621 --> 00:09:57,870
Així que seguiré endavant i
Eliminar això per un moment.

215
00:09:57,870 --> 00:10:00,980
I vaig a dir, escolta,
explorador, iniciï una àncora aquí,

216
00:10:00,980 --> 00:10:02,650
un enllaç per així dir-ho.

217
00:10:02,650 --> 00:10:07,500
I la hiper-referència, el destí
d'aquest ancoratge, hauria de ser aquest URL.

218
00:10:07,500 --> 00:10:08,750
I noti meves cites.

219
00:10:08,750 --> 00:10:11,590
Podria fer servir cometes simples, també,
però cal ser coherent,

220
00:10:11,590 --> 00:10:14,270
i es en general només ha d'utilitzar
cometes dobles que sigui senzill.

221
00:10:14,270 --> 00:10:16,820
Noto que vaig a tancar l'etiqueta.

222
00:10:16,820 --> 00:10:21,160
I llavors aquí vaig
a dir, "Disney World".

223
00:10:21,160 --> 00:10:26,890
I ara necessito una mica de symmetry--
claudàtor obert, / a, suport tancat.

224
00:10:26,890 --> 00:10:28,090
>> Llavors, què he introduït?

225
00:10:28,090 --> 00:10:30,100
Hem tingut algunes etiquetes ja.

226
00:10:30,100 --> 00:10:32,410
HTML, cap, títol, el cos,
són totes les etiquetes, per així dir-ho,

227
00:10:32,410 --> 00:10:34,280
amb els seus homòlegs oberts i tancats.

228
00:10:34,280 --> 00:10:36,530
Però avís, això és una espècie
de fonamentalment diferent.

229
00:10:36,530 --> 00:10:39,140
Això és el que anomenarem
en HTML un atribut.

230
00:10:39,140 --> 00:10:41,451
I és un atribut
només un parell clau-valor.

231
00:10:41,451 --> 00:10:43,950
Això és una cosa comuna en
parell clau-valor Ciències- equip.

232
00:10:43,950 --> 00:10:45,770
És una espècie de l'eina de treball.

233
00:10:45,770 --> 00:10:47,040
Una clau i un valor.

234
00:10:47,040 --> 00:10:49,390
Paraules i una mica més
una altra paraula o paraules.

235
00:10:49,390 --> 00:10:53,790
I en aquest cas, la clau és href,
i el valor és l'URL completa.

236
00:10:53,790 --> 00:10:57,890
I el que és un atribut que fa
influeix en el comportament d'una etiqueta.

237
00:10:57,890 --> 00:11:01,010
I en aquest cas, hem d'influir
el comportament de l'etiqueta d'ancoratge,

238
00:11:01,010 --> 00:11:04,140
perquè hem de ancorar
aquest enllaç a algun lloc.

239
00:11:04,140 --> 00:11:06,960
I com es fa això és
per mitjà de l'atribut.

240
00:11:06,960 --> 00:11:08,970
>> Així que seguiré endavant
i guardar el fitxer.

241
00:11:08,970 --> 00:11:11,300
Tornar al meu navegador i recàrrega.

242
00:11:11,300 --> 00:11:14,580
I, voilà, ara tenim la
començaments d'una pàgina web legítim.

243
00:11:14,580 --> 00:11:18,420
-Super Simple, però si hi ha sobre
esto-- avís a la cantonada inferior esquerra,

244
00:11:18,420 --> 00:11:19,830
És súper petit.

245
00:11:19,830 --> 00:11:21,730
Però ho fa veure www.disney.com.

246
00:11:21,730 --> 00:11:27,076
I si faig clic, de fet, aquesta
Em bat lluny a disney.com.

247
00:11:27,076 --> 00:11:29,380
Ara, el curiós
aquí és que no és

248
00:11:29,380 --> 00:11:33,940
la millor-- l'URL més comercial, però
això està bé perquè aquesta imatge no ho fa

249
00:11:33,940 --> 00:11:35,360
existir a la World Wide Web.

250
00:11:35,360 --> 00:11:39,740
Existeix com un arxiu local en aparença
Els meus usuaris directory-- / jharvard--

251
00:11:39,740 --> 00:11:41,890
per a John Harvard-- / escriptori.

252
00:11:41,890 --> 00:11:42,634
Però té un URL.

253
00:11:42,634 --> 00:11:43,800
Que només passa a ser local.

254
00:11:43,800 --> 00:11:47,050
Malauradament, cap de vosaltres pot visitar
això, perquè si escriu aquesta URL,

255
00:11:47,050 --> 00:11:49,980
que estaria dient al seu navegador,
buscar un arxiu anomenat hello.html

256
00:11:49,980 --> 00:11:50,772
en el seu disc dur.

257
00:11:50,772 --> 00:11:53,271
I, per descomptat, llevat que hi hagi
estat seguint de forma manual,

258
00:11:53,271 --> 00:11:54,530
que no va a existir allà.

259
00:11:54,530 --> 00:11:55,190
>> Així que això està bé.

260
00:11:55,190 --> 00:11:57,815
Encara tenim una forma, en última instància,
per obtenir aquest arxiu a la web,

261
00:11:57,815 --> 00:12:01,180
però anem a esmicolar un parell de
implicacions de seguretat del que acabem de

262
00:12:01,180 --> 00:12:04,850
serra i lligar-lo de nou a l'anterior
la discussió d'aquest matí.

263
00:12:04,850 --> 00:12:08,200
Resulta que, si una
navegador, literalment, només fa

264
00:12:08,200 --> 00:12:12,560
el que li dic que ho faci, i sembla
ser el cas que una etiqueta d'ancoratge és

265
00:12:12,560 --> 00:12:17,380
influït pel valor de
aquest atribut anomenat href

266
00:12:17,380 --> 00:12:20,810
però mostra aquest
text, això semblaria

267
00:12:20,810 --> 00:12:26,520
donar a entendre que podria posar la URL
en tots dos llocs i torneu a carregar

268
00:12:26,520 --> 00:12:29,100
i ara veure la URL i anar a la URL.

269
00:12:29,100 --> 00:12:32,680
Avís, si hi ha sobre la part inferior esquerra,
de fet vaig a disney.com encara.

270
00:12:32,680 --> 00:12:38,340
>> Així que si alguna vegada has estat
phished-- P-H-I-S-H-I-D-

271
00:12:38,340 --> 00:12:42,820
amb un d'aquests correus electrònics falsos
com PayPal des del seu banc,

272
00:12:42,820 --> 00:12:46,470
és probable que hagi aconseguit l'interior d'enllaços
del correu electrònic que vostè està llegint que

273
00:12:46,470 --> 00:12:49,970
li indica que feu clic aquí per anar confirmen
la contrasenya o confirmar la seva data de naixement

274
00:12:49,970 --> 00:12:53,840
social o social o alguna cosa
enginyeria que divulga

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

276
00:12:54,920 --> 00:12:57,625
Bé, podria prendre la classe de
avantatge d'això, no anava a fer-ho?

277
00:12:57,625 --> 00:13:01,240
Podria dir alguna cosa
com, www.paypal.com.

278
00:13:01,240 --> 00:13:11,340
I en comptes de disney.com, em
podria anar a, com, badguy.com.

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

280
00:13:12,850 --> 00:13:16,620
I el fàcil que és per enganyar,
especialment un lector no tècnic

281
00:13:16,620 --> 00:13:20,649
o una lectura succinta
lector de fer clic

282
00:13:20,649 --> 00:13:23,940
un enllaç com aquest, que si faig clic it--
En realitat, jo no vull anar badguy.com.

283
00:13:23,940 --> 00:13:25,398
No sé el que està realment allà.

284
00:13:25,398 --> 00:13:30,080
Així paypal.com, avís, és
el que diu que va a,

285
00:13:30,080 --> 00:13:33,210
però per descomptat, si miro cap avall
súper baix, que és una mica borrosa,

286
00:13:33,210 --> 00:13:34,230
però no diu badguy.com.

287
00:13:34,230 --> 00:13:38,644
Aquesta és l'única dic en aquest moment
que vaig a un lloc equivocat.

288
00:13:38,644 --> 00:13:41,560
I quan he dit abans que els bancs
realment no hauria encoratjar o entrenar

289
00:13:41,560 --> 00:13:44,510
els usuaris fan clic als enllaços, això
és només una manifestació de la mateixa.

290
00:13:44,510 --> 00:13:45,430
I és així de simple.

291
00:13:45,430 --> 00:13:48,120
Ara ets un adversari si
es fa alguna cosa com això

292
00:13:48,120 --> 00:13:51,000
i tractar d'enganyar un usuari
perquè visiti el seu lloc web.

293
00:13:51,000 --> 00:13:53,320
Però per ara, seguirem
tot net i ordenat.

294
00:13:53,320 --> 00:13:55,640
Seguirem endavant
i rebobinar aquests canvis.

295
00:13:55,640 --> 00:13:56,530
A carregar la pàgina.

296
00:13:56,530 --> 00:13:57,740
I torno a disney.com.

297
00:13:57,740 --> 00:14:00,660
>> Anem a veure si no podem molestar
això a part una mica més.

298
00:14:00,660 --> 00:14:04,160
Per tant "hola, Disney World."

299
00:14:04,160 --> 00:14:05,950
Vaig a dir aquí baix.

300
00:14:05,950 --> 00:14:08,220
Potser vaig a fer una mica d'espai.

301
00:14:08,220 --> 00:14:12,730
"Esperem que gaudeixi de la seva estada!"

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

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

304
00:14:15,850 --> 00:14:19,010
No és que això no és rea--
el que volia, oi?

305
00:14:19,010 --> 00:14:21,870
És a dir, si jo estic tractant meu text
presentar com un processador de textos,

306
00:14:21,870 --> 00:14:24,894
Què esperava que passaria aquí?

307
00:14:24,894 --> 00:14:27,060
Sí, em sento com si hagués
ha de ser un salt de línia aquí,

308
00:14:27,060 --> 00:14:28,799
així que se sent amb errors d'alguna manera.

309
00:14:28,799 --> 00:14:31,090
Però que en realitat és deliberada,
perquè igual que abans,

310
00:14:31,090 --> 00:14:33,381
el navegador només es va a
fer el que digui que faci.

311
00:14:33,381 --> 00:14:34,806
No he dit que per trencar les línies.

312
00:14:34,806 --> 00:14:37,930
Jo no he dit que es mogui cap avall, fins i tot
però, intuïtivament, sento que ho vaig fer.

313
00:14:37,930 --> 00:14:39,805
Així que resulta que necessitem
una mica més de marge de benefici,

314
00:14:39,805 --> 00:14:41,390
i vaig a arreglar això de la següent manera.

315
00:14:41,390 --> 00:14:46,160
Vaig a incondicional aquesta primera hola
amb el que s'anomena una etiqueta de paràgraf.

316
00:14:46,160 --> 00:14:48,920
I després vaig a seguir endavant
i embolicar aquesta altra frase

317
00:14:48,920 --> 00:14:54,370
en una altra etiqueta de paràgraf, tot i que
són els paràgrafs súper curts.

318
00:14:54,370 --> 00:14:55,930
Ara vaig a desar.

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

320
00:14:57,160 --> 00:14:59,070
I ara hem de
espai, i quin tipus de

321
00:14:59,070 --> 00:15:01,680
tenen la semàntica de
dos paràgrafs separats.

322
00:15:01,680 --> 00:15:05,290
>> Això és tot bé i bo, però seria
ser agradable per afegir una foto a aquesta pàgina,

323
00:15:05,290 --> 00:15:08,710
així que vaig a anar a buscar
Mickey Mouse a Google Imatges.

324
00:15:08,710 --> 00:15:12,830
I només per diversió, jo sóc
va a prendre aquesta imatge.

325
00:15:12,830 --> 00:15:15,350
Vaig a seguir endavant i ara
agafar la URL d'aquesta imatge,

326
00:15:15,350 --> 00:15:16,510
encara que hi ha diferents
maneres de fer això.

327
00:15:16,510 --> 00:15:18,520
Per ara, només vaig a copiar la URL.

328
00:15:18,520 --> 00:15:24,770
Vaig a tornar a la meva text
arxiu, i ho vaig a dir aquí,

329
00:15:24,770 --> 00:15:31,160
img src = entre cometes
aquesta URL, súper llarga.

330
00:15:31,160 --> 00:15:34,580
I llavors la noció d'una
la imatge és una mica diferent.

331
00:15:34,580 --> 00:15:38,640
En realitat no hi ha noció de partida
una imatge i acabant una imatge,

332
00:15:38,640 --> 00:15:40,630
com una etiqueta d'inici una etiqueta final.

333
00:15:40,630 --> 00:15:43,840
Així que sembla una mica estrany
Em semànticament Per a això,

334
00:15:43,840 --> 00:15:45,390
tenir una etiqueta de prop la imatge.

335
00:15:45,390 --> 00:15:46,780
No és incorrecte.

336
00:15:46,780 --> 00:15:48,840
És perfectament correcte,
i es va animar,

337
00:15:48,840 --> 00:15:50,870
però hi ha notació abreujada.

338
00:15:50,870 --> 00:15:53,780
Puc tipus de forma simultània
obrir i tancar la mateixa etiqueta,

339
00:15:53,780 --> 00:15:55,510
i que va a fer feliç al navegador.

340
00:15:55,510 --> 00:15:56,950
Així que és només una mica
més succinta de les coses

341
00:15:56,950 --> 00:15:59,408
que, conceptualment, realment no fer
tenir sentit per iniciar i finalitzar.

342
00:15:59,408 --> 00:16:01,190
Ells simplement hi són, o no ho són.

343
00:16:01,190 --> 00:16:06,020
>> Així que vaig a guardar aquesta i tornar
al meu "hola, món" pàgina i recàrrega.

344
00:16:06,020 --> 00:16:09,880
I és una mica fora de control,
perquè que la imatge és en realitat

345
00:16:09,880 --> 00:16:12,210
una mica gran, però això està bé.

346
00:16:12,210 --> 00:16:13,710
Podria canviar la seva mida en un programa.

347
00:16:13,710 --> 00:16:14,900
O vostè sap què.

348
00:16:14,900 --> 00:16:17,350
Només per demostrar, estic
dirà en realitat

349
00:16:17,350 --> 00:16:21,760
que l'amplada d'aquesta cosa ha de
només serà de 200 píxels, 200 punts.

350
00:16:21,760 --> 00:16:24,360
Déjame anar per davant i guardar
i tornar a carregar, i ara la pàgina

351
00:16:24,360 --> 00:16:25,690
es veu una mica més raonable.

352
00:16:25,690 --> 00:16:27,260
Però noti el patró.

353
00:16:27,260 --> 00:16:30,030
Bé, he tipus de ensenyat a tots
d'HTML, en cert sentit, almenys

354
00:16:30,030 --> 00:16:33,531
conceptualment, perquè tot l'HTML és a dir
aquests tags-- etiquetes obertes, tancades les etiquetes,

355
00:16:33,531 --> 00:16:35,280
i atributs que
modificar el seu comportament.

356
00:16:35,280 --> 00:16:38,380
I, segons sembla, cada
l'etiqueta pot tenir zero o un

357
00:16:38,380 --> 00:16:43,005
o dos o més atributs, cadascun
el que fa alguna cosa una mica diferent.

358
00:16:43,005 --> 00:16:44,380
Ara, com saber el que existeix?

359
00:16:44,380 --> 00:16:46,800
Vostè acaba d'escoltar a algú
com jo et digui el que existeix,

360
00:16:46,800 --> 00:16:50,860
o simplement Google al voltant d'un tutorial
en HTML, i el que realment és així de simple.

361
00:16:50,860 --> 00:16:54,030
>> En veritat, quan jo era un estudiant universitari
Fa anys i va aprendre HTML,

362
00:16:54,030 --> 00:16:56,530
un del meu ensenyament de matemàtiques
acabem de passar assistents

363
00:16:56,530 --> 00:16:59,600
una mica de temps em tutoria
per com mitja hora, una hora,

364
00:16:59,600 --> 00:17:00,660
i llavors jo estava en el meu camí.

365
00:17:00,660 --> 00:17:03,300
Jo estava en el meu camí cap a la fabricació
els llocs web més horribles mai,

366
00:17:03,300 --> 00:17:05,549
que, segons sembla, no ho he fet
Realment progressat més enllà.

367
00:17:05,549 --> 00:17:09,849
Però el punt és que, una vegada que es
entendre aquestes simples ideas--

368
00:17:09,849 --> 00:17:13,450
si arcà text-- però aquests simples
idees de començar un pensament

369
00:17:13,450 --> 00:17:15,960
i el tancament d'un pensament, mantenint
tot molt ben equilibrat,

370
00:17:15,960 --> 00:17:19,150
mirant alguna cosa, la modificació de la
comportament d'aquesta etiqueta, que és realment tot

371
00:17:19,150 --> 00:17:20,079
que cal fer.

372
00:17:20,079 --> 00:17:28,140
I de fet, si ara anem a
una mena de google.com-- realitat,

373
00:17:28,140 --> 00:17:31,920
anirem a un lloc una mica més
razonable-- stanford.edu.

374
00:17:31,920 --> 00:17:37,800
I vaig a anar a Veure,
Desenvolupador, Mostra la font.

375
00:17:37,800 --> 00:17:41,400
És lleig, però notice--
i vaig a zoom en l'avís

376
00:17:41,400 --> 00:17:43,432
algunes coses que és familiar ja.

377
00:17:43,432 --> 00:17:45,140
Hi ha aquesta aquí,
que és un navegador.

378
00:17:45,140 --> 00:17:46,800
Aquí ve HTML5.

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

380
00:17:47,634 --> 00:17:49,550
Pel que sembla, hi ha una
atribueixo que no ho vaig fer

381
00:17:49,550 --> 00:17:51,540
que especifica l'ús
idioma de la pàgina,

382
00:17:51,540 --> 00:17:54,380
i això pot ajudar amb canvi automàtic
traducció i coses per l'estil.

383
00:17:54,380 --> 00:17:55,546
Aquí està el cap de la pàgina.

384
00:17:55,546 --> 00:17:57,790
Així és el títol de la pàgina de Stanford.

385
00:17:57,790 --> 00:17:59,832
Hi ha una etiqueta que no ho vaig fer
parlar yet-- etiqueta Meta.

386
00:17:59,832 --> 00:18:01,540
És només una mena de
informació d'antecedents.

387
00:18:01,540 --> 00:18:04,210
Ajuda amb SEO, o
Optimització del Motor de Cerca,

388
00:18:04,210 --> 00:18:06,320
o els resultats de cerca de Google o similars.

389
00:18:06,320 --> 00:18:09,029
Però si seguim mirant, mantingui
mira, aquí hi ha el cos de l'etiqueta.

390
00:18:09,029 --> 00:18:11,570
I hi ha raïms d'una altra
etiquetes que no han parlat encara.

391
00:18:11,570 --> 00:18:13,750
Però Div és un per a una
la divisió de la pàgina.

392
00:18:13,750 --> 00:18:16,680
És com un rectangle invisible
si vols tipus de mental

393
00:18:16,680 --> 00:18:20,160
dividir la pàgina en
diferents unitats de línia.

394
00:18:20,160 --> 00:18:22,650
I després un munt de divs I
veure, una cosa que es diu la classe,

395
00:18:22,650 --> 00:18:24,440
però anem a tornar a això.

396
00:18:24,440 --> 00:18:26,200
>> Això és Forms interesting--.

397
00:18:26,200 --> 00:18:27,730
Els formularis estan en tot el web.

398
00:18:27,730 --> 00:18:30,310
Qualsevol quadre de recerca que està
Ha usat alguna vegada és una forma.

399
00:18:30,310 --> 00:18:31,490
I, llavors, anem a veure realment.

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

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

402
00:18:33,910 --> 00:18:37,660
L'acció d'aquesta forma, per qualsevol
raons històriques, és que l'URL.

403
00:18:37,660 --> 00:18:38,840
Mètode és "post".

404
00:18:38,840 --> 00:18:44,060
Resulta que les sol·licituds HTTP poden utilitzar
el verb "obtenir", com hem vist abans,

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

406
00:18:45,070 --> 00:18:47,030
I va a veure una diferència
d'això en un moment.

407
00:18:47,030 --> 00:18:48,363
Anem a veure en realitat el que és això.

408
00:18:48,363 --> 00:18:49,830
Permetin-me tornar a la pàgina de Stanford.

409
00:18:49,830 --> 00:18:53,330
Quina forma estan parlant
sobre, què et sembla?

410
00:18:53,330 --> 00:18:54,485
El que salta a la vista?

411
00:18:54,485 --> 00:18:54,970
>> AUDIÈNCIA: quadre de cerca.

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

413
00:18:55,845 --> 00:18:58,410
Així que a la part superior dreta
aquí és la següent caixa de cerca.

414
00:18:58,410 --> 00:19:02,441
I així és com es va implementar un it--
etiqueta que literalment forma parèntesi obert.

415
00:19:02,441 --> 00:19:03,940
I després anem a buscar alguna cosa.

416
00:19:03,940 --> 00:19:09,220
Anem a buscar un company
mine-- de "Nick Parlant".

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

418
00:19:11,380 --> 00:19:13,750
I, per descomptat, va anar a
un URL lleugerament diferent.

419
00:19:13,750 --> 00:19:15,140
Déjame tornar aquí.

420
00:19:15,140 --> 00:19:18,960
Buscarem "cursos".

421
00:19:18,960 --> 00:19:19,460
Maleït sigui.

422
00:19:19,460 --> 00:19:20,484
Vam anar a un URL diferent.

423
00:19:20,484 --> 00:19:23,400
Així, Stanford de l'addició d'una mica de màgia
que no estan portant-me a la URL

424
00:19:23,400 --> 00:19:25,820
que vam veure al
acció atribut allà.

425
00:19:25,820 --> 00:19:32,480
Però aquesta forma es porta a terme aquí purament
a través d'aquest marcat aquí, aquestes etiquetes.

426
00:19:32,480 --> 00:19:35,710
De fet, aquí hi ha l'entrada per
el tipus de recerca que desitja.

427
00:19:35,710 --> 00:19:38,940
Aquí està l'entrada per
un altre tipus de cerca.

428
00:19:38,940 --> 00:19:41,960
Aquí és l'entrada per la mateixa cadena.

429
00:19:41,960 --> 00:19:45,394
I pel que l'objectiu no és embolicar
la nostra ment al voltant de totes aquestes etiquetes

430
00:19:45,394 --> 00:19:46,060
però només per veure.

431
00:19:46,060 --> 00:19:48,300
És només obrir i tancar
etiquetes i mirant les coses.

432
00:19:48,300 --> 00:19:48,560
Sí?

433
00:19:48,560 --> 00:19:48,920
Victòria?

434
00:19:48,920 --> 00:19:49,795
>> AUDIÈNCIA: [inaudible]

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

436
00:19:51,925 --> 00:19:53,550
DAVID J. Malan: Aquesta és una bona pregunta.

437
00:19:53,550 --> 00:19:54,660
Això és una mica més difícil de veure.

438
00:19:54,660 --> 00:19:56,300
Permetin-me tornar a aquest
pregunta en tan sols uns minuts

439
00:19:56,300 --> 00:19:59,000
quan ens fixem en alguna cosa que es diu
fulles CSS, o d'estil en cascada,

440
00:19:59,000 --> 00:20:02,500
i podem tractar d'inferir
tant des de la pàgina.

441
00:20:02,500 --> 00:20:08,090
Així que si ara fer una ullada a google.com,
anem a veure el que la seva pàgina es sembla.

442
00:20:08,090 --> 00:20:09,840
Es podria they're-- això és bonic avui.

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

444
00:20:12,490 --> 00:20:12,990
D'ACORD.

445
00:20:12,990 --> 00:20:13,690
Tot fet.

446
00:20:13,690 --> 00:20:15,260
Molt bé, així Mostra la font.

447
00:20:15,260 --> 00:20:19,590
Es podria pensar que Google té
codi font molt agradable.

448
00:20:19,590 --> 00:20:24,970
Així que, segons sembla, el que està passant aquí?

449
00:20:24,970 --> 00:20:27,880
I de fet, això no és encara HTML.

450
00:20:27,880 --> 00:20:30,930
Això és una cosa que es diu JavaScript.

451
00:20:30,930 --> 00:20:32,344
I continuarem anant i venint.

452
00:20:32,344 --> 00:20:34,010
Ni tan sols sé on comença la pàgina.

453
00:20:34,010 --> 00:20:37,240
Vaig a utilitzar Command
M, oberta HTML suport.

454
00:20:37,240 --> 00:20:38,200
Molt bé, aquí està.

455
00:20:38,200 --> 00:20:44,150
Em va semblar que l'inici de la pàgina, i
hi ha tant coses aquí.

456
00:20:44,150 --> 00:20:45,310
>> El que realment està passant?

457
00:20:45,310 --> 00:20:47,460
Bé, ja saps el que,
podem netejar això.

458
00:20:47,460 --> 00:20:52,109
Si en lloc d'anar a aquest Inspeccionar
barra d'eines, aquesta eina de diagnòstic especial,

459
00:20:52,109 --> 00:20:54,150
i anar no a xarxa,
on seguim cap al dia d'avui,

460
00:20:54,150 --> 00:20:56,420
però si vaig als elements,
el que és realment agradable

461
00:20:56,420 --> 00:20:59,990
és que un navegador té molt
molt millors ulls que jo.

462
00:20:59,990 --> 00:21:02,670
I el navegador pot llegir
que embolic d'una pàgina web,

463
00:21:02,670 --> 00:21:04,700
que el correu HTML que acabem
mirat, i pot

464
00:21:04,700 --> 00:21:08,340
analitzar o llegir i
analitzar-la i tornar a donar-li format

465
00:21:08,340 --> 00:21:09,910
d'una manera agradable d'usar humà.

466
00:21:09,910 --> 00:21:11,740
Així que el que estic veient ara
en aquesta pantalla aquí

467
00:21:11,740 --> 00:21:15,470
En Elements, exactament el mateix contingut,
però han sagnia tot,

468
00:21:15,470 --> 00:21:18,140
que han colorized, però
que és exactament el mateix text

469
00:21:18,140 --> 00:21:19,620
que he descarregat des del servidor.

470
00:21:19,620 --> 00:21:23,630
>> I el que és agradable ara és que puc veure
en el cos, per a la notificació instance--,

471
00:21:23,630 --> 00:21:26,480
La pàgina encara es compon
de només un cap i un cos,

472
00:21:26,480 --> 00:21:28,660
i puc bussejar jeràrquicament aquí.

473
00:21:28,660 --> 00:21:32,420
Recordeu que Google sembla tenir
divs-- a aquest i aquest.

474
00:21:32,420 --> 00:21:33,310
Puc ampliar això.

475
00:21:33,310 --> 00:21:35,370
Hi ha un munt d'altres divs.

476
00:21:35,370 --> 00:21:36,900
Així que és una mica més complexa.

477
00:21:36,900 --> 00:21:37,400
Però espera.

478
00:21:37,400 --> 00:21:40,970
Això sembla molt més
llegible, relativament, que això.

479
00:21:40,970 --> 00:21:43,840
Per què és Google compromesa
si només enviant

480
00:21:43,840 --> 00:21:50,400
aquest gran embolic de codi d'algunes
tipus que acabem d'implementar alguna cosa

481
00:21:50,400 --> 00:21:53,640
que sembla tan simple a primera vista?

482
00:21:53,640 --> 00:21:55,270
Igual que, per què no afegir més espais?

483
00:21:55,270 --> 00:21:56,811
Per què no es premi Enter com ho vaig fer?

484
00:21:56,811 --> 00:21:59,110
Mira que bé que estava
en l'escriptura d'una pàgina web.

485
00:21:59,110 --> 00:22:00,680
Jo cop entra de manera diligent.

486
00:22:00,680 --> 00:22:03,760
Jo amb sangria així que tot
que és molt bonica i fàcil de llegir.

487
00:22:03,760 --> 00:22:08,463
Per què Google no practica la mateixa?

488
00:22:08,463 --> 00:22:11,409
>> AUDIÈNCIA: [inaudible]

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

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

491
00:22:13,180 --> 00:22:14,270
Molt just.

492
00:22:14,270 --> 00:22:16,650
No tenen alguna
persona a Google manualment

493
00:22:16,650 --> 00:22:18,160
l'actualització de la pàgina d'inici més.

494
00:22:18,160 --> 00:22:20,010
No és 1.999 més.

495
00:22:20,010 --> 00:22:21,140
Així que tenen el programari.

496
00:22:21,140 --> 00:22:25,397
Tenen altres eines que
generar dinàmicament són HTML.

497
00:22:25,397 --> 00:22:27,480
Per descomptat, que el codi en si
va ser escrit pels éssers humans,

498
00:22:27,480 --> 00:22:30,220
però la realitat és,
que és bastant just dir,

499
00:22:30,220 --> 00:22:33,340
el navegador certament no fa
importa com és brut és el codi.

500
00:22:33,340 --> 00:22:35,940
Però hi ha una encara més
raó tècnica convincent

501
00:22:35,940 --> 00:22:42,580
que Google distribueix la seva HTML
codi en un descuidat per exemple, aparentment

502
00:22:42,580 --> 00:22:48,350
manera aclaparadora tot això inclòs en conjunt
amb molt poc molt poc manera-

503
00:22:48,350 --> 00:22:51,274
en el camí de format, com ho vaig fer.

504
00:22:51,274 --> 00:22:52,570
>> AUDIÈNCIA: [inaudible]

505
00:22:52,570 --> 00:22:53,528
>> DAVID J. Malan: més ràpid?

506
00:22:53,528 --> 00:22:54,040
Per què?

507
00:22:54,040 --> 00:22:55,680
I el que has dit, Lydia?

508
00:22:55,680 --> 00:22:56,240
Més ràpid?

509
00:22:56,240 --> 00:22:57,281
Per què més ràpid?

510
00:22:57,281 --> 00:22:58,156
AUDIÈNCIA: [inaudible]

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

512
00:23:00,522 --> 00:23:02,230
DAVID J. Malan: Hi ha
no hi ha espai per a llegir.

513
00:23:02,230 --> 00:23:02,730
Sí.

514
00:23:02,730 --> 00:23:04,560
Així que pensar en el que és un espai.

515
00:23:04,560 --> 00:23:08,394
Pel que cada caràcter en el teclat presa
una certa quantitat d'espai per a representar,

516
00:23:08,394 --> 00:23:10,560
ja sigui física, igual que
ocupa molt espai,

517
00:23:10,560 --> 00:23:13,250
o d'alguna manera per sota de la
campana, que requereix memòria.

518
00:23:13,250 --> 00:23:15,740
I com un aside-- i anem a
parlar més sobre aquest tomorrow--

519
00:23:15,740 --> 00:23:19,930
cada caràcter en el teclat
normalment requereix 8 bits, o un byte.

520
00:23:19,930 --> 00:23:23,360
Així que un patró de 8 zeros o
estimats, o només 1 byte, com hem

521
00:23:23,360 --> 00:23:24,720
els éssers humans diria normalment.

522
00:23:24,720 --> 00:23:27,690
Així que és petita, però
encara és diferent de zero.

523
00:23:27,690 --> 00:23:29,940
És encara una certa quantitat d'espai.

524
00:23:29,940 --> 00:23:36,082
Així que si un enginyer o Google colpeja
la barra d'espai una vegada, i suposem

525
00:23:36,082 --> 00:23:38,540
Google, sinó super-popular-
Suposem que un mil milions de persones

526
00:23:38,540 --> 00:23:40,780
visiti la seva pàgina d'inici un dia,
o algun nombre de persones

527
00:23:40,780 --> 00:23:43,290
visitar la pàgina principal d'una
mil milions de vegades al dia,

528
00:23:43,290 --> 00:23:48,890
quants bytes addicionals que té
enginyer de programari de Google només costen

529
00:23:48,890 --> 00:23:51,310
per colpejar al seu barra d'espai un cop?

530
00:23:51,310 --> 00:23:52,692
>> AUDIÈNCIA: [inaudible]

531
00:23:52,692 --> 00:23:54,150
DAVID J. Malan: No és tan dolent.

532
00:23:54,150 --> 00:23:57,070
A només una vegades byte de mil milions.

533
00:23:57,070 --> 00:23:57,871
així A--

534
00:23:57,871 --> 00:23:59,120
PÚBLIC: 8 milions de gigabytes.

535
00:23:59,120 --> 00:24:00,370
DAVID J. Malan: No 8000000000.

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

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

538
00:24:02,410 --> 00:24:04,080
1 gigabyte seria la unitat de mesura.

539
00:24:04,080 --> 00:24:08,240
Si ell o ella fa dos
espais, 2 gigabytes.

540
00:24:08,240 --> 00:24:09,030
Tres gigabytes.

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

542
00:24:09,530 --> 00:24:11,860
Es escala costosament.

543
00:24:11,860 --> 00:24:16,150
I així, en casos com Google,
el qual, és cert, són casos extrems,

544
00:24:16,150 --> 00:24:21,450
hi ha altres qüestions que sorgeixen just
prenent decisions molt raonables

545
00:24:21,450 --> 00:24:25,744
o prendre les accions humanes molt simples,
perquè té aquest efecte magnificat.

546
00:24:25,744 --> 00:24:27,660
Així que una de les raons
això es veu tan comprimida

547
00:24:27,660 --> 00:24:30,660
és exactament com Victòria said-- era
simplement generat pels ordinadors de totes maneres.

548
00:24:30,660 --> 00:24:31,900
Així que no és gran cosa.

549
00:24:31,900 --> 00:24:33,309
Deixeu que el navegador a resoldre-ho.

550
00:24:33,309 --> 00:24:35,350
Però també deliberadament
no té molt d'espai,

551
00:24:35,350 --> 00:24:36,766
a causa que l'espai no és necessari.

552
00:24:36,766 --> 00:24:38,250
I l'espai de realitat costa diners.

553
00:24:38,250 --> 00:24:40,670
>> És ben costa temps,
perquè just per empènyer

554
00:24:40,670 --> 00:24:44,670
que molts més dades de cada
La seu de google.com només

555
00:24:44,670 --> 00:24:47,710
ha de prendre una certa quantitat de
temps, fins i tot si es tracta de mil·lisegons

556
00:24:47,710 --> 00:24:51,190
o microsegons, sinó que se suma
més del que molts usuaris, o més probablement,

557
00:24:51,190 --> 00:24:52,270
és probable que costa diners.

558
00:24:52,270 --> 00:24:54,690
Google probablement es connecta a
una altra persona al món, un

559
00:24:54,690 --> 00:24:56,398
dels que mira de fit a fit
punts, i si tenen

560
00:24:56,398 --> 00:24:59,880
algun tipus de relació financera
per la qual cosa els costos de les seves dades diners,

561
00:24:59,880 --> 00:25:01,730
doncs que ho facin
reduir al mínim la quantitat de dades

562
00:25:01,730 --> 00:25:04,530
que estan escopint a
seva connexió a Internet.

563
00:25:04,530 --> 00:25:07,630
>> Així que el més divertit, però, en última instància,
o potser el més tranquil·litzador,

564
00:25:07,630 --> 00:25:11,030
és que tot i que això sembla terriblement
aclaparadora, al final de la dia,

565
00:25:11,030 --> 00:25:16,750
segueix sent els mateixos principis exactes com
aquesta pàgina molt simple aquí d'un HTML

566
00:25:16,750 --> 00:25:17,390
pàgina.

567
00:25:17,390 --> 00:25:20,610
Així que per resumir i perquè
tenir una versió canònica si no fossis

568
00:25:20,610 --> 00:25:25,900
seguint al llarg d'elecció aquí, aquí
podria ser la més simple de les pàgines web,

569
00:25:25,900 --> 00:25:28,240
així que alguna cosa per jugar amb potser més endavant.

570
00:25:28,240 --> 00:25:30,790
>> Bé, anem a introduir una
parell d'altres idees ara.

571
00:25:30,790 --> 00:25:33,420
Estem a punt d'introduir
cosa que es diu una etiqueta d'estil.

572
00:25:33,420 --> 00:25:38,110
Podem estilitzar aquesta pàgina
en formes més interessants.

573
00:25:38,110 --> 00:25:40,860
Així, mentre correu electrònic HTML
es tracta de marcar

574
00:25:40,860 --> 00:25:44,470
les dades, tipus d'especificació a una
navegador com estructurar les dades,

575
00:25:44,470 --> 00:25:48,110
on posar-ho, CSS o
els fulls d'estil en cascada,

576
00:25:48,110 --> 00:25:52,640
és una segona llengua que
aconsegueix generalment barrejats amb HTML

577
00:25:52,640 --> 00:25:55,670
com anem a veure-- però podem netejar
que fins a en un moment-- que pren

578
00:25:55,670 --> 00:25:59,850
que l'última milla, i s'estilitza ella.

579
00:25:59,850 --> 00:26:02,460
Es posa els colors tot just a la dreta,
la mida de la font just a la dreta,

580
00:26:02,460 --> 00:26:03,860
el posicionament just.

581
00:26:03,860 --> 00:26:06,510
És tot sobre l'estètica
o el format, no es tracta de

582
00:26:06,510 --> 00:26:08,330
les dades fonamental en si.

583
00:26:08,330 --> 00:26:11,390
I la manera més fàcil per mostrar
aquest és potser l'exemple.

584
00:26:11,390 --> 00:26:15,320
Així que vaig a anar
al meu arxiu de text senzill.

585
00:26:15,320 --> 00:26:17,970
I en un moment, em quedo
ens guiarà pel procés

586
00:26:17,970 --> 00:26:19,360
de fer això per nosaltres mateixos.

587
00:26:19,360 --> 00:26:23,310
>> Vaig a tornar al meu arxiu
aquí i tornar a carregar la pàgina

588
00:26:23,310 --> 00:26:25,800
per confirmar el que sembla.

589
00:26:25,800 --> 00:26:27,190
Aquí és on som ara.

590
00:26:27,190 --> 00:26:31,170
Sento que els nens gaudirien
tenir una mica de color a aquesta pàgina web.

591
00:26:31,170 --> 00:26:34,480
Així que vaig a pujar aquí
a la capçalera de la pàgina.

592
00:26:34,480 --> 00:26:38,130
I jo faré l'estil, / estil.

593
00:26:38,130 --> 00:26:44,060
I després dins d'aquesta, vaig
per dir-li al cos de la meva page--

594
00:26:44,060 --> 00:26:46,870
i aquest format és, per
primer cop d'ull, potser una mica

595
00:26:46,870 --> 00:26:49,400
estrany, però convencional.

596
00:26:49,400 --> 00:26:55,010
Vaig a dir que el fons
color d'aquesta pàgina ha de ser de color verd.

597
00:26:55,010 --> 00:26:57,960
I això és, per desgràcia
tipus de disseny no és el millor.

598
00:26:57,960 --> 00:27:00,710
Recordeu que amb anterioritat
en el món de HTML,

599
00:27:00,710 --> 00:27:03,190
Li vaig dir que els atributs
són aquests parells de valors clau.

600
00:27:03,190 --> 00:27:05,760
Una cosa és igual a la cita
Fi de la cita "alguna cosa".

601
00:27:05,760 --> 00:27:08,810
En el món de CSS, que era
dissenyada per algunes persones diferents,

602
00:27:08,810 --> 00:27:11,020
van decidir que, si
món, parells de valors clau

603
00:27:11,020 --> 00:27:13,920
seria la paraula de còlon alguna cosa.

604
00:27:13,920 --> 00:27:15,220
Així que és la mateixa idea, però.

605
00:27:15,220 --> 00:27:18,620
S'associa un valor
amb alguna clau que d'alguna manera

606
00:27:18,620 --> 00:27:20,330
influeix en el comportament d'aquesta pàgina.

607
00:27:20,330 --> 00:27:21,901
>> I que és fàcil endevinar.

608
00:27:21,901 --> 00:27:24,150
Què és això probablement va
de fer, fins i tot si vostè mai ha

609
00:27:24,150 --> 00:27:27,867
vist HTML o CSS abans?

610
00:27:27,867 --> 00:27:29,450
AUDIÈNCIA: Canviar el color de fons.

611
00:27:29,450 --> 00:27:30,560
DAVID J. Malan: Sí,
canviar el color de fons.

612
00:27:30,560 --> 00:27:33,280
I específicament el
color de fons del cos.

613
00:27:33,280 --> 00:27:36,290
Però en la mesura en la
cos per ara és la web

614
00:27:36,290 --> 00:27:38,870
page-- que és l'única cosa
per sota de la barra de títol realmente--

615
00:27:38,870 --> 00:27:40,870
que probablement va a
influir en el mateix.

616
00:27:40,870 --> 00:27:41,430
Així que anem a veure.

617
00:27:41,430 --> 00:27:42,490
Anem a guardar això.

618
00:27:42,490 --> 00:27:44,310
Quin aquí i tornar a carregar.

619
00:27:44,310 --> 00:27:46,140
És bastant horrible.

620
00:27:46,140 --> 00:27:48,070
I el que està passant
aquí és un efecte secundari.

621
00:27:48,070 --> 00:27:49,850
Acabo de triar aquesta imatge a l'atzar.

622
00:27:49,850 --> 00:27:53,305
Per què el no verds
impregnant darrere de Mickey?

623
00:27:53,305 --> 00:27:54,180
AUDIÈNCIA: [inaudible]

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

625
00:27:56,880 --> 00:27:57,880
DAVID J. Malan: Exactament.

626
00:27:57,880 --> 00:28:01,750
Doncs resulta que les imatges, bastant
tant totes les imatges que podríem fer servir,

627
00:28:01,750 --> 00:28:03,670
són tots rectangles-- de rectangles.

628
00:28:03,670 --> 00:28:07,710
Fins i tot si Mickey té alguns revolts
per a si mateix i té un fons,

629
00:28:07,710 --> 00:28:09,330
que el fons ha de ser alguna cosa.

630
00:28:09,330 --> 00:28:10,280
Ha de ser de color blanc.

631
00:28:10,280 --> 00:28:11,910
Ha de ser negre o alguna altra cosa.

632
00:28:11,910 --> 00:28:13,650
Pot ser transparent.

633
00:28:13,650 --> 00:28:16,100
I, de fet, podria
obrir Mickey Mouse aquí

634
00:28:16,100 --> 00:28:18,590
en un programa anomenat Photoshop
o alguna cosa semblant

635
00:28:18,590 --> 00:28:21,176
i canviar tot això blanca
fons a transparent,

636
00:28:21,176 --> 00:28:22,550
per la qual cosa el verd brilli a través.

637
00:28:22,550 --> 00:28:25,980
Però això és una cosa que necessitaria
a demanar de mi mateix o un artista gràfic

638
00:28:25,980 --> 00:28:28,130
o un dissenyador en el meu
companyia, per exemple,

639
00:28:28,130 --> 00:28:31,490
fer, sobretot perquè acabo
prestat aquest d'internet.

640
00:28:31,490 --> 00:28:33,030
Però això és per què passa això.

641
00:28:33,030 --> 00:28:34,980
>> Llavors, què més podríem desitjar fer?

642
00:28:34,980 --> 00:28:41,040
Doncs bé, el que es vol dir que
Realment esperem que gaudeixi de la seva estada.

643
00:28:41,040 --> 00:28:44,150
I per donar èmfasi, vull
per fer d'aquest fort,

644
00:28:44,150 --> 00:28:48,310
i pel que vaig a dir oberta i forta
tancar fort i torneu a carregar.

645
00:28:48,310 --> 00:28:50,320
I és una mica difícil
per veure al projector

646
00:28:50,320 --> 00:28:53,250
però potser realment ara
salta a una mica més.

647
00:28:53,250 --> 00:28:56,180
El que pot afegir cursiva en aquest
Així, davant negreta d'aquesta manera.

648
00:28:56,180 --> 00:28:57,500
Podríem canviar els colors.

649
00:28:57,500 --> 00:29:01,610
De fet, només per diversió, jo sóc
seguirà endavant i fer això.

650
00:29:01,610 --> 00:29:05,120
Realment no m'agrada la forma en què el meu
paràgrafs són tan a prop junts,

651
00:29:05,120 --> 00:29:06,870
pel que podria fer alguna cosa com això.

652
00:29:06,870 --> 00:29:13,310
Vaig a dir-li al navegador,
canviar cada etiqueta de paràgraf per tenir,

653
00:29:13,310 --> 00:29:16,952
anem a dir-- realitat, saps què,
anem a alinear es text-align, centre.

654
00:29:16,952 --> 00:29:19,410
I de nou, sé que això només es
perquè algú m'ho va ensenyar

655
00:29:19,410 --> 00:29:21,118
o que ho vaig buscar en
una referència en línia.

656
00:29:21,118 --> 00:29:22,450
Així que em deixa guardar això.

657
00:29:22,450 --> 00:29:25,070
I, ah, ara tinc
centrada en la imatge allà.

658
00:29:25,070 --> 00:29:28,490
I en realitat, saps què, si
Moc la imatge en un paràgraf

659
00:29:28,490 --> 00:29:34,510
tag-- de manera que un tercer paràgraf,
tot i que no és de text.

660
00:29:34,510 --> 00:29:36,917
Guardem l'arxiu i tornar a carregar.

661
00:29:36,917 --> 00:29:40,000
Ara la pàgina està començant a veure espècie
de-- És a dir, segueix sent bastant lleig,

662
00:29:40,000 --> 00:29:43,180
però almenys sembla que vaig passar
dos minuts en lloc d'un minut i

663
00:29:43,180 --> 00:29:43,950
pel que és.

664
00:29:43,950 --> 00:29:47,200
>> I així, de forma incremental, podem fer
aquests canvis estètics ara a la pàgina?

665
00:29:47,200 --> 00:29:50,860
Realment no he canviat les dades en el
pàgina que no és l'addició de la paraula de veritat.

666
00:29:50,860 --> 00:29:52,650
He afegit metadades, si es vol.

667
00:29:52,650 --> 00:29:54,830
Hey, navegador, fan que el
paraula "realment" en negreta.

668
00:29:54,830 --> 00:29:56,940
No obstant això, les dades no és fort.

669
00:29:56,940 --> 00:29:57,830
Això és metadades.

670
00:29:57,830 --> 00:29:59,410
Les dades són "realment".

671
00:29:59,410 --> 00:30:02,200
Així que encara tenim alguns
els mateixos conceptes com abans.

672
00:30:02,200 --> 00:30:05,990
Bé, és clar, això no és a la web,
així que vaig a fer un pas final aquí.

673
00:30:05,990 --> 00:30:10,300
>> Vaig a anar a hello.html
i acaba de seleccionar i copiar això.

674
00:30:10,300 --> 00:30:12,285
I ara vaig a
entrar a Cloud9, que

675
00:30:12,285 --> 00:30:13,910
Vaig a caminar a través d'un moment.

676
00:30:13,910 --> 00:30:17,080
I les probabilitats són que aviat serà, si
no ho ha fet, en una pantalla com aquesta.

677
00:30:17,080 --> 00:30:21,080
I permetin-me donar-li una ràpida
Cloud9 recorregut del que realment és.

678
00:30:21,080 --> 00:30:26,590
Així que de nou Cloud 9 és
aquest servei basat en el núvol

679
00:30:26,590 --> 00:30:30,580
i que em dóna la il·lusió
de tenir la nostra pròpia màquina virtual

680
00:30:30,580 --> 00:30:33,090
en el núvol, tècnicament
un contenidor en el núvol,

681
00:30:33,090 --> 00:30:35,160
que tenim plena
privilegis administratius a.

682
00:30:35,160 --> 00:30:37,130
Per tant, en teoria, ningú
una altra part del món té

683
00:30:37,130 --> 00:30:39,152
l'accés a la pantalla estic
mirant en aquest moment,

684
00:30:39,152 --> 00:30:40,860
excepte potser les persones
que dirigeix ​​el lloc,

685
00:30:40,860 --> 00:30:43,470
perquè tècnicament tenen
l'accés físic i així successivament.

686
00:30:43,470 --> 00:30:44,740
>> Llavors, què és el que veiem en aquest entorn?

687
00:30:44,740 --> 00:30:46,230
Vaig a allunyar,
perquè és una mica petita.

688
00:30:46,230 --> 00:30:48,104
I permetin-me assenyalar llarg
aquí només per un moment.

689
00:30:48,104 --> 00:30:53,210
A la banda esquerra de la meva i la seva
la pantalla, hi ha un explorador d'arxius de l'esquerra.

690
00:30:53,210 --> 00:30:55,362
Així similar en esperit
per a Mac OS i Windows.

691
00:30:55,362 --> 00:30:57,070
Aquests són tots de la
arxius al meu compte.

692
00:30:57,070 --> 00:30:59,250
I per defecte, si el seu
compte és com la meva,

693
00:30:59,250 --> 00:31:05,090
veurà o poc veus
holamundo.html i readme.md.

694
00:31:05,090 --> 00:31:07,950
Per aquí a la dreta, és a dir
on els meus arxius de text es van a anar.

695
00:31:07,950 --> 00:31:11,620
Si alguna vegada has utilitzat Microsoft
Word o el Bloc de notes o TextEdit,

696
00:31:11,620 --> 00:31:14,100
aquest és el meu paraula d'edició
d'arxius que se n'anirà.

697
00:31:14,100 --> 00:31:16,540
I llavors el més arcà
característica d'aquest entorn

698
00:31:16,540 --> 00:31:20,100
que no utilitzarem realment necessita és
aquí es diu una finestra de terminal.

699
00:31:20,100 --> 00:31:23,390
Si ha utilitzat des de DOS
antany, aquest és el Linux

700
00:31:23,390 --> 00:31:25,450
o l'equivalent per a Linux de DOS.

701
00:31:25,450 --> 00:31:28,190
És un interface-- basat en text
no hi ha clics del ratolí, sense arrossegament.

702
00:31:28,190 --> 00:31:30,770
Tot el que pots fer és escriure
ordres, però aquests comandaments

703
00:31:30,770 --> 00:31:34,400
pot crear arxius, moure arxius, obert
directoris, prop de directoris,

704
00:31:34,400 --> 00:31:35,740
fer qualsevol nombre de coses.

705
00:31:35,740 --> 00:31:38,060
Però per ara, només tindrem
passar el temps aquí.

706
00:31:38,060 --> 00:31:39,050
>> I així anem a fer això.

707
00:31:39,050 --> 00:31:41,008
Si estàs en aquesta
medi ambient, que ha de

708
00:31:41,008 --> 00:31:45,900
ser si ha creat un espai de treball
ja, seguir endavant i només ha d'anar fins

709
00:31:45,900 --> 00:31:48,690
a Arxiu, Nou per un moment.

710
00:31:48,690 --> 00:31:51,740
I això li donarà un nou
pestanya dreta aquí al mig.

711
00:31:51,740 --> 00:31:54,250
I sol-- i de deixar
seguir endavant i fer-ho.

712
00:31:54,250 --> 00:31:59,910
Seguirem endavant i ara no Arxiu, Guardar
i seguir endavant i cridar hello.html,

713
00:31:59,910 --> 00:32:02,740
No s'ha de confondre amb
holamundo.html, que

714
00:32:02,740 --> 00:32:06,910
va arribar amb la seva nova compte gratuït,
que és simplement un arxiu d'exemple.

715
00:32:06,910 --> 00:32:11,020
Veureu que apareixen de cop i volta,
més probable en el costat de l'esquerra,

716
00:32:11,020 --> 00:32:12,810
i la fitxa seguirà sent oberta.

717
00:32:12,810 --> 00:32:21,300
I deixa que et animo ara per recrear
aquesta imatge o algunes variants dels mateixos.

718
00:32:21,300 --> 00:32:24,607
I si no pot veure-ho del tot en el
pantalla, és idèntic a les diapositives

719
00:32:24,607 --> 00:32:26,190
que és probable que tingui en una altra pestanya.

720
00:32:26,190 --> 00:32:29,296
>> Així que en resum, fer la seva primera pàgina web,
guardar-lo i, a continuació, en un moment,

721
00:32:29,296 --> 00:32:31,170
Vaig a mostrar com es
en realitat pot veure això.

722
00:32:31,170 --> 00:32:32,970
Però canviar almenys una cosa.

723
00:32:32,970 --> 00:32:35,400
Canviar a HolaMon
mica de la seva pròpia elecció,

724
00:32:35,400 --> 00:32:39,821
pel que està convençut que és el seu
presentar i no la acabo de crear.

725
00:32:39,821 --> 00:32:40,320
Tot bé.

726
00:32:40,320 --> 00:32:43,804
I quan hagi cap llista--
rush-- quan estigui llest,

727
00:32:43,804 --> 00:32:46,220
seguir endavant i guardar l'arxiu
una vegada que hagi realitzat aquests canvis.

728
00:32:46,220 --> 00:32:49,540
I si fa clic al
botó fins a executar la part superior, aquesta

729
00:32:49,540 --> 00:32:53,610
ha d'obrir una nova pestanya que li dirà
el URL es pot visitar l'arxiu en,

730
00:32:53,610 --> 00:32:56,380
però pot ser que prengui un moment per
entre cometes "iniciar Apache", que

731
00:32:56,380 --> 00:32:58,820
és el nom del servidor web.

732
00:32:58,820 --> 00:33:02,430
Així que vagi amb compte de fer exactament
el que està a l'arxiu, en última instància.

733
00:33:02,430 --> 00:33:04,610
Així que ara mateix, vaig a apropar.

734
00:33:04,610 --> 00:33:07,780
Si començo a escriure
-Corchete Obert HTML, previ avís

735
00:33:07,780 --> 00:33:09,650
m'està incitant a acabar el meu pensament.

736
00:33:09,650 --> 00:33:13,750
I si he acabat el meu pensament,
Em fa automàticament l'etiqueta de tancament.

737
00:33:13,750 --> 00:33:17,190
Però l'expectativa és llavors em va a colpejar
Entrar i, a continuació, passar l'interior hi ha

738
00:33:17,190 --> 00:33:21,180
i no dins del cap i
llavors que faig a l'interior del cos.

739
00:33:21,180 --> 00:33:24,430
I és una mica estrany al principi,
perquè està fent un treball per a vostè,

740
00:33:24,430 --> 00:33:27,110
però s'adonen que en última instància
que li estalvia pulsacions de tecles.

741
00:33:27,110 --> 00:33:30,500
I de fet, una característica molt comuna de
entorns de programació d'aquests dies

742
00:33:30,500 --> 00:33:33,260
tant per al desenvolupament web com
això i programació real,

743
00:33:33,260 --> 00:33:36,960
de la qual parlarem al matí,
Són aquestes característiques d'auto-completat,

744
00:33:36,960 --> 00:33:39,710
coses que simplement permeten una
programador o un dissenyador

745
00:33:39,710 --> 00:33:42,010
per escriure menys pulsacions a
aconseguir la mateixa cosa.

746
00:33:42,010 --> 00:33:43,176
De vegades és bo, però.

747
00:33:43,176 --> 00:33:44,560
A vegades és només una molèstia.

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

749
00:33:49,290 --> 00:33:54,010
I, de nou, una vegada que hagi transcrit
la corredora o alguna variant de la mateixa,

750
00:33:54,010 --> 00:33:57,360
pot fer clic al botó Executar sobre de la tapa.

751
00:33:57,360 --> 00:33:59,910
I després, a la part inferior
finestra, se li informarà

752
00:33:59,910 --> 00:34:04,290
en quina URL es pot visitar la seva pàgina web.

753
00:34:04,290 --> 00:34:08,790
La meva, per exemple, està en
business-daharvard.c9users.io

754
00:34:08,790 --> 00:34:11,480
i així successivament.

755
00:34:11,480 --> 00:34:14,580
Molt bé, així, deixar que me-- alguna pregunta?

756
00:34:14,580 --> 00:34:19,460
Qualsevol altra pregunta sobre aconseguir just
aquest treball abans d'afegir característiques?

757
00:34:19,460 --> 00:34:21,692
I permetin-me proposar, just
per aconseguir que la gent comfortable--

758
00:34:21,692 --> 00:34:24,400
perquè una cosa és simplement
copiar i enganxar cegament el que he fet.

759
00:34:24,400 --> 00:34:27,177
Però només perquè la gent lluiten
amb almenys una tasca pendent,

760
00:34:27,177 --> 00:34:28,510
Vaig a encendre una mica de música.

761
00:34:28,510 --> 00:34:32,630
Vaig a proposar una llista de
coses que potencialment pot afegir.

762
00:34:32,630 --> 00:34:34,086
I que sens dubte pot utilitzar Google.

763
00:34:34,086 --> 00:34:36,210
¿I per què no ens
Proposem que intenta resoldre

764
00:34:36,210 --> 00:34:38,710
almenys un determinat problema aquí.

765
00:34:38,710 --> 00:34:45,090
Així que en termes d'etiquetes,
permetin-me tornar a utilitzar aquest aquí.

766
00:34:45,090 --> 00:34:48,280
>> En realitat, deixin-me posar
en una forma de text.

767
00:34:48,280 --> 00:35:02,380
Diguem que entre les etiquetes que podríem
utilitzar aquí hi ha algunes etiquetes aquí.

768
00:35:02,380 --> 00:35:06,090
Hem vist l'etiqueta de paràgraf.

769
00:35:06,090 --> 00:35:07,850
Ara es va a acte-completar.

770
00:35:07,850 --> 00:35:12,220
etiqueta de paràgraf, l'etiqueta d'ancoratge.

771
00:35:12,220 --> 00:35:15,250
Diguem que vostè vol
fer alguna cosa més gran,

772
00:35:15,250 --> 00:35:19,480
pel que podria com-
l'etiqueta span pot ajudar.

773
00:35:19,480 --> 00:35:23,010
Bé, és possible que necessiti una mica d'ajuda
perquè, en un moment.

774
00:35:23,010 --> 00:35:24,830
Hem vist div.

775
00:35:24,830 --> 00:35:26,170
Veuràs que hi ha taula.

776
00:35:26,170 --> 00:35:27,928
Hi ha una cosa que es diu 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
Tornar a això en un moment.

780
00:35:34,770 --> 00:35:36,590
Quina altra cosa podria ser útil?

781
00:35:36,590 --> 00:35:38,310
Hi ha forts.

782
00:35:38,310 --> 00:35:43,640
Hi ha èmfasi, o més aviat em.

783
00:35:43,640 --> 00:35:50,110
There's-- què més
pot ser que li ve de gust aquí?

784
00:35:50,110 --> 00:35:51,930
Bé, anem a fer una
mira que en el seu conjunt.

785
00:35:51,930 --> 00:35:53,230
Forma, que hem vist.

786
00:35:53,230 --> 00:35:54,130
No hi ha manera.

787
00:35:54,130 --> 00:35:56,500
Hi ha entrada i alguns altres.

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

789
00:35:58,924 --> 00:36:00,090
Molt bé, així que anem a fer això.

790
00:36:00,090 --> 00:36:02,330
Per respondre a una Victòria
pregunta, em va deixar entrar primer

791
00:36:02,330 --> 00:36:05,020
només assegureu-vos que tothom està
capaç d'aconseguir el seu treball hola.

792
00:36:05,020 --> 00:36:06,900
A continuació presentaré
un parell d'altres idees.

793
00:36:06,900 --> 00:36:09,209
A continuació, anem a deixar que la gent a resoldre
algun problema pel seu compte.

794
00:36:09,209 --> 00:36:11,500
A continuació, anem a realment tornar
a la noció d'una forma,

795
00:36:11,500 --> 00:36:14,950
i anem a tornar a implementar en realitat
junts la interfície per a l'usuari,

796
00:36:14,950 --> 00:36:16,450
per així dir-ho, pel mateix Google.

797
00:36:16,450 --> 00:36:19,700
Utilitzarem Google com a la part de darrere i deixem
ells fan el treball dur, la recerca,

798
00:36:19,700 --> 00:36:22,760
però anem a recrear l'extrem davanter
de Google i el formulari de cerca

799
00:36:22,760 --> 00:36:24,520
que tenen en la seva pròpia pàgina.

800
00:36:24,520 --> 00:36:27,050
I així anem a tornar a
aquestes etiquetes en un moment.

801
00:36:27,050 --> 00:36:30,270
>> Així que això era el que jo
proposta fa un moment.

802
00:36:30,270 --> 00:36:33,940
Podem afegir l'estilització a una
pàgina dins d'aquesta etiqueta d'estil,

803
00:36:33,940 --> 00:36:36,950
i podem estilitzar el fons
el color, l'alineació del text,

804
00:36:36,950 --> 00:36:39,000
ja sigui central o cap a l'esquerra o la dreta.

805
00:36:39,000 --> 00:36:41,630
Però molt ràpidament que ho faria
trobar o un dissenyador de pàgines web

806
00:36:41,630 --> 00:36:44,060
es veurà que aquesta
es torna una mica difícil de manejar,

807
00:36:44,060 --> 00:36:48,330
perquè estàs fent el que cal
anomenada barreja de contingut

808
00:36:48,330 --> 00:36:50,120
amb la presentació dels mateixos.

809
00:36:50,120 --> 00:36:53,756
Que va a barrejar les seves dades
i l'estètica de la mateixa.

810
00:36:53,756 --> 00:36:56,380
I de fet, si es té en compte
el que succeirà amb el temps--

811
00:36:56,380 --> 00:36:58,350
aquesta és una molt petita
pàgina web, és clar.

812
00:36:58,350 --> 00:37:01,590
Però si afegeixo contingut a aquesta pàgina
i afegeixo estil a aquesta pàgina,

813
00:37:01,590 --> 00:37:04,650
la pàgina es posa molt ràpidament
més i més i més.

814
00:37:04,650 --> 00:37:07,510
I suposem que jo vull
tenir una segona pàgina web que

815
00:37:07,510 --> 00:37:09,010
comparteix alguns d'aquests atributs.

816
00:37:09,010 --> 00:37:12,350
Suposem que la meva pàgina web per el meu segon
site-- també, vull centre de tot,

817
00:37:12,350 --> 00:37:14,960
i jo també vull tot
amb un fons verd.

818
00:37:14,960 --> 00:37:17,940
Estic més o menys haurà de
copiar i enganxar algunes d'aquestes línies

819
00:37:17,940 --> 00:37:20,730
en aquest segon arxiu, que se sent bé.

820
00:37:20,730 --> 00:37:22,030
Es va a resoldre el problema.

821
00:37:22,030 --> 00:37:26,060
>> Però el que si vull una tercera pàgina
o una pàgina o una pàgina 30 de 40 º?

822
00:37:26,060 --> 00:37:28,730
Ara vaig a ser copiat i
enganxar una gran quantitat de codi duplicat

823
00:37:28,730 --> 00:37:30,430
en diversos arxius.

824
00:37:30,430 --> 00:37:32,600
I així suposar que
Decideixo o m'han dit,

825
00:37:32,600 --> 00:37:34,780
Ei, no estem utilitzant una
fons verd més.

826
00:37:34,780 --> 00:37:36,380
Anem a començar a utilitzar taronja.

827
00:37:36,380 --> 00:37:38,690
Què cal canviar?

828
00:37:38,690 --> 00:37:42,900
Bé, vostè ha de canviar aquest estil
de verd a taronja a la forma en molts llocs?

829
00:37:42,900 --> 00:37:44,920
Com 30 o 40 places.

830
00:37:44,920 --> 00:37:45,900
És tediós.

831
00:37:45,900 --> 00:37:47,039
És propens a error.

832
00:37:47,039 --> 00:37:49,580
Hi ha una sèrie de raons
en el qual no vol induir

833
00:37:49,580 --> 00:37:51,840
aquest tipus de dolor per si mateix.

834
00:37:51,840 --> 00:37:54,760
I així, no seria agradable
si podíem prendre el que acabo

835
00:37:54,760 --> 00:37:58,240
posar entre aquests dos grogues
etiquetes, aquestes etiquetes d'estil,

836
00:37:58,240 --> 00:38:04,050
factoritzar-lo a terme, i posar tot de la meva
estilització en un arxiu central

837
00:38:04,050 --> 00:38:08,470
que tots els 30 o 40 dels meus altres arxius
prestat d'alguna manera o de referència,

838
00:38:08,470 --> 00:38:11,640
no molt diferent de la creació de xarxes
diagrames que fèiem abans?

839
00:38:11,640 --> 00:38:15,030
>> Així que si entro aquí, estic
va a proposar en realitat

840
00:38:15,030 --> 00:38:17,880
qual se substitueix la
etiqueta d'estil amb una mica

841
00:38:17,880 --> 00:38:21,620
crida l'etiqueta d'enllaç, el qual
és horrible, horrible anomenat,

842
00:38:21,620 --> 00:38:24,370
perquè no s'utilitza el
etiqueta d'enllaç per crear el

843
00:38:24,370 --> 00:38:26,380
Sabem que els éssers humans com un enllaç en una pàgina web.

844
00:38:26,380 --> 00:38:29,750
Per a això, s'utilitza la qual l'etiqueta?

845
00:38:29,750 --> 00:38:31,464
Com es crea un enllaç a una pàgina web?

846
00:38:31,464 --> 00:38:32,130
AUDIÈNCIA: La a.

847
00:38:32,130 --> 00:38:34,870
DAVID J. Malan: La una o ancoratge
etiqueta, que va anar a Disney abans.

848
00:38:34,870 --> 00:38:39,090
L'etiqueta d'enllaç aquí està dient
esto-- enllaç a un arxiu anomenat

849
00:38:39,090 --> 00:38:44,350
styles.css, la relació a la qual
serà que és el meu estil.

850
00:38:44,350 --> 00:38:48,290
Així que aquest és un dels de S a
els fulls d'estil en cascada CSS--.

851
00:38:48,290 --> 00:38:50,490
Estil sheet-- dues de la dècada de S en CSS.

852
00:38:50,490 --> 00:38:52,550
En cascada de fulles d'estil.

853
00:38:52,550 --> 00:38:58,640
Això només vol dir, bé, navegador, anar
styles.css troba al servidor local

854
00:38:58,640 --> 00:39:01,870
i utilitzar-lo com el seu full d'estil,
el que significa dins d'aquest arxiu

855
00:39:01,870 --> 00:39:05,310
serà la totalitat de la
estilitzacions que acabem de fet.

856
00:39:05,310 --> 00:39:07,396
I així el que aquest arxiu
podria ser com és aquesta.

857
00:39:07,396 --> 00:39:10,020
I només vaig a fer això és un ràpid
exemple, pel fet que no cal

858
00:39:10,020 --> 00:39:12,000
per obtenir massa en les males herbes aquí.

859
00:39:12,000 --> 00:39:17,840
Però si copio això, el que estic proposant
és que un programador crear un nou arxiu,

860
00:39:17,840 --> 00:39:24,450
enganxar en aquells lines--
whoops-- enganxar en aquestes línies,

861
00:39:24,450 --> 00:39:32,270
guardar-lo com styles.css i, a continuació, en
l'altre arxiu, eliminar tot això

862
00:39:32,270 --> 00:39:35,450
i torni a posar en el seu lloc
amb aquesta etiqueta d'enllaç.

863
00:39:35,450 --> 00:39:43,090
Així que si em enllaç href = "styles.css",
la relació serà "estil"

864
00:39:43,090 --> 00:39:44,170
el codi de tancament.

865
00:39:44,170 --> 00:39:45,250
Guarda-ho.

866
00:39:45,250 --> 00:39:47,000
Tornar al meu HolaMon.

867
00:39:47,000 --> 00:39:48,690
Recarregar.

868
00:39:48,690 --> 00:39:51,290
>> Literalment no ha passat res.

869
00:39:51,290 --> 00:39:54,710
Això és una bona cosa, perquè
significa en realitat és tot treball.

870
00:39:54,710 --> 00:39:58,860
Per provar tant, suposo que faig una
error tipogràfic, i això ho dic "styles.css"

871
00:39:58,860 --> 00:40:03,080
amb un capital S, que és
incorrecte i, a continuació, tornar a carregar.

872
00:40:03,080 --> 00:40:05,470
Ara es pot veure que simplement no funciona.

873
00:40:05,470 --> 00:40:06,362
Ara, per què?

874
00:40:06,362 --> 00:40:08,070
Bé, anem a utilitzar una
tècnica d'abans.

875
00:40:08,070 --> 00:40:10,153
Déjame anar endavant i, en
meu navegador, a Chrome, estic

876
00:40:10,153 --> 00:40:12,900
va a obrir aquest especial
pestanya de xarxa com abans,

877
00:40:12,900 --> 00:40:15,560
i deixa que torni a carregar la pàgina.

878
00:40:15,560 --> 00:40:19,341
El que no et sorprèn veure ara?

879
00:40:19,341 --> 00:40:20,840
O potser vostè és sorprès al veure-ho.

880
00:40:20,840 --> 00:40:23,225
De qualsevol manera, què veus ara?

881
00:40:23,225 --> 00:40:24,100
AUDIÈNCIA: [inaudible]

882
00:40:24,100 --> 00:40:24,770
DAVID J. Malan: No ha trobat.

883
00:40:24,770 --> 00:40:25,680
Per què no es va trobar?

884
00:40:25,680 --> 00:40:28,480
Així mateix, el capital Styles.css--
S- no existeix.

885
00:40:28,480 --> 00:40:29,230
Jo mal anomenada ella.

886
00:40:29,230 --> 00:40:30,430
simple error tipogràfic.

887
00:40:30,430 --> 00:40:33,816
Però m'estic comprensiblement ara
404, perquè el servidor està dient, hey,

888
00:40:33,816 --> 00:40:34,440
no ha trobat.

889
00:40:34,440 --> 00:40:36,300
Literalment, no sé
on aquest arxiu és.

890
00:40:36,300 --> 00:40:38,880
Així, com a resultat, el navegador
et mostra el que pot,

891
00:40:38,880 --> 00:40:42,860
el contingut en brut de la pàgina,
el qual era un 200, el codi HTML,

892
00:40:42,860 --> 00:40:45,390
però l'estilització no pot
s'afegeix després d'això.

893
00:40:45,390 --> 00:40:47,120
I això és el que es vol dir amb cascada.

894
00:40:47,120 --> 00:40:49,070
Pot espècie d'agregar
després, i quin tipus de

895
00:40:49,070 --> 00:40:50,874
refina l'estètica de la pàgina web.

896
00:40:50,874 --> 00:40:53,790
I fins i tot es pot anul·lar els
però, els estils amb altres arxius de fulls d'estil

897
00:40:53,790 --> 00:40:54,700
si vols.

898
00:40:54,700 --> 00:40:57,780
No ha trobat, però, en aquest cas,
perquè, per descomptat, que mal anomenada ella.

899
00:40:57,780 --> 00:41:00,330
Així que hauria de arreglar això primer.

900
00:41:00,330 --> 00:41:04,667
>> Així que seguirem endavant i
proposar la següent.

901
00:41:04,667 --> 00:41:07,410

902
00:41:07,410 --> 00:41:11,140
Seguirem endavant i fer això.

903
00:41:11,140 --> 00:41:14,220
A partir d'potser
HolaMon seu arxiu,

904
00:41:14,220 --> 00:41:17,740
em van deixar de convidar a una parella
de presentar suggeriments.

905
00:41:17,740 --> 00:41:20,400
Així, Victòria, que volia
fer una mica de text més gran, oi?

906
00:41:20,400 --> 00:41:24,555
Molt bé, així que pot
no fer el text més gran.

907
00:41:24,555 --> 00:41:26,860
I anem a arrencar cadascun
només un problema a resoldre.

908
00:41:26,860 --> 00:41:30,867
Fer text més gran.

909
00:41:30,867 --> 00:41:32,700
Jo no em vaig a molestar
escriure això quan

910
00:41:32,700 --> 00:41:35,600
comptar amb tecnologia de bala per aquí.

911
00:41:35,600 --> 00:41:39,970
Així alguns problemes.

912
00:41:39,970 --> 00:41:44,670
Així que anem a tractar
per fer el text més gran.

913
00:41:44,670 --> 00:41:45,170
Tot bé.

914
00:41:45,170 --> 00:41:48,360
Quina altra cosa podria proposar a algú?

915
00:41:48,360 --> 00:41:50,332
Què més podríem volem
de fer en una pàgina web?

916
00:41:50,332 --> 00:41:52,040
Anem a arribar a una
llista curta de coses

917
00:41:52,040 --> 00:41:55,366
i després delegar en el
grup per resoldre això.

918
00:41:55,366 --> 00:41:56,270
>> AUDIÈNCIA: [inaudible]

919
00:41:56,270 --> 00:42:02,251
>> DAVID J. Malan: OK, text de la posició
en diferents costats de la pàgina?

920
00:42:02,251 --> 00:42:02,750
Tot bé.

921
00:42:02,750 --> 00:42:04,620
Alguna cosa més.

922
00:42:04,620 --> 00:42:05,784
>> AUDIÈNCIA: [inaudible]

923
00:42:05,784 --> 00:42:06,700
DAVID J. Malan: Es.

924
00:42:06,700 --> 00:42:08,720
Pel que un gif és només una
format de fitxer diferent.

925
00:42:08,720 --> 00:42:12,830
Que la utilitzem, el que, un
png o jpg, probablement?

926
00:42:12,830 --> 00:42:14,480
Es va utilitzar un jpg.

927
00:42:14,480 --> 00:42:16,780
Si tens curiositat, una excessiva
respondre a la seva pregunta

928
00:42:16,780 --> 00:42:19,404
és un arxiu JPG s'utilitza generalment per
fotografies, ja que suporta

929
00:42:19,404 --> 00:42:21,500
milions de colors o color de 24 bits.

930
00:42:21,500 --> 00:42:26,930
Un GIF s'utilitza generalment per a, com,
memes d'Internet, aquestes animacions days--

931
00:42:26,930 --> 00:42:28,810
gifs animats similars.

932
00:42:28,810 --> 00:42:32,320
Però succeeix utilitzar un color més petita
paleta, només 256 colors possibles,

933
00:42:32,320 --> 00:42:35,230
però dóna suport
la transparència i l'animació.

934
00:42:35,230 --> 00:42:40,330
I després hi png, que dóna suport
transparència i més colors

935
00:42:40,330 --> 00:42:41,300
però no animació.

936
00:42:41,300 --> 00:42:42,133
Així que és un trade-off.

937
00:42:42,133 --> 00:42:44,144

938
00:42:44,144 --> 00:42:46,060
Per afegir un gif, però,
seria funcionalment

939
00:42:46,060 --> 00:42:48,396
equivalent a afegir un png o jpg.

940
00:42:48,396 --> 00:42:49,110
Sí.

941
00:42:49,110 --> 00:42:50,550
Font de la imatge és igual.

942
00:42:50,550 --> 00:42:51,590
Així que una altra cosa.

943
00:42:51,590 --> 00:42:57,288
Anem a arribar a alguna cosa que
enviem a Victòria a fer aquí.

944
00:42:57,288 --> 00:42:59,209
>> AUDIÈNCIA: Afegeix botons per a un formulari.

945
00:42:59,209 --> 00:43:00,000
DAVID J. Malan: OK.

946
00:43:00,000 --> 00:43:02,179
Així afegir botons per a un formulari.

947
00:43:02,179 --> 00:43:03,470
I farem tot el que un junts.

948
00:43:03,470 --> 00:43:07,220
De manera que hi haurà una transició perfecta
just després d'aquest desafiament.

949
00:43:07,220 --> 00:43:10,357
Alguna cosa més?

950
00:43:10,357 --> 00:43:11,440
Què podria fer?

951
00:43:11,440 --> 00:43:14,040

952
00:43:14,040 --> 00:43:16,516
El web sent molt decebedor
si això és tot el que podem fer.

953
00:43:16,516 --> 00:43:18,140
AUDIÈNCIA: Canviar el color del text.

954
00:43:18,140 --> 00:43:19,500
DAVID J. Malan: Canviar el què?

955
00:43:19,500 --> 00:43:20,666
PÚBLIC: El color del text.

956
00:43:20,666 --> 00:43:22,311
DAVID J. Malan: Canviar el color del text.

957
00:43:22,311 --> 00:43:22,810
Tot bé.

958
00:43:22,810 --> 00:43:23,790
Per tant, anem a fer això.

959
00:43:23,790 --> 00:43:27,209
Només una vegada més de manera que vostè no és, simplement
de memòria, fent exactament el que estic fent,

960
00:43:27,209 --> 00:43:29,500
Vaig a encendre la música
per potser cinc minuts aquí.

961
00:43:29,500 --> 00:43:30,450
Vostè és benvingut a utilitzar Google.

962
00:43:30,450 --> 00:43:33,130
De res per preguntar-me, i
Vaig a xiuxiuejar una pista a l'orella.

963
00:43:33,130 --> 00:43:35,171
De res mirar
sobre les espatlles d'altres.

964
00:43:35,171 --> 00:43:37,340
Però resoldre només un d'aquests problemes.

965
00:43:37,340 --> 00:43:40,190
Però nosaltres farem l'últim d'ells, el
forma un, si poguéssim, junts.

966
00:43:40,190 --> 00:43:42,790
Així cinc minuts per resoldre
qualsevol d'aquests problemes

967
00:43:42,790 --> 00:43:46,780
a través de Google, la intuïció, o qualsevol
altres mitjans disponibles per a vostè.

968
00:43:46,780 --> 00:43:48,630
>> [MÚSICA]

969
00:43:48,630 --> 00:43:49,130
Tot bé.

970
00:43:49,130 --> 00:43:50,838
No us preocupeu si vostè vol
per mantenir petits ajustos,

971
00:43:50,838 --> 00:43:53,880
però vaig a fer malbé un parell
d'aquestes respostes.

972
00:43:53,880 --> 00:43:57,986
Així que el primer suggeriment de
Victòria va ser per fer el text més gran.

973
00:43:57,986 --> 00:43:59,360
Així que hi ha un parell de maneres de fer això.

974
00:43:59,360 --> 00:44:01,530
Actualment he restaurat
la meva pantalla per aquesta grandària,

975
00:44:01,530 --> 00:44:04,310
encara que he zoom
artificialment només per veure les coses.

976
00:44:04,310 --> 00:44:07,470
I anem a fer això.

977
00:44:07,470 --> 00:44:11,380
Déjame anar per davant i agafar
un text genèric d'Amèrica

978
00:44:11,380 --> 00:44:19,540
de manera que només tenim alguna cosa amb què treballar.

979
00:44:19,540 --> 00:44:20,715
Així que dóna'm només un moment.

980
00:44:20,715 --> 00:44:21,840
Vaig a fer tres paràgrafs.

981
00:44:21,840 --> 00:44:53,430

982
00:44:53,430 --> 00:44:53,930
D'ACORD.

983
00:44:53,930 --> 00:44:55,560
Aquest serà un millor exemple.

984
00:44:55,560 --> 00:44:57,840
Així que per als curiosos, en
el meu hello.html, acabo

985
00:44:57,840 --> 00:45:01,645
enganxat 3 sense sentit
paràgrafs Llatina

986
00:45:01,645 --> 00:45:03,270
de manera que només tenim una mica de text per treballar.

987
00:45:03,270 --> 00:45:06,720
I la meta de Victòria era
fer que alguns dels textos més gran.

988
00:45:06,720 --> 00:45:09,879
Així que vaig poder, com abans, aneu aquí.

989
00:45:09,879 --> 00:45:11,170
I m'ho dius a mi fer de la manera correcta.

990
00:45:11,170 --> 00:45:13,253
Vaig a tenir un vincle
etiqueta que apunta a un arxiu

991
00:45:13,253 --> 00:45:20,560
anomenat "styles.css," la relació
dels quals és nou "estil".

992
00:45:20,560 --> 00:45:25,221
I després vaig a salvar el
i obrir aquest "styles.css."

993
00:45:25,221 --> 00:45:28,940
>> Així que, com abans, tinc el
capacitat en aquest arxiu CSS

994
00:45:28,940 --> 00:45:31,569
per anul·lar efectivament el valor per defecte
estètica d'una pàgina web,

995
00:45:31,569 --> 00:45:33,860
i l'estètica predeterminats,
per descomptat, són bastant avorrida.

996
00:45:33,860 --> 00:45:36,943
És una espècie de mida de font normal, negre
text, el fons blanc, i així successivament.

997
00:45:36,943 --> 00:45:39,440
Així que suposem que vull fer
tot això text més gran.

998
00:45:39,440 --> 00:45:40,460
Podria fer algunes coses.

999
00:45:40,460 --> 00:45:43,750
En el meu arxiu styles.css, em
podria dir, saps què,

1000
00:45:43,750 --> 00:45:46,950
s'aplicaran el següent a
el cos de la pàgina.

1001
00:45:46,950 --> 00:45:51,390
Seguir endavant i fer el
mida de font de 24 punts,

1002
00:45:51,390 --> 00:45:54,130
que és un nombre que podria
utilitzar en Microsoft Word.

1003
00:45:54,130 --> 00:45:57,620
Déjame tornar a la meva web
La pàgina d'aquí i tornar a carregar,

1004
00:45:57,620 --> 00:45:59,640
i es pot veure que
que ja és molt més gran.

1005
00:45:59,640 --> 00:46:02,223
I podem aconseguir una mica boig,
de la mateixa manera que pot en un desktop--

1006
00:46:02,223 --> 00:46:03,670
que sigui 96 punts.

1007
00:46:03,670 --> 00:46:04,950
Recarregar.

1008
00:46:04,950 --> 00:46:07,610
I cada vegada és una mica
difícil de manejar en aquest punt.

1009
00:46:07,610 --> 00:46:09,500
>> Però podria ser una mica més precís.

1010
00:46:09,500 --> 00:46:14,530
En lloc d'aplicar aquest
full d'estil per al cos de la pàgina,

1011
00:46:14,530 --> 00:46:21,740
Què més podria jo aplicar-lo a seu lloc,
el que una altra etiqueta que encara podria

1012
00:46:21,740 --> 00:46:25,445
funcionen de la mateixa manera?

1013
00:46:25,445 --> 00:46:26,444
>> AUDIÈNCIA: L'etiqueta p?

1014
00:46:26,444 --> 00:46:27,360
DAVID J. Malan: etiqueta P.

1015
00:46:27,360 --> 00:46:29,350
Així que el cap no seria
correcta, perquè el cap,

1016
00:46:29,350 --> 00:46:31,300
realitat no es pot
controlar l'estètica de.

1017
00:46:31,300 --> 00:46:32,700
Hi ha ja sigui text o no.

1018
00:46:32,700 --> 00:46:36,760
Però la p tag-- que pot submergir-se en una mica
més profund, per dir-ho, en el paràgraf

1019
00:46:36,760 --> 00:46:37,350
les etiquetes.

1020
00:46:37,350 --> 00:46:41,600
I tot i que n'hi ha tres,
això és perfectament bé, perquè en CSS,

1021
00:46:41,600 --> 00:46:44,900
quan acabo de dir "p", aquest
significa aplicar la següent

1022
00:46:44,900 --> 00:46:48,300
a qualsevol etiqueta que coincideixi amb aquesta
selector, el selector simplement

1023
00:46:48,300 --> 00:46:49,430
és el nom de l'etiqueta.

1024
00:46:49,430 --> 00:46:52,350
Així que allà on vegi 01:00
"P", aplicar la mida de la font,

1025
00:46:52,350 --> 00:46:55,222
i farem que sigui més
raonable nou-- 24 punts.

1026
00:46:55,222 --> 00:46:56,930
I saps què,
només per si de cas,

1027
00:46:56,930 --> 00:46:59,810
farem el color
simplement vermella de moment.

1028
00:46:59,810 --> 00:47:03,740
I ara si torno a carregar, ara ens
veure tres paràgrafs lletges.

1029
00:47:03,740 --> 00:47:07,180
>> Però ara suposem que jo sóc una espècie
de-- Vull que el primer paràgraf

1030
00:47:07,180 --> 00:47:08,210
que salten a la vista de l'usuari.

1031
00:47:08,210 --> 00:47:11,150
No vull simplement per augmentar
la mida de la font de tot.

1032
00:47:11,150 --> 00:47:16,105
I el que en realitat vull identificar o
distingir entre aquests paràgrafs.

1033
00:47:16,105 --> 00:47:18,730
Així que anem a desfer-nos dels números vermells,
perquè això és només una mica de mal gust,

1034
00:47:18,730 --> 00:47:23,885
i seguirem endavant i fer que el
grandària de lletra de 12 punts per defecte,

1035
00:47:23,885 --> 00:47:26,260
pel que estem de tornada a alguna cosa
una mica més raonable.

1036
00:47:26,260 --> 00:47:29,190
I ara només vull augmentar la
mida de la font del primer paràgraf.

1037
00:47:29,190 --> 00:47:31,440
Puc fer això en uns pocs
maneres, però una manera que és

1038
00:47:31,440 --> 00:47:37,180
potser la majoria d'instrucció en el
és moment de fer el següent.

1039
00:47:37,180 --> 00:47:43,280
Déjame anar per davant i dir, aquest
paràgraf té un identificador únic de la "primera".

1040
00:47:43,280 --> 00:47:45,000
Podria trucar a aquest el que vulgui.

1041
00:47:45,000 --> 00:47:46,874
Podria anomenar aquesta "foo"
o qualsevol altra paraula,

1042
00:47:46,874 --> 00:47:49,290
però vaig a donar-li una mica
Nom semànticament significativa

1043
00:47:49,290 --> 00:47:50,320
així com "primer".

1044
00:47:50,320 --> 00:47:54,790
Aquest és l'identificador únic,
la identificació, per al meu primer paràgraf.

1045
00:47:54,790 --> 00:47:59,360
>> El que ara puc fer en el meu full d'estil
és ser una mica més precís.

1046
00:47:59,360 --> 00:48:02,330
En lloc de dir, aplicar
el següent a l'etiqueta p,

1047
00:48:02,330 --> 00:48:04,890
Puc dir el following--
s'aplicarà el següent,

1048
00:48:04,890 --> 00:48:11,000
o seleccioneu l'element HTML
que té un identificador únic de la "primera".

1049
00:48:11,000 --> 00:48:12,350
Què vull per aplicar-hi?

1050
00:48:12,350 --> 00:48:15,250
Una mida de font de 24 punts.

1051
00:48:15,250 --> 00:48:16,640
Així que tinc dos selectors ara.

1052
00:48:16,640 --> 00:48:19,690
Un fa tot el
els paràgrafs 12 punts.

1053
00:48:19,690 --> 00:48:24,960
Però aquest, sobretot perquè es tracta d'
second-- que és l'últim a l'arxiu:

1054
00:48:24,960 --> 00:48:27,090
això té un efecte en cascada.

1055
00:48:27,090 --> 00:48:30,200
Jo només he fet tota la meva
etiquetes de paràgraf 12 punts,

1056
00:48:30,200 --> 00:48:34,350
però això ara i cascades
preval sobre qualsevol element que per

1057
00:48:34,350 --> 00:48:38,800
a la pàgina, qualsevol etiqueta de la pàgina el
ID únic és, entre cometes "primer".

1058
00:48:38,800 --> 00:48:41,720
I el hashtag en aquest context
només significa "identificador únic".

1059
00:48:41,720 --> 00:48:43,750
Jo no vaig posar a l'arxiu HTML.

1060
00:48:43,750 --> 00:48:46,880
Jo, per aquí, només dir
entre cometes "primer".

1061
00:48:46,880 --> 00:48:48,470
>> Així que permetin-me tornar a carregar.

1062
00:48:48,470 --> 00:48:49,919
I ara veig, ah, OK.

1063
00:48:49,919 --> 00:48:51,710
És a dir, que no és tan
bastant, però és una mica

1064
00:48:51,710 --> 00:48:53,600
així com el prefaci d'una
llibre o alguna cosa per l'estil,

1065
00:48:53,600 --> 00:48:55,100
on el primer paràgraf és més gran.

1066
00:48:55,100 --> 00:48:57,933
Podria ser encara més precís amb
només les primeres lletres, però almenys

1067
00:48:57,933 --> 00:48:59,110
He exercit més control.

1068
00:48:59,110 --> 00:49:04,760
Ara maybe-- potser vulgui fer això
de tant en tant per qualsevol raó,

1069
00:49:04,760 --> 00:49:09,010
i pel que no vull que això
aplicar a una sola etiqueta HTML.

1070
00:49:09,010 --> 00:49:15,110
Més aviat, anem a dir-- anem
També fer el següent.

1071
00:49:15,110 --> 00:49:18,810
Class = "importació".

1072
00:49:18,810 --> 00:49:23,970
Mentre que un ID s'utilitza per únicament
identificar una cosa, una etiqueta,

1073
00:49:23,970 --> 00:49:30,190
a la seva pàgina web, una classe està destinat a ser
utilitzat en qualsevol nombre d'elements o etiquetes

1074
00:49:30,190 --> 00:49:30,950
a la seva pàgina web.

1075
00:49:30,950 --> 00:49:31,710
Així que és reutilitzable.

1076
00:49:31,710 --> 00:49:33,090
Un ID no és reutilitzable.

1077
00:49:33,090 --> 00:49:34,450
Una classe és reutilitzable.

1078
00:49:34,450 --> 00:49:37,830
>> I saps què, per qualsevol
reasons-- filosòfica

1079
00:49:37,830 --> 00:49:40,180
No he acabat el meu
thought-- diré

1080
00:49:40,180 --> 00:49:44,300
que el primer paràgraf i el
paràgraf segon, són importants.

1081
00:49:44,300 --> 00:49:48,600
Així que vaig a aplicar la classe anomenada
"Important" que, si excepte el meu arxiu

1082
00:49:48,600 --> 00:49:51,510
i tornar a carregar, no té
impacte funcional encara.

1083
00:49:51,510 --> 00:49:53,780
Però he afegit una mica
metadades per l'arxiu,

1084
00:49:53,780 --> 00:49:56,610
espècie d'alguna cosa separat
a partir de les dades bàsiques de l'arxiu,

1085
00:49:56,610 --> 00:50:02,300
de manera que ara en el meu full d'estil, si
en canvi dir ".importante" - vostè sap,

1086
00:50:02,300 --> 00:50:07,110
tot el que és important, estic
va a fer font-color, xarxa--

1087
00:50:07,110 --> 00:50:09,930
o més aviat no font-color, sol color.

1088
00:50:09,930 --> 00:50:12,930
hi ha inconsistències
CSS en desgràcia.

1089
00:50:12,930 --> 00:50:14,120
I tornar a carregar.

1090
00:50:14,120 --> 00:50:17,640
Ara noti la primera
dos paràgrafs són vermells

1091
00:50:17,640 --> 00:50:20,880
però no la tercera, perquè només
aplicat a la classe d ' "important"

1092
00:50:20,880 --> 00:50:25,020
a les dues primeres d'aquestes coses.

1093
00:50:25,020 --> 00:50:28,030
>> Així que en els ID, vostè té la capacitat
per especificar de manera molt precisa.

1094
00:50:28,030 --> 00:50:30,110
Amb les classes, té capacitat de reutilització.

1095
00:50:30,110 --> 00:50:33,800
Però en tots dos casos, el compte
mena de principi de bona disseny

1096
00:50:33,800 --> 00:50:39,072
on eliminat gairebé tot de la
l'estètica al meu arxiu styles.css.

1097
00:50:39,072 --> 00:50:40,280
Així que no hi ha desordre aquí.

1098
00:50:40,280 --> 00:50:44,490
No hi ha menció de color vermell o
negreta orientació o la mida de font en aquest arxiu.

1099
00:50:44,490 --> 00:50:49,430
Més aviat tinc semànticament,
caracteritzat significativa les meves dades com,

1100
00:50:49,430 --> 00:50:51,240
aquí hi ha algunes dades importants.

1101
00:50:51,240 --> 00:50:52,800
Heus aquí algunes dades més importants.

1102
00:50:52,800 --> 00:50:56,500
D'altra banda, aquí hi ha el
"Primer" de les meves dades importants.

1103
00:50:56,500 --> 00:51:01,050
Així HTML té a veure amb una mena
d'etiquetatge, literalment, paraules

1104
00:51:01,050 --> 00:51:05,270
i els paràgrafs i les construccions en el seu
Pàgina amb aquests petits consells, si

1105
00:51:05,270 --> 00:51:07,640
voluntat, que pugui
d'alguna manera aprofitar l'ús

1106
00:51:07,640 --> 00:51:10,880
altres tècniques com el CSS d'aquesta manera.

1107
00:51:10,880 --> 00:51:14,760
>> Així que en resposta a la pregunta de Victòria,
podem engrandir el text d'aquesta manera.

1108
00:51:14,760 --> 00:51:18,380
Hi ha moltes altres maneres, però
la font tag-- parèntesi obert "font" -

1109
00:51:18,380 --> 00:51:19,770
és en realitat diversos anys d'edat.

1110
00:51:19,770 --> 00:51:21,410
I aquest és el problema,
també, amb confiar només

1111
00:51:21,410 --> 00:51:23,485
resources-- en línia
tendeixen a ser obsoleta.

1112
00:51:23,485 --> 00:51:26,110
I, en efecte, que ja no utilitza,
perquè el món es va adonar,

1113
00:51:26,110 --> 00:51:28,970
¿Què significa "font-size = 7"?

1114
00:51:28,970 --> 00:51:29,670
No és així.

1115
00:51:29,670 --> 00:51:32,770
I així durant molts anys i que
aquest dia-- un dels laterals

1116
00:51:32,770 --> 00:51:36,060
assenyala aquí és que és en realitat
increïblement dolorós encara de vegades

1117
00:51:36,060 --> 00:51:38,900
per desenvolupar llocs per a la
web, perquè Microsoft

1118
00:51:38,900 --> 00:51:44,220
i Google i Mozilla i
altres sovint no estan d'acord quant a com

1119
00:51:44,220 --> 00:51:47,480
per interpretar una especificació com HTML.

1120
00:51:47,480 --> 00:51:52,490
>> Hi ha un llibre de regles de HTML que
en general, diu el significat de cada etiqueta.

1121
00:51:52,490 --> 00:51:55,690
Però de vegades es deixa a la
discreció d'aplicació,

1122
00:51:55,690 --> 00:51:57,290
discreció i Google de Microsoft.

1123
00:51:57,290 --> 00:52:00,000
I pel que tindrà molt sovint
veure en una pàgina web una mica

1124
00:52:00,000 --> 00:52:04,954
es veu diferent en un PC
que ho fa en un Mac,

1125
00:52:04,954 --> 00:52:06,995
i això és realment perquè,
al final del dia,

1126
00:52:06,995 --> 00:52:08,891
no van provar que
bé en ambdues plataformes.

1127
00:52:08,891 --> 00:52:11,390
Però també és degut raonable,
les persones intel·ligents no estaran d'acord

1128
00:52:11,390 --> 00:52:14,970
i les empreses no estan d'acord, i així
un dels reptes de la programació

1129
00:52:14,970 --> 00:52:16,980
per a la xarxa o dissenyar
coses per a la web

1130
00:52:16,980 --> 00:52:21,700
està escrivint el seu lloc web d'una manera
que funciona a tots els navegadors web.

1131
00:52:21,700 --> 00:52:23,410
Però fins i tot això és raonable, oi?

1132
00:52:23,410 --> 00:52:27,807
Hi ha tantes versions de tants
navegadors allà que, en algun moment,

1133
00:52:27,807 --> 00:52:30,890
també cal fer un judici
i vostè ha de decidir com una empresa,

1134
00:52:30,890 --> 00:52:33,082
especialment per al comerç electrònic d'estil
llocs on li

1135
00:52:33,082 --> 00:52:36,290
tractant d'usar i més nou
tecnologies per donar un molt bon usuari

1136
00:52:36,290 --> 00:52:37,110
experiència.

1137
00:52:37,110 --> 00:52:41,019
Però un percentatge dels seus usuaris podrien
sent l'ús d'Internet Explorer 6 o 7

1138
00:52:41,019 --> 00:52:43,810
o 8, especialment en funció de la
país que estan venint.

1139
00:52:43,810 --> 00:52:46,760
>> I així, amb molta freqüència
Consultat és una cosa

1140
00:52:46,760 --> 00:52:50,920
així com "les estadístiques del navegador web."

1141
00:52:50,920 --> 00:52:56,560
I si anem A-- anem a veure Wikipedia
i vegi com fins a la data de la taula es troba

1142
00:52:56,560 --> 00:52:59,320
si n'hi ha un.

1143
00:52:59,320 --> 00:53:02,420
Així que aquí es pot veure
quan en realitat els navegadors

1144
00:53:02,420 --> 00:53:06,160
són, segons desembre de 2015,
d'acord amb el govern d'Estats Units.

1145
00:53:06,160 --> 00:53:11,170
Chrome és en la quota de mercat del 42%, seguit
per IE en gran mesura en els entorns corporatius

1146
00:53:11,170 --> 00:53:14,490
o la configuració del PC, per descomptat,
seguit per Firefox,

1147
00:53:14,490 --> 00:53:17,440
a continuació, Safari, Opera i després no ho va fer
fer el mapa aquí per alguna raó,

1148
00:53:17,440 --> 00:53:18,210
i que altres.

1149
00:53:18,210 --> 00:53:19,500
Potser sigui en Altres.

1150
00:53:19,500 --> 00:53:27,700
Però més problemàtica que la és--
veurem si també té Wikipedia

1151
00:53:27,700 --> 00:53:35,194
versions de navegadors versió--

1152
00:53:35,194 --> 00:53:36,160

1153
00:53:36,160 --> 00:53:39,190
>> Anem a les estadístiques del navegador.

1154
00:53:39,190 --> 00:53:40,680
IE.

1155
00:53:40,680 --> 00:53:42,030
Fins i tot això no és suficient.

1156
00:53:42,030 --> 00:53:44,854
estadístiques de l'examinador.

1157
00:53:44,854 --> 00:53:45,353
La meva versió.

1158
00:53:45,353 --> 00:53:48,980

1159
00:53:48,980 --> 00:53:50,540
Això no va a estar bé.

1160
00:53:50,540 --> 00:53:53,414
Vegem versions.

1161
00:53:53,414 --> 00:53:54,830
quota de mercat dels navegadors.

1162
00:53:54,830 --> 00:53:57,110
Ja veurem si això surt.

1163
00:53:57,110 --> 00:53:57,610
D'ACORD.

1164
00:53:57,610 --> 00:54:00,010
Ara això s'està posant
una mica més útil.

1165
00:54:00,010 --> 00:54:04,870
Així que aquí, adonar-se que tenim tot
diferents versions dels navegadors.

1166
00:54:04,870 --> 00:54:09,887
I, per Déu, si look-- Chrome
48, Chrome 47, Chrome 31, Chrome 45.

1167
00:54:09,887 --> 00:54:12,970
És a dir, els navegadors cada vegada més informat,
i, de vegades alguns d'aquests canvis

1168
00:54:12,970 --> 00:54:16,430
són significatius en
termes de funcionalitat.

1169
00:54:16,430 --> 00:54:20,630
I així, en algun moment, la
gerents de producte o dels enginyers

1170
00:54:20,630 --> 00:54:23,620
necessitarà fer una a decisió que
saber què, només l'1% del mercat mundial

1171
00:54:23,620 --> 00:54:24,740
segueix utilitzant IE 7.

1172
00:54:24,740 --> 00:54:25,490
Al diable amb ells.

1173
00:54:25,490 --> 00:54:27,470
Simplement no anem a
recolzar aquest navegador.

1174
00:54:27,470 --> 00:54:28,740
I què vol dir no donar suport?

1175
00:54:28,740 --> 00:54:31,170
Podria significar que els botons
no funcionen a la seva pàgina web,

1176
00:54:31,170 --> 00:54:33,050
o podria significar la
el format és completament apagat.

1177
00:54:33,050 --> 00:54:35,091
O pot ser que hagi de fer
aquesta mateixa qüestió de criteri

1178
00:54:35,091 --> 00:54:39,089
en els telèfons en aquests dies, en els quals, les quals estem
no donarà suport IOS 5 més.

1179
00:54:39,089 --> 00:54:40,380
Així que les persones només han de actualitzar.

1180
00:54:40,380 --> 00:54:45,850
O no recolzarem la magdalena
en Android OS per a dispositius Android,

1181
00:54:45,850 --> 00:54:48,629
perquè com el món-- com el
món de la tecnologia vol avançar,

1182
00:54:48,629 --> 00:54:51,170
és com que vol arrossegar el
món amb ella de manera que no ho fan

1183
00:54:51,170 --> 00:54:53,295
ha de seguir sent
compatible cap enrere perquè

1184
00:54:53,295 --> 00:54:54,920
pot oferir noves i bones característiques.

1185
00:54:54,920 --> 00:54:57,878
Aquest és de fet una de les raons
per què tantes empreses estan desplegant

1186
00:54:57,878 --> 00:55:01,440
actualitzacions automàtiques i tipus de forçament
les últimes versions del programari de nosaltres.

1187
00:55:01,440 --> 00:55:04,010
I fins i tot empreses
com Apple va a classificar de

1188
00:55:04,010 --> 00:55:07,280
que gairebé forçar o obligar
que en termes de les forces del mercat

1189
00:55:07,280 --> 00:55:11,164
per comprar un nou telèfon, ja que només
no actualitzarà el seu telèfon antic més.

1190
00:55:11,164 --> 00:55:13,330
Pel que es perdi en el
Els últims i millors característiques,

1191
00:55:13,330 --> 00:55:17,520
perquè és costós a ells com una
companyia mantenir grans, podria dir-se que

1192
00:55:17,520 --> 00:55:19,330
versions inferiors de programari.

1193
00:55:19,330 --> 00:55:23,660
No obstant això, l'efecte net és que
també patim això també.

1194
00:55:23,660 --> 00:55:26,550
>> Així que anem a fer una ullada a
un parell de coses finals aquí.

1195
00:55:26,550 --> 00:55:29,740
Anem a cop d'extracció molt ràpid alguns
aquestes altres bales, si és curiós.

1196
00:55:29,740 --> 00:55:33,440
Així que si vostè intentava,
per exemple, la posició

1197
00:55:33,440 --> 00:55:36,420
el text en diferents costats de la
pàgina, vaig a fer-ho d'una manera ràpida,

1198
00:55:36,420 --> 00:55:38,360
però hi ha diferents
maneres de fer això.

1199
00:55:38,360 --> 00:55:42,610
Déjame anar endavant i eliminate--
simplificar aquesta de la següent manera.

1200
00:55:42,610 --> 00:55:45,330
Permetin-me tornar a la meva
, Paràgrafs simples simples.

1201
00:55:45,330 --> 00:55:47,760
Déjame tornar al meu styles.css.

1202
00:55:47,760 --> 00:55:51,040
I jo només vaig a utilitzar el simple--
el qual es pot haver vist a Google

1203
00:55:51,040 --> 00:55:54,430
o trucar des d'abans els he parlat
text-align dreta.

1204
00:55:54,430 --> 00:55:56,220
I tornar a carregar aquesta pàgina.

1205
00:55:56,220 --> 00:55:58,470
Ara tot sembla
per a ser alineat a la dreta,

1206
00:55:58,470 --> 00:56:00,770
com es pot veure en el cap aquí.

1207
00:56:00,770 --> 00:56:04,470
>> Podem fer que es vegi una mica més
a manera de llibre, i podem dir "justificar"

1208
00:56:04,470 --> 00:56:05,640
i tornar a carregar.

1209
00:56:05,640 --> 00:56:09,870
Ara és agradable i quadrat en ambdós
costats, la qual cosa és una mica agradable.

1210
00:56:09,870 --> 00:56:12,220
Un altre dels objectius que teníem aquí
va ser el canvi de color del text.

1211
00:56:12,220 --> 00:56:13,650
Així hem vist que amb el meu text en vermell.

1212
00:56:13,650 --> 00:56:15,630
I ara afegir botons per a un formulari.

1213
00:56:15,630 --> 00:56:19,390
Llavors, ¿per què no tractem de fer exactament això?

1214
00:56:19,390 --> 00:56:23,656
Però primer m'ho dius a mi anar a un lloc que
la majoria de nosaltres fem servir cada dia-- Google.

1215
00:56:23,656 --> 00:56:25,780
I anem a fer una ullada a
Google com funciona realment.

1216
00:56:25,780 --> 00:56:26,821
Però vaig a fer això.

1217
00:56:26,821 --> 00:56:31,930
Primer m'ho dius a mi fer-ho en-- si,
vull anar a Google en primer lloc.

1218
00:56:31,930 --> 00:56:34,530
Vaig a haver d'anar
a Configuració de Google,

1219
00:56:34,530 --> 00:56:40,660
perquè vull desactivar
cosa que es diu resultats immediats.

1220
00:56:40,660 --> 00:56:43,580
>> Així que vostè pot haver notat en
Google days-- aquests permeten que torni

1221
00:56:43,580 --> 00:56:44,850
i activar aquesta opció.

1222
00:56:44,850 --> 00:56:47,900
Així que si em poso a buscar
per "gats" d'aquest tipus,

1223
00:56:47,900 --> 00:56:50,120
adonar que no només fer
Rebut acte-completar fins

1224
00:56:50,120 --> 00:56:54,520
cim, tot d'una, la mateixa pàgina
sembla canviar bastant ràpidament, així,

1225
00:56:54,520 --> 00:56:58,750
i això és Google l'ús d'un llenguatge
anomenada JavaScript tractant de ser útil.

1226
00:56:58,750 --> 00:57:01,540
Però, per desgràcia, que tipus
desordena de la nostra discussió

1227
00:57:01,540 --> 00:57:04,010
del que està succeint realment
sota de la campana aquí.

1228
00:57:04,010 --> 00:57:09,070
Així que sóc només una mica de rapidesa
desactivar els resultats instantanis.

1229
00:57:09,070 --> 00:57:11,510
I vaig a fer clic a Desa.

1230
00:57:11,510 --> 00:57:13,930
I ara vaig a obrir
que la barra d'eines de diagnòstic que I

1231
00:57:13,930 --> 00:57:16,150
mantenir l'obertura sota de la fitxa Xarxa.

1232
00:57:16,150 --> 00:57:17,720
Així que anem a fer això.

1233
00:57:17,720 --> 00:57:21,960
Deixi me-- whoops--
desplaçar-se aquesta una mica.

1234
00:57:21,960 --> 00:57:24,410
I permetin-me recerca de "gats".

1235
00:57:24,410 --> 00:57:26,790
>> I ara notice-- realitat,
aquesta és una bona oportunitat

1236
00:57:26,790 --> 00:57:28,840
per discutir per un moment.

1237
00:57:28,840 --> 00:57:32,460
Observi el moment en què type-- aturar-lo.

1238
00:57:32,460 --> 00:57:35,250
Aturar-lo.

1239
00:57:35,250 --> 00:57:35,790
D'ACORD.

1240
00:57:35,790 --> 00:57:40,870
Observi el moment en què escriu la lletra
C, veure la part inferior de la pantalla.

1241
00:57:40,870 --> 00:57:48,600
A-T- S. El que fa la part inferior
d'aquesta pantalla, la meva fitxa Xarxa,

1242
00:57:48,600 --> 00:57:53,320
suggerir que està succeint cada
vegada que s'escrigui una carta?

1243
00:57:53,320 --> 00:57:57,700
Per desgràcia, la granota és molt
avui distracció o el trèvol

1244
00:57:57,700 --> 00:58:00,339
o el que sigui.

1245
00:58:00,339 --> 00:58:01,880
El que estava succeint cada vegada que he escrit?

1246
00:58:01,880 --> 00:58:04,230
I permetin-me aclarir la
buffer i torni a escriure-la.

1247
00:58:04,230 --> 00:58:06,580
tan-- crits.

1248
00:58:06,580 --> 00:58:13,280
Cada vegada que s'escrigui una carta, C- A- T-
pel que una nova fila, òbviament, segueix apareixent.

1249
00:58:13,280 --> 00:58:16,530
Què cadascuna de les files representen,
en base al que hem vist i discutit

1250
00:58:16,530 --> 00:58:17,339
fins ara?

1251
00:58:17,339 --> 00:58:18,130
AUDIÈNCIA: Una recerca?

1252
00:58:18,130 --> 00:58:21,770
DAVID J. Malan: Una recerca o
més genèricament, una sol·licitud HTTP

1253
00:58:21,770 --> 00:58:23,125
des del navegador al servidor.

1254
00:58:23,125 --> 00:58:29,090
Bé, per què és el meu navegador fent un HTTP
sol·licitar cada vegada que s'escrigui una carta?

1255
00:58:29,090 --> 00:58:30,502
>> AUDIÈNCIA: [inaudible]

1256
00:58:30,502 --> 00:58:33,210
DAVID J. Malan: Sí, es dóna
Em aquests resultats d'auto-completat.

1257
00:58:33,210 --> 00:58:35,190
Igual que, d'on aquests
resultats de la recerca vénen?

1258
00:58:35,190 --> 00:58:38,120
Bé, cada vegada que escrigui una
carta, Google envia més

1259
00:58:38,120 --> 00:58:40,460
i més i més de
la paraula que estic escrivint.

1260
00:58:40,460 --> 00:58:41,040
Per què?

1261
00:58:41,040 --> 00:58:44,540
Perquè volen donar-me una
millor i millor, millor suggeriment,

1262
00:58:44,540 --> 00:58:48,880
una llista de suggeriments, de manera que la paraula
Estic intentant realment completa.

1263
00:58:48,880 --> 00:58:53,030
Així que això vol dir, literalment, cada
personatge que escriviu a Google

1264
00:58:53,030 --> 00:58:56,900
està sent enviat, en última instància, en
gran, però també a vegades un

1265
00:58:56,900 --> 00:59:00,620
alhora per tal de posar en pràctica
aquestes característiques d'auto-completat quan

1266
00:59:00,620 --> 00:59:03,000
les dades són, per descomptat, a la web.

1267
00:59:03,000 --> 00:59:08,780
>> Ara, anem a fer una ullada al que en realitat
que succeeix quan faig clic a Cerca de Google.

1268
00:59:08,780 --> 00:59:10,420
I després aprofitarem aquest nosaltres mateixos.

1269
00:59:10,420 --> 00:59:15,320
Així que si em desplaço cap avall ara a la molt
primera sol·licitud que acaba de passar.

1270
00:59:15,320 --> 00:59:17,130
Observi el següent.

1271
00:59:17,130 --> 00:59:25,550
Va ser enviat a un temps bastant llarg URL--
https://www.google.com/search?

1272
00:59:25,550 --> 00:59:27,100
i després un munt de coses.

1273
00:59:27,100 --> 00:59:29,620
Vegem això en realitat ara
a la pestanya del navegador en si.

1274
00:59:29,620 --> 00:59:31,310
Anem a desfer-nos de la barra d'eines aquí.

1275
00:59:31,310 --> 00:59:33,140
Aquesta és la pàgina de resultats de cerca.

1276
00:59:33,140 --> 00:59:34,790
I notin que aquí està la URL.

1277
00:59:34,790 --> 00:59:37,430
Ara, probablement pot endevinar
el que està passant aquí en part.

1278
00:59:37,430 --> 00:59:39,090
Així, en primer lloc, una definició.

1279
00:59:39,090 --> 00:59:42,570
Pel que sembla, això és el destí
on s'envia el formulari.

1280
00:59:42,570 --> 00:59:44,910
Per això, quan he escrit en el
paraules "gats" i prem Enter,

1281
00:59:44,910 --> 00:59:48,460
pel que sembla, Google va enviar
la meva entrada de text a aquesta URL

1282
00:59:48,460 --> 00:59:50,770
que He destacat
allà, reduir la cerca.

1283
00:59:50,770 --> 00:59:56,530
Resulta que, en una adreça URL, qualsevol cosa que
que ocorre després d'un signe d'interrogació és,

1284
00:59:56,530 --> 01:00:01,270
a mesura que seguim dient, un parell clau-valor
que s'introdueix en el formulari o d'alguna manera

1285
01:00:01,270 --> 01:00:04,500
transmesa des del
navegador al servidor.

1286
01:00:04,500 --> 01:00:07,180
>> Així que cada vegada que el tipus d'entrada
en una forma a la web

1287
01:00:07,180 --> 01:00:10,000
i s'envia com hem
estat discutint, a través d'una trobada,

1288
01:00:10,000 --> 01:00:12,400
un d'aquests virtual
sobres, els continguts

1289
01:00:12,400 --> 01:00:15,510
d'aquest envelope-- si, mantenir
aconseguir farcits físicament

1290
01:00:15,510 --> 01:00:19,010
en el sobre a la classe
avui en dia, però tecnològicament

1291
01:00:19,010 --> 01:00:21,110
que és en realitat posar a la URL.

1292
01:00:21,110 --> 01:00:22,940
Així que, de fet, que em tamisar a través d'aquest.

1293
01:00:22,940 --> 01:00:25,010
On es veu la entrada de l'usuari?

1294
01:00:25,010 --> 01:00:27,490
On es veu alguna cosa
que jo mateix vaig escriure aquí dalt?

1295
01:00:27,490 --> 01:00:32,100

1296
01:00:32,100 --> 01:00:33,491
Sí, de manera que "gats".

1297
01:00:33,491 --> 01:00:33,990
Dret?

1298
01:00:33,990 --> 01:00:36,380
Així que permetin-me destil·lar aquest
en alguna cosa més simple.

1299
01:00:36,380 --> 01:00:39,917
Vaig a eliminar tot el relacionat
aquesta adreça URL que no entenc,

1300
01:00:39,917 --> 01:00:42,250
i jo només vaig a deixar
com això- / search? q = gats.

1301
01:00:42,250 --> 01:00:45,640

1302
01:00:45,640 --> 01:00:47,890
Veurem on q
ve des de molt aviat,

1303
01:00:47,890 --> 01:00:51,220
però que se sent al mínim
quantitat d'informació que he proporcionat.

1304
01:00:51,220 --> 01:00:53,050
I ara vaig a pressionar Enter.

1305
01:00:53,050 --> 01:00:55,520
I noti que encara funciona.

1306
01:00:55,520 --> 01:00:57,950
Encara vam rebre de tornada un munt de gats.

1307
01:00:57,950 --> 01:01:00,340
Així que Google és més elegant
que aquesta en aquests dies.

1308
01:01:00,340 --> 01:01:01,934
És 2016, no del 1999.

1309
01:01:01,934 --> 01:01:04,600
Així que hi ha altres coses que el meu
el navegador envia al servidor.

1310
01:01:04,600 --> 01:01:07,100
Però això és mínimament
tot el que és necessari.

1311
01:01:07,100 --> 01:01:08,380
>> Llavors, què està passant?

1312
01:01:08,380 --> 01:01:14,320
Bé, en primer lloc vull seguir endavant i anar
de nou a Cloud9 i em va deixar anar per davant

1313
01:01:14,320 --> 01:01:15,620
i tancar les pestanyes abans.

1314
01:01:15,620 --> 01:01:18,230
I vaig a fer això en el meu
posseir només per un moment.

1315
01:01:18,230 --> 01:01:20,730
Vaig a seguir endavant
i crear nou arxiu.

1316
01:01:20,730 --> 01:01:23,739
I vaig a guardar-lo com google.html.

1317
01:01:23,739 --> 01:01:26,280
I vaig a molt quickly--
Vaig a robar, en realitat,

1318
01:01:26,280 --> 01:01:28,510
Part d'aquest text només per estalviar temps.

1319
01:01:28,510 --> 01:01:30,610
Vaig a pegar això aquí.

1320
01:01:30,610 --> 01:01:33,850
Jo no em vaig a molestar amb
qualsevol estilització aquest moment.

1321
01:01:33,850 --> 01:01:38,340
Anem a trucar a aquesta "El meu Google."

1322
01:01:38,340 --> 01:01:41,230
I vaig a desfer
de tot en el cos.

1323
01:01:41,230 --> 01:01:42,740
I vaig a fer el següent.

1324
01:01:42,740 --> 01:01:45,690
Permetin-me Amplia.

1325
01:01:45,690 --> 01:01:50,620
Formo acció-- i com he esmentat breument
abans els vaig parlar breument com em whoops--

1326
01:01:50,620 --> 01:01:54,130
es va esmentar anteriorment, l'acció d'una
la forma és la que envia les dades a.

1327
01:01:54,130 --> 01:01:56,620
Així google.com/search.

1328
01:01:56,620 --> 01:01:59,390
I el mètode que voleu utilitzar
pot ser una de dues coses.

1329
01:01:59,390 --> 01:02:02,870
O bé pot ser "aconseguir", ja que mantenim
discutint, o pot ser "post".

1330
01:02:02,870 --> 01:02:05,340
Per ara, la freqüència fonamental
diferència és, si s'utilitza "aconseguir"

1331
01:02:05,340 --> 01:02:09,590
tota la informació que la
Usuari faciliti és enviat a l'adreça URL.

1332
01:02:09,590 --> 01:02:13,530
>> Això és gran per a coses com la recerca
motors i algunes altres aplicacions,

1333
01:02:13,530 --> 01:02:17,080
però en quines circumstàncies
vostè no desitja omplir un formulari

1334
01:02:17,080 --> 01:02:21,620
i tenir la informació a acabar la
URL, com a la barra d'adreces del navegador?

1335
01:02:21,620 --> 01:02:25,470

1336
01:02:25,470 --> 01:02:26,605
Quin tipus de formes de fer usted--

1337
01:02:26,605 --> 01:02:27,480
AUDIÈNCIA: [inaudible]

1338
01:02:27,480 --> 01:02:28,450
DAVID J. Malan: Sí, com què?

1339
01:02:28,450 --> 01:02:29,270
PÚBLIC: Les contrasenyes.

1340
01:02:29,270 --> 01:02:31,936
DAVID J. Malan: Sí, pel que es connecti
a Facebook o algun lloc web.

1341
01:02:31,936 --> 01:02:34,395
Aquesta és l'entrada de l'usuari
un formulari, un quadre de text,

1342
01:02:34,395 --> 01:02:37,020
però és probable que no ho vol
aparèixer a la URL del navegador.

1343
01:02:37,020 --> 01:02:38,121
Per què?

1344
01:02:38,121 --> 01:02:40,870
És a dir, potser hi ha alguna
implicacions per a la seguretat de la xarxa,

1345
01:02:40,870 --> 01:02:44,830
però més-- agradaria, més simplement, si ho
seu company de cambra, el seu altre significatiu,

1346
01:02:44,830 --> 01:02:47,710
seus fills, el seu cònjuge es veu
a través del seu historial de navegació?

1347
01:02:47,710 --> 01:02:50,762
No és el seu dret contrasenya
existeix en l'historial del navegador.

1348
01:02:50,762 --> 01:02:52,220
Que no se sent com un bon disseny.

1349
01:02:52,220 --> 01:02:54,500
O fins i tot més tècnicament,
suposem que vostè està tractant

1350
01:02:54,500 --> 01:02:59,180
pujar una foto a Flickr
o Facebook o wherever--

1351
01:02:59,180 --> 01:03:03,010
que és l'entrada de l'usuari, encara que
que és una mica més com interesting--

1352
01:03:03,010 --> 01:03:05,530
Com puc cram una imatge a la barra d'adreces?

1353
01:03:05,530 --> 01:03:06,730
D'alguna espècie de no es pot.

1354
01:03:06,730 --> 01:03:07,396
D'alguna manera es pot.

1355
01:03:07,396 --> 01:03:10,210
Però, de debò, estic en dificultats
imaginar fer això.

1356
01:03:10,210 --> 01:03:13,470
Així que necessito un altre mètode per
la possibilitat de pujar fotos a un lloc web,

1357
01:03:13,470 --> 01:03:15,657
i que un altre mètode es diu "post".

1358
01:03:15,657 --> 01:03:18,740
Però per ara, només parlarem de
"Feu-vos", que és el més simple dels dos.

1359
01:03:18,740 --> 01:03:21,100
Simplement posa tota la
l'entrada de l'usuari a la URL.

1360
01:03:21,100 --> 01:03:22,830
>> Així que aquí està la manera que estic creant.

1361
01:03:22,830 --> 01:03:24,070
Vull una entrada.

1362
01:03:24,070 --> 01:03:24,820
I saps què?

1363
01:03:24,820 --> 01:03:26,111
Vaig a prendre una conjectura aquí.

1364
01:03:26,111 --> 01:03:31,600
Recordaré la meva
entrada "q" per "consulta."

1365
01:03:31,600 --> 01:03:34,970
I crec que això és una de les
dissenys originals, tal vegada, a partir de 1999.

1366
01:03:34,970 --> 01:03:39,560
I a continuació, el tipus d'aquesta entrada
és només va a ser "text".

1367
01:03:39,560 --> 01:03:43,040
I després vaig a tenir una altra entrada
que no necessita un nom, com veurem aviat

1368
01:03:43,040 --> 01:03:45,120
veure, el tipus dels quals és "enviar".

1369
01:03:45,120 --> 01:03:47,070
I això va a
fes-me un botó especial.

1370
01:03:47,070 --> 01:03:48,320
I ja està.

1371
01:03:48,320 --> 01:03:50,790
>> Així que permetin-me anar endavant i guardar aquest arxiu.

1372
01:03:50,790 --> 01:03:54,910
Vaig a tornar al meu
navegador i vagi a google.html.

1373
01:03:54,910 --> 01:03:56,140
Enter.

1374
01:03:56,140 --> 01:03:59,680
I és una espècie d'escassa
per dir el menys.

1375
01:03:59,680 --> 01:04:03,110
Però m'ho dius a mi anar per davant
i la recerca de "gats".

1376
01:04:03,110 --> 01:04:06,510
I noto que estic actualment
en aquesta adreça URL Cloud9.

1377
01:04:06,510 --> 01:04:09,240
Però el moment en què feu clic en aquest,
On s'espera que vaig a acabar?

1378
01:04:09,240 --> 01:04:10,160
>> AUDIÈNCIA: Google.

1379
01:04:10,160 --> 01:04:11,118
>> DAVID J. Malan: Google.

1380
01:04:11,118 --> 01:04:12,740
Així que feu clic a Envia.

1381
01:04:12,740 --> 01:04:15,200
I, de fet he reimplementat Google.

1382
01:04:15,200 --> 01:04:15,700
Dret?

1383
01:04:15,700 --> 01:04:16,480
És més senzill.

1384
01:04:16,480 --> 01:04:17,120
És més lleuger.

1385
01:04:17,120 --> 01:04:20,350
És a dir, el meu codi és clarament millor que
d'ells, des del desastre en què vam veure anteriorment.

1386
01:04:20,350 --> 01:04:21,100
I saps què?

1387
01:04:21,100 --> 01:04:22,610
Vaig a donar-li vida a això una mica.

1388
01:04:22,610 --> 01:04:23,860
No he esmentat això abans.

1389
01:04:23,860 --> 01:04:27,860
Hi ha etiquetes com H1, per la rúbrica 1,
el títol més important d'una pàgina.

1390
01:04:27,860 --> 01:04:30,570
"El meu Google," trucaré a això.

1391
01:04:30,570 --> 01:04:31,940
Permetin-me tornar a carregar.

1392
01:04:31,940 --> 01:04:33,772
Es veu una mica millor ja.

1393
01:04:33,772 --> 01:04:34,980
I, en realitat, saps què?

1394
01:04:34,980 --> 01:04:36,430
Tinc ya-- vaig mentir.

1395
01:04:36,430 --> 01:04:40,200
Li vaig dir que no anava a llaurar això,
però vaig amb l'estil d'aquest com abans.

1396
01:04:40,200 --> 01:04:46,860
I el meu cos va a ser,
diguem, el centre text-align.

1397
01:04:46,860 --> 01:04:48,800
Es veu més com Google ja.

1398
01:04:48,800 --> 01:04:51,090
>> Necessito un salt de línia, però,
per a aquest botó Envia.

1399
01:04:51,090 --> 01:04:52,798
I resulta, que
pot usar paràgrafs,

1400
01:04:52,798 --> 01:04:57,320
o pot simplement dir més literalment,
dóna'm una línia de ruptura aquí-- l'etiqueta br.

1401
01:04:57,320 --> 01:04:59,319
I si torno a carregar això, ara es va allà.

1402
01:04:59,319 --> 01:05:01,610
És una mica lleig, així que
podria fer múltiples salts de línia,

1403
01:05:01,610 --> 01:05:03,310
però no entrarem aquí massa cobdiciós.

1404
01:05:03,310 --> 01:05:06,430
Així que ara anem a veure si funciona per "gossos."

1405
01:05:06,430 --> 01:05:08,640
Sembla que funciona per a gossos "," també.

1406
01:05:08,640 --> 01:05:10,780
Quina és el menjar per emportar convincent aquí?

1407
01:05:10,780 --> 01:05:13,600
Un-- no va ser un gran salt per a
introduir una mica més de les etiquetes,

1408
01:05:13,600 --> 01:05:15,370
de la mateixa manera que l'etiqueta de formulari a l'etiqueta d'entrada.

1409
01:05:15,370 --> 01:05:17,120
Però més fonamentalment
és a dir, tot el que estem fent

1410
01:05:17,120 --> 01:05:20,610
està aprofitant la nostra comprensió
d'HTTP i el fet

1411
01:05:20,610 --> 01:05:24,900
que les formes en última instància alteren
el que està en l'adreça URL del navegador,

1412
01:05:24,900 --> 01:05:28,540
i així, per tant, podem
mecànicament proporcionar informació a un servidor

1413
01:05:28,540 --> 01:05:33,600
en fer un formulari HTML i saber
que el servidor HTTP entén,

1414
01:05:33,600 --> 01:05:36,890
Igual que el nostre cos entén, com,
agitant la mà, el mateix protocol,

1415
01:05:36,890 --> 01:05:40,920
i així tornem la resposta
que en última instància esperem.

1416
01:05:40,920 --> 01:05:44,050
>> Així que anem a tractar de fer una
L'últim que ara amb el mòbil,

1417
01:05:44,050 --> 01:05:47,052
i vaig a make-- Vaig a afegir
aquest codi per a les diapositives.

1418
01:05:47,052 --> 01:05:49,760
Així que si voleu retocar, es
sens dubte pot prendre des d'allà.

1419
01:05:49,760 --> 01:05:51,551
Però vaig a anar
endavant i fer una cosa.

1420
01:05:51,551 --> 01:05:54,120
Vaig a seguir endavant i
obrir el meu índex de page--

1421
01:05:54,120 --> 01:05:59,030
hola la meva pàgina com abans, que
té una gran quantitat d'aquest text imitació d'Amèrica,

1422
01:05:59,030 --> 01:06:05,470
o sense sentit text llatí, i has--
sembla que aquest en aquesta grandària de font.

1423
01:06:05,470 --> 01:06:07,850
Però m'ho dius a mi seguir endavant i fer això.

1424
01:06:07,850 --> 01:06:09,300
Vaig a entrar a Cloud9.

1425
01:06:09,300 --> 01:06:10,380
I vostè no ha de fer aquest pas.

1426
01:06:10,380 --> 01:06:11,420
Vaig a fer-ho jo mateix.

1427
01:06:11,420 --> 01:06:12,890
Vaig a fer clic a Comparteix.

1428
01:06:12,890 --> 01:06:15,170
I aquesta és una característica
acaba de Cloud9, amb la qual cosa

1429
01:06:15,170 --> 01:06:17,710
Puc fer la meva entorn públic.

1430
01:06:17,710 --> 01:06:20,240
>> I només pel fet de
demostració, farem això.

1431
01:06:20,240 --> 01:06:22,870
Vaig a fer pública la meva sol·licitud.

1432
01:06:22,870 --> 01:06:25,230
Recordeu que m'està advertint, sóc
Jo si vull fer això,

1433
01:06:25,230 --> 01:06:28,438
perquè això va a fer que tots
al món, ja sigui que estiguin aquí ara

1434
01:06:28,438 --> 01:06:33,560
o veure el vídeo més tard al
Internet capaç de veure el que veig.

1435
01:06:33,560 --> 01:06:34,440
Però això està bé.

1436
01:06:34,440 --> 01:06:37,870
Vaig a dir "Fet".

1437
01:06:37,870 --> 01:06:42,080
I deixa que et animo, si ho fes
aquest correctly-- m'ho dius a mi provar primer.

1438
01:06:42,080 --> 01:06:45,590
Vagi per davant, si no mente--
en un navegador al seu ordinador,

1439
01:06:45,590 --> 01:06:49,900
aneu a aquesta adreça URL, i és d'esperar
veurà el meu text llatí.

1440
01:06:49,900 --> 01:06:52,820
I perquè quedi clar, que és
No s'executa en el meu ordinador portàtil.

1441
01:06:52,820 --> 01:06:53,610
Està en el núvol.

1442
01:06:53,610 --> 01:06:58,120
Està en Cloud9, literalment, però
He fet pública meu espai de treball

1443
01:06:58,120 --> 01:07:03,450
de manera que qualsevol usuari d'Internet
pot accedir a la meva pàgina d'inici Amèrica.

1444
01:07:03,450 --> 01:07:07,209
>> Anar a la mateixa URL en
el seu telèfon, si pogués.

1445
01:07:07,209 --> 01:07:09,750
Si et costarà, però,
pot simplement mirar per sobre d'una espatlla.

1446
01:07:09,750 --> 01:07:40,688

1447
01:07:40,688 --> 01:07:42,467
AUDIÈNCIA: [inaudible]

1448
01:07:42,467 --> 01:07:43,550
DAVID J. Malan: Ho sento?

1449
01:07:43,550 --> 01:07:45,390
AUDIÈNCIA: [inaudible]

1450
01:07:45,390 --> 01:07:47,710
DAVID J. Malan: Només paraules llatines.

1451
01:07:47,710 --> 01:07:48,210
Això és tot.

1452
01:07:48,210 --> 01:07:49,250
Però això és el que hauria de veure.

1453
01:07:49,250 --> 01:07:49,875
>> AUDIÈNCIA: Sí.

1454
01:07:49,875 --> 01:07:50,790
DAVID J. Malan: Sí.

1455
01:07:50,790 --> 01:07:51,300
Sí.

1456
01:07:51,300 --> 01:07:51,540
D'ACORD.

1457
01:07:51,540 --> 01:07:53,530
Així que puc aguantar el seu
telèfon per un moment?

1458
01:07:53,530 --> 01:07:57,504
Per tant, és d'esperar, si accedeix
ella, que ha de ser gairebé il·legible.

1459
01:07:57,504 --> 01:07:59,920
És still-- vull dir, és
il·legibles a causa de Amèrica.

1460
01:07:59,920 --> 01:08:01,920
Però també és il·legible
Per què una altra raó?

1461
01:08:01,920 --> 01:08:03,775
Igual, el que desagrada al respecte?

1462
01:08:03,775 --> 01:08:04,650
PÚBLIC: És petit.

1463
01:08:04,650 --> 01:08:06,420
DAVID J. Malan: És súper, súper petit.

1464
01:08:06,420 --> 01:08:07,920
Llavors, com podem solucionar aquest problema?

1465
01:08:07,920 --> 01:08:09,730
És super, super petita
al telèfon de Victòria

1466
01:08:09,730 --> 01:08:11,400
i, si s'ha tirat
tu mateix, probablement

1467
01:08:11,400 --> 01:08:14,660
petita en el seu telèfon, així, llevat que
tenen la configuració d'accessibilitat habilitades.

1468
01:08:14,660 --> 01:08:15,530
Què és això?

1469
01:08:15,530 --> 01:08:18,497
Es podia pessigar i
zoom, que és viable,

1470
01:08:18,497 --> 01:08:20,330
però llavors només es veu
unes poques paraules alhora.

1471
01:08:20,330 --> 01:08:20,859
Així que esperi un minut.

1472
01:08:20,859 --> 01:08:21,720
Jo sé com solucionar aquest problema.

1473
01:08:21,720 --> 01:08:22,219
Dret?

1474
01:08:22,219 --> 01:08:26,130
Podria utilitzar CSS, i podria canviar el
mida de font de 12 punts a 24 punts.

1475
01:08:26,130 --> 01:08:29,020
Però l'efecte secundari que,
per descomptat, va a ser ara,

1476
01:08:29,020 --> 01:08:32,630
en un sobretaula o un portàtil,
Ara el text és dues vegades més gran.

1477
01:08:32,630 --> 01:08:35,810
I pel que seria la classe de ser agradable
per distingir entre els dispositius,

1478
01:08:35,810 --> 01:08:37,840
i resulta que hi ha
són formes de fer això.

1479
01:08:37,840 --> 01:08:39,590
hi ha diversos
diferents maneres, de fet,

1480
01:08:39,590 --> 01:08:44,189
per la qual cosa l'ús de CSS i les característiques més elegants
que no entrarem en gran detall,

1481
01:08:44,189 --> 01:08:46,960
es pot consultar en essència
el navegador i dir,

1482
01:08:46,960 --> 01:08:51,550
Si la pantalla és més petita que aquesta
molts píxels, utilitzen aquesta font.

1483
01:08:51,550 --> 01:08:55,180
Si la pantalla és més gran que això
molts píxels, utilitzen aquesta altra font.

1484
01:08:55,180 --> 01:08:57,080
>> Pot ser fins i tot encara més elegant.

1485
01:08:57,080 --> 01:09:00,140
Si alguna vegada has estat en una
pàgina web que, en un escriptori,

1486
01:09:00,140 --> 01:09:04,404
té un gran menú potser fora a la
banda, i després tot el contingut

1487
01:09:04,404 --> 01:09:07,029
és el costat que menú--
que és una espècie d'un paradigma comú.

1488
01:09:07,029 --> 01:09:09,670
Menú a l'esquerra, el contingut
a la dreta, o viceversa.

1489
01:09:09,670 --> 01:09:13,569
En realitat no treballar al mòbil quan el seu
pantalla és només aquesta quantitat de píxels d'ample.

1490
01:09:13,569 --> 01:09:16,233
Així que més comú en el mòbil és,
el seu menú de cop i volta obtindrà

1491
01:09:16,233 --> 01:09:18,399
col·lapsat, i cal
feu clic a un botó per veure-ho,

1492
01:09:18,399 --> 01:09:22,404
o el lloc web posarà el menú
per sobre d'ella i posar el contingut sota d'ella.

1493
01:09:22,404 --> 01:09:24,779
I es pot posar en pràctica aquests
coses en múltiples formes.

1494
01:09:24,779 --> 01:09:28,340
Vostè pot demanar als seus programadors,
Ey, equip, en qualsevol moment

1495
01:09:28,340 --> 01:09:34,450
veus una sol·licitud HTTP des d'un Android
dispositiu, un dispositiu de Microsoft, un Google

1496
01:09:34,450 --> 01:09:39,930
dispositiu, un dispositiu d'Apple, utilitzeu aquesta
mida de la font i l'ús d'aquest disseny del menú,

1497
01:09:39,930 --> 01:09:42,670
o bé utilitzar el disseny d'aquest defecte més gran.

1498
01:09:42,670 --> 01:09:45,410
>> Ara, amb la qual
tècnica fonamental avui

1499
01:09:45,410 --> 01:09:48,529
podrien utilitzar els enginyers
saber si es tracta d'

1500
01:09:48,529 --> 01:09:53,660
un iPhone, un telèfon amb Android, un ordinador portàtil,
escriptori visitar el servidor de l'empresa?

1501
01:09:53,660 --> 01:09:55,310
Al que no aconsegueixen que la informació?

1502
01:09:55,310 --> 01:09:56,080
>> AUDIÈNCIA: Capçalera?

1503
01:09:56,080 --> 01:09:57,740
>> DAVID J. Malan: Sí, la capçalera HTTP.

1504
01:09:57,740 --> 01:10:01,714
Així que cada petició HTTP procedent de
seus clients als seus servidors

1505
01:10:01,714 --> 01:10:03,880
incloure, dins d'aquesta virtuals
sobre, en el seu conjunt manat

1506
01:10:03,880 --> 01:10:08,260
de capçaleres HTTP, un dels quals és
el navegador i el sistema operatiu

1507
01:10:08,260 --> 01:10:10,290
fins i tot, si és que vol
aquest nivell de detall.

1508
01:10:10,290 --> 01:10:13,790
Ara, és una cadena d'aspecte críptic, però
hi ha un programari que acaba de

1509
01:10:13,790 --> 01:10:18,530
simplificar això, i només es pot demanar
en la programació code-- PHP, Java, C ++,

1510
01:10:18,530 --> 01:10:23,650
whatever-- quin telèfon és això-
quin dispositiu és l'ús d'aquest usuari?

1511
01:10:23,650 --> 01:10:27,501
I llavors es pot dir, mostrar que aquesta
versió de la pàgina web si es tracta d'un telèfon.

1512
01:10:27,501 --> 01:10:30,250
Mostrar-aquesta versió de la
pàgina web si es tracta d'un ordinador portàtil o de sobretaula.

1513
01:10:30,250 --> 01:10:32,316
Però vostè ni tan sols necessita
la complexitat del costat del servidor.

1514
01:10:32,316 --> 01:10:33,940
Vostè pot fer fins i tot el més simple de les coses.

1515
01:10:33,940 --> 01:10:34,815
>> Vaig a fer això.

1516
01:10:34,815 --> 01:10:38,995
Vaig a seguir endavant en
Cloud9 meu entorn,

1517
01:10:38,995 --> 01:10:41,370
i vaig a afegir una etiqueta
que va veure a Google abans.

1518
01:10:41,370 --> 01:10:42,770
Es crida l'metaetiquetes.

1519
01:10:42,770 --> 01:10:45,520
I mai em acord d'aquest, per la qual
Vaig a transcriure aquí.

1520
01:10:45,520 --> 01:10:50,552
meta name = "viewport" i després
content = "width = amplada del dispositiu, intital

1521
01:10:50,552 --> 01:11:02,060
escala = 1 "i això és tot.

1522
01:11:02,060 --> 01:11:06,230
>> Pel que bé podria ser
com un encanteri màgic.

1523
01:11:06,230 --> 01:11:11,300
No és del tot clara, però això no té
alguna cosa a veure amb el visor,

1524
01:11:11,300 --> 01:11:15,070
i la vista és només el cos d'una
pàgina web, la regió rectangular que

1525
01:11:15,070 --> 01:11:16,690
defineix la major part de la pàgina.

1526
01:11:16,690 --> 01:11:19,060
I això és només dient
el navegador, saps què?

1527
01:11:19,060 --> 01:11:22,589
Fer que l'ample d'aquesta pàgina
efectivament igual a l'amplada del dispositiu.

1528
01:11:22,589 --> 01:11:25,380
En altres paraules, no assumeixi que es
Té una mena d'espai il·limitat.

1529
01:11:25,380 --> 01:11:29,920
Suposeu que només té tant
espai que el dispositiu en si és gran.

1530
01:11:29,920 --> 01:11:34,454
I pel que ara, si torno a carregar aquesta
en el meu navegador, no veig cap canvi.

1531
01:11:34,454 --> 01:11:37,370
Però si fes això i correctly--
m'ho dius a mi creuar la meva fingers-- si tot el que

1532
01:11:37,370 --> 01:11:42,920
recarregar els seus telèfons, oi
veure un canvi de pes?

1533
01:11:42,920 --> 01:11:43,620
Sí, és que--

1534
01:11:43,620 --> 01:11:45,067
>> AUDIÈNCIA: [inaudible]

1535
01:11:45,067 --> 01:11:45,900
DAVID J. Malan: Sí.

1536
01:11:45,900 --> 01:11:46,400
D'ACORD.

1537
01:11:46,400 --> 01:11:47,850
Així que sens dubte més fàcil de llegir ara?

1538
01:11:47,850 --> 01:11:53,070
Encara petit, per ser justos, però no
tan petita com per ser immanejable.

1539
01:11:53,070 --> 01:11:56,920
I no em resultava difícil reemplaçar aquest
encara més amb CSS o al costat del servidor,

1540
01:11:56,920 --> 01:12:00,120
però cada vegada més el que ets
veure per més i més característiques

1541
01:12:00,120 --> 01:12:02,900
s'afegeix a
environments-- del costat del client

1542
01:12:02,900 --> 01:12:06,530
JavaScript, com veurem
matí, CSS, i per HTML--

1543
01:12:06,530 --> 01:12:09,190
que totes aquestes consultes
es pot fer en el client

1544
01:12:09,190 --> 01:12:11,910
de manera que es molesta a
servidor molt menys i no

1545
01:12:11,910 --> 01:12:14,530
a haver de seguir el ritme, per
exemple, l'atac constant

1546
01:12:14,530 --> 01:12:17,210
de nou del sistema operatiu
versions, noves versions de navegadors.

1547
01:12:17,210 --> 01:12:20,190
Pot deixar que el navegador
preguntar al dispositiu, el gran que ets,

1548
01:12:20,190 --> 01:12:22,890
i després fer alguna cosa lògics
decisions en base a això.

1549
01:12:22,890 --> 01:12:25,140
Però veurem més oportunitats
per decisions lògiques

1550
01:12:25,140 --> 01:12:27,223
demà en el context
d'un llenguatge de programació.

1551
01:12:27,223 --> 01:12:29,800

1552
01:12:29,800 --> 01:12:32,760
>> Per tant, qualsevol pregunta, aleshores,
en el desenvolupament web?

1553
01:12:32,760 --> 01:12:36,130
Avui dia no és la programació web, per
en si, ja que la majoria tot el que vam fer

1554
01:12:36,130 --> 01:12:38,370
era molt estètic, si es vol.

1555
01:12:38,370 --> 01:12:41,750
No hi ha en la presa de decisions
el codi que hem escrit,

1556
01:12:41,750 --> 01:12:44,990
i per això és que l'HTML és un marge de benefici
idioma, no és un llenguatge de programació.

1557
01:12:44,990 --> 01:12:47,140
Però demà anem a prendre
una mirada ràpida, en última instància,

1558
01:12:47,140 --> 01:12:49,340
en JavaScript, que és
una programació real

1559
01:12:49,340 --> 01:12:54,220
el llenguatge que ens permet fer una mica més.

1560
01:12:54,220 --> 01:12:56,800
>> Qualsevol pregunta?

1561
01:12:56,800 --> 01:13:00,480
Bé, permetin-me proposar dos
oportunitats opcionals per fer la tasca.

1562
01:13:00,480 --> 01:13:02,900
Una és-- aquests Cloud9
comptes no expirarà.

1563
01:13:02,900 --> 01:13:04,669
El convidem a utilitzar
a jugar amb.

1564
01:13:04,669 --> 01:13:05,960
És el nivell de servei gratis.

1565
01:13:05,960 --> 01:13:08,754
Adonar-se que, si en crear
el seu espai de treball, es va fer pública,

1566
01:13:08,754 --> 01:13:11,670
això vol dir que qualsevol persona al
Internet pot veure el que estàs escrivint.

1567
01:13:11,670 --> 01:13:15,104
Així que potser només tenir en compte
no avergonyir

1568
01:13:15,104 --> 01:13:18,020
si vostè està posant la seva primera banda
pàgina públicament per aquí per accident,

1569
01:13:18,020 --> 01:13:20,134
però ningú va a
saber per buscar-hi de totes maneres.

1570
01:13:20,134 --> 01:13:23,760
>> I dos-- deixar-me llanço
aquesta URL, així,

1571
01:13:23,760 --> 01:13:28,250
especialment si vostè va entrar avui una
poc menys còmodes que altres,

1572
01:13:28,250 --> 01:13:30,430
sense saber què vol dir tot això.

1573
01:13:30,430 --> 01:13:36,780
Adonar-se que molt més d'aquest vídeo,
el qual és alhora una bona manera d'agafar el son

1574
01:13:36,780 --> 01:13:39,380
i també per riure mentre
En fer-ho, també té

1575
01:13:39,380 --> 01:13:44,300
una gran quantitat d'interessants socialment
i discussions rellevants per a la seguretat

1576
01:13:44,300 --> 01:13:47,370
en ella de John Oliver,
encara que un comediant.

1577
01:13:47,370 --> 01:13:55,456
>> Però si no hi ha més preguntes,
Això ens porta a la recepció.

1578
01:13:55,456 --> 01:13:56,830
Llavors, ¿per què no em encenc la música.

1579
01:13:56,830 --> 01:13:58,610
No ha d'haver begudes
i aperitius fora.

1580
01:13:58,610 --> 01:14:00,220
Estic content de barrejar-se durant el
sempre i quan la gent li agradaria,

1581
01:14:00,220 --> 01:14:01,600
respondre a les preguntes més d'un-a-un.

1582
01:14:01,600 --> 01:14:03,330
Però, d'altra banda, de res
per sortir en qualsevol moment,

1583
01:14:03,330 --> 01:14:05,740
i ens veurem de nou
demà al matí per una mica més.

1584
01:14:05,740 --> 01:14:07,290
Molt bé, gràcies.

1585
01:14:07,290 --> 01:14:10,428