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

2
00:00:00,127 --> 00:00:01,210
DAVID J. Malan: Todo ben.

3
00:00:01,210 --> 00:00:02,160
Estamos de volta.

4
00:00:02,160 --> 00:00:05,810
Así, o obxectivo desta sesión final
é introducir algúns conceptos

5
00:00:05,810 --> 00:00:09,290
pero tamén dar a todos unha oportunidade
ao tipo de estirar os dedos

6
00:00:09,290 --> 00:00:11,270
e realmente facer algo
un pouco de práctica.

7
00:00:11,270 --> 00:00:13,897
O obxectivo non é converter
todos para desenvolvedores web

8
00:00:13,897 --> 00:00:16,230
por calquera medio, pero realmente só
para darlle un gusto dalgúns

9
00:00:16,230 --> 00:00:21,750
das construcións fundamentais de que
entra programación web e hoxe web

10
00:00:21,750 --> 00:00:23,980
desenvolvemento, de xeito que o
banda estática de coisas-

11
00:00:23,980 --> 00:00:26,660
ningunha lóxica, ningunha programación
lingua, só contido estático.

12
00:00:26,660 --> 00:00:29,660
E iso daranos unha oportunidade
para ver realmente o que un servidor web é,

13
00:00:29,660 --> 00:00:34,140
ver o que un arquivo HTML é, ver o que
é HTTP é realmente servindo-se.

14
00:00:34,140 --> 00:00:38,600
Pero antes de mergullo, calquera retrospectiva
preguntas sobre a computación en nube

15
00:00:38,600 --> 00:00:43,922
ou de seguridade ou algo no medio?

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

17
00:00:44,890 --> 00:00:47,181
Todo ben, ben, imos
facelo, só no caso

18
00:00:47,181 --> 00:00:49,680
o proceso de rexistrar a
algo leva uns minutos.

19
00:00:49,680 --> 00:00:51,221
Imos deixalo facelo en segundo plano.

20
00:00:51,221 --> 00:00:56,860
Dalle, se puidese,
para c9.io. este URL aqui--

21
00:00:56,860 --> 00:01:02,810
Este é un terceiro serviço--
plataforma como servizo, se will--

22
00:01:02,810 --> 00:01:05,190
que vai invite
para rexistrar a unha conta,

23
00:01:05,190 --> 00:01:08,650
e vai dar a cada un de vós
unha conta na chamada nube

24
00:01:08,650 --> 00:01:11,330
na infraestrutura de outra persoa,
unha empresa chamada Cloud9.

25
00:01:11,330 --> 00:01:13,350
Pero o que é agradable sobre
isto é que eles dan-lle

26
00:01:13,350 --> 00:01:15,990
unha aproximación dun
desenvolvemento real do mundo real

27
00:01:15,990 --> 00:01:18,530
ambiente, aínda que no
nube e un navegador web,

28
00:01:18,530 --> 00:01:21,175
e imos usar isto para realmente
probar un pouco hoxe.

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

30
00:01:27,116 --> 00:01:30,260
E, a continuación, vai adiante e só navegar
o seu camiño para o proceso de inscrición

31
00:01:30,260 --> 00:01:32,630
se puidese.

32
00:01:32,630 --> 00:01:36,080
Entón, nós pasar para acceder a esta na clase
Eu ensino a todos os nosos alumnos,

33
00:01:36,080 --> 00:01:39,140
tanto no campus como fóra agora, e
substitúese o que historicamente

34
00:01:39,140 --> 00:01:41,390
foi software doutro xeito para descargar.

35
00:01:41,390 --> 00:01:44,620
Entón, o que estaba gañando acceso a
é unha desas máquinas virtuais,

36
00:01:44,620 --> 00:01:46,460
no esencial, que eu describe anteriormente.

37
00:01:46,460 --> 00:01:50,260
Polo tanto, esta empresa Cloud9 probablemente
rendas dun terzo party-- feito

38
00:01:50,260 --> 00:01:52,760
Neste caso, Google-- un todo
grupo de máquinas virtuais

39
00:01:52,760 --> 00:01:56,500
que dalgún xeito pique en
a ilusión de servidores individuais

40
00:01:56,500 --> 00:01:58,610
que cada un de nós ten total control sobre.

41
00:01:58,610 --> 00:02:01,640
Non é moi preciso dicir
que son máquinas virtuais,

42
00:02:01,640 --> 00:02:04,550
con todo, xa que o que
Cloud9 realmente usa

43
00:02:04,550 --> 00:02:07,570
é unha tecnoloxía algo máis recente
chamado conteinerização.

44
00:02:07,570 --> 00:02:13,150
E déixeme coller esta imaxe
aquí para pintar o cadro.

45
00:02:13,150 --> 00:02:16,540
>> Un recipiente é, se
Lembra-se da imaxe

46
00:02:16,540 --> 00:02:19,900
de antes, un pouco máis leve
peso do que unha máquina virtual.

47
00:02:19,900 --> 00:02:22,090
De feito, mentres que o último
xa que falamos de alí

48
00:02:22,090 --> 00:02:25,170
sendo un operativo
sistema e un hypervisor

49
00:02:25,170 --> 00:02:28,260
e logo, sistema operativo convidado, invitado
sistema operativo, operativo convidado

50
00:02:28,260 --> 00:02:30,940
sistema, encima do seu
hardware físico,

51
00:02:30,940 --> 00:02:33,740
a diferenza con esta nova
tecnoloxía, contentorização,

52
00:02:33,740 --> 00:02:37,290
é que todos eles de algunha maneira compartir
o mesmo sistema operativo.

53
00:02:37,290 --> 00:02:39,970
Pero aínda crear
a ilusión de todos

54
00:02:39,970 --> 00:02:44,590
ter o seu propio exclusivo
dereitos administrativos e arquivos

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

56
00:02:45,400 --> 00:02:48,230
Pero hai menos software
entre vostede eo hardware.

57
00:02:48,230 --> 00:02:52,260
O resultado é que, en
Teoricamente, un rendemento superior,

58
00:02:52,260 --> 00:02:55,470
porque está a usar ou
perdendo menos recursos

59
00:02:55,470 --> 00:02:57,360
en que a capa de virtualización chamada.

60
00:02:57,360 --> 00:02:59,420
Entón, iso é chamado
conteinerização por natureza

61
00:02:59,420 --> 00:03:02,920
por medio dunha tecnoloxía chamada de encaixe,
que é moi entrando no seu propio.

62
00:03:02,920 --> 00:03:05,086
E iso é algo que
enxeñeiros da súa empresa

63
00:03:05,086 --> 00:03:08,610
Pode tipo de tipo de comezar a falar
sobre pronto, se xa non o fixo,

64
00:03:08,610 --> 00:03:11,590
porén non hai dúbida ningunha
razón para ir sobre calquera bandwagons.

65
00:03:11,590 --> 00:03:15,410
>> Entón, con iso dito, o que
probablemente ve agora

66
00:03:15,410 --> 00:03:22,670
é unha pantalla que parece un pouco con iso.

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

68
00:03:23,170 --> 00:03:25,260
E só chamar-me sobre se non.

69
00:03:25,260 --> 00:03:27,440
E se assim-- vou vir se non.

70
00:03:27,440 --> 00:03:30,244
Dalle clic tan grande
ademais de crear un espazo de traballo,

71
00:03:30,244 --> 00:03:31,660
e podes ver unha pantalla como esta.

72
00:03:31,660 --> 00:03:35,020
Pode chamar o espazo de traballo
nomear calquera cousa que quere para o momento.

73
00:03:35,020 --> 00:03:38,660
E, así, de feito, para simplificar,
vaia e- ben, algúns de vostedes

74
00:03:38,660 --> 00:03:39,660
xa espazos de traballo.

75
00:03:39,660 --> 00:03:47,050
Chama-lle o que want-- negocio,
Harvard, xoves, o que quere que desexa.

76
00:03:47,050 --> 00:03:48,800
Non necesita unha descrición.

77
00:03:48,800 --> 00:03:52,380
Pode deixar lo privado, a menos que
xa ten unha morea de espazos de traballo.

78
00:03:52,380 --> 00:03:55,280
Se está obrigado a facela pública,
iso é bo para fins de hoxe.

79
00:03:55,280 --> 00:03:56,750
Aquí, tamén, é un dos upsells.

80
00:03:56,750 --> 00:03:59,939
Vostede gañou un espazo de traballo privado por
estándar. Pero se quere máis,

81
00:03:59,939 --> 00:04:00,980
ten que pagar por máis.

82
00:04:00,980 --> 00:04:02,870
Se non, eles forzalo
para facer o seu público traballo.

83
00:04:02,870 --> 00:04:05,600
Pero iso é bo, porque tamén
obxectivo que en comunidades de código aberto

84
00:04:05,600 --> 00:04:07,700
para impulsar a xente a
Realmente colaborar.

85
00:04:07,700 --> 00:04:10,699
>> E o último que é importante,
con todo, é, despois de escoller un nome

86
00:04:10,699 --> 00:04:17,140
e despois de escoller privado ou público,
clic HTML5, a icona laranxa grande

87
00:04:17,140 --> 00:04:22,430
segundo desde a esquerda, e
a continuación, prema en Crear Espazo de Traballo.

88
00:04:22,430 --> 00:04:24,580
E, probabelmente,
tomar un minuto ou así,

89
00:04:24,580 --> 00:04:26,540
pero entón vai ter un
medio ambiente, xa que

90
00:04:26,540 --> 00:04:30,544
facelo, que parece unha reminiscencia
o que eu teño na pantalla aquí agora.

91
00:04:30,544 --> 00:04:33,210
Pero, de novo, isto pode levar un minuto
ou máis para chegar a esta pantalla

92
00:04:33,210 --> 00:04:34,770
xa que premeu Crear Espazo de Traballo.

93
00:04:34,770 --> 00:04:37,936
Pero, así min bandeira máis se me gustase de min
para dar un ollo a algo ou aconsellar.

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

95
00:04:40,191 --> 00:04:40,690
Todo ben.

96
00:04:40,690 --> 00:04:42,390
Entón, eu vou fondo iso por agora.

97
00:04:42,390 --> 00:04:44,260
Chama-me máis se parecen
temos dificultades técnicas.

98
00:04:44,260 --> 00:04:46,210
Pero, de novo, isto pode levar un
pouco para que a abrir.

99
00:04:46,210 --> 00:04:49,570
E imos adiante e falar do
realmente significa para facer unha páxina web,

100
00:04:49,570 --> 00:04:52,780
HTML é, e como todo isto
agora interliga como estamos comezando

101
00:04:52,780 --> 00:04:54,730
para realmente usar algunhas das tecnoloxías.

102
00:04:54,730 --> 00:04:58,310
Así, verifícase que eu poida
ir no meu pequeno Mac aquí,

103
00:04:58,310 --> 00:05:01,650
abrir un programa sinxelo chamado
TextEdit, ou en Windows podería

104
00:05:01,650 --> 00:05:04,480
algo aberto chamado Notepad.exe.

105
00:05:04,480 --> 00:05:08,260
E eu podería simplemente facer algo
como isto-- "Ola, mundo".

106
00:05:08,260 --> 00:05:12,020
E entón eu podería salvar isto como
hello.txt Entón hai máxica alí.

107
00:05:12,020 --> 00:05:15,200
Isto non ten nada que ver coa web
programación, nada que ver con HTML.

108
00:05:15,200 --> 00:05:16,790
Basta crear un arquivo de texto plano.

109
00:05:16,790 --> 00:05:20,600
Pero parece que a web
A páxina é, literalmente, só iso.

110
00:05:20,600 --> 00:05:24,020
É un texto arquivo de texto que contén
que podes escribir no seu teclado,

111
00:05:24,020 --> 00:05:30,070
pero normalmente, pero non sempre
remata non .txt, pero .html ou .htm.

112
00:05:30,070 --> 00:05:32,050
E non só
escribir palabras no ficheiro.

113
00:05:32,050 --> 00:05:35,280
Realmente ten que usar cousas chamadas
etiquetas ou, máis xeralmente, algo

114
00:05:35,280 --> 00:05:37,190
chamado linguaxe de marcado.

115
00:05:37,190 --> 00:05:40,510
>> Entón eu vou para escribir moi rápido
e logo, explicar o seguinte.

116
00:05:40,510 --> 00:05:42,290
Vou primeiro
escriba este, que di:

117
00:05:42,290 --> 00:05:45,730
hey, navegador, aí ven un
A páxina web escrito en HTML.

118
00:05:45,730 --> 00:05:51,850
E estas dúas cousas xuntas dicir, hey,
navegador, a seguinte é de feito HTML.

119
00:05:51,850 --> 00:05:55,790
Hey, navegador, aí vén o
cabeza ou parte superior da miña páxina.

120
00:05:55,790 --> 00:05:59,900
Hey, navegador, dentro da parte superior da
miña páxina, poña un título que é, "Ola,

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

122
00:06:01,610 --> 00:06:08,370
Hey, navegador, tras a cabeza do meu
páxina, aquí vén o corpo da miña páxina.

123
00:06:08,370 --> 00:06:12,170
E, hey, navegador, o corpo do meu
páxina tamén debería dicir, "Ola mundo".

124
00:06:12,170 --> 00:06:15,500
Entón, cales son os detalles saíntes aquí?

125
00:06:15,500 --> 00:06:17,960
Isto é o que normalmente é
chamado dunha declaración do tipo doc,

126
00:06:17,960 --> 00:06:20,190
e, a verdade, é algo
difícil de memorizar esta en primeiro lugar.

127
00:06:20,190 --> 00:06:21,481
Só tipo de copia-pegar.

128
00:06:21,481 --> 00:06:23,760
Esta é o xeito formal
de dicir, hey, navegador,

129
00:06:23,760 --> 00:06:28,030
Eu estou usando HTML versión 5, que
saíu un pouco recentemente.

130
00:06:28,030 --> 00:06:31,380
É un encantamento máxico que algúns
humanos con un mal sentido de deseño

131
00:06:31,380 --> 00:06:33,640
decidiu poñer no
moi superior do ficheiro.

132
00:06:33,640 --> 00:06:35,473
Aínda que sexa un
pouco arcano, iso é todo

133
00:06:35,473 --> 00:06:38,250
Lo means-- hey, navegador, aquí
vén coa versión 5 do HTML.

134
00:06:38,250 --> 00:06:41,741
>> O resto deste estivo connosco
xa hai algún tempo, historicamente,

135
00:06:41,741 --> 00:06:44,740
pero foi evolucionando, e é
Probablemente, foi quedando un pouco máis simple.

136
00:06:44,740 --> 00:06:47,320
Observe algunhas características
que eu teño resaltado.

137
00:06:47,320 --> 00:06:49,890
Hai esas cousas con angular
brackets-- soporte esquerdo

138
00:06:49,890 --> 00:06:51,040
eo soporte dereito.

139
00:06:51,040 --> 00:06:52,490
E teña en conta a simetría aquí.

140
00:06:52,490 --> 00:06:57,340
E por simetría, quero dicir, como eu
ter esa marca de comezo aquí ou unha etiqueta aberta

141
00:06:57,340 --> 00:07:01,560
se quixeren, aquí eu teño un
preto etiqueta ou marca de fin que é

142
00:07:01,560 --> 00:07:06,460
diferentes só na medida en que ten este
barra no inicio da palabra

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

144
00:07:07,360 --> 00:07:09,360
E pode pensar
isto como eu estaba casualmente

145
00:07:09,360 --> 00:07:12,280
propoñendo antes, hey,
navegador, aí ven un pouco de HTML.

146
00:07:12,280 --> 00:07:16,060
E, inversamente, hey, navegador, que é
Lo para o inicio HTML-- e fin.

147
00:07:16,060 --> 00:07:18,440
>> Mentres tanto hey, navegador, aquí
vén a cabeza de miña páxina.

148
00:07:18,440 --> 00:07:20,140
Hey, navegador, é tanto para a cabeza.

149
00:07:20,140 --> 00:07:22,240
Hey, navegador, aquí é
o corpo da miña páxina.

150
00:07:22,240 --> 00:07:24,020
Hey, navegador, é tanto para o corpo.

151
00:07:24,020 --> 00:07:26,940
E dentro dese algunha
texto arbitrario para agora.

152
00:07:26,940 --> 00:07:30,520
E dentro da cabeza, mentres tanto,
é un arbitraria, pero con etiquetas,

153
00:07:30,520 --> 00:07:34,410
por así dicir, texto que di, o título
da miña páxina debe ser "Ola, mundo".

154
00:07:34,410 --> 00:07:37,470
Agora, por agora, pode
supoñer que os navegadores

155
00:07:37,470 --> 00:07:41,762
ten only-- ou mellor, páxinas web teñen
só dous parts-- da cabeza e do corpo.

156
00:07:41,762 --> 00:07:44,220
E a cabeza é xeralmente só
como a barra de menú, o material

157
00:07:44,220 --> 00:07:45,510
realmente só na parte superior.

158
00:07:45,510 --> 00:07:48,910
E o corpo é a coraxe da páxina,
todo en tan grande rectángulo

159
00:07:48,910 --> 00:07:50,239
que enche a pantalla.

160
00:07:50,239 --> 00:07:51,780
Entón, eu estou indo a ir adiante e facelo.

161
00:07:51,780 --> 00:07:54,400
Eu indo a ir adiante e
prema Gardar, Gardar ficheiro.

162
00:07:54,400 --> 00:07:58,580
E eu estou indo a salvar
isto como hello.html,

163
00:07:58,580 --> 00:08:00,870
e eu estou indo só para
poñelas no meu escritorio.

164
00:08:00,870 --> 00:08:03,520
E eu estou indo a ir
adiante e faga clic en Gardar.

165
00:08:03,520 --> 00:08:05,806
E notice-- meu Mac en
menos está berrando para min.

166
00:08:05,806 --> 00:08:07,180
Está seguro de que quere facer isto?

167
00:08:07,180 --> 00:08:08,710
E eu vou dicir, si, usar HTML.

168
00:08:08,710 --> 00:08:10,400
Sei mellor neste caso.

169
00:08:10,400 --> 00:08:14,686
E agora eu estou indo a ir ao meu escritorio
onde eu teño o ficheiro de súpeto.

170
00:08:14,686 --> 00:08:16,060
E eu vou dar un dobre clic nel.

171
00:08:16,060 --> 00:08:18,268
E vai entender que, por
patrón, Chrome aberto.

172
00:08:18,268 --> 00:08:19,996
Isto é porque é iso
meu navegador por defecto.

173
00:08:19,996 --> 00:08:21,370
E só di: "Ola, mundo".

174
00:08:21,370 --> 00:08:23,078
Pero el di "Ola,
mundo "en dous lugares.

175
00:08:23,078 --> 00:08:23,979
Observe superior esquerda.

176
00:08:23,979 --> 00:08:25,020
Moi difícil de perder.

177
00:08:25,020 --> 00:08:26,180
É grande e valente.

178
00:08:26,180 --> 00:08:30,690
E onde máis é que parece
quere dicir, "Ola, mundo"?

179
00:08:30,690 --> 00:08:31,470
>> Audiencia: A guía.

180
00:08:31,470 --> 00:08:33,100
>> DAVID J. Malan: Si, a guía en si.

181
00:08:33,100 --> 00:08:35,159
Entón, cando dixo que o xefe da
A páxina é todo para arriba top--

182
00:08:35,159 --> 00:08:36,367
e en realidade este é o título.

183
00:08:36,367 --> 00:08:37,710
É só na guía aquí.

184
00:08:37,710 --> 00:08:40,320
E podo tirar esta guía
para non confundir.

185
00:08:40,320 --> 00:08:43,360
Esta é só unha única guía agora,
e, de feito vemos "Ola, mundo"

186
00:08:43,360 --> 00:08:45,970
aquí enriba e "Ola, mundo" aquí debaixo.

187
00:08:45,970 --> 00:08:47,160
Así, moi sinxelo.

188
00:08:47,160 --> 00:08:49,050
Pero tamén é moi sinxelo.

189
00:08:49,050 --> 00:08:50,440
E, de feito, eu ampliada.

190
00:08:50,440 --> 00:08:53,272
Podo cambiar o tamaño da fonte só
para ampliar a accesibilidade.

191
00:08:53,272 --> 00:08:56,830
Pero imos agora facer algo
un pouco máis interesante.

192
00:08:56,830 --> 00:08:59,760
>> Vou vai-- berros, imos
me volver para o meu ficheiro de texto.

193
00:08:59,760 --> 00:09:02,400
Vou volver para o meu
arquivo de texto, e eu vou

194
00:09:02,400 --> 00:09:06,320
para cambiar isto e dicir
"Ola, Disney World."

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

196
00:09:07,970 --> 00:09:10,919
E volver ao meu
navegador e prema en Cargar de.

197
00:09:10,919 --> 00:09:12,710
E agora, por suposto,
di que "Disney World".

198
00:09:12,710 --> 00:09:15,500
E eu vou aumentar artificialmente
en só polo que é máis fácil de ver.

199
00:09:15,500 --> 00:09:19,012
Entón, agora, por desgraza, eu medio que quero
a-- en realidade, iso é unha característica Mac.

200
00:09:19,012 --> 00:09:21,720
Quero facer clic en Disney World
e ir en algún lugar como disney.com,

201
00:09:21,720 --> 00:09:23,290
pero iso non funciona.

202
00:09:23,290 --> 00:09:26,850
Así, un principio básico da web é
hiperlinks, enlaces que ir a outro lugar.

203
00:09:26,850 --> 00:09:28,390
Entón, como podo facelo?

204
00:09:28,390 --> 00:09:34,690
Ben, eu podería só dicir,
"Ola, http://www.disney.com."

205
00:09:34,690 --> 00:09:36,110
Gardar este.

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

207
00:09:37,620 --> 00:09:39,400
Pero iso tamén, non previsión.

208
00:09:39,400 --> 00:09:42,930
E o que é bo aquí, aínda que
Isto non é funcional aínda,

209
00:09:42,930 --> 00:09:45,930
é que parece que o
navegador, literalmente, só fai

210
00:09:45,930 --> 00:09:46,950
o que eu diga a el para facer.

211
00:09:46,950 --> 00:09:50,110
Entón, se eu só unha URL como esta,
el só me vai amosar a URL.

212
00:09:50,110 --> 00:09:54,270
Eu teño usar etiquetas ou marcado
linguaxe para realmente dicir

213
00:09:54,270 --> 00:09:55,621
o teu navegador para aínda máis.

214
00:09:55,621 --> 00:09:57,870
Entón, eu estou indo a ir adiante e
eliminar este por un momento.

215
00:09:57,870 --> 00:10:00,980
E eu vou dicir, hey,
navegador, iniciar unha áncora aquí,

216
00:10:00,980 --> 00:10:02,650
unha conexión por así dicir.

217
00:10:02,650 --> 00:10:07,500
E a amiga referencia ao destino
desa referencia, debe ser este URL.

218
00:10:07,500 --> 00:10:08,750
E teña en conta as miñas citas.

219
00:10:08,750 --> 00:10:11,590
Eu podería usar comiñas simples, tamén,
pero tes que ser consistente,

220
00:10:11,590 --> 00:10:14,270
e eu normalmente só usar
comiñas para mantelo simple.

221
00:10:14,270 --> 00:10:16,820
Repare que eu vou pechar a etiqueta.

222
00:10:16,820 --> 00:10:21,160
E entón aquí eu vou
quere dicir, "Disney World".

223
00:10:21,160 --> 00:10:26,890
E agora eu teño de symmetry--
paréntese de apertura, / a, pechou soporte.

224
00:10:26,890 --> 00:10:28,090
>> Entón o que eu introducido?

225
00:10:28,090 --> 00:10:30,100
Tivemos algunhas etiquetas xa.

226
00:10:30,100 --> 00:10:32,410
HTML, cabeza, título, corpo
son todas as etiquetas, por así dicir,

227
00:10:32,410 --> 00:10:34,280
cos seus homólogos abertos e pechados.

228
00:10:34,280 --> 00:10:36,530
Pero aviso, isto é unha especie
de fundamentalmente diferente.

229
00:10:36,530 --> 00:10:39,140
Isto é o que nós chamaremos
HTML un atributo.

230
00:10:39,140 --> 00:10:41,451
E un atributo
só un par de valores clave.

231
00:10:41,451 --> 00:10:43,950
Iso é unha cousa común en
ordenador science-- par clave-valor.

232
00:10:43,950 --> 00:10:45,770
É unha especie de ferramenta de comercio.

233
00:10:45,770 --> 00:10:47,040
Unha clave e un valor.

234
00:10:47,040 --> 00:10:49,390
Unha palabra e entón algúns
outra palabra ou palabras.

235
00:10:49,390 --> 00:10:53,790
E neste caso, a clave é href,
eo valor é a URL completa.

236
00:10:53,790 --> 00:10:57,890
E o que un atributo fai é
influencia o comportamento dunha etiqueta.

237
00:10:57,890 --> 00:11:01,010
E neste caso, debemos influír
o comportamento da marca de referencia,

238
00:11:01,010 --> 00:11:04,140
porque necesitamos ancorar
este enlace para algún lugar.

239
00:11:04,140 --> 00:11:06,960
E como fai iso é
por medio do atributo.

240
00:11:06,960 --> 00:11:08,970
>> Entón, eu estou indo a ir adiante
e salva o arquivo agora.

241
00:11:08,970 --> 00:11:11,300
Voltar o meu navegador e recargar.

242
00:11:11,300 --> 00:11:14,580
E, voila, temos agora a
inicio dunha páxina web lexítimos.

243
00:11:14,580 --> 00:11:18,420
Super-simple, pero se eu pasar o rato sobre
aviso isto-- na parte inferior esquerda,

244
00:11:18,420 --> 00:11:19,830
É super-pequeno.

245
00:11:19,830 --> 00:11:21,730
Pero ve www.disney.com.

246
00:11:21,730 --> 00:11:27,076
E se eu premer nel, de feito, este
me leva lonxe para disney.com.

247
00:11:27,076 --> 00:11:29,380
Agora, a cousa curiosa
aquí é que non é

248
00:11:29,380 --> 00:11:33,940
o best-- a URL máis comercializável, pero
iso é bo, porque este ficheiro non

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

250
00:11:35,360 --> 00:11:39,740
Existe como un arquivo local no aparentemente
Os meus usuarios directory-- / jharvard--

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

252
00:11:41,890 --> 00:11:42,634
Pero ten un URL.

253
00:11:42,634 --> 00:11:43,800
El só pasa a ser lugar.

254
00:11:43,800 --> 00:11:47,050
Por desgraza, ningún de vós pode visitar
iso, porque se insire esta URL,

255
00:11:47,050 --> 00:11:49,980
estaría dicindo a súa web,
procure un ficheiro chamado hello.html

256
00:11:49,980 --> 00:11:50,772
no seu disco duro.

257
00:11:50,772 --> 00:11:53,271
E, por suposto, a menos que ten
está a seguir ao longo manualmente

258
00:11:53,271 --> 00:11:54,530
non existir alí.

259
00:11:54,530 --> 00:11:55,190
>> Entón, iso é bo.

260
00:11:55,190 --> 00:11:57,815
Aínda necesitamos de certa forma, en última instancia,
para este ficheiro para a web,

261
00:11:57,815 --> 00:12:01,180
pero imos desmembrar un par de
implicacións de seguridade que acabamos

262
00:12:01,180 --> 00:12:04,850
viu e amarra-lo de volta para o inicio
discusión desta mañá.

263
00:12:04,850 --> 00:12:08,200
Acontece que, se un
navegador, literalmente, só fai

264
00:12:08,200 --> 00:12:12,560
o que eu diga a el para facer, e parece
ser o caso de que unha marca de referencia é

265
00:12:12,560 --> 00:12:17,380
influenciada polo valor de
este atributo chamado href

266
00:12:17,380 --> 00:12:20,810
pero exhibe esta
texto, isto parecería

267
00:12:20,810 --> 00:12:26,520
implicar que eu podería poñer a URL
en ambos os lugares e recoloque

268
00:12:26,520 --> 00:12:29,100
e agora ver o URL e ir ao URL.

269
00:12:29,100 --> 00:12:32,680
Observe, se eu pasar o rato sobre o canto inferior esquerdo,
Estou realmente indo aínda disney.com.

270
00:12:32,680 --> 00:12:38,340
>> Entón, se xa estivo
phished-- P-H-I-S-H-E-D--

271
00:12:38,340 --> 00:12:42,820
cun destes correos electrónicos falsos
de como o PayPal base,

272
00:12:42,820 --> 00:12:46,470
probablemente xa conquistou conexións dentro
do correo electrónico que está lendo que

273
00:12:46,470 --> 00:12:49,970
dille para premer aquí para ir confirm
o seu contrasinal ou confirmar a súa data de nacemento

274
00:12:49,970 --> 00:12:53,840
ou social ou algo socialmente
enxeñaría que divulgue

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

276
00:12:54,920 --> 00:12:57,625
Ben, eu podería tipo de exame
vantaxe deste, non podería?

277
00:12:57,625 --> 00:13:01,240
Podería dicir algo
como, www.paypal.com.

278
00:13:01,240 --> 00:13:11,340
E no canto de disney.com, I
podería ir, como, badguy.com.

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

280
00:13:12,850 --> 00:13:16,620
E como é que é fácil de enganar,
especialmente un lector non-técnico

281
00:13:16,620 --> 00:13:20,649
ou superficialmente lendo
lector que para premer

282
00:13:20,649 --> 00:13:23,940
unha ligazón como este, que se eu premer ele--
Eu realmente non quero ir badguy.com.

283
00:13:23,940 --> 00:13:25,398
Eu non sei o que está realmente alí.

284
00:13:25,398 --> 00:13:30,080
Entón paypal.com, previo aviso, é
o que di que vai,

285
00:13:30,080 --> 00:13:33,210
pero está claro que, se eu ollar para abaixo
super-baixo, que é un pouco embaçado,

286
00:13:33,210 --> 00:13:34,230
pero el di que badguy.com.

287
00:13:34,230 --> 00:13:38,644
Esa é a única dicir agora
que eu estou indo ao lugar incorrecto.

288
00:13:38,644 --> 00:13:41,560
E cando eu dixen anteriormente que os bancos
realmente non debe fomentar ou adestrar

289
00:13:41,560 --> 00:13:44,510
usuarios en enlaces premendo, este
é só unha manifestación diso.

290
00:13:44,510 --> 00:13:45,430
E é tan sinxelo.

291
00:13:45,430 --> 00:13:48,120
Agora un adversario se
fai algo coma isto

292
00:13:48,120 --> 00:13:51,000
e tratar de enganar un usuario
para visitar o seu sitio.

293
00:13:51,000 --> 00:13:53,320
Pero, por agora, imos seguir
cousas agradable e limpo.

294
00:13:53,320 --> 00:13:55,640
Estamos indo a ir adiante
e retroceder estes cambios.

295
00:13:55,640 --> 00:13:56,530
Actualizar a páxina.

296
00:13:56,530 --> 00:13:57,740
E eu voltar disney.com.

297
00:13:57,740 --> 00:14:00,660
>> Imos ver se non podemos provocar
este apart un pouco máis.

298
00:14:00,660 --> 00:14:04,160
Así, "Ola, Disney World."

299
00:14:04,160 --> 00:14:05,950
Eu vou dicir aquí.

300
00:14:05,950 --> 00:14:08,220
Poida que eu vou facer un espazo.

301
00:14:08,220 --> 00:14:12,730
"Esperamos que aproveite a súa estancia"

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

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

304
00:14:15,850 --> 00:14:19,010
Non é rea-- iso non é
o que eu pretendía, non?

305
00:14:19,010 --> 00:14:21,870
É dicir, se eu estou tratando meu texto
arquivo como un procesador de texto,

306
00:14:21,870 --> 00:14:24,894
O que esperaba que ía ocorrer aquí?

307
00:14:24,894 --> 00:14:27,060
Si, eu sinto que hai
debe ser unha quebra de liña aquí,

308
00:14:27,060 --> 00:14:28,799
polo que se sente cesta de algunha maneira.

309
00:14:28,799 --> 00:14:31,090
Pero iso é realmente deliberada,
porque así como antes,

310
00:14:31,090 --> 00:14:33,381
o navegador só vai
facer o que diga a el para facer.

311
00:14:33,381 --> 00:14:34,806
Eu non dixen a el para romper liñas.

312
00:14:34,806 --> 00:14:37,930
Non lle dixen que se mova abaixo, mesmo
porén, intuitivamente, eu sinto que eu fixen.

313
00:14:37,930 --> 00:14:39,805
Non é que necesitamos
un pouco máis de reserva,

314
00:14:39,805 --> 00:14:41,390
e eu vou solucionar isto como segue.

315
00:14:41,390 --> 00:14:46,160
Vou de prefaciar este primeiro Ola
co que se chama tag de parágrafo.

316
00:14:46,160 --> 00:14:48,920
E entón eu estou indo a ir adiante
e enrole estoutra sentenza

317
00:14:48,920 --> 00:14:54,370
noutra tag de parágrafo, a pesar de
son parágrafos super-curtos.

318
00:14:54,370 --> 00:14:55,930
Agora eu estou indo a salvar.

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

320
00:14:57,160 --> 00:14:59,070
E agora temos que
espazo, e tipo de

321
00:14:59,070 --> 00:15:01,680
ten a semántica de
dous parágrafos separados.

322
00:15:01,680 --> 00:15:05,290
>> Isto é todo moi ben e bo, pero sería
ser bo para engadir unha imaxe a esta páxina,

323
00:15:05,290 --> 00:15:08,710
entón eu estou indo a ir buscar
Mickey Mouse en Google Images.

324
00:15:08,710 --> 00:15:12,830
E só por diversión, eu son
indo coller esta imaxe.

325
00:15:12,830 --> 00:15:15,350
Eu estou indo a ir adiante agora e
coller a URL desta imaxe,

326
00:15:15,350 --> 00:15:16,510
aínda que non é diferente
formas de facelo.

327
00:15:16,510 --> 00:15:18,520
Por agora, eu só vou copiar a URL.

328
00:15:18,520 --> 00:15:24,770
Vou volver para o meu texto
arquivo, e eu vou dicir aquí,

329
00:15:24,770 --> 00:15:31,160
img src = entre comiñas
que URL, super-longa.

330
00:15:31,160 --> 00:15:34,580
E, a continuación, a noción dun
imaxe é un pouco diferente.

331
00:15:34,580 --> 00:15:38,640
Non hai realmente ningunha noción de partida
unha imaxe e rematando nunha imaxe,

332
00:15:38,640 --> 00:15:40,630
como un tag de inicio dunha etiqueta final.

333
00:15:40,630 --> 00:15:43,840
Entón, se sente un pouco raro
me semanticamente para facelo,

334
00:15:43,840 --> 00:15:45,390
para ter unha etiqueta primer imaxe.

335
00:15:45,390 --> 00:15:46,780
Non é correcto.

336
00:15:46,780 --> 00:15:48,840
É perfectamente correcto,
e é animou,

337
00:15:48,840 --> 00:15:50,870
pero non hai notación abreviada.

338
00:15:50,870 --> 00:15:53,780
Podo tipo de vez
abrir e pechar a mesma etiqueta,

339
00:15:53,780 --> 00:15:55,510
e que fará que o navegador feliz.

340
00:15:55,510 --> 00:15:56,950
Por iso, é só un pouco
máis sucinto para que as cousas

341
00:15:56,950 --> 00:15:59,408
que, conceptualmente realmente non sei
ter sentido para comezar e rematar.

342
00:15:59,408 --> 00:16:01,190
Eles só están aí, ou eles non son.

343
00:16:01,190 --> 00:16:06,020
>> Entón eu vou para salvar este e volver
ao meu "Ola, mundo" páxina e recarga.

344
00:16:06,020 --> 00:16:09,880
E é un pouco fóra de control,
porque a imaxe é realmente

345
00:16:09,880 --> 00:16:12,210
un pouco grande, pero iso é OK.

346
00:16:12,210 --> 00:16:13,710
Podería redimensiona-la nun programa.

347
00:16:13,710 --> 00:16:14,900
Ou sabe o que.

348
00:16:14,900 --> 00:16:17,350
Só para demostrar, eu son
vai realmente dicir

349
00:16:17,350 --> 00:16:21,760
que o ancho desta cousa debe
ser só 200 píxeles, 200 puntos.

350
00:16:21,760 --> 00:16:24,360
Deixe-me ir adiante e gardar
e actualizar, e agora a páxina

351
00:16:24,360 --> 00:16:25,690
parece un pouco máis razoable.

352
00:16:25,690 --> 00:16:27,260
Pero teña en conta o patrón.

353
00:16:27,260 --> 00:16:30,030
Ben, eu medio que lle ensinou todo
HTML, en certo sentido, polo menos,

354
00:16:30,030 --> 00:16:33,531
conceptualmente, porque todo HTML é é
estes tags-- etiquetas abertos, pechados etiquetas,

355
00:16:33,531 --> 00:16:35,280
e atributos que
modificar o seu comportamento.

356
00:16:35,280 --> 00:16:38,380
E, ao parecer, cada
tag pode cero ou un

357
00:16:38,380 --> 00:16:43,005
ou dous ou máis atributos, cada un de
que fai algo un pouco diferente.

358
00:16:43,005 --> 00:16:44,380
Agora, como vostede sabe o que hai?

359
00:16:44,380 --> 00:16:46,800
Acaba de escoitar alguén
como eu lle dicir o que hai,

360
00:16:46,800 --> 00:16:50,860
ou simplemente Google en torno a un tutorial
HTML, e é realmente tan sinxelo.

361
00:16:50,860 --> 00:16:54,030
>> De feito, cando eu era estudante
anos e aprendín HTML,

362
00:16:54,030 --> 00:16:56,530
unha das miñas clases de matemáticas
asistentes só pasado

363
00:16:56,530 --> 00:16:59,600
un pouco de tempo me titoría
para como media hora, unha hora,

364
00:16:59,600 --> 00:17:00,660
e entón eu estaba no meu camiño.

365
00:17:00,660 --> 00:17:03,300
Eu estaba no meu camiño para facer
os sitios máis hediondos de todos os tempos,

366
00:17:03,300 --> 00:17:05,549
que, ao parecer, non teñen
realmente progresou alén.

367
00:17:05,549 --> 00:17:09,849
Pero o punto é que, unha vez que
comprender estas simples ideas--

368
00:17:09,849 --> 00:17:13,450
se arcano texto-- pero estes simples
ideas de comezar un pensamento

369
00:17:13,450 --> 00:17:15,960
e pechando un pensamento, mantendo
todo ben equilibrado,

370
00:17:15,960 --> 00:17:19,150
mirando algo anterior, modificar o
comportamento desa etiqueta, iso é realmente todo

371
00:17:19,150 --> 00:17:20,079
que hai para ela.

372
00:17:20,079 --> 00:17:28,140
E, de feito, se imos agora
algo así como google.com-- en realidade,

373
00:17:28,140 --> 00:17:31,920
imos un lugar un pouco máis
reasonable-- stanford.edu.

374
00:17:31,920 --> 00:17:37,800
E eu estou indo a ir a ver,
Creador, Vista Orixe.

375
00:17:37,800 --> 00:17:41,400
É feo, pero notice--
e eu vou facer zoom aviso

376
00:17:41,400 --> 00:17:43,432
algunhas cousas que xa é familiar.

377
00:17:43,432 --> 00:17:45,140
Hai este aquí enriba,
que é un navegador.

378
00:17:45,140 --> 00:17:46,800
Aí vén HTML5.

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

380
00:17:47,634 --> 00:17:49,550
Ao parecer, hai unha
atributo que eu non fixen

381
00:17:49,550 --> 00:17:51,540
usar o que especifica
idioma da páxina,

382
00:17:51,540 --> 00:17:54,380
e isto pode axudar con automática
tradución e cousas así.

383
00:17:54,380 --> 00:17:55,546
Aquí está a cabeza da páxina.

384
00:17:55,546 --> 00:17:57,790
Aquí está o título da páxina de Stanford.

385
00:17:57,790 --> 00:17:59,832
Hai un tag eu non fixen
falar yet-- tag Meta.

386
00:17:59,832 --> 00:18:01,540
É só unha especie de
información de fondo.

387
00:18:01,540 --> 00:18:04,210
Ela contribúe con SEO, ou
optimización de buscador,

388
00:18:04,210 --> 00:18:06,320
ou os resultados de Google-search ou similares.

389
00:18:06,320 --> 00:18:09,029
Pero se ficarmos mirando, manteña
buscar, aquí está a etiqueta do corpo.

390
00:18:09,029 --> 00:18:11,570
E non hai acios doutra
etiquetas que non falamos sobre iso aínda.

391
00:18:11,570 --> 00:18:13,750
Pero é unha Div para unha
división da páxina.

392
00:18:13,750 --> 00:18:16,680
É como un rectángulo invisible
se medio que quero mental

393
00:18:16,680 --> 00:18:20,160
dividir súa páxina en
distintas unidades en liña.

394
00:18:20,160 --> 00:18:22,650
E, a continuación, lotes de divs I
ver, algo chamado de clase,

395
00:18:22,650 --> 00:18:24,440
pero imos volver a iso.

396
00:18:24,440 --> 00:18:26,200
>> Este é Forms interessante--.

397
00:18:26,200 --> 00:18:27,730
Os formularios están por toda a web.

398
00:18:27,730 --> 00:18:30,310
Calquera caixa de busca que está
xa usou é unha forma.

399
00:18:30,310 --> 00:18:31,490
E, por iso, imos realmente ver.

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

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

402
00:18:33,910 --> 00:18:37,660
A acción deste xeito, por calquera
razóns históricas, é que URL.

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

404
00:18:38,840 --> 00:18:44,060
Acontece que as solicitudes HTTP pode usar
o verbo "estar", como vimos antes,

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

406
00:18:45,070 --> 00:18:47,030
E vai ver a diferenza
isto nun momento.

407
00:18:47,030 --> 00:18:48,363
Veremos realmente o que é iso.

408
00:18:48,363 --> 00:18:49,830
Déixeme volver á páxina de Stanford.

409
00:18:49,830 --> 00:18:53,330
Que forma eles están falando
sobre, que pensas?

410
00:18:53,330 --> 00:18:54,485
O que salta á vista?

411
00:18:54,485 --> 00:18:54,970
>> Audiencia: Caixa de Investigación.

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

413
00:18:55,845 --> 00:18:58,410
Así, se na parte superior dereita
aquí é esta caixa de busca.

414
00:18:58,410 --> 00:19:02,441
E é así que aplicaron ele-- un
tag que é, literalmente, fórmase bracket aberto.

415
00:19:02,441 --> 00:19:03,940
E entón imos buscar algo.

416
00:19:03,940 --> 00:19:09,220
Imos buscar un amigo
de mine-- "Nick parlante."

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

418
00:19:11,380 --> 00:19:13,750
E, por suposto, foi a
URL lixeiramente diferente.

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

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

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

422
00:19:19,460 --> 00:19:20,484
Fun a unha URL diferente.

423
00:19:20,484 --> 00:19:23,400
Entón, Stanford da adición de un pouco de maxia
que non están me levando a URL

424
00:19:23,400 --> 00:19:25,820
que vimos no
atributo action alí.

425
00:19:25,820 --> 00:19:32,480
Pero esta forma aquí é aplicado puramente
por medio desta cita aquí, estas etiquetas.

426
00:19:32,480 --> 00:19:35,710
De feito, aquí está a entrada
o tipo de investigación que quere.

427
00:19:35,710 --> 00:19:38,940
Aquí é a entrada
outro tipo de busca.

428
00:19:38,940 --> 00:19:41,960
Aquí é a entrada á propia corda.

429
00:19:41,960 --> 00:19:45,394
E así, o obxectivo non é para embrulhar
nosas mentes en torno a todas estas etiquetas

430
00:19:45,394 --> 00:19:46,060
pero só para ver.

431
00:19:46,060 --> 00:19:48,300
É só abrir e pechar
etiquetas e mirando as cousas.

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

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

434
00:19:48,920 --> 00:19:49,795
>> Audiencia: [inaudível]

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

436
00:19:51,925 --> 00:19:53,550
DAVID J. Malan: Esta é unha boa pregunta.

437
00:19:53,550 --> 00:19:54,660
Isto é un pouco máis complicado de ver.

438
00:19:54,660 --> 00:19:56,300
Déixeme volver a iso
pregunta en só uns minutos

439
00:19:56,300 --> 00:19:59,000
cando miramos para algo chamado
follas de CSS, ou de estilo en cascada,

440
00:19:59,000 --> 00:20:02,500
e podemos tentar deducir
tanto desde a páxina.

441
00:20:02,500 --> 00:20:08,090
Entón, se nós agora dar un ollo a google.com,
imos ver o que a súa páxina parece.

442
00:20:08,090 --> 00:20:09,840
Vostede tería they're-- que é bonito hoxe.

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

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

445
00:20:12,990 --> 00:20:13,690
Todo feito.

446
00:20:13,690 --> 00:20:15,260
Todo ben, entón View Source.

447
00:20:15,260 --> 00:20:19,590
Vostede podería pensar que Google ten
código fonte moi boa.

448
00:20:19,590 --> 00:20:24,970
Entón, ao parecer, o que está pasando aquí?

449
00:20:24,970 --> 00:20:27,880
E, de feito, iso non é nin HTML.

450
00:20:27,880 --> 00:20:30,930
Isto é algo chamado de JavaScript.

451
00:20:30,930 --> 00:20:32,344
E imos seguir indo e indo.

452
00:20:32,344 --> 00:20:34,010
Non sei ata onde a páxina comeza.

453
00:20:34,010 --> 00:20:37,240
Vou usar Command
F, HTML soporte aberto.

454
00:20:37,240 --> 00:20:38,200
Todo ben, aí está.

455
00:20:38,200 --> 00:20:44,150
Eu atopei o inicio da páxina, e
hai tanta cousa aquí.

456
00:20:44,150 --> 00:20:45,310
>> O que está realmente a suceder?

457
00:20:45,310 --> 00:20:47,460
Ben, vostede sabe o que,
podemos limpar iso.

458
00:20:47,460 --> 00:20:52,109
Se eu en vez de ir a este Inspecionar
barra de ferramentas, esta ferramenta especial de diagnóstico,

459
00:20:52,109 --> 00:20:54,150
e non van á rede,
onde esperamos que continúe hoxe,

460
00:20:54,150 --> 00:20:56,420
pero se eu for a Elements,
o que é moi bo

461
00:20:56,420 --> 00:20:59,990
que é un navegador ten unha morea
moito mellores ollos do que eu.

462
00:20:59,990 --> 00:21:02,670
E o navegador pode ler
esa confusión dunha páxina web,

463
00:21:02,670 --> 00:21:04,700
que o correo HTML que acabamos
mirou, e pode

464
00:21:04,700 --> 00:21:08,340
analiza-lo ou ler e
analizalo e reflexa-lo

465
00:21:08,340 --> 00:21:09,910
dunha forma agradable-humano agradable.

466
00:21:09,910 --> 00:21:11,740
Entón o que estou a ver agora
nesta pantalla aquí

467
00:21:11,740 --> 00:21:15,470
en Elementos, exactamente o mesmo contido,
pero recuado todo,

468
00:21:15,470 --> 00:21:18,140
eles colorized pero
que é o mesmo texto

469
00:21:18,140 --> 00:21:19,620
que descargar do servidor.

470
00:21:19,620 --> 00:21:23,630
>> E o que é bo momento é que podo ver
no corpo, por aviso instance--,

471
00:21:23,630 --> 00:21:26,480
a páxina aínda está composta
de só unha cabeza e un corpo,

472
00:21:26,480 --> 00:21:28,660
e podo xerarquicamente mergullo aquí.

473
00:21:28,660 --> 00:21:32,420
Teña en conta que Google parece
para divs-- este e este.

474
00:21:32,420 --> 00:21:33,310
Podo ampliar iso.

475
00:21:33,310 --> 00:21:35,370
Hai unha morea de outros divs.

476
00:21:35,370 --> 00:21:36,900
Polo tanto, é un pouco complexo.

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

478
00:21:37,400 --> 00:21:40,970
Isto parece moito máis
lexible, relativamente, que este.

479
00:21:40,970 --> 00:21:43,840
Por que Google embaraçoso
por si só o envío

480
00:21:43,840 --> 00:21:50,400
esta enorme confusión de código de calquera
tipo só para aplicar algo

481
00:21:50,400 --> 00:21:53,640
que parece tan sinxelo a primeira vista?

482
00:21:53,640 --> 00:21:55,270
Como, por que non engadir máis espazos?

483
00:21:55,270 --> 00:21:56,811
Por que non prema Intro como eu fixen?

484
00:21:56,811 --> 00:21:59,110
Mira como eu era
en escribir unha páxina web.

485
00:21:59,110 --> 00:22:00,680
I prema Intro tan dilixente.

486
00:22:00,680 --> 00:22:03,760
I recuado, entón todo
é tan fermosa e lexible.

487
00:22:03,760 --> 00:22:08,463
Por que Google non practicar o mesmo?

488
00:22:08,463 --> 00:22:11,409
>> Audiencia: [inaudível]

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

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

491
00:22:13,180 --> 00:22:14,270
Moi xusto.

492
00:22:14,270 --> 00:22:16,650
Eles non teñen algúns
persoa en Google manualmente

493
00:22:16,650 --> 00:22:18,160
actualizar máis a páxina principal.

494
00:22:18,160 --> 00:22:20,010
Non é 1.999 máis.

495
00:22:20,010 --> 00:22:21,140
Entón eles teñen software.

496
00:22:21,140 --> 00:22:25,397
Teñen outras ferramentas que
xerar dinamicamente son HTML.

497
00:22:25,397 --> 00:22:27,480
Claro, que o propio código
foi escrita por seres humanos,

498
00:22:27,480 --> 00:22:30,220
pero a realidade é,
é moi xusto dicir,

499
00:22:30,220 --> 00:22:33,340
o navegador por suposto non fai
importa o quão confuso o código.

500
00:22:33,340 --> 00:22:35,940
Pero hai unha aínda máis
razón técnica convincente

501
00:22:35,940 --> 00:22:42,580
que Google distribúe o HTML
código de tal desleixado, aparentemente

502
00:22:42,580 --> 00:22:48,350
esmagadora xeito, todos embalados xuntos
con moi pouco way-- moi pouco

503
00:22:48,350 --> 00:22:51,274
na forma de formato, como eu fixen.

504
00:22:51,274 --> 00:22:52,570
>> Audiencia: [inaudível]

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

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

507
00:22:54,040 --> 00:22:55,680
E o que dixo, Lydia?

508
00:22:55,680 --> 00:22:56,240
Máis rápido?

509
00:22:56,240 --> 00:22:57,281
Por máis rápido?

510
00:22:57,281 --> 00:22:58,156
Audiencia: [inaudível]

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

512
00:23:00,522 --> 00:23:02,230
DAVID J. Malan: Non hai
non hai espazo para ler.

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

514
00:23:02,730 --> 00:23:04,560
Entón, pense sobre o que un espazo é.

515
00:23:04,560 --> 00:23:08,394
Así, cada carácter no teclado leva
unha certa cantidade de espazo para representar,

516
00:23:08,394 --> 00:23:10,560
tanto fisicamente, como
ocupa moito espazo,

517
00:23:10,560 --> 00:23:13,250
ou de algunha maneira por baixo do
capo, que require memoria.

518
00:23:13,250 --> 00:23:15,740
E como un aside-- e nós imos
falar máis sobre este tomorrow--

519
00:23:15,740 --> 00:23:19,930
cada personaxe no teclado
normalmente require de 8 bits, ou un byte.

520
00:23:19,930 --> 00:23:23,360
Entón, un patrón de 8 ceros ou
queridos, ou só 1 byte, como nós

521
00:23:23,360 --> 00:23:24,720
humanos que normalmente din.

522
00:23:24,720 --> 00:23:27,690
Entón, iso é pequeno, pero
aínda é distinto de cero.

523
00:23:27,690 --> 00:23:29,940
É aínda unha certa cantidade de espazo.

524
00:23:29,940 --> 00:23:36,082
Polo tanto, se un enxeñeiro ou Google bate
a barra de espazo xa só, e supoña

525
00:23:36,082 --> 00:23:38,540
Google-- é super-popular--
Supoña que mil millóns de persoas

526
00:23:38,540 --> 00:23:40,780
visite a súa páxina principal do día,
ou algún número de persoas

527
00:23:40,780 --> 00:23:43,290
visite a páxina inicial dun
millóns de veces ao día,

528
00:23:43,290 --> 00:23:48,890
cantos bytes adicionais que posúe
enxeñeiro de software só o custo Google

529
00:23:48,890 --> 00:23:51,310
por bater a barra de espazo xa?

530
00:23:51,310 --> 00:23:52,692
>> Audiencia: [inaudível]

531
00:23:52,692 --> 00:23:54,150
DAVID J. Malan: Non é tan malo así.

532
00:23:54,150 --> 00:23:57,070
Só un byte veces mil millóns.

533
00:23:57,070 --> 00:23:57,871
entón um--

534
00:23:57,871 --> 00:23:59,120
Audiencia: 8 millóns de gigabytes.

535
00:23:59,120 --> 00:24:00,370
DAVID J. Malan: Non 8 millóns.

536
00:24:00,370 --> 00:24:01,240
8 millóns de bytes.

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

538
00:24:02,410 --> 00:24:04,080
1 gigabytes sería a unidade de medida.

539
00:24:04,080 --> 00:24:08,240
Se el ou ela fai dous
espazos, 2 gigabytes.

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

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

542
00:24:09,530 --> 00:24:11,860
É escalas cara.

543
00:24:11,860 --> 00:24:16,150
E así, en casos como Google,
que, concedido, son casos extremos,

544
00:24:16,150 --> 00:24:21,450
hai outras cuestións que xorden só
tomando decisións moi razoables

545
00:24:21,450 --> 00:24:25,744
ou tomar accións humanas moi sinxelo,
porque ten ese efecto ampliado.

546
00:24:25,744 --> 00:24:27,660
Polo tanto, unha das razóns
isto parece tan comprimido

547
00:24:27,660 --> 00:24:30,660
é exactamente como Victoria disse- era
só xerados por ordenador de calquera maneira.

548
00:24:30,660 --> 00:24:31,900
Entón, non é gran cousa.

549
00:24:31,900 --> 00:24:33,309
Deixe o seu navegador descubrir iso.

550
00:24:33,309 --> 00:24:35,350
Pero tamén deliberadamente
Non ten moito espazo,

551
00:24:35,350 --> 00:24:36,766
porque o espazo non é necesario.

552
00:24:36,766 --> 00:24:38,250
E o espazo realmente custa cartos.

553
00:24:38,250 --> 00:24:40,670
>> Iso quere custa tempo,
porque só a empurrar

554
00:24:40,670 --> 00:24:44,670
que máis datos en cada
A sede da google.com só

555
00:24:44,670 --> 00:24:47,710
Ten que tomar algunha cantidade de
tempo, aínda que sexa milisegundos

556
00:24:47,710 --> 00:24:51,190
ou microssegundos, pero que engade-se
ao longo de tantos usuarios, ou, máis probablemente,

557
00:24:51,190 --> 00:24:52,270
probablemente custa cartos.

558
00:24:52,270 --> 00:24:54,690
Google probablemente conecta a
outra persoa no mundo, un

559
00:24:54,690 --> 00:24:56,398
dos que perscruta
puntos, e se teñen

560
00:24:56,398 --> 00:24:59,880
algún tipo de relación financeira
segundo o cal os custos dos seus datos diñeiro,

561
00:24:59,880 --> 00:25:01,730
Poderían moi ben
minimizar a cantidade de datos

562
00:25:01,730 --> 00:25:04,530
están cuspindo en
a súa conexión a Internet.

563
00:25:04,530 --> 00:25:07,630
>> Entón, a cousa divertido, aínda que, en definitiva,
ou que a cousa reconfortante,

564
00:25:07,630 --> 00:25:11,030
é que aínda que iso parece terriblemente
esmagadora, ao final do día,

565
00:25:11,030 --> 00:25:16,750
aínda é exactamente os mesmos principios que
Nesta páxina moi sinxela aquí dun HTML

566
00:25:16,750 --> 00:25:17,390
páxina.

567
00:25:17,390 --> 00:25:20,610
Entón, só para resumir e para que
ten unha versión canónica se non fose

568
00:25:20,610 --> 00:25:25,900
acompañando a opción aquí, aquí
pode ser o máis simple de páxinas web,

569
00:25:25,900 --> 00:25:28,240
por iso algo para xogar quizais máis tarde.

570
00:25:28,240 --> 00:25:30,790
>> Ben, imos introducir unha
par de outras ideas agora.

571
00:25:30,790 --> 00:25:33,420
Estamos a piques de presentar
algo chamado tag de estilo.

572
00:25:33,420 --> 00:25:38,110
Podemos estilizar desta páxina
de formas máis interesantes.

573
00:25:38,110 --> 00:25:40,860
Así, mentres correo electrónico HTML
é todo sobre o marcado de

574
00:25:40,860 --> 00:25:44,470
os datos, tipo de especificando a un
navegador como estruturar os datos,

575
00:25:44,470 --> 00:25:48,110
onde poñelas, CSS, ou
follas de estilo en cascada,

576
00:25:48,110 --> 00:25:52,640
é unha segunda lingua que
xeralmente se mesturaren co HTML

577
00:25:52,640 --> 00:25:55,670
como imos see-- pero podemos limpar
que nunha moment-- que leva

578
00:25:55,670 --> 00:25:59,850
Lo a milla final, e estiliza lo.

579
00:25:59,850 --> 00:26:02,460
Recibe as cores só para a dereita,
o tamaño de letra só para a dereita,

580
00:26:02,460 --> 00:26:03,860
o posicionamento só dereito.

581
00:26:03,860 --> 00:26:06,510
É todo sobre a estética
ou formato, e non sobre

582
00:26:06,510 --> 00:26:08,330
os datos en si fundamental.

583
00:26:08,330 --> 00:26:11,390
E o xeito máis doado de amosar
este é quizais o exemplo.

584
00:26:11,390 --> 00:26:15,320
Entón eu vou pasar por riba
para o meu arquivo de texto simple.

585
00:26:15,320 --> 00:26:17,970
E en só un momento, eu vou
pé connosco a través do proceso

586
00:26:17,970 --> 00:26:19,360
de facelo nós mesmos.

587
00:26:19,360 --> 00:26:23,310
>> Vou volver para o meu arquivo
aquí e actualizar a páxina só

588
00:26:23,310 --> 00:26:25,800
para confirmar o que parece.

589
00:26:25,800 --> 00:26:27,190
Isto é onde estamos agora.

590
00:26:27,190 --> 00:26:31,170
Eu sinto que os nenos se aproveitar
ter un pouco de cor a esta páxina web.

591
00:26:31,170 --> 00:26:34,480
Entón, eu estou indo a ir aquí
na cabeza da páxina.

592
00:26:34,480 --> 00:26:38,130
E eu vou facer estilo, / estilo.

593
00:26:38,130 --> 00:26:44,060
E, a continuación, dentro deste, eu vou
para dicir o corpo do meu página--

594
00:26:44,060 --> 00:26:46,870
e esa formato é, polo
primeira vista, quizais un pouco

595
00:26:46,870 --> 00:26:49,400
raro, pero convencional.

596
00:26:49,400 --> 00:26:55,010
Eu vou dicir que o fondo
cor desta páxina debe ser verde.

597
00:26:55,010 --> 00:26:57,960
E esta é, por desgraza,
tipo de non o mellor deseño.

598
00:26:57,960 --> 00:27:00,710
Nótese que anteriormente
no mundo do HTML,

599
00:27:00,710 --> 00:27:03,190
Eu dixen que os atributos
son eses pares chave-valor.

600
00:27:03,190 --> 00:27:05,760
Algo igual Cita
unquote "algo".

601
00:27:05,760 --> 00:27:08,810
No mundo dos CSS, que estaba
deseñado por algunhas persoas diferentes,

602
00:27:08,810 --> 00:27:11,020
decidiron que, na súa
mundo, pares chave-valor

603
00:27:11,020 --> 00:27:13,920
Sería palabra colon algo.

604
00:27:13,920 --> 00:27:15,220
Entón é a mesma idea, aínda que.

605
00:27:15,220 --> 00:27:18,620
É asociado un valor
con algunha clave que dalgún xeito

606
00:27:18,620 --> 00:27:20,330
influencia o comportamento desta páxina.

607
00:27:20,330 --> 00:27:21,901
>> E probablemente pode adiviñar.

608
00:27:21,901 --> 00:27:24,150
¿Que é iso, probablemente, vai
para facer se nunca

609
00:27:24,150 --> 00:27:27,867
visto HTML ou CSS antes?

610
00:27:27,867 --> 00:27:29,450
Audiencia: Cambiar a cor de fondo.

611
00:27:29,450 --> 00:27:30,560
DAVID J. Malan: Si,
cambiar a cor do fondo.

612
00:27:30,560 --> 00:27:33,280
E especialmente a
cor de fondo do corpo.

613
00:27:33,280 --> 00:27:36,290
Pero desde que o
corpo de momento é a web

614
00:27:36,290 --> 00:27:38,870
página-- é o único
por baixo do realmente-- barra de título

615
00:27:38,870 --> 00:27:40,870
el probabelmente vai
influír o mesmo.

616
00:27:40,870 --> 00:27:41,430
Entón imos ver.

617
00:27:41,430 --> 00:27:42,490
Imos salvar este.

618
00:27:42,490 --> 00:27:44,310
Vaia aquí e actualizar.

619
00:27:44,310 --> 00:27:46,140
É moi hediondo.

620
00:27:46,140 --> 00:27:48,070
E o que está a suceder
aquí é un efecto colateral.

621
00:27:48,070 --> 00:27:49,850
Só escolleu esta imaxe aleatoria.

622
00:27:49,850 --> 00:27:53,305
Por que o non é verde
permeando detrás Mickey?

623
00:27:53,305 --> 00:27:54,180
Audiencia: [inaudível]

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

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

626
00:27:57,880 --> 00:28:01,750
Acontece que as imaxes, moito
moi todas as imaxes para que poidamos utilizar,

627
00:28:01,750 --> 00:28:03,670
son todos rectangles-- de rectángulos.

628
00:28:03,670 --> 00:28:07,710
Mesmo se ten algunhas curvas Mickey
a si mesmo e ten un fondo,

629
00:28:07,710 --> 00:28:09,330
que o fondo ten que ser algo.

630
00:28:09,330 --> 00:28:10,280
Ten que ser negro.

631
00:28:10,280 --> 00:28:11,910
Ten que ser negro ou outra cousa.

632
00:28:11,910 --> 00:28:13,650
Pode ser transparente.

633
00:28:13,650 --> 00:28:16,100
E, de feito, eu podería
abrir Mickey Mouse aquí

634
00:28:16,100 --> 00:28:18,590
nun programa chamado Photoshop
ou algo semellante

635
00:28:18,590 --> 00:28:21,176
e cambiar todo isto branca
fondo para transparente,

636
00:28:21,176 --> 00:28:22,550
de xeito que o verde vai brillar.

637
00:28:22,550 --> 00:28:25,980
Pero iso é algo que eu teño
para preguntar de min mesmo ou un artista gráfico

638
00:28:25,980 --> 00:28:28,130
ou un estudio para o meu
empresa, por exemplo,

639
00:28:28,130 --> 00:28:31,490
de facer, especialmente dende que eu só
prestado esta de internet.

640
00:28:31,490 --> 00:28:33,030
Pero iso é porque isto está a suceder.

641
00:28:33,030 --> 00:28:34,980
>> Entón, o que máis podería queremos facer?

642
00:28:34,980 --> 00:28:41,040
Ben, nós pode querer dicir que
Realmente espero que aproveite a súa estancia.

643
00:28:41,040 --> 00:28:44,150
E para dar énfase, quero
para facer este forte,

644
00:28:44,150 --> 00:28:48,310
e así eu vou dicir aberta forte e
pechar forte e, a continuación, volver cargar.

645
00:28:48,310 --> 00:28:50,320
E é un pouco difícil
ver no proxector

646
00:28:50,320 --> 00:28:53,250
pero quizais realmente agora
salta en ti un pouco máis.

647
00:28:53,250 --> 00:28:56,180
Entón podes engadir cursiva neste
forma, orientados ao negra deste xeito.

648
00:28:56,180 --> 00:28:57,500
Poderíamos cambiar as cores.

649
00:28:57,500 --> 00:29:01,610
De feito, só por diversión, eu son
indo a ir adiante e facelo.

650
00:29:01,610 --> 00:29:05,120
Eu realmente non me gusta de como o meu
parágrafos son tan preto xuntos,

651
00:29:05,120 --> 00:29:06,870
así que eu podería facer algo así.

652
00:29:06,870 --> 00:29:13,310
Vou dicir ao navegador,
cambiar cada etiqueta de parágrafo para ter,

653
00:29:13,310 --> 00:29:16,952
imos dizer-- en realidade, vostede sabe o que,
imos aliñar text-align, centro.

654
00:29:16,952 --> 00:29:19,410
E unha vez máis, sei que iso só
porque alguén ensinou-me isto

655
00:29:19,410 --> 00:29:21,118
ou eu mirei cara arriba no
unha referencia en liña.

656
00:29:21,118 --> 00:29:22,450
Entón deixe-me salvar este.

657
00:29:22,450 --> 00:29:25,070
E, ah, agora eu teño
centrada a imaxe alí.

658
00:29:25,070 --> 00:29:28,490
E, de feito, xa sabe o que, se
Eu movo a miña imaxe nun parágrafo

659
00:29:28,490 --> 00:29:34,510
tag-- entón un parágrafo terceiro,
aínda que non do texto.

660
00:29:34,510 --> 00:29:36,917
Imos gardar isto e volver cargar.

661
00:29:36,917 --> 00:29:40,000
Agora, a páxina está empezando a parecer tipo
de-- Quero dicir, é aínda moi feo,

662
00:29:40,000 --> 00:29:43,180
pero polo menos parece que pase
dous minutos no canto dun minuto

663
00:29:43,180 --> 00:29:43,950
facendo-o.

664
00:29:43,950 --> 00:29:47,200
>> E así, de forma incremental, podemos facer
estas modificacións estéticas agora á páxina?

665
00:29:47,200 --> 00:29:50,860
Non teño realmente cambiaron os datos no
páxina que non sexa engadindo a palabra de verdade.

666
00:29:50,860 --> 00:29:52,650
Eu engade metadatos, se quere.

667
00:29:52,650 --> 00:29:54,830
Hey, navegador, facer o
palabra "realmente" negra.

668
00:29:54,830 --> 00:29:56,940
Pero os datos non é forte.

669
00:29:56,940 --> 00:29:57,830
Isto é metadatos.

670
00:29:57,830 --> 00:29:59,410
Os datos son "realmente".

671
00:29:59,410 --> 00:30:02,200
Polo tanto, aínda temos algúns dos
os mesmos conceptos como antes.

672
00:30:02,200 --> 00:30:05,990
Agora, por suposto, iso non está na web,
entón eu vou facer un paso final aquí.

673
00:30:05,990 --> 00:30:10,300
>> Eu estou indo a ir a hello.html
e só destacar e copiar este.

674
00:30:10,300 --> 00:30:12,285
E agora eu vou
entrar Cloud9, que

675
00:30:12,285 --> 00:30:13,910
Vou leva-lo a través de só un momento.

676
00:30:13,910 --> 00:30:17,080
E as probabilidades son en breve vai ser, se
non o fixo, nunha pantalla como esta.

677
00:30:17,080 --> 00:30:21,080
E déixeme só darlle unha rápida
excursión que Cloud9 realmente é.

678
00:30:21,080 --> 00:30:26,590
Entón, de novo Cloud 9 é
este servizo baseado en nube

679
00:30:26,590 --> 00:30:30,580
que lle dá e me ilusión
de ter a nosa propia máquina virtual

680
00:30:30,580 --> 00:30:33,090
na nube, tecnicamente
un recipiente na nube,

681
00:30:33,090 --> 00:30:35,160
que temos plena
privilexios administrativos para.

682
00:30:35,160 --> 00:30:37,130
Así, en teoría, ninguén
outra parte do mundo ten

683
00:30:37,130 --> 00:30:39,152
Acceso á pantalla que eu son
mirando agora,

684
00:30:39,152 --> 00:30:40,860
excepto quizais a xente
que xestionar o sitio web,

685
00:30:40,860 --> 00:30:43,470
porque tecnicamente teñen
acceso físico e así por diante.

686
00:30:43,470 --> 00:30:44,740
>> Entón, o que vemos neste ámbito?

687
00:30:44,740 --> 00:30:46,230
Vou reducir,
porque é un pouco pequeno.

688
00:30:46,230 --> 00:30:48,104
E déixeme salientar máis
aquí por só un momento.

689
00:30:48,104 --> 00:30:53,210
No lado esquerdo do meu e teu
pantalla, hai un navegador de ficheiros á esquerda.

690
00:30:53,210 --> 00:30:55,362
Entón semellante en espírito
para Mac OS e Windows.

691
00:30:55,362 --> 00:30:57,070
Estes son todos do
arquivos na miña conta.

692
00:30:57,070 --> 00:30:59,250
E, por defecto, se o
conta é como o meu,

693
00:30:59,250 --> 00:31:05,090
vai ver ou ver en breve
HelloWorld.html e readme.md.

694
00:31:05,090 --> 00:31:07,950
Por aquí, á dereita, que é
onde os meus arquivos de texto están a ir.

695
00:31:07,950 --> 00:31:11,620
Se xa usou o Microsoft
Word ou o Bloc de Notas ou TextEdit,

696
00:31:11,620 --> 00:31:14,100
esta é a palabra miña edición
de ficheiros está a ir.

697
00:31:14,100 --> 00:31:16,540
E entón o máis arcano
característica deste medio

698
00:31:16,540 --> 00:31:20,100
que non imos realmente precisa utilizar é
aquí chamado dunha xanela de terminal.

699
00:31:20,100 --> 00:31:23,390
Se xa usou DOS de
pasado, este é o Linux

700
00:31:23,390 --> 00:31:25,450
ou o equivalente Linux do DOS.

701
00:31:25,450 --> 00:31:28,190
É un interface-- baseado en texto
hai click do rato, sen arrastramento.

702
00:31:28,190 --> 00:31:30,770
Todo o que podes facer é escribir
comandos, pero estes comandos

703
00:31:30,770 --> 00:31:34,400
Pode crear arquivos, mover arquivos, aberta
Anuarios, de Anuarios próximos,

704
00:31:34,400 --> 00:31:35,740
facer calquera número de cousas.

705
00:31:35,740 --> 00:31:38,060
Pero, polo de agora, imos só
gastar o noso tempo aquí enriba.

706
00:31:38,060 --> 00:31:39,050
>> E así imos facelo.

707
00:31:39,050 --> 00:31:41,008
Se está nesta
ambiente, o que ten que

708
00:31:41,008 --> 00:31:45,900
se creou un espazo de traballo
xa, vai adiante e só ir cara arriba

709
00:31:45,900 --> 00:31:48,690
en File, New un momento.

710
00:31:48,690 --> 00:31:51,740
E iso lle vai dar un novo
guía aquí no medio.

711
00:31:51,740 --> 00:31:54,250
E eu só-- e imos
dalle facelo.

712
00:31:54,250 --> 00:31:59,910
Imos adiante e agora non File, Save
e dalle chamalo hello.html,

713
00:31:59,910 --> 00:32:02,740
Non debe ser confundido co
HelloWorld.html, que

714
00:32:02,740 --> 00:32:06,910
veu coa súa nova conta gratuíta,
que é só un exemplo de arquivo.

715
00:32:06,910 --> 00:32:11,020
Vai velo aparecer de súpeto,
máis probable no lado da man esquerda,

716
00:32:11,020 --> 00:32:12,810
ea guía aínda será aberto.

717
00:32:12,810 --> 00:32:21,300
E déixeme encouraged-lo a recrear
este ficheiro ou algunhas variantes do mesmo.

718
00:32:21,300 --> 00:32:24,607
E se non pode velo no
pantalla, esta é idéntica aos diapositivas

719
00:32:24,607 --> 00:32:26,190
que probablemente ten noutra pestana.

720
00:32:26,190 --> 00:32:29,296
>> Así, en breve, facer a súa primeira páxina web,
garda-lo e, a continuación, en só un momento,

721
00:32:29,296 --> 00:32:31,170
Eu vou te amosar como
Pode realmente ver iso.

722
00:32:31,170 --> 00:32:32,970
Pero cambiar polo menos unha cousa.

723
00:32:32,970 --> 00:32:35,400
Cambiar helloworld para
algo da súa propia elección,

724
00:32:35,400 --> 00:32:39,821
de xeito que está convencido de que é a súa
arquivo e non o que eu acaba de crear.

725
00:32:39,821 --> 00:32:40,320
Todo ben.

726
00:32:40,320 --> 00:32:43,804
E cando está ready-- non
rush-- cando estea listo,

727
00:32:43,804 --> 00:32:46,220
dalle gardar o ficheiro
unha vez que fixo estas modificacións.

728
00:32:46,220 --> 00:32:49,540
E se fai clic no
botón superior executar superior, este

729
00:32:49,540 --> 00:32:53,610
debe abrir unha nova guía que ha dicir
o que URL que podes visitar o seu arquivo en,

730
00:32:53,610 --> 00:32:56,380
pero pode ter un momento para
entre comiñas "start Apache", que

731
00:32:56,380 --> 00:32:58,820
é o nome do servidor web.

732
00:32:58,820 --> 00:33:02,430
Polo tanto, teña coidado de facer exactamente
o que está no arquivo, en última instancia.

733
00:33:02,430 --> 00:33:04,610
Entón, agora, eu vou aumentar o zoom.

734
00:33:04,610 --> 00:33:07,780
Se eu comezar a escribir
-Colchete Entrada HTML, o aviso previo

735
00:33:07,780 --> 00:33:09,650
iso está me levando para rematar o meu pensamento.

736
00:33:09,650 --> 00:33:13,750
E se eu rematar o meu pensamento,
automaticamente me dá a marca de peche.

737
00:33:13,750 --> 00:33:17,190
Pero a esperanza é entón eu vou bater
Intro, e despois pasar dentro

738
00:33:17,190 --> 00:33:21,180
e non a cabeza dentro e
entón fago corpo dentro.

739
00:33:21,180 --> 00:33:24,430
E é un pouco raro no comezo,
porque está facendo o traballo para ti,

740
00:33:24,430 --> 00:33:27,110
pero entender que, en última instancia
aforrar teclas.

741
00:33:27,110 --> 00:33:30,500
E, de feito, unha característica moi común de
programación ambientes nos días de hoxe

742
00:33:30,500 --> 00:33:33,260
tanto para o desenvolvemento da web como
isto e programación real,

743
00:33:33,260 --> 00:33:36,960
que falaremos mañá,
Son estas características de auto-completar,

744
00:33:36,960 --> 00:33:39,710
cousas que só permiten que un
programador ou un estudio

745
00:33:39,710 --> 00:33:42,010
para escribir menos teclas para
realizar o mesmo.

746
00:33:42,010 --> 00:33:43,176
Ás veces é bo, con todo.

747
00:33:43,176 --> 00:33:44,560
Ás veces é só irritante.

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

749
00:33:49,290 --> 00:33:54,010
E, de novo, xa que transcrito
a corredías ou a súa variante,

750
00:33:54,010 --> 00:33:57,360
pode facer clic no botón Executar enriba.

751
00:33:57,360 --> 00:33:59,910
E, a continuación, na parte inferior
fiestra, será informado

752
00:33:59,910 --> 00:34:04,290
en que URL podes visitar a súa páxina web.

753
00:34:04,290 --> 00:34:08,790
Mine, por exemplo, está
business-daharvard.c9users.io

754
00:34:08,790 --> 00:34:11,480
e así por diante.

755
00:34:11,480 --> 00:34:14,580
Todo ben, entón, deixe-me-- algunha dúbida?

756
00:34:14,580 --> 00:34:19,460
Calquera outras preguntas sobre só comezando
este traballo antes de engadir funcionalidades?

757
00:34:19,460 --> 00:34:21,692
E déixeme propoñer, só
para as persoas comfortable--

758
00:34:21,692 --> 00:34:24,400
porque é unha cousa a só
copy-paste cegamente o que eu fixen.

759
00:34:24,400 --> 00:34:27,177
Pero só para que as persoas loitan
con polo menos un de tarefas,

760
00:34:27,177 --> 00:34:28,510
Vou chamar unha música.

761
00:34:28,510 --> 00:34:32,630
Vou propoñer unha lista de
cousas que podes potencialmente engadir.

762
00:34:32,630 --> 00:34:34,086
E certamente pode usar Google.

763
00:34:34,086 --> 00:34:36,210
E por que non só
propoñer que intenta resolver

764
00:34:36,210 --> 00:34:38,710
polo menos, un problema particular aquí.

765
00:34:38,710 --> 00:34:45,090
Polo tanto, en termos de marcas,
déixeme reutilizar este aquí.

766
00:34:45,090 --> 00:34:48,280
>> De feito, déixeme poñer
Lo nunha forma textual.

767
00:34:48,280 --> 00:35:02,380
Imos dicir que, entre as etiquetas Poderiamos
usar aquí están algunhas etiquetas aquí.

768
00:35:02,380 --> 00:35:06,090
Vimos a marca de parágrafo.

769
00:35:06,090 --> 00:35:07,850
Agora vai auto-completar.

770
00:35:07,850 --> 00:35:12,220
tag de parágrafo, a etiqueta Referencia.

771
00:35:12,220 --> 00:35:15,250
Digamos que quere
facer algo grande,

772
00:35:15,250 --> 00:35:19,480
de modo que pode como--
o tag span pode axudar.

773
00:35:19,480 --> 00:35:23,010
Ben, pode ter de axuda
para que, en só un momento.

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

775
00:35:24,830 --> 00:35:26,170
Verá que hai mesa.

776
00:35:26,170 --> 00:35:27,928
Hai algo chamado 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
Volver a iso nun momento.

780
00:35:34,770 --> 00:35:36,590
O que máis pode ser útil?

781
00:35:36,590 --> 00:35:38,310
Hai forte.

782
00:35:38,310 --> 00:35:43,640
Hai énfase, ou mellor, en.

783
00:35:43,640 --> 00:35:50,110
There's-- o que máis
Pode desexa aquí?

784
00:35:50,110 --> 00:35:51,930
Ben, imos dar un
ollar para iso xuntos.

785
00:35:51,930 --> 00:35:53,230
Solicitude, que xa vimos.

786
00:35:53,230 --> 00:35:54,130
Hai formulario.

787
00:35:54,130 --> 00:35:56,500
Hai entrada e algúns outros.

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

789
00:35:58,924 --> 00:36:00,090
Todo ben, entón imos facelo.

790
00:36:00,090 --> 00:36:02,330
Para responder a unha Victoria
pregunta, deixe-me primeiro

791
00:36:02,330 --> 00:36:05,020
só asegúrese de que todos son
capaces de obter o seu traballo Ola.

792
00:36:05,020 --> 00:36:06,900
Entón deixe-me presentar
un par de outras ideas.

793
00:36:06,900 --> 00:36:09,209
Entón imos deixar pobos resolver
algún problema por conta propia.

794
00:36:09,209 --> 00:36:11,500
Entón imos realmente volver
a esa noción dun formulario,

795
00:36:11,500 --> 00:36:14,950
e nós imos realmente volver a aplicar
xunto a interface de front-end,

796
00:36:14,950 --> 00:36:16,450
por así dicir, para o propio Google.

797
00:36:16,450 --> 00:36:19,700
Imos usar Google como o back-end e deixar
Los facer o traballo duro, a investigación,

798
00:36:19,700 --> 00:36:22,760
pero imos recrear o front-end
Google eo formulario de procura

799
00:36:22,760 --> 00:36:24,520
que teñen sobre a súa propia páxina principal.

800
00:36:24,520 --> 00:36:27,050
E por iso imos volver
estas etiquetas en só un momento.

801
00:36:27,050 --> 00:36:30,270
>> Entón, iso era o que eu
propuxo só un momento atrás.

802
00:36:30,270 --> 00:36:33,940
Podemos engadir a estilización dun
A páxina neste tag estilo,

803
00:36:33,940 --> 00:36:36,950
e podemos estilizar a fondo
cor, o aliñamento do texto,

804
00:36:36,950 --> 00:36:39,000
se é o centro ou á esquerda ou á dereita.

805
00:36:39,000 --> 00:36:41,630
Pero moi rapidamente faría
atopar ou un Deseño Web

806
00:36:41,630 --> 00:36:44,060
pensaría que este
se fai un pouco complicado,

807
00:36:44,060 --> 00:36:48,330
porque está facendo o que é
chama contido mesturando

808
00:36:48,330 --> 00:36:50,120
coa presentación dos mesmos.

809
00:36:50,120 --> 00:36:53,756
Está mesturando os seus datos
ea estética do mesmo.

810
00:36:53,756 --> 00:36:56,380
E, de feito, se considerar
o que vai pasar ao longo do tempo--

811
00:36:56,380 --> 00:36:58,350
este é un moi pequeno
A páxina web, está claro.

812
00:36:58,350 --> 00:37:01,590
Pero se eu engadir contido a esta páxina
e eu engadir estilo desta páxina,

813
00:37:01,590 --> 00:37:04,650
a páxina está moi rapidamente
máis e máis e máis.

814
00:37:04,650 --> 00:37:07,510
E supoña que quero
ter unha segunda páxina web que

815
00:37:07,510 --> 00:37:09,010
comparte algúns deses atributos.

816
00:37:09,010 --> 00:37:12,350
Supoñamos que a miña segunda páxina web para o meu
site-- tamén, quero todo center,

817
00:37:12,350 --> 00:37:14,960
e eu tamén quero todo
con un fondo verde.

818
00:37:14,960 --> 00:37:17,940
Estou case terá que
copiar e pegar algunhas destas liñas

819
00:37:17,940 --> 00:37:20,730
en que o segundo ficheiro, o que se sente ben.

820
00:37:20,730 --> 00:37:22,030
Vai resolver o problema.

821
00:37:22,030 --> 00:37:26,060
>> Pero o que si queres unha terceira páxina
ou nunha páxina 30 ou a páxina 40?

822
00:37:26,060 --> 00:37:28,730
Agora eu vou estar copiando e
pegar unha morea de código duplicado

823
00:37:28,730 --> 00:37:30,430
en varios arquivos.

824
00:37:30,430 --> 00:37:32,600
E así supor que
Eu decido ou eu son dito,

825
00:37:32,600 --> 00:37:34,780
hey, non estamos a usar un
fondo verde máis.

826
00:37:34,780 --> 00:37:36,380
Nós imos comezar a usar laranxa.

827
00:37:36,380 --> 00:37:38,690
O que ten que cambiar?

828
00:37:38,690 --> 00:37:42,900
Ben, ten que cambiar ese estilo
de verde para laranxa en cantos lugares?

829
00:37:42,900 --> 00:37:44,920
Como 30 ou 40 prazas.

830
00:37:44,920 --> 00:37:45,900
É tediosas.

831
00:37:45,900 --> 00:37:47,039
É propenso a erros.

832
00:37:47,039 --> 00:37:49,580
Hai unha serie de razóns
onde non quere inducir

833
00:37:49,580 --> 00:37:51,840
este tipo de dor para si mesmo.

834
00:37:51,840 --> 00:37:54,760
E por iso non sería bo
se puidésemos tomar o que eu só

835
00:37:54,760 --> 00:37:58,240
colocado entre estes dous amarelos
etiquetas, estas marcas de estilo,

836
00:37:58,240 --> 00:38:04,050
inclui-lo para fóra, e poñer toda a miña
estilización nun arquivo central

837
00:38:04,050 --> 00:38:08,470
que todos os 30 ou 40 dos meus outros ficheiros
pedir prestado ou de algunha forma de referencia,

838
00:38:08,470 --> 00:38:11,640
non moi diferente da rede
diagramas que estabamos facendo antes?

839
00:38:11,640 --> 00:38:15,030
>> Entón, se eu entrar aquí, eu son
indo realmente propoñer

840
00:38:15,030 --> 00:38:17,880
que substitúe o
tag de estilo con algo

841
00:38:17,880 --> 00:38:21,620
chamado tag enlace, que
é horrible, terrible nomeado,

842
00:38:21,620 --> 00:38:24,370
porque non usar o
link de etiqueta para crear o que

843
00:38:24,370 --> 00:38:26,380
nós, humanos, coñecido como unha ligazón nunha páxina web.

844
00:38:26,380 --> 00:38:29,750
Para iso, utiliza o que marca?

845
00:38:29,750 --> 00:38:31,464
Como se crea unha ligazón nunha páxina web?

846
00:38:31,464 --> 00:38:32,130
Audiencia: A a.

847
00:38:32,130 --> 00:38:34,870
DAVID J. Malan: A unha, ou referencia
tag, que entrou na Disney antes.

848
00:38:34,870 --> 00:38:39,090
A ligazón tag aquí está dicindo
isto-- ligazón a un ficheiro chamado

849
00:38:39,090 --> 00:38:44,350
styles.css, a respecto dos cales
será que é o meu estilo.

850
00:38:44,350 --> 00:38:48,290
Polo tanto, este é un dos S de en
follas de estilo en cascada CSS--.

851
00:38:48,290 --> 00:38:50,490
Estilo sheet-- dous dos S de en CSS.

852
00:38:50,490 --> 00:38:52,550
Fervenza folla de estilo.

853
00:38:52,550 --> 00:38:58,640
Isto só significa que, hey, navegador, vaia
atopar styles.css no servidor local

854
00:38:58,640 --> 00:39:01,870
e usalo como súa folla de estilo,
o que significa que dentro dese ficheiro

855
00:39:01,870 --> 00:39:05,310
será toda a
estilizações que temos que facer.

856
00:39:05,310 --> 00:39:07,396
E entón o que este ficheiro
pode parecer é este.

857
00:39:07,396 --> 00:39:10,020
E eu vou facer iso é un rápido
exemplo, por que non necesitamos

858
00:39:10,020 --> 00:39:12,000
para moito para as herbas daniñas aquí.

859
00:39:12,000 --> 00:39:17,840
Pero se eu copiar este, o que estou propoñendo
é que un programador crear un novo arquivo,

860
00:39:17,840 --> 00:39:24,450
colar naqueles lines--
whoops-- pegar nestas liñas,

861
00:39:24,450 --> 00:39:32,270
gardalo como styles.css e, a continuación, en
o outro ficheiro, eliminar todo isto

862
00:39:32,270 --> 00:39:35,450
e substitúe-lo en vez
con este enlace tag.

863
00:39:35,450 --> 00:39:43,090
Así que se eu conectar href = "styles.css",
a relación debe ser "estilo"

864
00:39:43,090 --> 00:39:44,170
preto etiqueta.

865
00:39:44,170 --> 00:39:45,250
Gardalo.

866
00:39:45,250 --> 00:39:47,000
Volver ao meu helloworld.

867
00:39:47,000 --> 00:39:48,690
Recargar.

868
00:39:48,690 --> 00:39:51,290
>> Literalmente nada acontecese.

869
00:39:51,290 --> 00:39:54,710
Iso é unha cousa boa, porque
significa que é realmente todo o traballo.

870
00:39:54,710 --> 00:39:58,860
Para probar que logo, supoña que faga unha
erro de dixitación, e eu chamo iso de "Styles.css"

871
00:39:58,860 --> 00:40:03,080
cun capital S, que é
incorrecto, e recarregar.

872
00:40:03,080 --> 00:40:05,470
Agora podes velo simplemente non funciona.

873
00:40:05,470 --> 00:40:06,362
Agora, por que?

874
00:40:06,362 --> 00:40:08,070
Ben, imos usar un
técnica de antes.

875
00:40:08,070 --> 00:40:10,153
Deixe-me ir adiante e, en
meu navegador, en Chrome, eu son

876
00:40:10,153 --> 00:40:12,900
abrirá este especial
separador de rede como antes,

877
00:40:12,900 --> 00:40:15,560
e déixeme volver cargar a páxina.

878
00:40:15,560 --> 00:40:19,341
O que non é vostede sorprendido ao ver agora?

879
00:40:19,341 --> 00:40:20,840
Ou quizais está sorprendido ao velo.

880
00:40:20,840 --> 00:40:23,225
De calquera xeito, o que ve agora?

881
00:40:23,225 --> 00:40:24,100
Audiencia: [inaudível]

882
00:40:24,100 --> 00:40:24,770
DAVID J. Malan: Non se atopou.

883
00:40:24,770 --> 00:40:25,680
Por que non se atopa?

884
00:40:25,680 --> 00:40:28,480
Ben, o capital Styles.css--
O S- non existe.

885
00:40:28,480 --> 00:40:29,230
I misnamed lo.

886
00:40:29,230 --> 00:40:30,430
typo simple.

887
00:40:30,430 --> 00:40:33,816
Pero eu estou quedando comprensible agora un
404, xa que o servidor está dicindo, hey,

888
00:40:33,816 --> 00:40:34,440
non se atopa.

889
00:40:34,440 --> 00:40:36,300
Literalmente, non sei
onde este ficheiro é.

890
00:40:36,300 --> 00:40:38,880
Así como resultado, o navegador
amosa o que pode,

891
00:40:38,880 --> 00:40:42,860
o contido bruto da páxina,
que foi de 200, o código HTML,

892
00:40:42,860 --> 00:40:45,390
pero a estilización non pode
engadirse posteriormente.

893
00:40:45,390 --> 00:40:47,120
E iso é o que se quere dicir con cascada.

894
00:40:47,120 --> 00:40:49,070
Pode tipo de engadir lo
despois, e tipo de

895
00:40:49,070 --> 00:40:50,874
refina a estética da páxina web.

896
00:40:50,874 --> 00:40:53,790
E pode incluso substituír os
estilos con aínda outros ficheiros de estilo

897
00:40:53,790 --> 00:40:54,700
se ti queres.

898
00:40:54,700 --> 00:40:57,780
Non se atopou, aínda que, neste caso,
porque está claro, eu misnamed lo.

899
00:40:57,780 --> 00:41:00,330
Entón eu tería que fixar iso en primeiro lugar.

900
00:41:00,330 --> 00:41:04,667
>> Entón, imos adiante e
propoñer o seguinte.

901
00:41:04,667 --> 00:41:07,410

902
00:41:07,410 --> 00:41:11,140
Imos ir adiante e facelo.

903
00:41:11,140 --> 00:41:14,220
Comezando quizais
seu arquivo helloworld,

904
00:41:14,220 --> 00:41:17,740
déixeme só invitar unha parella
presentan de suxestións.

905
00:41:17,740 --> 00:41:20,400
Entón, Victoria, que quería
facer un texto grande, non?

906
00:41:20,400 --> 00:41:24,555
Todo ben, entón podemos
non facer o texto máis grande.

907
00:41:24,555 --> 00:41:26,860
E nós imos arrincar cada ruta
só un problema para resolver.

908
00:41:26,860 --> 00:41:30,867
Facer o texto máis grande.

909
00:41:30,867 --> 00:41:32,700
Non vou incomodá
escribindo isto cando

910
00:41:32,700 --> 00:41:35,600
teñen tecnoloxía bala ben aquí.

911
00:41:35,600 --> 00:41:39,970
Entón algúns problemas.

912
00:41:39,970 --> 00:41:44,670
Entón, nós estamos indo a tentar
para facer o texto máis grande.

913
00:41:44,670 --> 00:41:45,170
Todo ben.

914
00:41:45,170 --> 00:41:48,360
O que máis alguén propón?

915
00:41:48,360 --> 00:41:50,332
O que máis podería queremos
facendo nunha páxina web?

916
00:41:50,332 --> 00:41:52,040
Imos chegar a un
pequena lista de cousas

917
00:41:52,040 --> 00:41:55,366
e logo, delegar ao
grupo para descubrir iso.

918
00:41:55,366 --> 00:41:56,270
>> Audiencia: [inaudível]

919
00:41:56,270 --> 00:42:02,251
>> DAVID J. Malan: OK, texto da posición
en diferentes partes da páxina?

920
00:42:02,251 --> 00:42:02,750
Todo ben.

921
00:42:02,750 --> 00:42:04,620
Algo máis.

922
00:42:04,620 --> 00:42:05,784
>> Audiencia: [inaudível]

923
00:42:05,784 --> 00:42:06,700
DAVID J. Malan: É.

924
00:42:06,700 --> 00:42:08,720
Así, un gif é só un
formato diferente.

925
00:42:08,720 --> 00:42:12,830
Acabamos utilizado, o que, a
png ou jpg, probablemente?

926
00:42:12,830 --> 00:42:14,480
Foi utilizado un jpg.

927
00:42:14,480 --> 00:42:16,780
Se está curioso, unha excesiva
responder á súa pregunta

928
00:42:16,780 --> 00:42:19,404
é un jpg é xeralmente usado para
fotografías, porque soporta

929
00:42:19,404 --> 00:42:21,500
millóns de cores ou cores de 24 bits.

930
00:42:21,500 --> 00:42:26,930
Un GIF é xeralmente usado para, como,
memes de internet Estas animacións dias--,

931
00:42:26,930 --> 00:42:28,810
como GIFs animados.

932
00:42:28,810 --> 00:42:32,320
Pero iso pasa a usar unha cor máis pequena
paleta, só 256 cores posibles,

933
00:42:32,320 --> 00:42:35,230
pero soporta
transparencia e animación.

934
00:42:35,230 --> 00:42:40,330
E despois hai o png, que soporta
transparencia e máis cores

935
00:42:40,330 --> 00:42:41,300
pero non animación.

936
00:42:41,300 --> 00:42:42,133
Polo tanto, é un trade-off.

937
00:42:42,133 --> 00:42:44,144

938
00:42:44,144 --> 00:42:46,060
Así, a adición dun gif, porén,
sería funcionalmente

939
00:42:46,060 --> 00:42:48,396
equivalente a engadir un png ou jpg.

940
00:42:48,396 --> 00:42:49,110
Si.

941
00:42:49,110 --> 00:42:50,550
Fonte da imaxe é igual.

942
00:42:50,550 --> 00:42:51,590
Entón outra cousa.

943
00:42:51,590 --> 00:42:57,288
Imos chegar a algo que
que enviamos para Victoria facendo aquí.

944
00:42:57,288 --> 00:42:59,209
>> Audiencia: Engadir botóns dun formulario.

945
00:42:59,209 --> 00:43:00,000
DAVID J. Malan: OK.

946
00:43:00,000 --> 00:43:02,179
Entón engadir botóns de un formulario.

947
00:43:02,179 --> 00:43:03,470
E nós imos facelo xunto.

948
00:43:03,470 --> 00:43:07,220
Así que vai ser un xeito perfecto
logo este desafío.

949
00:43:07,220 --> 00:43:10,357
Algo máis?

950
00:43:10,357 --> 00:43:11,440
Que desexa facer?

951
00:43:11,440 --> 00:43:14,040

952
00:43:14,040 --> 00:43:16,516
A web se sente moi por baixo do esperado
se iso é todo o que podemos facer.

953
00:43:16,516 --> 00:43:18,140
Audiencia: Cambia a cor do texto.

954
00:43:18,140 --> 00:43:19,500
DAVID J. Malan: Cambiar o que?

955
00:43:19,500 --> 00:43:20,666
Audiencia: Cor do texto.

956
00:43:20,666 --> 00:43:22,311
DAVID J. Malan: Cambiar a cor do texto.

957
00:43:22,311 --> 00:43:22,810
Todo ben.

958
00:43:22,810 --> 00:43:23,790
Entón, imos facelo.

959
00:43:23,790 --> 00:43:27,209
Só de novo non que é, só
de forma mecánica, facendo o que estou facendo,

960
00:43:27,209 --> 00:43:29,500
Eu estou indo a chamar a música
para quizais cinco minutos aquí.

961
00:43:29,500 --> 00:43:30,450
Estás convidado a usar Google.

962
00:43:30,450 --> 00:43:33,130
Estás convidado a preguntarme, e
Vou murmurio unha información no seu oído.

963
00:43:33,130 --> 00:43:35,171
Vostede é benvido para ollar
sobre os ombreiros de outros.

964
00:43:35,171 --> 00:43:37,340
Pero resolver só un destes problemas.

965
00:43:37,340 --> 00:43:40,190
Pero imos facer o último, o
constitúe un, se puidésemos, xuntos.

966
00:43:40,190 --> 00:43:42,790
Así, cinco minutos para resolver
calquera destes problemas

967
00:43:42,790 --> 00:43:46,780
empregando Google, a intuición, ou calquera
outros medios dispoñibles para ti.

968
00:43:46,780 --> 00:43:48,630
>> [Reprodución de música]

969
00:43:48,630 --> 00:43:49,130
Todo ben.

970
00:43:49,130 --> 00:43:50,838
Non te preocupes se quere
para manter mexer,

971
00:43:50,838 --> 00:43:53,880
pero eu vou romper un par
destas respostas.

972
00:43:53,880 --> 00:43:57,986
Así, a primeira suxestión
Victoria foi para facer o texto máis grande.

973
00:43:57,986 --> 00:43:59,360
Polo tanto, hai algunhas formas de facelo.

974
00:43:59,360 --> 00:44:01,530
Eu actualmente restaurada
miña pantalla para ese tamaño,

975
00:44:01,530 --> 00:44:04,310
aínda que eu teña ampliado
artificialmente só para ver as cousas.

976
00:44:04,310 --> 00:44:07,470
E imos facelo.

977
00:44:07,470 --> 00:44:11,380
Deixe-me ir adiante e coller
texto xenérico Latina

978
00:44:11,380 --> 00:44:19,540
só así temos algo para traballar.

979
00:44:19,540 --> 00:44:20,715
Entón me dea só un momento.

980
00:44:20,715 --> 00:44:21,840
Vou facer tres parágrafos.

981
00:44:21,840 --> 00:44:53,430

982
00:44:53,430 --> 00:44:53,930
OK.

983
00:44:53,930 --> 00:44:55,560
Este será un exemplo mellor.

984
00:44:55,560 --> 00:44:57,840
Así, para os curiosos, en
meu hello.html, só

985
00:44:57,840 --> 00:45:01,645
pegado tres absurda
parágrafos Latina

986
00:45:01,645 --> 00:45:03,270
só así temos algún texto para traballar.

987
00:45:03,270 --> 00:45:06,720
E o obxectivo da Victoria era
forman parte do texto máis grande.

988
00:45:06,720 --> 00:45:09,879
Entón eu podería, como antes, entrar aquí.

989
00:45:09,879 --> 00:45:11,170
E deixe-me facelo de maneira correcta.

990
00:45:11,170 --> 00:45:13,253
Vou ter unha ligazón
tag que apunta a un ficheiro

991
00:45:13,253 --> 00:45:20,560
chamado "styles.css," a relación
dos cales é novo "estilo".

992
00:45:20,560 --> 00:45:25,221
E entón eu vou gardar ese
e abrir este "styles.css."

993
00:45:25,221 --> 00:45:28,940
>> Entón, como antes, teño a
capacidade neste arquivo CSS

994
00:45:28,940 --> 00:45:31,569
para realmente substituír o patrón
estética dunha páxina web,

995
00:45:31,569 --> 00:45:33,860
ea estética estándar,
por suposto, son moi aburrido.

996
00:45:33,860 --> 00:45:36,943
É unha especie de tamaño de fonte normal, branco
texto, fondo negro, e así por diante.

997
00:45:36,943 --> 00:45:39,440
Entón, supoñamos que quero facer
todo isto de texto máis grande.

998
00:45:39,440 --> 00:45:40,460
Podería facer algunhas cousas.

999
00:45:40,460 --> 00:45:43,750
No meu arquivo styles.css, I
podería dicir, vostede sabe o que,

1000
00:45:43,750 --> 00:45:46,950
aplicarán o seguinte a
o corpo da miña páxina.

1001
00:45:46,950 --> 00:45:51,390
Dalle facer a
tamaño de fonte 24 puntos,

1002
00:45:51,390 --> 00:45:54,130
que é un número que podería
usar o Microsoft Word.

1003
00:45:54,130 --> 00:45:57,620
Déixeme volver para o meu web
páxina aquí e actualizar,

1004
00:45:57,620 --> 00:45:59,640
e podes ver que
xa é moito maior.

1005
00:45:59,640 --> 00:46:02,223
E podemos estar un pouco tolo,
así como nós pode nun desktop--

1006
00:46:02,223 --> 00:46:03,670
facelo 96 puntos.

1007
00:46:03,670 --> 00:46:04,950
Recargar.

1008
00:46:04,950 --> 00:46:07,610
E está quedando un pouco
complicado neste momento.

1009
00:46:07,610 --> 00:46:09,500
>> Pero eu podería ser un pouco máis preciso.

1010
00:46:09,500 --> 00:46:14,530
No canto de aplicar este
folla de estilo para o corpo da miña páxina,

1011
00:46:14,530 --> 00:46:21,740
o que máis podería aplicala lo ao contrario,
o que outra etiqueta que poden aínda

1012
00:46:21,740 --> 00:46:25,445
funcionan do mesmo xeito?

1013
00:46:25,445 --> 00:46:26,444
>> Audiencia: A 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
Entón, a cabeza non sería
correcto, porque a cabeza,

1016
00:46:29,350 --> 00:46:31,300
non pode realmente
controlar a estética.

1017
00:46:31,300 --> 00:46:32,700
Non hai ningunha texto alí ou non.

1018
00:46:32,700 --> 00:46:36,760
Pero o p tag-- I pode mergullar un pouco
máis profundo, por así dicir, para o parágrafo

1019
00:46:36,760 --> 00:46:37,350
etiquetas.

1020
00:46:37,350 --> 00:46:41,600
E aínda que hai tres,
iso é perfectamente ben, porque en CSS,

1021
00:46:41,600 --> 00:46:44,900
cando só dicir "p", este
significa aplicar o seguinte

1022
00:46:44,900 --> 00:46:48,300
a calquera etiqueta que corresponde a esta
selector, o selector de só

1023
00:46:48,300 --> 00:46:49,430
sendo o nome da marca.

1024
00:46:49,430 --> 00:46:52,350
Así, sempre que ver un
"P", aplicar o tamaño da fonte,

1025
00:46:52,350 --> 00:46:55,222
e imos facelo máis
razoable novamente-- 24 puntos.

1026
00:46:55,222 --> 00:46:56,930
E vostede sabe o que,
só para unha boa medida,

1027
00:46:56,930 --> 00:46:59,810
imos facer a memoria
só vermello para o momento.

1028
00:46:59,810 --> 00:47:03,740
E agora, se eu actualizar, agora
vexa tres parágrafos feas.

1029
00:47:03,740 --> 00:47:07,180
>> Pero agora supoña que eu son unha especie
de-- quero o primeiro parágrafo

1030
00:47:07,180 --> 00:47:08,210
para ir para o usuario.

1031
00:47:08,210 --> 00:47:11,150
Non quero só aumentar
o tamaño da fonte de todo.

1032
00:47:11,150 --> 00:47:16,105
E así eu realmente quero para identificar ou
distinguir entre estes parágrafos.

1033
00:47:16,105 --> 00:47:18,730
Entón, imos librar do vermello,
porque iso é só un tipo de brega,

1034
00:47:18,730 --> 00:47:23,885
e imos adiante e facer o
tamaño de fonte de 12 puntos por defecto,

1035
00:47:23,885 --> 00:47:26,260
de xeito que estamos de volta a algo
algo máis razoable.

1036
00:47:26,260 --> 00:47:29,190
E agora eu só quero aumentar o
tamaño da fonte do parágrafo primeiro.

1037
00:47:29,190 --> 00:47:31,440
Podo facelo en poucos
formas, pero dunha forma que é

1038
00:47:31,440 --> 00:47:37,180
quizais máis de instrución no
momento é facer o seguinte.

1039
00:47:37,180 --> 00:47:43,280
Deixe-me ir adiante e dicir, este
parágrafo ten unha identificación única de "primeira".

1040
00:47:43,280 --> 00:47:45,000
Podería chamar iso de calquera cousa que eu queira.

1041
00:47:45,000 --> 00:47:46,874
Podería chamar iso de "foo"
ou calquera outra palabra,

1042
00:47:46,874 --> 00:47:49,290
pero eu vou darlle algún
nome semanticamente significativa

1043
00:47:49,290 --> 00:47:50,320
como "primeiro".

1044
00:47:50,320 --> 00:47:54,790
Este é o identificador único,
a identificación, ao meu primeiro parágrafo.

1045
00:47:54,790 --> 00:47:59,360
>> ¿Que podo facer agora na miña folla de estilo
é ser un pouco máis precisa.

1046
00:47:59,360 --> 00:48:02,330
No canto de dicir, aplicar
o seguinte para a etiqueta p,

1047
00:48:02,330 --> 00:48:04,890
Podo dicir que o following--
aplicar o seguinte,

1048
00:48:04,890 --> 00:48:11,000
ou seleccione o elemento HTML
que ten unha identificación única de "primeira".

1049
00:48:11,000 --> 00:48:12,350
O que quero aplicar a el?

1050
00:48:12,350 --> 00:48:15,250
Un tamaño de fonte de 24 puntos.

1051
00:48:15,250 --> 00:48:16,640
Entón, eu teño dous selectores agora.

1052
00:48:16,640 --> 00:48:19,690
Un fai toda a
apartados 12 puntos.

1053
00:48:19,690 --> 00:48:24,960
Pero este, sobre todo porque se trata
second-- se trata último na file--

1054
00:48:24,960 --> 00:48:27,090
Isto ten un efecto en fervenza.

1055
00:48:27,090 --> 00:48:30,200
Acaba de facer todo o meu
parágrafo marcas de 12 puntos,

1056
00:48:30,200 --> 00:48:34,350
pero iso agora fervenzas e
substitúe iso por calquera elementos

1057
00:48:34,350 --> 00:48:38,800
na páxina, calquera etiqueta de páxina cuxo
ID único é entre comiñas "en primeiro lugar."

1058
00:48:38,800 --> 00:48:41,720
E a hashtag neste contexto
só significa "identificador único".

1059
00:48:41,720 --> 00:48:43,750
Non colocar-lo no ficheiro HTML.

1060
00:48:43,750 --> 00:48:46,880
Eu, aquí, só dicir
entre comiñas "en primeiro lugar."

1061
00:48:46,880 --> 00:48:48,470
>> Entón deixe-me volver cargar.

1062
00:48:48,470 --> 00:48:49,919
E agora eu vexo, ah, OK.

1063
00:48:49,919 --> 00:48:51,710
É dicir, non é que
fermosa, pero é o tipo

1064
00:48:51,710 --> 00:48:53,600
de como o prólogo dunha
libro ou algo así,

1065
00:48:53,600 --> 00:48:55,100
onde o primeiro parágrafo é maior.

1066
00:48:55,100 --> 00:48:57,933
Podería ser aínda máis preciso con
só as primeiras letras, pero polo menos

1067
00:48:57,933 --> 00:48:59,110
Teño exercido máis control.

1068
00:48:59,110 --> 00:49:04,760
Agora maybe-- quizais quero facelo
en ocasións, por calquera motivo,

1069
00:49:04,760 --> 00:49:09,010
e por iso eu non quero que iso
aplica-se a só unha etiqueta HTML.

1070
00:49:09,010 --> 00:49:15,110
Pola contra, imos dizer-- imos
tamén facer o seguinte.

1071
00:49:15,110 --> 00:49:18,810
Class = "importación".

1072
00:49:18,810 --> 00:49:23,970
Tendo en conta que o ID é usado para unicamente
identificar unha cousa, unha etiqueta,

1073
00:49:23,970 --> 00:49:30,190
na súa páxina web, unha clase é para ser
usado en calquera número de elementos ou etiquetas

1074
00:49:30,190 --> 00:49:30,950
na súa páxina web.

1075
00:49:30,950 --> 00:49:31,710
Polo tanto, é reutilizable.

1076
00:49:31,710 --> 00:49:33,090
Un ID non é reutilizable.

1077
00:49:33,090 --> 00:49:34,450
Unha clase é reutilizable.

1078
00:49:34,450 --> 00:49:37,830
>> E vostede sabe o que, por calquera
reasons-- filosófica

1079
00:49:37,830 --> 00:49:40,180
Non rematar a miña
thought-- eu vou dicir

1080
00:49:40,180 --> 00:49:44,300
que o primeiro párrafo eo
parágrafo segundo, son importantes.

1081
00:49:44,300 --> 00:49:48,600
Entón eu vou para aplicar a clase chamada
"Importante", que, se eu gardar o meu arquivo

1082
00:49:48,600 --> 00:49:51,510
e actualizar, non ten
impacto funcional aínda.

1083
00:49:51,510 --> 00:49:53,780
Pero eu engade algúns
metadatos para o arquivo,

1084
00:49:53,780 --> 00:49:56,610
tipo de algo separado
a partir dos datos do núcleo do ficheiro,

1085
00:49:56,610 --> 00:50:02,300
de xeito que agora na miña folla de estilo, si
no canto dicir ".Importante" - vostede sabe,

1086
00:50:02,300 --> 00:50:07,110
todo o que é importante, eu son
fará font-color, red--

1087
00:50:07,110 --> 00:50:09,930
ou mellor, non font-color, só a cor.

1088
00:50:09,930 --> 00:50:12,930
hai inconsistencias
en CSS desgraza.

1089
00:50:12,930 --> 00:50:14,120
E recargar.

1090
00:50:14,120 --> 00:50:17,640
Agora observe o primeiro
dous parágrafos son vermellos

1091
00:50:17,640 --> 00:50:20,880
pero non o terceiro, porque eu só
aplicou a clase de "importante"

1092
00:50:20,880 --> 00:50:25,020
para as dúas primeiras destas cousas.

1093
00:50:25,020 --> 00:50:28,030
>> Así, en IDs, ten a capacidade
para especificar de forma moi precisa.

1094
00:50:28,030 --> 00:50:30,110
Con clases, ten a capacidade de reutilización.

1095
00:50:30,110 --> 00:50:33,800
Pero en ambos os casos, teña en conta a
tipo de principio de boa deseño

1096
00:50:33,800 --> 00:50:39,072
onde consignado fóra todo o
estética no meu arquivo styles.css.

1097
00:50:39,072 --> 00:50:40,280
Polo tanto, non hai confusión aquí.

1098
00:50:40,280 --> 00:50:44,490
Non hai ningunha mención de vermello ou
bold-Facing ou tamaño da fonte neste arquivo.

1099
00:50:44,490 --> 00:50:49,430
Pola contra eu teño semanticamente,
significativamente caracterizado meus datos como,

1100
00:50:49,430 --> 00:50:51,240
aquí é algúns datos importantes.

1101
00:50:51,240 --> 00:50:52,800
Velaquí algúns datos máis importantes.

1102
00:50:52,800 --> 00:50:56,500
Ademais, aquí é o
"Primeiro" dos meus datos importantes.

1103
00:50:56,500 --> 00:51:01,050
Entón HTML é todo sobre a especie
de reserva, literalmente, palabras

1104
00:51:01,050 --> 00:51:05,270
e parágrafos e construcións na súa
páxina con esas pequenas suxestións, se

1105
00:51:05,270 --> 00:51:07,640
Vai, que pode
dalgún xeito, aproveitar a usar

1106
00:51:07,640 --> 00:51:10,880
outras técnicas como CSS deste xeito.

1107
00:51:10,880 --> 00:51:14,760
>> Así, en resposta á pregunta de Victoria,
podemos facer un texto máis nese sentido.

1108
00:51:14,760 --> 00:51:18,380
Hai tantas outras formas, pero
a fonte tag-- paréntese de apertura "font" -

1109
00:51:18,380 --> 00:51:19,770
é, en realidade varios anos de idade.

1110
00:51:19,770 --> 00:51:21,410
E este é o problema,
Tamén, con base só

1111
00:51:21,410 --> 00:51:23,485
en resources-- en liña
eles tenden a ser superada.

1112
00:51:23,485 --> 00:51:26,110
E, de feito, que foi suspendido,
porque o mundo realizado,

1113
00:51:26,110 --> 00:51:28,970
o que significa "font-size = 7" significa?

1114
00:51:28,970 --> 00:51:29,670
Isto non acontece.

1115
00:51:29,670 --> 00:51:32,770
E así por moitos anos e
este dia-- un do lado

1116
00:51:32,770 --> 00:51:36,060
obsérvase aquí é que é realmente
incrible Dolores ás veces aínda

1117
00:51:36,060 --> 00:51:38,900
para desenvolver sitios ao
web, porque a Microsoft

1118
00:51:38,900 --> 00:51:44,220
e Google e Mozilla e
os outros miúdo discordan sobre o xeito no que

1119
00:51:44,220 --> 00:51:47,480
para interpretar unha especificación como HTML.

1120
00:51:47,480 --> 00:51:52,490
>> Hai un libro de regras para HTML que
xeralmente di o que quere dicir que cada etiqueta.

1121
00:51:52,490 --> 00:51:55,690
Pero ás veces é deixar á
criterio da aplicación,

1122
00:51:55,690 --> 00:51:57,290
discreción e Google, Microsoft.

1123
00:51:57,290 --> 00:52:00,000
E así vai a miúdo
ver nunha web algo

1124
00:52:00,000 --> 00:52:04,954
parece diferente nun PC
do que fai nun Mac,

1125
00:52:04,954 --> 00:52:06,995
e iso é realmente porque,
ao final do día,

1126
00:52:06,995 --> 00:52:08,891
non probalo
ben en ambas plataformas.

1127
00:52:08,891 --> 00:52:11,390
Pero é tamén a causa razoable,
persoas intelixentes han desacordo

1128
00:52:11,390 --> 00:52:14,970
e as empresas van desacordo, e así
un dos retos da programación

1129
00:52:14,970 --> 00:52:16,980
á web ou deseño
cousas para a web

1130
00:52:16,980 --> 00:52:21,700
Está escribindo o seu sitio web de forma
que funciona en todos os navegadores web.

1131
00:52:21,700 --> 00:52:23,410
Pero aínda que é razoable, non?

1132
00:52:23,410 --> 00:52:27,807
Hai tantas versións de tantos
navegadores aí que, nalgún momento,

1133
00:52:27,807 --> 00:52:30,890
tamén ten que facer un xuízo
e ten que decidir como unha empresa,

1134
00:52:30,890 --> 00:52:33,082
todo para e-commerce de estilo
lugares onde está

1135
00:52:33,082 --> 00:52:36,290
intentando usar o máis recente e máis grande
tecnoloxías para dar realmente un bo usuario

1136
00:52:36,290 --> 00:52:37,110
experiencia.

1137
00:52:37,110 --> 00:52:41,019
Pero algunha porcentaxe dos seus usuarios poden
aínda estar usando Internet Explorer 6 ou 7

1138
00:52:41,019 --> 00:52:43,810
ou 8, en especial, en función do
país que están vindo.

1139
00:52:43,810 --> 00:52:46,760
>> E así por moito comunmente
consultada é algo

1140
00:52:46,760 --> 00:52:50,920
como "estatísticas do navegador web."

1141
00:52:50,920 --> 00:52:56,560
E se somos a-- vexamos Wikipedia
para ver como up-to-date este gráfico é

1142
00:52:56,560 --> 00:52:59,320
Se hai un.

1143
00:52:59,320 --> 00:53:02,420
Entón, aquí podes ver
onde os navegadores en realidade

1144
00:53:02,420 --> 00:53:06,160
son, segundo decembro de 2015,
segundo o Goberno dos Estados Unidos.

1145
00:53:06,160 --> 00:53:11,170
Chrome é a cota de mercado do 42%, seguido
polo IE, en gran parte en ambientes corporativos

1146
00:53:11,170 --> 00:53:14,490
ou a configuración do ordenador, por suposto,
seguido polo Firefox,

1147
00:53:14,490 --> 00:53:17,440
logo Safari, entón Opera non o fixo
facer o mapa aquí por algunha razón,

1148
00:53:17,440 --> 00:53:18,210
e que outros.

1149
00:53:18,210 --> 00:53:19,500
Quizais sexa baixo outros.

1150
00:53:19,500 --> 00:53:27,700
Pero máis problemático que é--
imos ver se Wikipedia tamén

1151
00:53:27,700 --> 00:53:35,194
versións de navegadores version--

1152
00:53:35,194 --> 00:53:36,160

1153
00:53:36,160 --> 00:53:39,190
>> Imos para as estatísticas do seu navegador.

1154
00:53:39,190 --> 00:53:40,680
IE.

1155
00:53:40,680 --> 00:53:42,030
Mesmo iso non é suficiente.

1156
00:53:42,030 --> 00:53:44,854
estatísticas do navegador.

1157
00:53:44,854 --> 00:53:45,353
Miña versión.

1158
00:53:45,353 --> 00:53:48,980

1159
00:53:48,980 --> 00:53:50,540
Isto non vai ser certo.

1160
00:53:50,540 --> 00:53:53,414
Veremos versións.

1161
00:53:53,414 --> 00:53:54,830
navegador cota de mercado.

1162
00:53:54,830 --> 00:53:57,110
Imos ver se isto vén á tona.

1163
00:53:57,110 --> 00:53:57,610
OK.

1164
00:53:57,610 --> 00:54:00,010
Agora iso está quedando
algo máis útil.

1165
00:54:00,010 --> 00:54:04,870
Entón, aquí, entender que todos temos
diferentes versións de navegadores.

1166
00:54:04,870 --> 00:54:09,887
E, meu Deus, se look-- Chrome
48, Chrome 47, Chrome 31, Chrome 45.

1167
00:54:09,887 --> 00:54:12,970
É dicir, os navegadores cada vez máis actualizado,
e, por veces, algunhas destas mudanzas

1168
00:54:12,970 --> 00:54:16,430
son significativos en
termos de funcionalidade.

1169
00:54:16,430 --> 00:54:20,630
E así, nalgún momento, o
xerentes de produto ou os enxeñeiros

1170
00:54:20,630 --> 00:54:23,620
cómpre facer unha decision-- vostede
sabe o que, só o 1% da poboación mundial

1171
00:54:23,620 --> 00:54:24,740
aínda está a usar o IE 7.

1172
00:54:24,740 --> 00:54:25,490
Ao inferno con eles.

1173
00:54:25,490 --> 00:54:27,470
Nós só non vai
apoiar este navegador.

1174
00:54:27,470 --> 00:54:28,740
E o que significa non apoiar?

1175
00:54:28,740 --> 00:54:31,170
Isto pode significar que os botóns
non funcionan na súa páxina web,

1176
00:54:31,170 --> 00:54:33,050
ou pode significar a
formato está completamente apagado.

1177
00:54:33,050 --> 00:54:35,091
Ou pode ter que facer
ese mesmo xuízo

1178
00:54:35,091 --> 00:54:39,089
en mobles nos días de hoxe, onde estamos
non vai apoiar iOS 5 máis.

1179
00:54:39,089 --> 00:54:40,380
Entón, a xente só ten que actualizar.

1180
00:54:40,380 --> 00:54:45,850
Ou non imos apoiar Cupcake
no sistema operativo Android para dispositivos Android,

1181
00:54:45,850 --> 00:54:48,629
porque, como o mundo-- como o
mundo da tecnoloxía quere avanzar,

1182
00:54:48,629 --> 00:54:51,170
que tipo de quere arrastrar o
mundo con el para que non

1183
00:54:51,170 --> 00:54:53,295
Ten que seguir sendo
compatibles con versións anteriores para que

1184
00:54:53,295 --> 00:54:54,920
pode ofrecer novas e boas características.

1185
00:54:54,920 --> 00:54:57,878
Esta é certamente unha das razóns
por que tantas empresas están lanzando

1186
00:54:57,878 --> 00:55:01,440
actualizacións automáticas e tipo de forzando
as últimas versións de software de nós.

1187
00:55:01,440 --> 00:55:04,010
E incluso empresas
como Apple pode clasificar de

1188
00:55:04,010 --> 00:55:07,280
forzalo case ou obrigar
vostede en termos de forzas de mercado

1189
00:55:07,280 --> 00:55:11,164
para mercar un novo teléfono, porque simplemente
non actualizará máis o seu teléfono antigo.

1190
00:55:11,164 --> 00:55:13,330
Entón perda a
máis recentes e mellores recursos,

1191
00:55:13,330 --> 00:55:17,520
porque é dispendiosa a eles como un
empresa para manter máis vello, sen dúbida

1192
00:55:17,520 --> 00:55:19,330
versións inferiores de software.

1193
00:55:19,330 --> 00:55:23,660
Pero o efecto neto é que
Tamén sofren iso tamén.

1194
00:55:23,660 --> 00:55:26,550
>> Entón, imos dar un ollo a só
un par de cousas finais aquí.

1195
00:55:26,550 --> 00:55:29,740
Imos derrubar rápido real algunhas das
esas outras balas, se curioso.

1196
00:55:29,740 --> 00:55:33,440
Entón, se estaba tentando,
por exemplo, a posición

1197
00:55:33,440 --> 00:55:36,420
O texto en lados diferentes do
páxina, eu vou facer unha forma rápida,

1198
00:55:36,420 --> 00:55:38,360
pero non é diferente
formas de facelo.

1199
00:55:38,360 --> 00:55:42,610
Deixe-me ir adiante e eliminate--
simplificar este como segue.

1200
00:55:42,610 --> 00:55:45,330
Déixeme só volver ao meu
, Parágrafos simple simple.

1201
00:55:45,330 --> 00:55:47,760
Déixeme volver para o meu styles.css.

1202
00:55:47,760 --> 00:55:51,040
E eu só vou usar o simple--
que pode ter visto en Google

1203
00:55:51,040 --> 00:55:54,430
ou recollida de earlier--
text-align dereita.

1204
00:55:54,430 --> 00:55:56,220
E recargue esta páxina.

1205
00:55:56,220 --> 00:55:58,470
Agora todo parece
para ser aliñado á dereita,

1206
00:55:58,470 --> 00:56:00,770
como se pode ver na sobrecarga aquí.

1207
00:56:00,770 --> 00:56:04,470
>> Podemos facelo parecer un pouco máis
reservar-like, e podemos dicir "justify"

1208
00:56:04,470 --> 00:56:05,640
e recargar.

1209
00:56:05,640 --> 00:56:09,870
Agora é bo e cadrado en ambos
lados, o que é moi ben.

1210
00:56:09,870 --> 00:56:12,220
Outra meta que tivemos aquí
era a cor do cambio do texto.

1211
00:56:12,220 --> 00:56:13,650
Entón vimos que co meu texto en vermello.

1212
00:56:13,650 --> 00:56:15,630
E agora engadir botóns de un formulario.

1213
00:56:15,630 --> 00:56:19,390
Entón, por que non tentar facer exactamente isto?

1214
00:56:19,390 --> 00:56:23,656
Pero, primeiro, deixe-me ir a un sitio web que
a maioría de nós usar cada dia-- Google.

1215
00:56:23,656 --> 00:56:25,780
E imos dar un ollo
como Google realmente funciona.

1216
00:56:25,780 --> 00:56:26,821
Pero eu vou facer iso.

1217
00:56:26,821 --> 00:56:31,930
Primeiro déixeme facelo em-- si,
deixe-me ir a Google en primeiro lugar.

1218
00:56:31,930 --> 00:56:34,530
Vou ter que ir
Configuración de Google,

1219
00:56:34,530 --> 00:56:40,660
porque quero desactivar
algo chamado resultados inmediatos.

1220
00:56:40,660 --> 00:56:43,580
>> Entón ten que notar na
Google estes dias-- déixeme volver

1221
00:56:43,580 --> 00:56:44,850
e activar isto.

1222
00:56:44,850 --> 00:56:47,900
Entón, se eu comezar a buscar
para "gatos" como este,

1223
00:56:47,900 --> 00:56:50,120
ter en conta que non só
Recibe auto-completar-se

1224
00:56:50,120 --> 00:56:54,520
superior, de súpeto, a propia páxina
parece cambiar moi rapidamente, así como,

1225
00:56:54,520 --> 00:56:58,750
e iso é o Google usando unha linguaxe
chamada JavaScript tentando ser útil.

1226
00:56:58,750 --> 00:57:01,540
Pero, desgraciadamente, tipo
da mexe-se a nosa discusión

1227
00:57:01,540 --> 00:57:04,010
do que está realmente a suceder
por baixo do capuz aquí.

1228
00:57:04,010 --> 00:57:09,070
Entón, eu son só unha especie de rápido
Apague resultados inmediatos.

1229
00:57:09,070 --> 00:57:11,510
E eu vou prema Gardar.

1230
00:57:11,510 --> 00:57:13,930
E agora eu vou abrir
esta barra de ferramentas de diagnóstico que

1231
00:57:13,930 --> 00:57:16,150
manter apertura baixo a guía Rede.

1232
00:57:16,150 --> 00:57:17,720
Entón, imos facelo.

1233
00:57:17,720 --> 00:57:21,960
Agarde me-- whoops--
rolar esta un pouco para abaixo.

1234
00:57:21,960 --> 00:57:24,410
E déixeme buscar "gatos".

1235
00:57:24,410 --> 00:57:26,790
>> E agora notice-- en realidade,
esta é unha boa oportunidade

1236
00:57:26,790 --> 00:57:28,840
para discutir por un momento.

1237
00:57:28,840 --> 00:57:32,460
Teña en conta o momento en que eu type-- paralo.

1238
00:57:32,460 --> 00:57:35,250
Pare con iso.

1239
00:57:35,250 --> 00:57:35,790
OK.

1240
00:57:35,790 --> 00:57:40,870
Teña en conta o momento en que eu escriba a letra
C, ver a parte inferior da pantalla.

1241
00:57:40,870 --> 00:57:48,600
A- T- S. O que fai o fondo
desta pantalla, meu guía Rede,

1242
00:57:48,600 --> 00:57:53,320
suxiren está pasando cada
xa que eu escriba unha carta?

1243
00:57:53,320 --> 00:57:57,700
Desafortunadamente, o sapo é moi
perturbador hoxe ou o trevo

1244
00:57:57,700 --> 00:58:00,339
ou o que é.

1245
00:58:00,339 --> 00:58:01,880
O que estaba a suceder cada vez que eu escriba?

1246
00:58:01,880 --> 00:58:04,230
E déixeme borrar o
tapón e escriba-lo de novo.

1247
00:58:04,230 --> 00:58:06,580
whoops assim--.

1248
00:58:06,580 --> 00:58:13,280
Cada vez que eu escribir unha letra, C- A- T--
así unha nova liña, obviamente, segue aparecendo.

1249
00:58:13,280 --> 00:58:16,530
Que cada unha destas liñas representan,
con base no que vimos e discutido

1250
00:58:16,530 --> 00:58:17,339
ata agora?

1251
00:58:17,339 --> 00:58:18,130
Audiencia: Unha busca?

1252
00:58:18,130 --> 00:58:21,770
DAVID J. Malan: Unha investigación ou
máis xenericamente, unha solicitude HTTP

1253
00:58:21,770 --> 00:58:23,125
do meu navegador para o servidor.

1254
00:58:23,125 --> 00:58:29,090
Ben, porque é o meu navegador facendo un HTTP
solicitar cada vez que eu escriba unha carta?

1255
00:58:29,090 --> 00:58:30,502
>> Audiencia: [inaudível]

1256
00:58:30,502 --> 00:58:33,210
DAVID J. Malan: Si, está dando
me este de auto-completar.

1257
00:58:33,210 --> 00:58:35,190
Como, ¿Onde é que estes
resultados da busca veñen?

1258
00:58:35,190 --> 00:58:38,120
Así, cada vez que eu escriba un
carta, Google envía máis

1259
00:58:38,120 --> 00:58:40,460
e máis e máis de
a palabra que eu estou escribindo.

1260
00:58:40,460 --> 00:58:41,040
Por que?

1261
00:58:41,040 --> 00:58:44,540
Porque queren me dar unha
mellor e mellor, mellor suxestión,

1262
00:58:44,540 --> 00:58:48,880
unha lista de suxestións, para que a palabra
Estou intentando realmente completa.

1263
00:58:48,880 --> 00:58:53,030
Entón, iso quere dicir literalmente cada
carácter que escribir en Google

1264
00:58:53,030 --> 00:58:56,900
está sendo enviado, en definitiva,
granel, pero tamén, por veces, un

1265
00:58:56,900 --> 00:59:00,620
á vez, a fin de aplicar
estes recursos de enchido automático Cando

1266
00:59:00,620 --> 00:59:03,000
os datos e, por suposto, na web.

1267
00:59:03,000 --> 00:59:08,780
>> Agora, imos dar un ollo ao que realmente
acontece cando premo Google Search.

1268
00:59:08,780 --> 00:59:10,420
E entón nós imos aproveitar iso nós mesmos.

1269
00:59:10,420 --> 00:59:15,320
Entón, se eu rolar para abaixo agora á propia
primeiro pedido que acaba de pasar.

1270
00:59:15,320 --> 00:59:17,130
Teña en conta o seguinte.

1271
00:59:17,130 --> 00:59:25,550
Foi enviado a un longo URL--
https://www.google.com/search?

1272
00:59:25,550 --> 00:59:27,100
e despois unha morea de cousas.

1273
00:59:27,100 --> 00:59:29,620
Veremos que en realidade agora
no separador do navegador en si.

1274
00:59:29,620 --> 00:59:31,310
Imos librar da barra de ferramentas aquí.

1275
00:59:31,310 --> 00:59:33,140
Aquí está a páxina de resultados de busca.

1276
00:59:33,140 --> 00:59:34,790
E noten aquí o URL.

1277
00:59:34,790 --> 00:59:37,430
Agora, probablemente pode adiviñar
o que está pasando aquí, en parte.

1278
00:59:37,430 --> 00:59:39,090
Entón, en primeiro lugar, unha definición.

1279
00:59:39,090 --> 00:59:42,570
Isto parece é o destino
onde o formulario é enviado.

1280
00:59:42,570 --> 00:59:44,910
Entón, cando eu escriba no
palabras "gatos" e prema Intro,

1281
00:59:44,910 --> 00:59:48,460
Ao parecer, Google enviou
a miña entrada de texto para este URL

1282
00:59:48,460 --> 00:59:50,770
que teño resaltado
alí, barra de procura.

1283
00:59:50,770 --> 00:59:56,530
Acontece que, en unha URL, algo que
acontece despois un punto de interrogación é,

1284
00:59:56,530 --> 01:00:01,270
como nós seguir a dicir, un par de valores clave
que foi introducido no formulario ou de algunha maneira

1285
01:00:01,270 --> 01:00:04,500
transmitido a partir da
navegador ao servidor.

1286
01:00:04,500 --> 01:00:07,180
>> Entón cada vez que escribir a entrada
para unha forma na web

1287
01:00:07,180 --> 01:00:10,000
e é enviado como temos
que chegou a discutir, a través dun get,

1288
01:00:10,000 --> 01:00:12,400
un destes Virtual
sobres, o contido

1289
01:00:12,400 --> 01:00:15,510
de que envelope-- si, manter
quedando recheo fisicamente

1290
01:00:15,510 --> 01:00:19,010
no sobre en clase
hoxe, pero tecnoloxicamente

1291
01:00:19,010 --> 01:00:21,110
é realmente poñer na URL.

1292
01:00:21,110 --> 01:00:22,940
Entón, en realidade, déixeme peneirar iso.

1293
01:00:22,940 --> 01:00:25,010
Onde ve a entrada do usuario?

1294
01:00:25,010 --> 01:00:27,490
Onde ve algo
que eu mesmo escrito aquí enriba?

1295
01:00:27,490 --> 01:00:32,100

1296
01:00:32,100 --> 01:00:33,491
Si, por iso "gatos".

1297
01:00:33,491 --> 01:00:33,990
Non?

1298
01:00:33,990 --> 01:00:36,380
Entón deixe-me destilar esta
en algo máis simple.

1299
01:00:36,380 --> 01:00:39,917
Vou borrar todo sobre
este URL que eu non entendo,

1300
01:00:39,917 --> 01:00:42,250
e eu só vou saír
Lo como isto-- / search? q = gatos.

1301
01:00:42,250 --> 01:00:45,640

1302
01:00:45,640 --> 01:00:47,890
Imos ver onde q
ven en un momento,

1303
01:00:47,890 --> 01:00:51,220
pero que se sente como mínimo
cantidade de información que eu forneci.

1304
01:00:51,220 --> 01:00:53,050
E agora eu vou bater Intro.

1305
01:00:53,050 --> 01:00:55,520
E entender que aínda funciona.

1306
01:00:55,520 --> 01:00:57,950
Aínda volver unha morea de gatos.

1307
01:00:57,950 --> 01:01:00,340
Entón, Google é máis extravagante
que iso nos días de hoxe.

1308
01:01:00,340 --> 01:01:01,934
É 2016, non en 1999.

1309
01:01:01,934 --> 01:01:04,600
Polo tanto, hai outras cousas que o meu
navegador está enviando para o servidor.

1310
01:01:04,600 --> 01:01:07,100
Pero esta é minimamente
todo o que é necesario.

1311
01:01:07,100 --> 01:01:08,380
>> Entón, o que está a suceder?

1312
01:01:08,380 --> 01:01:14,320
Ben, primeiro déixeme ir adiante e ir
ao Cloud9 e deixe-me ir adiante

1313
01:01:14,320 --> 01:01:15,620
e pechar as guías anteriormente.

1314
01:01:15,620 --> 01:01:18,230
E eu vou facer iso no meu
posúe só por un momento.

1315
01:01:18,230 --> 01:01:20,730
Eu estou indo a ir adiante
e crear novo arquivo.

1316
01:01:20,730 --> 01:01:23,739
E eu vou gardalo como google.html.

1317
01:01:23,739 --> 01:01:26,280
E eu vou moi quickly--
Vou roubar, en realidade,

1318
01:01:26,280 --> 01:01:28,510
algún deste texto só para aforrar tempo.

1319
01:01:28,510 --> 01:01:30,610
Vou poñer esta aquí.

1320
01:01:30,610 --> 01:01:33,850
Non vou molestar-se con
estilización calquera momento.

1321
01:01:33,850 --> 01:01:38,340
Nós imos chamar iso de "My Google."

1322
01:01:38,340 --> 01:01:41,230
E eu estou indo para se librar
de todo o corpo.

1323
01:01:41,230 --> 01:01:42,740
E eu vou facer o seguinte.

1324
01:01:42,740 --> 01:01:45,690
Deixe-me facer zoom.

1325
01:01:45,690 --> 01:01:50,620
Formar Action-- e como eu brevemente mencionado
earlier-- whoops-- como eu brevemente

1326
01:01:50,620 --> 01:01:54,130
mencionado anteriormente, á acción dun
formulario é onde envía os datos.

1327
01:01:54,130 --> 01:01:56,620
Entón google.com/search.

1328
01:01:56,620 --> 01:01:59,390
E o método que desexa usar
pode ser unha de dúas cousas.

1329
01:01:59,390 --> 01:02:02,870
Pode ser tanto "incorporarse", como temos
discutir, ou pode ser "post".

1330
01:02:02,870 --> 01:02:05,340
De momento, o esencial
diferenza é que, se usa "obter",

1331
01:02:05,340 --> 01:02:09,590
toda a información que o
usuario ofrece envíase en URL.

1332
01:02:09,590 --> 01:02:13,530
>> Isto é óptimo para cousas como investigación
motores e algunhas outras aplicacións,

1333
01:02:13,530 --> 01:02:17,080
pero en que circunstancias
non quere encher un formulario

1334
01:02:17,080 --> 01:02:21,620
e ter a información acabar o
URL, como na barra de enderezos do seu navegador?

1335
01:02:21,620 --> 01:02:25,470

1336
01:02:25,470 --> 01:02:26,605
Que tipo de formas de facer você--

1337
01:02:26,605 --> 01:02:27,480
Audiencia: [inaudível]

1338
01:02:27,480 --> 01:02:28,450
DAVID J. Malan: Si, como o que?

1339
01:02:28,450 --> 01:02:29,270
Audiencia: Os contrasinais.

1340
01:02:29,270 --> 01:02:31,936
DAVID J. Malan: Si, entón rexistro
en Facebook ou algún sitio.

1341
01:02:31,936 --> 01:02:34,395
Esta é a entrada do usuario desde
un formulario, unha caixa de texto,

1342
01:02:34,395 --> 01:02:37,020
pero probablemente non quere que
aparecendo na URL do navegador.

1343
01:02:37,020 --> 01:02:38,121
Por que?

1344
01:02:38,121 --> 01:02:40,870
É dicir, se cadra uns
implicacións de seguridade na rede,

1345
01:02:40,870 --> 01:02:44,830
pero more-- gusta, máis simplemente, o que se
seu compañeiro de cuarto, o seu outro significativo,

1346
01:02:44,830 --> 01:02:47,710
seus fillos, o seu cónxuxe parece
a través do historial do navegador?

1347
01:02:47,710 --> 01:02:50,762
Non é o seu contrasinal correcta
hai na historia do seu navegador.

1348
01:02:50,762 --> 01:02:52,220
Que non se sente como un bo deseño.

1349
01:02:52,220 --> 01:02:54,500
Ou aínda máis tecnicamente,
Supoña que está intentando

1350
01:02:54,500 --> 01:02:59,180
para subir unha foto a Flickr
ou Facebook ou wherever--

1351
01:02:59,180 --> 01:03:03,010
que é a entrada de usuario, aínda que
é un pouco máis interessante-- como

1352
01:03:03,010 --> 01:03:05,530
fago para empinar unha imaxe na barra de URL?

1353
01:03:05,530 --> 01:03:06,730
Vostede tipo de medio que non pode.

1354
01:03:06,730 --> 01:03:07,396
Vostede medio que pode.

1355
01:03:07,396 --> 01:03:10,210
Pero, realmente, eu son duramente presionado
imaxinar a facer iso.

1356
01:03:10,210 --> 01:03:13,470
Entón eu teño un outro método para
subir fotos a un sitio web,

1357
01:03:13,470 --> 01:03:15,657
e que outro método é chamado de "post".

1358
01:03:15,657 --> 01:03:18,740
Pero, polo de agora, imos só falar
"Obter", que é o máis simple dos dous.

1359
01:03:18,740 --> 01:03:21,100
El só pon toda a
entrada do usuario para o URL.

1360
01:03:21,100 --> 01:03:22,830
>> Entón aquí está o xeito que eu estou creando.

1361
01:03:22,830 --> 01:03:24,070
Quero unha entrada.

1362
01:03:24,070 --> 01:03:24,820
E vostede sabe o que?

1363
01:03:24,820 --> 01:03:26,111
Vou dar un palpite aquí.

1364
01:03:26,111 --> 01:03:31,600
Vou lembrar o meu
input "q" a "consulta".

1365
01:03:31,600 --> 01:03:34,970
E eu creo que este é un dos
debuxos orixinais, se cadra, a partir de 1999.

1366
01:03:34,970 --> 01:03:39,560
E, a continuación, o tipo de entrada
é só vai ser "texto".

1367
01:03:39,560 --> 01:03:43,040
E entón eu vou ter outra entrada
que non precisa dun nome, como veremos en breve

1368
01:03:43,040 --> 01:03:45,120
ver, o tipo de que é "enviar".

1369
01:03:45,120 --> 01:03:47,070
E iso vai
dáme un botón especial.

1370
01:03:47,070 --> 01:03:48,320
E iso.

1371
01:03:48,320 --> 01:03:50,790
>> Entón deixe-me ir adiante e salva este ficheiro.

1372
01:03:50,790 --> 01:03:54,910
Vou volver para o meu
navegador e vaia google.html.

1373
01:03:54,910 --> 01:03:56,140
Intro.

1374
01:03:56,140 --> 01:03:59,680
E é unha especie de escasa
para dicir o mínimo.

1375
01:03:59,680 --> 01:04:03,110
Pero deixe-me ir adiante
e buscar "gatos".

1376
01:04:03,110 --> 01:04:06,510
E noten que eu estou actualmente
neste URL Cloud9.

1377
01:04:06,510 --> 01:04:09,240
Pero no momento clic isto,
onde espera que eu vou acabar?

1378
01:04:09,240 --> 01:04:10,160
>> Audiencia: Google.

1379
01:04:10,160 --> 01:04:11,118
>> DAVID J. Malan: Google.

1380
01:04:11,118 --> 01:04:12,740
Entón, imos premer en Enviar.

1381
01:04:12,740 --> 01:04:15,200
E, de feito eu re-aplicado Google.

1382
01:04:15,200 --> 01:04:15,700
Non?

1383
01:04:15,700 --> 01:04:16,480
É máis simple.

1384
01:04:16,480 --> 01:04:17,120
É máis lixeiro.

1385
01:04:17,120 --> 01:04:20,350
É dicir, o meu código é claramente mellor que
deles, da confusión vimos anteriormente.

1386
01:04:20,350 --> 01:04:21,100
E vostede sabe o que?

1387
01:04:21,100 --> 01:04:22,610
Eu estou indo para apimentado iso un pouco.

1388
01:04:22,610 --> 01:04:23,860
Non mencionei iso antes.

1389
01:04:23,860 --> 01:04:27,860
Hai etiquetas como H1, para a rúbrica 1,
o título máis importante nunha páxina.

1390
01:04:27,860 --> 01:04:30,570
"O meu Google," Eu vou chamar este.

1391
01:04:30,570 --> 01:04:31,940
Déixeme volver cargar.

1392
01:04:31,940 --> 01:04:33,772
É mirar un pouco mellor xa.

1393
01:04:33,772 --> 01:04:34,980
E, de feito, xa sabe o que?

1394
01:04:34,980 --> 01:04:36,430
Teño já-- eu mentín.

1395
01:04:36,430 --> 01:04:40,200
Eu dixen que non ía estilo este,
pero eu vou estilo este como antes.

1396
01:04:40,200 --> 01:04:46,860
E o meu corpo vai ser,
digamos, centro de text-align.

1397
01:04:46,860 --> 01:04:48,800
Está parecendo máis como Google xa.

1398
01:04:48,800 --> 01:04:51,090
>> Eu teño unha quebra de liña, con todo,
para ese botón Enviar.

1399
01:04:51,090 --> 01:04:52,798
E ocorre,
Pode usar n,

1400
01:04:52,798 --> 01:04:57,320
ou pode máis literalmente só dicir,
dáme unha liña de creba aqui-- tag br.

1401
01:04:57,320 --> 01:04:59,319
E se eu volver cargar tanto, agora que vai máis alá.

1402
01:04:59,319 --> 01:05:01,610
É un pouco feo, entón eu
podería facer varias quebras de liña,

1403
01:05:01,610 --> 01:05:03,310
pero non imos ser moi ganancioso aquí.

1404
01:05:03,310 --> 01:05:06,430
Entón agora imos ver se funciona para "cans".

1405
01:05:06,430 --> 01:05:08,640
Parece que traballa para "cans", como ben.

1406
01:05:08,640 --> 01:05:10,780
Entón cal é o takeaway convincente aquí?

1407
01:05:10,780 --> 01:05:13,600
Um-- non era un gran salto para
introducir algunhas marcas,

1408
01:05:13,600 --> 01:05:15,370
como a marca de formulario na marca de entrada.

1409
01:05:15,370 --> 01:05:17,120
pero fundamentalmente
é, todo o que estamos facendo

1410
01:05:17,120 --> 01:05:20,610
Está panca a nosa comprensión
HTTP eo feito

1411
01:05:20,610 --> 01:05:24,900
en definitiva, que as formas cambiar
o que está en URL do navegador,

1412
01:05:24,900 --> 01:05:28,540
e así, polo tanto, podemos
mecánicamente proporcionar datos para un servidor

1413
01:05:28,540 --> 01:05:33,600
facendo un formulario HTML e saber
que comprende o servidor HTTP,

1414
01:05:33,600 --> 01:05:36,890
Así como o noso corpo comprende, como,
axustado a man, que mesmo protocolo,

1415
01:05:36,890 --> 01:05:40,920
e así que volvemos a resposta
que en definitiva, de esperar.

1416
01:05:40,920 --> 01:05:44,050
>> Entón, imos tratar de facer un
último momento co móbil,

1417
01:05:44,050 --> 01:05:47,052
e eu vou make-- vou engadir
este código para diapositivas.

1418
01:05:47,052 --> 01:05:49,760
Entón, se quere xogar, ten
certamente pode leva-la de alí.

1419
01:05:49,760 --> 01:05:51,551
Pero eu estou indo a ir
adiante e facer unha cousa.

1420
01:05:51,551 --> 01:05:54,120
Eu estou indo a ir adiante e
abrir o meu índice página--

1421
01:05:54,120 --> 01:05:59,030
miña páxina Ola, como antes, o que
Ten unha morea de este texto faux-Latina,

1422
01:05:59,030 --> 01:06:05,470
ou un texto sen sentido Latina e has--
parece que iso neste tipo de letra.

1423
01:06:05,470 --> 01:06:07,850
Pero deixe-me ir adiante e facelo.

1424
01:06:07,850 --> 01:06:09,300
Eu estou indo a ir a Cloud9.

1425
01:06:09,300 --> 01:06:10,380
E non ten que facer este paso.

1426
01:06:10,380 --> 01:06:11,420
Eu só vou facelo só.

1427
01:06:11,420 --> 01:06:12,890
Vou prema Compartir.

1428
01:06:12,890 --> 01:06:15,170
E esta é unha característica
só de Cloud9, en que

1429
01:06:15,170 --> 01:06:17,710
Eu podo facer o meu ambiente público.

1430
01:06:17,710 --> 01:06:20,240
>> E só por unha cuestión de
demostración, déixeme facer.

1431
01:06:20,240 --> 01:06:22,870
Vou facer a miña aplicación pública.

1432
01:06:22,870 --> 01:06:25,230
Teña en conta que me avisando, son
I seguro se quero facelo,

1433
01:06:25,230 --> 01:06:28,438
porque iso vai facer que
no mundo, se eles están aquí agora

1434
01:06:28,438 --> 01:06:33,560
ou ver o vídeo máis tarde na
Internet capaz de ver o que vexo.

1435
01:06:33,560 --> 01:06:34,440
Pero iso é OK.

1436
01:06:34,440 --> 01:06:37,870
Eu vou dicir "Done".

1437
01:06:37,870 --> 01:06:42,080
E déixeme encouraged-lo, se eu fixen
este correctly-- déixeme probalo primeiro.

1438
01:06:42,080 --> 01:06:45,590
Dalle, se non mente--
nun navegador no seu ordenador,

1439
01:06:45,590 --> 01:06:49,900
vaia a este URL, e espero
vai ver o meu texto en latín.

1440
01:06:49,900 --> 01:06:52,820
E para quedar claro, é
non en execución no meu portátil.

1441
01:06:52,820 --> 01:06:53,610
É na nube.

1442
01:06:53,610 --> 01:06:58,120
Está na Cloud9 literalmente pero
Eu fixen o meu escritorio público

1443
01:06:58,120 --> 01:07:03,450
para que calquera persoa en Internet
Pode acceder a miña páxina Latina.

1444
01:07:03,450 --> 01:07:07,209
>> Ir ao mesmo URL na
teléfono, se puidese.

1445
01:07:07,209 --> 01:07:09,750
Se vai custa-lle, con todo,
pode só ollar por riba do ombreiro.

1446
01:07:09,750 --> 01:07:40,688

1447
01:07:40,688 --> 01:07:42,467
Audiencia: [inaudível]

1448
01:07:42,467 --> 01:07:43,550
DAVID J. Malan: Eu sinto moito?

1449
01:07:43,550 --> 01:07:45,390
Audiencia: [inaudível]

1450
01:07:45,390 --> 01:07:47,710
DAVID J. Malan: Só palabras latinas.

1451
01:07:47,710 --> 01:07:48,210
Iso é todo.

1452
01:07:48,210 --> 01:07:49,250
Pero iso é o que ten que ver.

1453
01:07:49,250 --> 01:07:49,875
>> Audiencia: É.

1454
01:07:49,875 --> 01:07:50,790
DAVID J. Malan: Yeah.

1455
01:07:50,790 --> 01:07:51,300
Si.

1456
01:07:51,300 --> 01:07:51,540
OK.

1457
01:07:51,540 --> 01:07:53,530
Para que eu poida manter o seu
teléfono por un momento?

1458
01:07:53,530 --> 01:07:57,504
Entón, espero que, se está accedendo
Lo, debe ollar case ilegível.

1459
01:07:57,504 --> 01:07:59,920
É still-- Quero dicir, é
ilexíbeis debido á Latina.

1460
01:07:59,920 --> 01:08:01,920
Pero tamén é lexible
para que outro motivo?

1461
01:08:01,920 --> 01:08:03,775
Como, o que lle desagrada sobre iso?

1462
01:08:03,775 --> 01:08:04,650
Audiencia: É pequeno.

1463
01:08:04,650 --> 01:08:06,420
DAVID J. Malan: É super, super pequeno.

1464
01:08:06,420 --> 01:08:07,920
Entón, como podemos solucionar isto?

1465
01:08:07,920 --> 01:08:09,730
É super, super pequeno
no teléfono do Victoria

1466
01:08:09,730 --> 01:08:11,400
e, se tirou
Lo mesmo, probablemente,

1467
01:08:11,400 --> 01:08:14,660
pequeno no seu teléfono, así como, a menos que
teñen opcións de accesibilidade activado.

1468
01:08:14,660 --> 01:08:15,530
¿Que é iso?

1469
01:08:15,530 --> 01:08:18,497
Podería simplemente usar e
zoom, o que é viable,

1470
01:08:18,497 --> 01:08:20,330
pero entón só ve
algunhas palabras de cada vez.

1471
01:08:20,330 --> 01:08:20,859
Entón, agarde un minuto.

1472
01:08:20,859 --> 01:08:21,720
Sei como fixar iso.

1473
01:08:21,720 --> 01:08:22,219
Non?

1474
01:08:22,219 --> 01:08:26,130
Eu podería usar CSS, e eu podería cambiar o
tamaño de fonte de 12 puntos a 24 puntos.

1475
01:08:26,130 --> 01:08:29,020
Pero o efecto colateral de que,
por suposto, será o momento,

1476
01:08:29,020 --> 01:08:32,630
nun escritorio ou un portátil,
Agora o texto é dúas veces maior.

1477
01:08:32,630 --> 01:08:35,810
E por iso sería tipo de ser agradable
para distinguir entre dispositivos,

1478
01:08:35,810 --> 01:08:37,840
e verifica-se alí fóra
son formas de facelo.

1479
01:08:37,840 --> 01:08:39,590
existen varios
formas diferentes, de feito,

1480
01:08:39,590 --> 01:08:44,189
polo cal mediante CSS e recursos máis sofisticados
que non vai entrar en en gran detalle,

1481
01:08:44,189 --> 01:08:46,960
podes esencialmente consulta
o navegador e dicir:

1482
01:08:46,960 --> 01:08:51,550
se a súa pantalla é menor que iso
moitos píxeles, use este tipo de letra.

1483
01:08:51,550 --> 01:08:55,180
Se a pantalla é maior que iso
moitos píxeles, use este outro tipo de letra.

1484
01:08:55,180 --> 01:08:57,080
>> Pode ser aínda máis extravagante aínda.

1485
01:08:57,080 --> 01:09:00,140
Se xa visitou un
páxina web que, nun escritorio,

1486
01:09:00,140 --> 01:09:04,404
ten un gran menú quizais fóra á
banda, e entón todo o contido

1487
01:09:04,404 --> 01:09:07,029
é para o lado de que menu--
que é unha especie de paradigma común.

1488
01:09:07,029 --> 01:09:09,670
Menú do lado esquerdo, o contido
á dereita, ou viceversa.

1489
01:09:09,670 --> 01:09:13,569
realmente non funciona no móbil cando o seu
pantalla é só iso moitas píxeles de ancho.

1490
01:09:13,569 --> 01:09:16,233
Entón, máis común no móbil é,
seu menú de súpeto comezar

1491
01:09:16,233 --> 01:09:18,399
entrou en colapso, e ten que
facer clic nun botón para velo,

1492
01:09:18,399 --> 01:09:22,404
ou o sitio web pode pór o menú
enriba del e poñer o contido baixo del.

1493
01:09:22,404 --> 01:09:24,779
E pode aplicar estas
cousas de varias maneiras, tamén.

1494
01:09:24,779 --> 01:09:28,340
Podes preguntar aos seus programadores,
hey, o equipo, a calquera hora

1495
01:09:28,340 --> 01:09:34,450
ve unha solicitude HTTP desde un Android
dispositivo, un dispositivo Microsoft, Google

1496
01:09:34,450 --> 01:09:39,930
dispositivo, un dispositivo de Apple, use esta
tamaño de fonte e utilizar ese esquema do menú,

1497
01:09:39,930 --> 01:09:42,670
ou entón usar este estándar maior esquema.

1498
01:09:42,670 --> 01:09:45,410
>> Agora, usando o
técnica fundamental hoxe

1499
01:09:45,410 --> 01:09:48,529
podería usar os enxeñeiros
para saber se é

1500
01:09:48,529 --> 01:09:53,660
un iPhone, un teléfono Android, un ordenador portátil,
un escritorio visitar o servidor da empresa?

1501
01:09:53,660 --> 01:09:55,310
En que é que van obter esa información?

1502
01:09:55,310 --> 01:09:56,080
>> Audiencia: cabeceira?

1503
01:09:56,080 --> 01:09:57,740
>> DAVID J. Malan: Si, a cabeceira HTTP.

1504
01:09:57,740 --> 01:10:01,714
Así, cada petición HTTP proveniente
seus clientes para os seus servidores

1505
01:10:01,714 --> 01:10:03,880
incluír, dentro dese virtual
sobre, un grupo enteiro

1506
01:10:03,880 --> 01:10:08,260
de cabeceiras HTTP, un dos cales está
o navegador eo sistema operativo

1507
01:10:08,260 --> 01:10:10,290
aínda, se o coidado de
este nivel de detalle.

1508
01:10:10,290 --> 01:10:13,790
Agora, é unha cadea de críptica de aparencia, pero
hai software que só vai

1509
01:10:13,790 --> 01:10:18,530
simplificar isto, e pode simplemente pedir
na programación code-- PHP, Java, C ++,

1510
01:10:18,530 --> 01:10:23,650
whatever-- o teléfono isto--
o dispositivo é este usuario a usar?

1511
01:10:23,650 --> 01:10:27,501
E entón pode dicir, amosar-lles esta
versión do sitio web, se é un teléfono.

1512
01:10:27,501 --> 01:10:30,250
B-lles que esta versión do
web de ser un portátil ou de escritorio.

1513
01:10:30,250 --> 01:10:32,316
Pero non precisa aínda
complexidade do lado do servidor.

1514
01:10:32,316 --> 01:10:33,940
Podes facer mesmo a máis simple das cousas.

1515
01:10:33,940 --> 01:10:34,815
>> Eu vou facelo.

1516
01:10:34,815 --> 01:10:38,995
Eu estou indo a ir adiante para
meu ambiente Cloud9,

1517
01:10:38,995 --> 01:10:41,370
e eu estou indo a engadir unha marca
que viu en Google antes.

1518
01:10:41,370 --> 01:10:42,770
É o chamado metalag.

1519
01:10:42,770 --> 01:10:45,520
E eu nunca me lembro un regalo, entón
Vou transcrevê-lo aquí.

1520
01:10:45,520 --> 01:10:50,552
meta name = "viewport" e, a continuación,
content = "width = ancho do dispositivo, intital

1521
01:10:50,552 --> 01:11:02,060
scale = 1 "e é iso.

1522
01:11:02,060 --> 01:11:06,230
>> Por iso, podería moi ben ser
como un encanto máxico.

1523
01:11:06,230 --> 01:11:11,300
Non é todo o que claro, pero iso ten
algo que ver coa ventá de visualización,

1524
01:11:11,300 --> 01:11:15,070
e ventá de visualización é só o corpo dun
A páxina web, a rexión rectangular que

1525
01:11:15,070 --> 01:11:16,690
define a maior parte da páxina.

1526
01:11:16,690 --> 01:11:19,060
E este é só dicir
o navegador, vostede sabe o que?

1527
01:11:19,060 --> 01:11:22,589
Fai o ancho da páxina
efectivamente igual á anchura do dispositivo.

1528
01:11:22,589 --> 01:11:25,380
Noutras palabras, non pense que
temos un tipo de espazo ilimitado.

1529
01:11:25,380 --> 01:11:29,920
Supoña que só ten tanto
espazo como o propio dispositivo é grande.

1530
01:11:29,920 --> 01:11:34,454
E agora, se eu volver cargar esta
no meu navegador, non vexo ningún cambio.

1531
01:11:34,454 --> 01:11:37,370
Pero se eu fixese iso correctly-- e
déixeme pola miña fingers-- todos

1532
01:11:37,370 --> 01:11:42,920
recargar os seus teléfonos,
ver un cambio atractivo?

1533
01:11:42,920 --> 01:11:43,620
Si, é isso--

1534
01:11:43,620 --> 01:11:45,067
>> Audiencia: [inaudível]

1535
01:11:45,067 --> 01:11:45,900
DAVID J. Malan: Si.

1536
01:11:45,900 --> 01:11:46,400
OK.

1537
01:11:46,400 --> 01:11:47,850
Entón, sen dúbida, máis lexible agora?

1538
01:11:47,850 --> 01:11:53,070
Aínda pequeno, para ser xusto, pero non
tan pequena como a imparable.

1539
01:11:53,070 --> 01:11:56,920
E eu certamente podería substituír esa
aínda máis con CSS ou do lado do servidor,

1540
01:11:56,920 --> 01:12:00,120
pero cada vez que está
ver é máis e máis recursos

1541
01:12:00,120 --> 01:12:02,900
ser engadido a
environments-- do lado do cliente

1542
01:12:02,900 --> 01:12:06,530
JavaScript, como discutir
mañá, CSS e HTML-- así

1543
01:12:06,530 --> 01:12:09,190
que todas esas consultas
se pode facer no cliente

1544
01:12:09,190 --> 01:12:11,910
para incomodar a
servidor moito menos e non

1545
01:12:11,910 --> 01:12:14,530
ter que manter-se con, por
exemplo, o constante ataque

1546
01:12:14,530 --> 01:12:17,210
de novo o sistema operativo
versións, novas versións do navegador.

1547
01:12:17,210 --> 01:12:20,190
Pode simplemente deixar o navegador
pedir o dispositivo, o grande é vostede,

1548
01:12:20,190 --> 01:12:22,890
e logo facer un pouco lóxico
decisións con base niso.

1549
01:12:22,890 --> 01:12:25,140
Pero imos ver máis oportunidades
para decisións lóxicas

1550
01:12:25,140 --> 01:12:27,223
mañá no contexto
dunha linguaxe de programación.

1551
01:12:27,223 --> 01:12:29,800

1552
01:12:29,800 --> 01:12:32,760
>> Así, todas as preguntas, entón,
sobre o desenvolvemento web?

1553
01:12:32,760 --> 01:12:36,130
Hoxe non é de programación web, por
se, xa que a maioría todo o que fixemos

1554
01:12:36,130 --> 01:12:38,370
foi moi estético, se quixeren.

1555
01:12:38,370 --> 01:12:41,750
Non hai ningunha toma de decisións en
o código que escribimos,

1556
01:12:41,750 --> 01:12:44,990
e é por iso que o HTML é unha cita
linguaxe, non unha linguaxe de programación.

1557
01:12:44,990 --> 01:12:47,140
Pero mañá imos dar
un ollar rápido, en definitiva,

1558
01:12:47,140 --> 01:12:49,340
en JavaScript, que é
unha programación real

1559
01:12:49,340 --> 01:12:54,220
linguaxe que nos permite facer un pouco máis.

1560
01:12:54,220 --> 01:12:56,800
>> Algunha pregunta?

1561
01:12:56,800 --> 01:13:00,480
Ben, deixe-me propor dous
oportunidades opcionais para traballos de casa.

1562
01:13:00,480 --> 01:13:02,900
Un é-- estes Cloud9
contas non expirará.

1563
01:13:02,900 --> 01:13:04,669
Estás convidado a empregar
Los para xogar con.

1564
01:13:04,669 --> 01:13:05,960
É o nivel de servizo de balde.

1565
01:13:05,960 --> 01:13:08,754
Entenda que, ao crear
seu espazo de traballo, fixo público,

1566
01:13:08,754 --> 01:13:11,670
que significa que calquera persoa na
Internet pode ver o que está escribindo.

1567
01:13:11,670 --> 01:13:15,104
Entón, talvez só considere
non embaraçar a si mesmo

1568
01:13:15,104 --> 01:13:18,020
se está poñendo o seu primeiro web
Páxina aí publicamente accidentalmente,

1569
01:13:18,020 --> 01:13:20,134
pero ninguén vai
saber para ollar alí de calquera maneira.

1570
01:13:20,134 --> 01:13:23,760
>> E dois-- déixeme tirar
-Se esta URL, así como,

1571
01:13:23,760 --> 01:13:28,250
especialmente se veu hoxe unha
algo menos cómodo que outros,

1572
01:13:28,250 --> 01:13:30,430
sen saber o que significa todo isto.

1573
01:13:30,430 --> 01:13:36,780
Entender que máis gusta,
que é tanto unha boa forma de adormecer

1574
01:13:36,780 --> 01:13:39,380
e tamén para rir mentres
Facendo iso, tamén ten

1575
01:13:39,380 --> 01:13:44,300
unha morea de socialmente interesante
e discusións relevantes para a seguridade

1576
01:13:44,300 --> 01:13:47,370
nel de John Oliver,
aínda que un comediante.

1577
01:13:47,370 --> 01:13:55,456
>> Pero se non hai máis dúbidas,
que nos trae para a recepción.

1578
01:13:55,456 --> 01:13:56,830
Entón por que non ligo a música.

1579
01:13:56,830 --> 01:13:58,610
Debe haber bebidas
e lanches fóra.

1580
01:13:58,610 --> 01:14:00,220
Estou feliz por convivir por tanto
sempre que a xente quere,

1581
01:14:00,220 --> 01:14:01,600
responder a preguntas máis one-on-one.

1582
01:14:01,600 --> 01:14:03,330
Pero, se non, vostede é benvido
para despegar en calquera momento,

1583
01:14:03,330 --> 01:14:05,740
e imos velo de novo
mañá de mañá para un pouco máis.

1584
01:14:05,740 --> 01:14:07,290
Todo ben, grazas.

1585
01:14:07,290 --> 01:14:10,428