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

2
00:00:00,127 --> 00:00:01,210
DAVID J. MALAN: Tudo bem.

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

4
00:00:02,160 --> 00:00:05,810
Assim, o objetivo desta sessão final
é introduzir mais alguns conceitos

5
00:00:05,810 --> 00:00:09,290
mas também dar a todos uma chance
ao tipo de esticar os dedos

6
00:00:09,290 --> 00:00:11,270
e realmente fazer alguma coisa
um pouco de prática.

7
00:00:11,270 --> 00:00:13,897
O objetivo não é transformar
todos nós para desenvolvedores web

8
00:00:13,897 --> 00:00:16,230
por qualquer meio, mas realmente apenas
para lhe dar um gosto de alguns

9
00:00:16,230 --> 00:00:21,750
das construções fundamentais de que
entra em programação web e hoje web

10
00:00:21,750 --> 00:00:23,980
desenvolvimento, de modo que o
lado estática de coisas-

11
00:00:23,980 --> 00:00:26,660
nenhuma lógica, nenhuma programação
língua, apenas conteúdo estático.

12
00:00:26,660 --> 00:00:29,660
E isso nos dará uma oportunidade
para ver realmente o que um servidor web é,

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

14
00:00:34,140 --> 00:00:38,600
Mas antes de mergulhar, qualquer retrospectiva
perguntas sobre a computação em nuvem

15
00:00:38,600 --> 00:00:43,922
ou de segurança ou qualquer coisa no meio?

16
00:00:43,922 --> 00:00:44,890
>> Não?

17
00:00:44,890 --> 00:00:47,181
Tudo bem, bem, vamos
fazer isso, apenas no caso

18
00:00:47,181 --> 00:00:49,680
o processo de se inscrever para
algo leva alguns minutos.

19
00:00:49,680 --> 00:00:51,221
Vamos deixá-lo fazê-lo em segundo plano.

20
00:00:51,221 --> 00:00:56,860
Vá em frente, se pudesse,
para c9.io. esta URL aqui--

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

22
00:01:02,810 --> 00:01:05,190
que vai convidá-lo
para se inscrever para uma conta,

23
00:01:05,190 --> 00:01:08,650
e vai dar a cada um de vocês
uma conta na chamada nuvem

24
00:01:08,650 --> 00:01:11,330
na infra-estrutura de outra pessoa,
uma empresa chamada Cloud9.

25
00:01:11,330 --> 00:01:13,350
Mas o que é agradável sobre
isto é que eles dão-lhe

26
00:01:13,350 --> 00:01:15,990
uma aproximação de um
desenvolvimento real do mundo real

27
00:01:15,990 --> 00:01:18,530
ambiente, embora no
nuvem e em um navegador web,

28
00:01:18,530 --> 00:01:21,175
e vamos usar isso para realmente
experimentar um pouco hoje.

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

30
00:01:27,116 --> 00:01:30,260
E, em seguida, vá em frente e apenas navegar
seu caminho para o processo de inscrição

31
00:01:30,260 --> 00:01:32,630
se você pudesse.

32
00:01:32,630 --> 00:01:36,080
Então, nós acontecer para usar esta na classe
Eu ensino para todos os nossos alunos,

33
00:01:36,080 --> 00:01:39,140
tanto no campus como fora agora, e
é substituído o que historicamente

34
00:01:39,140 --> 00:01:41,390
foi software de outra forma para download.

35
00:01:41,390 --> 00:01:44,620
Então, o que você estava ganhando acesso a
é uma dessas máquinas virtuais,

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

37
00:01:46,460 --> 00:01:50,260
Portanto, esta empresa Cloud9 provavelmente
rendas de um terço party-- fato

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

39
00:01:52,760 --> 00:01:56,500
que de alguma forma pique em
a ilusão de servidores individuais

40
00:01:56,500 --> 00:01:58,610
que cada um de nós tem total controle sobre.

41
00:01:58,610 --> 00:02:01,640
Não é muito preciso dizer
que eles são máquinas virtuais,

42
00:02:01,640 --> 00:02:04,550
no entanto, porque o que
Cloud9 realmente usa

43
00:02:04,550 --> 00:02:07,570
é uma tecnologia um pouco mais recente
chamado de conteinerização.

44
00:02:07,570 --> 00:02:13,150
E deixe-me agarrar esta imagem
aqui para pintar o quadro.

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

46
00:02:16,540 --> 00:02:19,900
de mais cedo, um pouco mais leve
peso do que uma máquina virtual.

47
00:02:19,900 --> 00:02:22,090
De facto, enquanto que a última
vez que falamos sobre lá

48
00:02:22,090 --> 00:02:25,170
sendo um operacional
sistema e um hypervisor

49
00:02:25,170 --> 00:02:28,260
e, em seguida, sistema operacional convidado, convidado
sistema operacional, operacional convidado

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

51
00:02:30,940 --> 00:02:33,740
a diferença com esta nova
tecnologia, contentorização,

52
00:02:33,740 --> 00:02:37,290
é que todos eles de alguma forma compartilhar
o mesmo sistema operativo.

53
00:02:37,290 --> 00:02:39,970
Mas eles ainda criar
a ilusão de todos

54
00:02:39,970 --> 00:02:44,590
ter o seu próprio exclusivo
direitos administrativos e arquivos

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

56
00:02:45,400 --> 00:02:48,230
Mas há menos software em
entre você eo hardware.

57
00:02:48,230 --> 00:02:52,260
O resultado é que, em
Teoricamente, um desempenho superior,

58
00:02:52,260 --> 00:02:55,470
porque você está usando ou
desperdiçando menos recursos

59
00:02:55,470 --> 00:02:57,360
em que a camada de virtualização chamada.

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

61
00:02:59,420 --> 00:03:02,920
por meio de uma tecnologia chamada de encaixe,
que é muito entrando em seu próprio.

62
00:03:02,920 --> 00:03:05,086
E isso é algo que
engenheiros da sua empresa

63
00:03:05,086 --> 00:03:08,610
pode tipo de tipo de começar a falar
sobre em breve, se já não o fez,

64
00:03:08,610 --> 00:03:11,590
porém não há dúvida nenhuma
razão para saltar sobre quaisquer bandwagons.

65
00:03:11,590 --> 00:03:15,410
>> Então, com isso dito, o que
você provavelmente vê agora

66
00:03:15,410 --> 00:03:22,670
é uma tela que parece um pouco com isso.

67
00:03:22,670 --> 00:03:23,170
ESTÁ BEM.

68
00:03:23,170 --> 00:03:25,260
E apenas chamar-me sobre se não.

69
00:03:25,260 --> 00:03:27,440
E se assim-- eu vou vir se não.

70
00:03:27,440 --> 00:03:30,244
Vá em frente e clique tão grande
além de criar um espaço de trabalho,

71
00:03:30,244 --> 00:03:31,660
e você verá uma tela como esta.

72
00:03:31,660 --> 00:03:35,020
Você pode chamar o espaço de trabalho
nomear qualquer coisa que você quer para agora.

73
00:03:35,020 --> 00:03:38,660
E, assim, na verdade, para simplificar,
vá e- bem, alguns de vocês

74
00:03:38,660 --> 00:03:39,660
já têm espaços de trabalho.

75
00:03:39,660 --> 00:03:47,050
Chame-lhe o que você want-- negócio,
Harvard, quinta-feira, o que quer que você gostaria.

76
00:03:47,050 --> 00:03:48,800
Você não precisa de uma descrição.

77
00:03:48,800 --> 00:03:52,380
Você pode deixá-lo privado, a menos que você
já tem um monte de espaços de trabalho.

78
00:03:52,380 --> 00:03:55,280
Se você é forçado a torná-la pública,
isso é bom para fins de hoje.

79
00:03:55,280 --> 00:03:56,750
Aqui, também, é um dos upsells.

80
00:03:56,750 --> 00:03:59,939
Você ganha um espaço de trabalho privado por
padrão. Mas se você quiser mais,

81
00:03:59,939 --> 00:04:00,980
você tem que pagar por mais.

82
00:04:00,980 --> 00:04:02,870
Caso contrário, eles forçá-lo
para fazer o seu público trabalho.

83
00:04:02,870 --> 00:04:05,600
Mas isso é bom, porque eles também
alvo isso em comunidades de código aberto

84
00:04:05,600 --> 00:04:07,700
para incentivar as pessoas a
realmente colaborar.

85
00:04:07,700 --> 00:04:10,699
>> E a última coisa que é importante,
no entanto, é, depois de escolher um nome

86
00:04:10,699 --> 00:04:17,140
e depois de escolher privado ou público,
clique HTML5, o ícone laranja grande

87
00:04:17,140 --> 00:04:22,430
segundo a partir da esquerda, e
em seguida, clique em Criar Espaço de Trabalho.

88
00:04:22,430 --> 00:04:24,580
E, provavelmente,
tomar um minuto ou assim,

89
00:04:24,580 --> 00:04:26,540
mas então você vai ter um
meio ambiente, uma vez que você

90
00:04:26,540 --> 00:04:30,544
fazer isso, que parece uma reminiscência de
o que eu tenho na tela aqui agora.

91
00:04:30,544 --> 00:04:33,210
Mas, novamente, isso pode levar um minuto
ou mais para chegar a esta tela

92
00:04:33,210 --> 00:04:34,770
uma vez que você clicou em Criar Espaço de Trabalho.

93
00:04:34,770 --> 00:04:37,936
Mas, assim mim a bandeira mais se você gostasse de mim
para dar uma olhada em qualquer coisa ou aconselhar.

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

95
00:04:40,191 --> 00:04:40,690
Tudo certo.

96
00:04:40,690 --> 00:04:42,390
Então, eu vou fundo isso por enquanto.

97
00:04:42,390 --> 00:04:44,260
Ligue-me mais se parecem
temos dificuldades técnicas.

98
00:04:44,260 --> 00:04:46,210
Mas, novamente, isso pode levar um
pouco para que a abrir.

99
00:04:46,210 --> 00:04:49,570
E vamos em frente e falar sobre o
ele realmente significa para fazer uma página web,

100
00:04:49,570 --> 00:04:52,780
o HTML é, e como tudo isso
agora interliga como estamos começando

101
00:04:52,780 --> 00:04:54,730
para realmente usar algumas das tecnologias.

102
00:04:54,730 --> 00:04:58,310
Assim, verifica-se que eu puder
ir em meu pequeno Mac aqui,

103
00:04:58,310 --> 00:05:01,650
abrir um programa simples chamado
TextEdit, ou no Windows eu poderia

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 poderia simplesmente fazer algo
como isto-- "Olá, mundo".

106
00:05:08,260 --> 00:05:12,020
E então eu poderia salvar isto como
hello.txt Então há mágica lá.

107
00:05:12,020 --> 00:05:15,200
Isto não tem nada a ver com a web
programação, nada a ver com HTML.

108
00:05:15,200 --> 00:05:16,790
Basta criar um arquivo de texto simples.

109
00:05:16,790 --> 00:05:20,600
Mas verifica-se que a web
A página é, literalmente, apenas isso.

110
00:05:20,600 --> 00:05:24,020
É um texto simples arquivo de texto contendo
que você pode digitar em seu teclado,

111
00:05:24,020 --> 00:05:30,070
mas normalmente, mas nem sempre
termina em não .txt, mas .html ou .htm.

112
00:05:30,070 --> 00:05:32,050
E você não apenas
digitar palavras no arquivo.

113
00:05:32,050 --> 00:05:35,280
Você realmente tem que usar coisas chamadas
etiquetas ou, mais geralmente, algo

114
00:05:35,280 --> 00:05:37,190
chamado de linguagem de marcação.

115
00:05:37,190 --> 00:05:40,510
>> Então eu vou para digitar muito rapidamente
e, em seguida, explicar o seguinte.

116
00:05:40,510 --> 00:05:42,290
Eu vou primeiro
digite este, que diz:

117
00:05:42,290 --> 00:05:45,730
hey, browser, aí vem um
A página web escrito em HTML.

118
00:05:45,730 --> 00:05:51,850
E essas duas coisas juntas dizer, hey,
navegador, a seguinte é de fato HTML.

119
00:05:51,850 --> 00:05:55,790
Hey, browser, aí vem o
cabeça ou parte superior da minha página.

120
00:05:55,790 --> 00:05:59,900
Hey, browser, dentro da parte superior da
minha página, coloque um título que é, "Olá,

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

122
00:06:01,610 --> 00:06:08,370
Hey, browser, após a cabeça do meu
página, aqui vem o corpo da minha página.

123
00:06:08,370 --> 00:06:12,170
E, hey, browser, o corpo do meu
página também deveria dizer, "Olá mundo".

124
00:06:12,170 --> 00:06:15,500
Então, quais são os detalhes salientes aqui?

125
00:06:15,500 --> 00:06:17,960
Isto é o que geralmente é
chamado de uma declaração do tipo doc,

126
00:06:17,960 --> 00:06:20,190
e, francamente, é um pouco
difícil de memorizar esta em primeiro lugar.

127
00:06:20,190 --> 00:06:21,481
Você só tipo de copiar-colar.

128
00:06:21,481 --> 00:06:23,760
Esta é a maneira formal
de dizer, hey, browser,

129
00:06:23,760 --> 00:06:28,030
Eu estou usando HTML versão 5, que
saiu um pouco recentemente.

130
00:06:28,030 --> 00:06:31,380
É um encantamento mágico que alguns
seres humanos com um mau senso de design

131
00:06:31,380 --> 00:06:33,640
decidiu colocar no
muito superior do arquivo.

132
00:06:33,640 --> 00:06:35,473
Mesmo que seja um
pouco arcano, isso é tudo

133
00:06:35,473 --> 00:06:38,250
-lo means-- hey, browser, aqui
vem com a versão 5 do HTML.

134
00:06:38,250 --> 00:06:41,741
>> O restante deste esteve conosco
já há algum tempo, historicamente,

135
00:06:41,741 --> 00:06:44,740
mas foi evoluindo, e é
provavelmente, foi ficando um pouco mais simples.

136
00:06:44,740 --> 00:06:47,320
Observe algumas características
do que eu tenho realçado.

137
00:06:47,320 --> 00:06:49,890
Há essas coisas com angular
brackets-- suporte esquerdo

138
00:06:49,890 --> 00:06:51,040
e o suporte direito.

139
00:06:51,040 --> 00:06:52,490
E observe a simetria aqui.

140
00:06:52,490 --> 00:06:57,340
E por simetria, quero dizer, como eu
ter essa marca de início aqui ou uma tag aberta

141
00:06:57,340 --> 00:07:01,560
se quiserem, aqui eu tenho um
perto tag ou uma marca de fim que é

142
00:07:01,560 --> 00:07:06,460
diferentes apenas na medida em que tem este
barra no início da palavra

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

144
00:07:07,360 --> 00:07:09,360
E você pode pensar
isso como eu estava casualmente

145
00:07:09,360 --> 00:07:12,280
propondo antes, hey,
navegador, aí vem um pouco de HTML.

146
00:07:12,280 --> 00:07:16,060
E, inversamente, hey, browser, que é
-lo para o início HTML-- e fim.

147
00:07:16,060 --> 00:07:18,440
>> Enquanto isso hey, browser, aqui
vem a cabeça de minha página.

148
00:07:18,440 --> 00:07:20,140
Hey, navegador, é isso para a cabeça.

149
00:07:20,140 --> 00:07:22,240
Hey, browser, aqui é
o corpo de minha página.

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

151
00:07:24,020 --> 00:07:26,940
E dentro desse alguma
texto arbitrário para agora.

152
00:07:26,940 --> 00:07:30,520
E dentro da cabeça, enquanto isso,
é algum arbitrária, mas com etiquetas,

153
00:07:30,520 --> 00:07:34,410
por assim dizer, texto que diz, o título
da minha página deve ser "Olá, mundo".

154
00:07:34,410 --> 00:07:37,470
Agora, por agora, você pode
supor que os navegadores

155
00:07:37,470 --> 00:07:41,762
tem only-- ou melhor, páginas da web têm
apenas dois parts-- da cabeça e do corpo.

156
00:07:41,762 --> 00:07:44,220
E a cabeça é geralmente apenas
como a barra de menu, o material

157
00:07:44,220 --> 00:07:45,510
realmente apenas no topo.

158
00:07:45,510 --> 00:07:48,910
E o corpo é a coragem da página,
tudo em tão grande rectângulo

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

160
00:07:50,239 --> 00:07:51,780
Então, eu estou indo para ir em frente e fazer isso.

161
00:07:51,780 --> 00:07:54,400
Eu indo para ir em frente e
clique em Salvar, Salvar arquivo.

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

163
00:07:58,580 --> 00:08:00,870
e eu estou indo só para
colocá-lo no meu desktop.

164
00:08:00,870 --> 00:08:03,520
E eu estou indo para ir
em frente e clique em Salvar.

165
00:08:03,520 --> 00:08:05,806
E notice-- meu Mac em
menos está gritando para mim.

166
00:08:05,806 --> 00:08:07,180
Você tem certeza de que quer fazer isso?

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

168
00:08:08,710 --> 00:08:10,400
Eu sei melhor neste caso.

169
00:08:10,400 --> 00:08:14,686
E agora eu estou indo para ir para o meu desktop
onde eu tenho esse arquivo de repente.

170
00:08:14,686 --> 00:08:16,060
E eu vou dar um duplo clique nele.

171
00:08:16,060 --> 00:08:18,268
E você vai perceber que, por
padrão, o Chrome aberto.

172
00:08:18,268 --> 00:08:19,996
Isso é porque é isso
meu navegador padrão.

173
00:08:19,996 --> 00:08:21,370
E ele só diz: "Olá, mundo".

174
00:08:21,370 --> 00:08:23,078
Mas ele diz "Olá,
mundo "em dois lugares.

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

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

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

178
00:08:26,180 --> 00:08:30,690
E onde mais é que parece
quer dizer, "Olá, mundo"?

179
00:08:30,690 --> 00:08:31,470
>> AUDIÊNCIA: A guia.

180
00:08:31,470 --> 00:08:33,100
>> DAVID J. MALAN: Sim, a guia em si.

181
00:08:33,100 --> 00:08:35,159
Então, quando eu disse que o chefe da
A página é tudo para cima top--

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

183
00:08:36,367 --> 00:08:37,710
É apenas na guia aqui.

184
00:08:37,710 --> 00:08:40,320
E eu posso puxar este guia
de modo a não confundir.

185
00:08:40,320 --> 00:08:43,360
Esta é apenas uma única guia agora,
e, na verdade vemos "Olá, mundo"

186
00:08:43,360 --> 00:08:45,970
aqui em cima e "Olá, mundo" aqui em baixo.

187
00:08:45,970 --> 00:08:47,160
Assim, bastante simples.

188
00:08:47,160 --> 00:08:49,050
Mas também é bastante simples.

189
00:08:49,050 --> 00:08:50,440
E, na verdade, eu ampliada.

190
00:08:50,440 --> 00:08:53,272
Eu posso mudar o tamanho da fonte apenas
para ampliar a acessibilidade.

191
00:08:53,272 --> 00:08:56,830
Mas vamos agora fazer algo
um pouco mais interessante.

192
00:08:56,830 --> 00:08:59,760
>> Vou vai-- gritos, vamos
me voltar para o meu arquivo de texto.

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

194
00:09:02,400 --> 00:09:06,320
para mudar isso e dizer
"Olá, Disney World."

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

196
00:09:07,970 --> 00:09:10,919
E voltar para o meu
navegador e clique em Recarregar.

197
00:09:10,919 --> 00:09:12,710
E agora, é claro,
diz que "Disney World".

198
00:09:12,710 --> 00:09:15,500
E eu vou aumentar artificialmente
em apenas por isso é mais fácil de ver.

199
00:09:15,500 --> 00:09:19,012
Então, agora, infelizmente, eu meio que quero
a-- na verdade, isso é uma característica Mac.

200
00:09:19,012 --> 00:09:21,720
Eu quero clicar em Disney World
e ir em algum lugar como disney.com,

201
00:09:21,720 --> 00:09:23,290
mas isso não funciona.

202
00:09:23,290 --> 00:09:26,850
Assim, um princípio básico da web é
hiperlinks, links que ir para outro lugar.

203
00:09:26,850 --> 00:09:28,390
Então, como posso fazer isso?

204
00:09:28,390 --> 00:09:34,690
Bem, eu poderia apenas dizer,
"Olá, http://www.disney.com."

205
00:09:34,690 --> 00:09:36,110
Guarde isso.

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

207
00:09:37,620 --> 00:09:39,400
Mas isso também, não clicável.

208
00:09:39,400 --> 00:09:42,930
E o que é bom aqui, embora
Isto não é funcional ainda,

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

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

211
00:09:46,950 --> 00:09:50,110
Então, se eu apenas digitar uma URL como esta,
ele só vai me mostrar a URL.

212
00:09:50,110 --> 00:09:54,270
Eu preciso usar etiquetas ou marcação
linguagem para realmente dizer

213
00:09:54,270 --> 00:09:55,621
o navegador para fazer ainda mais.

214
00:09:55,621 --> 00:09:57,870
Então, eu estou indo para ir em frente e
eliminar este por um momento.

215
00:09:57,870 --> 00:10:00,980
E eu vou dizer, hey,
navegador, iniciar uma âncora aqui,

216
00:10:00,980 --> 00:10:02,650
uma ligação por assim dizer.

217
00:10:02,650 --> 00:10:07,500
E a hiper-referência, o destino
dessa âncora, deve ser esta URL.

218
00:10:07,500 --> 00:10:08,750
E observe minhas citações.

219
00:10:08,750 --> 00:10:11,590
Eu poderia usar aspas simples, também,
mas você tem que ser consistente,

220
00:10:11,590 --> 00:10:14,270
e eu geralmente apenas usar
aspas para mantê-lo simples.

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

222
00:10:16,820 --> 00:10:21,160
E então aqui eu vou
quer dizer, "Disney World".

223
00:10:21,160 --> 00:10:26,890
E agora eu preciso de alguma symmetry--
colchete de abertura, / a, fechou suporte.

224
00:10:26,890 --> 00:10:28,090
>> Então o que eu introduzido?

225
00:10:28,090 --> 00:10:30,100
Tivemos algumas tags já.

226
00:10:30,100 --> 00:10:32,410
HTML, cabeça, título, corpo
são todas as tags, por assim dizer,

227
00:10:32,410 --> 00:10:34,280
com os seus homólogos abertos e fechados.

228
00:10:34,280 --> 00:10:36,530
Mas aviso prévio, isto é uma espécie
de fundamentalmente diferente.

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

230
00:10:39,140 --> 00:10:41,451
E um atributo é
apenas um par de valores-chave.

231
00:10:41,451 --> 00:10:43,950
Isso é uma coisa comum em
computador science-- par chave-valor.

232
00:10:43,950 --> 00:10:45,770
É uma espécie de ferramenta de comércio.

233
00:10:45,770 --> 00:10:47,040
Uma chave e um valor.

234
00:10:47,040 --> 00:10:49,390
Uma palavra e então alguns
outra palavra ou palavras.

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

236
00:10:53,790 --> 00:10:57,890
E o que um atributo faz é
influencia o comportamento de uma etiqueta.

237
00:10:57,890 --> 00:11:01,010
E, neste caso, temos de influenciar
o comportamento da marca de âncora,

238
00:11:01,010 --> 00:11:04,140
porque precisamos ancorar
este link para algum lugar.

239
00:11:04,140 --> 00:11:06,960
E como você faz isso é
por meio do atributo.

240
00:11:06,960 --> 00:11:08,970
>> Então, eu estou indo para ir em frente
e salve o arquivo agora.

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

242
00:11:11,300 --> 00:11:14,580
E, voila, temos agora a
início de uma página da web legítimos.

243
00:11:14,580 --> 00:11:18,420
Super-simples, mas se eu passar o mouse sobre
aviso isto-- no canto inferior esquerdo,

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

245
00:11:19,830 --> 00:11:21,730
Mas você vê www.disney.com.

246
00:11:21,730 --> 00:11:27,076
E se eu clicar nele, na verdade, este
me leva longe para disney.com.

247
00:11:27,076 --> 00:11:29,380
Agora, a coisa curiosa
aqui é que ele não é

248
00:11:29,380 --> 00:11:33,940
o best-- o URL mais comercializável, mas
isso é bom, porque este arquivo não

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

250
00:11:35,360 --> 00:11:39,740
Ela existe como um arquivo local no aparentemente
Meus usuários directory-- / jharvard--

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

252
00:11:41,890 --> 00:11:42,634
Mas tem um URL.

253
00:11:42,634 --> 00:11:43,800
Ele só passa a ser local.

254
00:11:43,800 --> 00:11:47,050
Infelizmente, nenhum de vocês pode visitar
isso, porque se você digitar esta URL,

255
00:11:47,050 --> 00:11:49,980
você estaria dizendo a seu browser,
procure um arquivo chamado hello.html

256
00:11:49,980 --> 00:11:50,772
no seu disco rígido.

257
00:11:50,772 --> 00:11:53,271
E, claro, a menos que você tem
vindo a seguir ao longo manualmente,

258
00:11:53,271 --> 00:11:54,530
não vai existir lá.

259
00:11:54,530 --> 00:11:55,190
>> Então, isso é bom.

260
00:11:55,190 --> 00:11:57,815
Nós ainda precisamos de certa forma, em última instância,
para obter esse arquivo para a web,

261
00:11:57,815 --> 00:12:01,180
mas vamos desmembrar um par de
implicações de segurança que acabamos

262
00:12:01,180 --> 00:12:04,850
viu e amarrá-lo de volta para o início
discussão desta manhã.

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

264
00:12:08,200 --> 00:12:12,560
o que eu diga a ele para fazer, e parece
ser o caso de que uma marca de âncora é

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

266
00:12:17,380 --> 00:12:20,810
mas exibe esta
texto, isso pareceria

267
00:12:20,810 --> 00:12:26,520
implicar que eu poderia colocar a URL
em ambos os lugares e recoloque

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

269
00:12:29,100 --> 00:12:32,680
Observe, se eu passar o mouse sobre o canto inferior esquerdo,
Eu estou na verdade indo ainda disney.com.

270
00:12:32,680 --> 00:12:38,340
>> Então, se você já esteve
phished-- P-H-I-S-H-E-D--

271
00:12:38,340 --> 00:12:42,820
com um desses e-mails falsos
de como o PayPal seu banco,

272
00:12:42,820 --> 00:12:46,470
você provavelmente já conquistou ligações dentro
do e-mail que você está lendo que

273
00:12:46,470 --> 00:12:49,970
diz-lhe para clicar aqui para ir confirm
sua senha ou confirmar a sua data de nascimento

274
00:12:49,970 --> 00:12:53,840
ou social ou algo socialmente
engenharia que você divulgue

275
00:12:53,840 --> 00:12:54,920
em formação.

276
00:12:54,920 --> 00:12:57,625
Bem, eu poderia tipo de exame
vantagem deste, não poderia?

277
00:12:57,625 --> 00:13:01,240
Eu poderia dizer algo
como, www.paypal.com.

278
00:13:01,240 --> 00:13:11,340
E em vez de disney.com, I
poderia ir para, como, badguy.com.

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

280
00:13:12,850 --> 00:13:16,620
E como é que é fácil de enganar,
especialmente um leitor não-técnico

281
00:13:16,620 --> 00:13:20,649
ou superficialmente lendo
leitor do que para clicar

282
00:13:20,649 --> 00:13:23,940
um link como este, que se eu clicar ele--
Eu realmente não quero ir badguy.com.

283
00:13:23,940 --> 00:13:25,398
Eu não sei o que está realmente lá.

284
00:13:25,398 --> 00:13:30,080
Então paypal.com, aviso prévio, é
o que diz que vai,

285
00:13:30,080 --> 00:13:33,210
mas é claro que, se eu olhar para baixo
super-baixa, que é um pouco embaçada,

286
00:13:33,210 --> 00:13:34,230
mas ele diz que badguy.com.

287
00:13:34,230 --> 00:13:38,644
Essa é a única dizer agora
que eu estou indo para o lugar errado.

288
00:13:38,644 --> 00:13:41,560
E quando eu disse anteriormente que os bancos
realmente não deve incentivar ou treinar

289
00:13:41,560 --> 00:13:44,510
usuários em links clicando, este
é apenas uma manifestação disso.

290
00:13:44,510 --> 00:13:45,430
E é tão simples.

291
00:13:45,430 --> 00:13:48,120
Você agora um adversário se
você faz algo parecido com isto

292
00:13:48,120 --> 00:13:51,000
e tentar enganar um usuário
para visitar o seu site.

293
00:13:51,000 --> 00:13:53,320
Mas, por agora, vamos continuar
coisas agradável e limpo.

294
00:13:53,320 --> 00:13:55,640
Nós estamos indo para ir em frente
e retroceder estas mudanças.

295
00:13:55,640 --> 00:13:56,530
Recarregar a página.

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

297
00:13:57,740 --> 00:14:00,660
>> Vamos ver se não podemos provocar
este apart um pouco mais.

298
00:14:00,660 --> 00:14:04,160
Assim, "Olá, Disney World."

299
00:14:04,160 --> 00:14:05,950
Eu vou dizer aqui.

300
00:14:05,950 --> 00:14:08,220
Talvez eu vou fazer algum espaço.

301
00:14:08,220 --> 00:14:12,730
"Esperamos que aproveite sua estadia!"

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

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

304
00:14:15,850 --> 00:14:19,010
Não é rea-- isso não é
o que eu pretendia, certo?

305
00:14:19,010 --> 00:14:21,870
Quer dizer, se eu estou tratando meu texto
arquivo como um processador de texto,

306
00:14:21,870 --> 00:14:24,894
O que você esperava que iria acontecer aqui?

307
00:14:24,894 --> 00:14:27,060
Sim, eu sinto que há
deve ser uma quebra de linha aqui,

308
00:14:27,060 --> 00:14:28,799
por isso se sente carrinho de alguma forma.

309
00:14:28,799 --> 00:14:31,090
Mas isso é realmente deliberada,
porque assim como antes,

310
00:14:31,090 --> 00:14:33,381
o navegador só vai
fazer o que você diga a ele para fazer.

311
00:14:33,381 --> 00:14:34,806
Eu não disse a ele para quebrar linhas.

312
00:14:34,806 --> 00:14:37,930
Eu não lhe disse que ele se mova para baixo, mesmo
porém, intuitivamente, eu sinto que eu fiz.

313
00:14:37,930 --> 00:14:39,805
Então não é que precisamos
um pouco mais de marcação,

314
00:14:39,805 --> 00:14:41,390
e eu vou corrigir isso como se segue.

315
00:14:41,390 --> 00:14:46,160
Vou de prefaciar este primeiro Olá
com o que é chamado de tag de parágrafo.

316
00:14:46,160 --> 00:14:48,920
E então eu estou indo para ir em frente
e enrole esta outra sentença

317
00:14:48,920 --> 00:14:54,370
em outra tag de parágrafo, apesar de
eles são parágrafos super-curtos.

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

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

320
00:14:57,160 --> 00:14:59,070
E agora temos que
espaço, e nós tipo de

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

322
00:15:01,680 --> 00:15:05,290
>> Isso é tudo muito bem e bom, mas seria
ser bom para adicionar uma imagem para esta página,

323
00:15:05,290 --> 00:15:08,710
então eu estou indo para ir buscar
Mickey Mouse no Google Images.

324
00:15:08,710 --> 00:15:12,830
E só por diversão, eu sou
indo para agarrar esta imagem.

325
00:15:12,830 --> 00:15:15,350
Eu estou indo para ir em frente agora e
agarrar a URL desta imagem,

326
00:15:15,350 --> 00:15:16,510
embora não é diferente
maneiras de fazer isso.

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 voltar para o meu texto
arquivo, e eu vou dizer aqui,

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

330
00:15:31,160 --> 00:15:34,580
E, em seguida, a noção de um
imagem é um pouco diferente.

331
00:15:34,580 --> 00:15:38,640
Não há realmente nenhuma noção de partida
uma imagem e terminando uma imagem,

332
00:15:38,640 --> 00:15:40,630
como um tag de início uma tag final.

333
00:15:40,630 --> 00:15:43,840
Então, ele se sente um pouco estranho
me semanticamente para fazer isso,

334
00:15:43,840 --> 00:15:45,390
para ter uma tag close-imagem.

335
00:15:45,390 --> 00:15:46,780
Não é incorreto.

336
00:15:46,780 --> 00:15:48,840
É perfeitamente correto,
e é incentivado,

337
00:15:48,840 --> 00:15:50,870
mas não há notação abreviada.

338
00:15:50,870 --> 00:15:53,780
Eu posso tipo de simultaneamente
abrir e fechar a mesma tag,

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

340
00:15:55,510 --> 00:15:56,950
Por isso, é apenas um pouco
mais sucinto para que as coisas

341
00:15:56,950 --> 00:15:59,408
que, conceitualmente realmente não sei
fazer sentido para começar e terminar.

342
00:15:59,408 --> 00:16:01,190
Eles só estão lá, ou eles não são.

343
00:16:01,190 --> 00:16:06,020
>> Então eu vou para salvar este e voltar
ao meu "Olá, mundo" página e recarga.

344
00:16:06,020 --> 00:16:09,880
E é um pouco fora de controle,
porque a imagem é efectivamente

345
00:16:09,880 --> 00:16:12,210
um pouco grande, mas isso é OK.

346
00:16:12,210 --> 00:16:13,710
Eu poderia redimensioná-la em um programa.

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

348
00:16:14,900 --> 00:16:17,350
Apenas para demonstrar, eu sou
vai realmente dizer

349
00:16:17,350 --> 00:16:21,760
que a largura desta coisa deve
ser apenas 200 pixels, 200 pontos.

350
00:16:21,760 --> 00:16:24,360
Deixe-me ir em frente e salvar
e recarregar, e agora a página

351
00:16:24,360 --> 00:16:25,690
parece um pouco mais razoável.

352
00:16:25,690 --> 00:16:27,260
Mas observe o padrão.

353
00:16:27,260 --> 00:16:30,030
Bem, eu meio que lhe ensinou tudo
de HTML, em certo sentido, pelo menos,

354
00:16:30,030 --> 00:16:33,531
conceitualmente, porque todo HTML é é
estes tags-- etiquetas abertos, fechados 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, aparentemente, cada
tag pode ter zero ou um

357
00:16:38,380 --> 00:16:43,005
ou dois ou mais atributos, cada um de
que faz algo um pouco diferente.

358
00:16:43,005 --> 00:16:44,380
Agora, como você sabe o que existe?

359
00:16:44,380 --> 00:16:46,800
Você acabou de ouvir alguém
como eu lhe dizer o que existe,

360
00:16:46,800 --> 00:16:50,860
ou você simplesmente Google em torno de um tutorial
em HTML, e é realmente tão simples.

361
00:16:50,860 --> 00:16:54,030
>> Na verdade, quando eu era estudante
anos e aprendi HTML,

362
00:16:54,030 --> 00:16:56,530
uma das minhas aulas de matemática
assistentes apenas passado

363
00:16:56,530 --> 00:16:59,600
um pouco de tempo me tutoria
para como meia hora, uma hora,

364
00:16:59,600 --> 00:17:00,660
e então eu estava no meu caminho.

365
00:17:00,660 --> 00:17:03,300
Eu estava no meu caminho para fazer
os sites mais hediondos de todos os tempos,

366
00:17:03,300 --> 00:17:05,549
que, aparentemente, não têm
realmente progredido além.

367
00:17:05,549 --> 00:17:09,849
Mas o ponto é que, uma vez que você
compreender estas simples ideas--

368
00:17:09,849 --> 00:17:13,450
se arcano texto-- mas estes simples
ideias de começar um pensamento

369
00:17:13,450 --> 00:17:15,960
e fechando um pensamento, mantendo
tudo bem equilibrado,

370
00:17:15,960 --> 00:17:19,150
olhando algo acima, modificar o
comportamento dessa tag, isso é realmente tudo

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

372
00:17:20,079 --> 00:17:28,140
E, de fato, se vamos agora
algo como google.com-- na verdade,

373
00:17:28,140 --> 00:17:31,920
vamos um lugar um pouco mais
reasonable-- stanford.edu.

374
00:17:31,920 --> 00:17:37,800
E eu estou indo para ir para Ver,
Desenvolvedor, Vista Fonte.

375
00:17:37,800 --> 00:17:41,400
É feio, mas notice--
e eu vou fazer zoom aviso

376
00:17:41,400 --> 00:17:43,432
algumas coisas que já é familiar.

377
00:17:43,432 --> 00:17:45,140
Há este aqui em cima,
que é um navegador.

378
00:17:45,140 --> 00:17:46,800
Aí vem HTML5.

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

380
00:17:47,634 --> 00:17:49,550
Aparentemente, há uma
atributo que eu não fiz

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

382
00:17:51,540 --> 00:17:54,380
e isso pode ajudar com automática
tradução e coisas assim.

383
00:17:54,380 --> 00:17:55,546
Aqui está a cabeça da página.

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

385
00:17:57,790 --> 00:17:59,832
Há um tag eu não fiz
falar sobre yet-- tag Meta.

386
00:17:59,832 --> 00:18:01,540
É apenas uma espécie de
informação de fundo.

387
00:18:01,540 --> 00:18:04,210
Ela contribui com SEO, ou
otimização de motor de busca,

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

389
00:18:06,320 --> 00:18:09,029
Mas se ficarmos olhando, mantenha
procurando, aqui está a tag do corpo.

390
00:18:09,029 --> 00:18:11,570
E não há cachos de outra
etiquetas que não falamos sobre isso ainda.

391
00:18:11,570 --> 00:18:13,750
Mas é uma Div para uma
divisão da página.

392
00:18:13,750 --> 00:18:16,680
É como um retângulo invisível
se você meio que quero mentalmente

393
00:18:16,680 --> 00:18:20,160
dividir sua página em
diferentes unidades on-line.

394
00:18:20,160 --> 00:18:22,650
E, em seguida, lotes de divs I
ver, algo chamado de classe,

395
00:18:22,650 --> 00:18:24,440
mas vamos voltar a isso.

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

397
00:18:26,200 --> 00:18:27,730
Os formulários estão por toda a web.

398
00:18:27,730 --> 00:18:30,310
Qualquer caixa de pesquisa que você está
já usou é uma forma.

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

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

401
00:18:32,790 --> 00:18:33,910
Açao.

402
00:18:33,910 --> 00:18:37,660
A ação desta forma, por qualquer
razões 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 solicitações HTTP pode usar
o verbo "ficar", 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 diferença
isso em um momento.

407
00:18:47,030 --> 00:18:48,363
Vamos ver realmente o que é isso.

408
00:18:48,363 --> 00:18:49,830
Deixe-me voltar à página de Stanford.

409
00:18:49,830 --> 00:18:53,330
Que forma eles estão falando
sobre, que você acha?

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

411
00:18:54,485 --> 00:18:54,970
>> AUDIÊNCIA: Caixa de Pesquisa.

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

413
00:18:55,845 --> 00:18:58,410
Assim, se no canto superior direito
aqui é esta caixa de pesquisa.

414
00:18:58,410 --> 00:19:02,441
E é assim que eles implementaram ele-- um
tag que é, literalmente, forma-bracket aberto.

415
00:19:02,441 --> 00:19:03,940
E então vamos procurar alguma coisa.

416
00:19:03,940 --> 00:19:09,220
Vamos procurar um amigo
de mine-- "Nick Parlante."

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

418
00:19:11,380 --> 00:19:13,750
E, claro, ele foi para
um URL ligeiramente diferente.

419
00:19:13,750 --> 00:19:15,140
Deixe-me voltar aqui.

420
00:19:15,140 --> 00:19:18,960
Vamos procurar por "cursos".

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

422
00:19:19,460 --> 00:19:20,484
Fui para uma URL diferente.

423
00:19:20,484 --> 00:19:23,400
Então, Stanford da adição de um pouco de magia
que eles não estão me levando para o URL

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

425
00:19:25,820 --> 00:19:32,480
Mas esta forma aqui é implementado puramente
por meio desta marcação aqui, essas tags.

426
00:19:32,480 --> 00:19:35,710
Na verdade, aqui está a entrada para
o tipo de pesquisa que você deseja.

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

428
00:19:38,940 --> 00:19:41,960
Aqui é a entrada para a própria corda.

429
00:19:41,960 --> 00:19:45,394
E assim, o objetivo não é para embrulhar
nossas mentes em torno de todas estas tags

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

431
00:19:46,060 --> 00:19:48,300
É só abrir e fechar
tags e olhando as coisas.

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

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

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

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

436
00:19:51,925 --> 00:19:53,550
DAVID J. MALAN: Essa é uma boa pergunta.

437
00:19:53,550 --> 00:19:54,660
Isso é um pouco mais complicado de ver.

438
00:19:54,660 --> 00:19:56,300
Deixe-me voltar a isso
pergunta em apenas alguns minutos

439
00:19:56,300 --> 00:19:59,000
quando olhamos para algo chamado
folhas de CSS, ou de estilo em cascata,

440
00:19:59,000 --> 00:20:02,500
e podemos tentar inferir
tanto a partir da página.

441
00:20:02,500 --> 00:20:08,090
Então, se nós agora dar uma olhada em google.com,
vamos ver o que a sua página parece.

442
00:20:08,090 --> 00:20:09,840
Você teria they're-- que é bonito hoje.

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

444
00:20:12,490 --> 00:20:12,990
ESTÁ BEM.

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

446
00:20:13,690 --> 00:20:15,260
Tudo bem, então View Source.

447
00:20:15,260 --> 00:20:19,590
Você poderia pensar que o Google tem
código-fonte muito bom.

448
00:20:19,590 --> 00:20:24,970
Então, aparentemente, o que está acontecendo aqui?

449
00:20:24,970 --> 00:20:27,880
E, na verdade, isso não é nem HTML.

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

451
00:20:30,930 --> 00:20:32,344
E vamos continuar indo e indo.

452
00:20:32,344 --> 00:20:34,010
Eu não sei mesmo onde a página começa.

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

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

455
00:20:38,200 --> 00:20:44,150
Eu encontrei o início da página, e
há tanta coisa aqui.

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

457
00:20:45,310 --> 00:20:47,460
Bem, você sabe o quê,
podemos limpar isso.

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

459
00:20:52,109 --> 00:20:54,150
e não vão para a rede,
onde esperamos que continue hoje,

460
00:20:54,150 --> 00:20:56,420
mas se eu for para Elements,
o que é muito bom

461
00:20:56,420 --> 00:20:59,990
que é um navegador tem um monte
muito melhores olhos do que eu.

462
00:20:59,990 --> 00:21:02,670
E o navegador pode ler
essa confusão de uma página web,

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

464
00:21:04,700 --> 00:21:08,340
analisá-lo ou ler e
analisá-lo e reformatá-lo

465
00:21:08,340 --> 00:21:09,910
de uma forma amigável-humano agradável.

466
00:21:09,910 --> 00:21:11,740
Então o que estou vendo agora
nesta tela aqui

467
00:21:11,740 --> 00:21:15,470
em Elementos, exatamente o mesmo conteúdo,
mas eles recuado tudo,

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

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

470
00:21:19,620 --> 00:21:23,630
>> E o que é bom agora é que eu posso ver
no corpo, por aviso instance--,

471
00:21:23,630 --> 00:21:26,480
a página ainda é composta
de apenas uma cabeça e um corpo,

472
00:21:26,480 --> 00:21:28,660
e eu posso hierarquicamente mergulhar aqui.

473
00:21:28,660 --> 00:21:32,420
Observe que o Google parece ter
para divs-- este e este.

474
00:21:32,420 --> 00:21:33,310
Posso expandir isso.

475
00:21:33,310 --> 00:21:35,370
Há um monte de outros divs.

476
00:21:35,370 --> 00:21:36,900
Portanto, é um pouco complexo.

477
00:21:36,900 --> 00:21:37,400
Mas espere.

478
00:21:37,400 --> 00:21:40,970
Isto parece muito mais
legível, relativamente, do que este.

479
00:21:40,970 --> 00:21:43,840
Por que o Google embaraçoso
por si apenas o envio

480
00:21:43,840 --> 00:21:50,400
esta enorme confusão de código de algum
tipo apenas para implementar algo

481
00:21:50,400 --> 00:21:53,640
que parece tão simples à primeira vista?

482
00:21:53,640 --> 00:21:55,270
Como, por que eles não adicionar mais espaços?

483
00:21:55,270 --> 00:21:56,811
Por que eles não pressione Enter como eu fiz?

484
00:21:56,811 --> 00:21:59,110
Olha como eu era
em escrever uma página web.

485
00:21:59,110 --> 00:22:00,680
I pressione Enter tão diligentemente.

486
00:22:00,680 --> 00:22:03,760
I recuado, então tudo
é tão bonita e legível.

487
00:22:03,760 --> 00:22:08,463
Por que o Google não praticar o mesmo?

488
00:22:08,463 --> 00:22:11,409
>> AUDIÊNCIA: [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
Muito justo.

492
00:22:14,270 --> 00:22:16,650
Eles não têm alguns
pessoa no Google manualmente

493
00:22:16,650 --> 00:22:18,160
atualizar mais a home page.

494
00:22:18,160 --> 00:22:20,010
Não é 1.999 mais.

495
00:22:20,010 --> 00:22:21,140
Então eles têm software.

496
00:22:21,140 --> 00:22:25,397
Eles têm outras ferramentas que
gerar dinamicamente eles são HTML.

497
00:22:25,397 --> 00:22:27,480
É claro, que o próprio código
foi escrita por seres humanos,

498
00:22:27,480 --> 00:22:30,220
mas a realidade é,
é bastante justo dizer,

499
00:22:30,220 --> 00:22:33,340
o navegador certamente não faz
importo o quão confuso o código é.

500
00:22:33,340 --> 00:22:35,940
Mas há uma ainda mais
razão técnica convincente

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

502
00:22:42,580 --> 00:22:48,350
esmagadora forma, todos embalados em conjunto
com muito pouco way-- muito pouco

503
00:22:48,350 --> 00:22:51,274
na maneira de formatação, como eu fiz.

504
00:22:51,274 --> 00:22:52,570
>> AUDIÊNCIA: [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 quê?

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

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

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

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

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

512
00:23:00,522 --> 00:23:02,230
DAVID J. MALAN: Não há
não há espaço para ler.

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

514
00:23:02,730 --> 00:23:04,560
Então, pense sobre o que um espaço é.

515
00:23:04,560 --> 00:23:08,394
Assim, cada caractere no teclado leva
uma certa quantidade de espaço para representar,

516
00:23:08,394 --> 00:23:10,560
tanto fisicamente, como ele
ocupa muito espaço,

517
00:23:10,560 --> 00:23:13,250
ou de alguma forma por baixo do
capô, que requer memória.

518
00:23:13,250 --> 00:23:15,740
E como um aside-- e nós vamos
falar mais sobre este tomorrow--

519
00:23:15,740 --> 00:23:19,930
cada personagem no teclado
normalmente requer de 8 bits, ou um byte.

520
00:23:19,930 --> 00:23:23,360
Então, um padrão de 8 zeros ou
queridos, ou apenas 1 byte, como nós

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

522
00:23:24,720 --> 00:23:27,690
Então, isso é pequeno, mas
ainda é diferente de zero.

523
00:23:27,690 --> 00:23:29,940
É ainda uma certa quantidade de espaço.

524
00:23:29,940 --> 00:23:36,082
Portanto, se um engenheiro ou Google bate
a barra de espaço uma vez só, e suponha

525
00:23:36,082 --> 00:23:38,540
Google-- é super-popular--
Suponha que um bilhão de pessoas

526
00:23:38,540 --> 00:23:40,780
visite sua home page por dia,
ou algum número de pessoas

527
00:23:40,780 --> 00:23:43,290
visite a página inicial de um
bilhões de vezes por dia,

528
00:23:43,290 --> 00:23:48,890
quantos bytes adicionais que possui
engenheiro de software apenas o custo Google

529
00:23:48,890 --> 00:23:51,310
por bater sua barra de espaço uma vez?

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

531
00:23:52,692 --> 00:23:54,150
DAVID J. MALAN: Não é tão ruim assim.

532
00:23:54,150 --> 00:23:57,070
Apenas um byte vezes um bilhão.

533
00:23:57,070 --> 00:23:57,871
Então um--

534
00:23:57,871 --> 00:23:59,120
AUDIÊNCIA: 8 bilhões de gigabytes.

535
00:23:59,120 --> 00:24:00,370
DAVID J. MALAN: Não 8 bilhões.

536
00:24:00,370 --> 00:24:01,240
8 bilhões de bytes.

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

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

539
00:24:04,080 --> 00:24:08,240
Se ele ou ela faz dois
espaços, 2 gigabytes.

540
00:24:08,240 --> 00:24:09,030
Três gigabytes.

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

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

543
00:24:11,860 --> 00:24:16,150
E assim, em casos como o Google,
que, concedido, são casos extremos,

544
00:24:16,150 --> 00:24:21,450
há outras questões que surgem apenas
tomando decisões muito razoáveis

545
00:24:21,450 --> 00:24:25,744
ou tomar ações humanas muito simples,
porque ele tem esse efeito ampliado.

546
00:24:25,744 --> 00:24:27,660
Portanto, uma das razões
isso parece tão compactado

547
00:24:27,660 --> 00:24:30,660
é exatamente como Victoria disse- era
apenas gerados por computadores de qualquer maneira.

548
00:24:30,660 --> 00:24:31,900
Então, não é grande coisa.

549
00:24:31,900 --> 00:24:33,309
Deixe o navegador descobrir isso.

550
00:24:33,309 --> 00:24:35,350
Mas também deliberadamente
não tem muito espaço,

551
00:24:35,350 --> 00:24:36,766
porque o espaço não é necessário.

552
00:24:36,766 --> 00:24:38,250
E o espaço realmente custa dinheiro.

553
00:24:38,250 --> 00:24:40,670
>> Isso quer custa tempo,
porque apenas a empurrar

554
00:24:40,670 --> 00:24:44,670
que muito mais dados em cada
A sede da google.com apenas

555
00:24:44,670 --> 00:24:47,710
tem que tomar alguma quantidade de
tempo, mesmo que seja milissegundos

556
00:24:47,710 --> 00:24:51,190
ou microssegundos, mas que acrescenta-se
ao longo de tantos usuários, ou, mais provavelmente,

557
00:24:51,190 --> 00:24:52,270
ele provavelmente custa dinheiro.

558
00:24:52,270 --> 00:24:54,690
Google provavelmente conecta a
outra pessoa no mundo, um

559
00:24:54,690 --> 00:24:56,398
daqueles que perscruta
pontos, e se tiverem

560
00:24:56,398 --> 00:24:59,880
algum tipo de relação financeira
segundo o qual os custos de seus dados dinheiro,

561
00:24:59,880 --> 00:25:01,730
Eles poderiam muito bem
minimizar a quantidade de dados

562
00:25:01,730 --> 00:25:04,530
eles estão cuspindo em
sua conexão com a internet.

563
00:25:04,530 --> 00:25:07,630
>> Então, a coisa engraçada, embora, em última análise,
ou talvez a coisa reconfortante,

564
00:25:07,630 --> 00:25:11,030
é que mesmo que isso parece terrivelmente
esmagadora, no final do dia,

565
00:25:11,030 --> 00:25:16,750
ainda é exatamente os mesmos princípios que
Nesta página muito simples aqui de um HTML

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

567
00:25:17,390 --> 00:25:20,610
Então, só para resumir e para que você
tem uma versão canônica se você não fosse

568
00:25:20,610 --> 00:25:25,900
acompanhando pela escolha aqui, aqui
pode ser o mais simples de páginas web,

569
00:25:25,900 --> 00:25:28,240
por isso algo para brincar talvez mais tarde.

570
00:25:28,240 --> 00:25:30,790
>> Bem, vamos introduzir uma
par de outras idéias agora.

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

572
00:25:33,420 --> 00:25:38,110
Nós podemos estilizar desta página
de maneiras mais interessantes.

573
00:25:38,110 --> 00:25:40,860
Assim, enquanto e-mail HTML
é tudo sobre a marcação de

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

575
00:25:44,470 --> 00:25:48,110
onde colocá-lo, CSS, ou
folhas de estilo em cascata,

576
00:25:48,110 --> 00:25:52,640
é uma segunda língua que
geralmente se misturarem com HTML

577
00:25:52,640 --> 00:25:55,670
como vamos see-- mas podemos limpar
que numa moment-- que leva

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

579
00:25:59,850 --> 00:26:02,460
Ela recebe as cores apenas para a direita,
o tamanhos de letra apenas para a direita,

580
00:26:02,460 --> 00:26:03,860
o posicionamento apenas para a direita.

581
00:26:03,860 --> 00:26:06,510
É tudo sobre a estética
ou formatação, e não sobre

582
00:26:06,510 --> 00:26:08,330
os dados em si fundamental.

583
00:26:08,330 --> 00:26:11,390
E a maneira mais fácil de mostrar
este é talvez o exemplo.

584
00:26:11,390 --> 00:26:15,320
Então eu vou passar por cima
para o meu arquivo de texto simples.

585
00:26:15,320 --> 00:26:17,970
E em apenas um momento, eu vou
pé-nos através do processo

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

587
00:26:19,360 --> 00:26:23,310
>> Vou voltar para o meu arquivo
aqui e recarregar a página apenas

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

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

590
00:26:27,190 --> 00:26:31,170
Eu sinto que as crianças se aproveitar
ter um pouco de cor a esta página web.

591
00:26:31,170 --> 00:26:34,480
Então, eu estou indo para ir aqui
na cabeça da página.

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

593
00:26:38,130 --> 00:26:44,060
E, em seguida, dentro deste, eu vou
para dizer o corpo do meu página--

594
00:26:44,060 --> 00:26:46,870
e essa formatação é, pelo
primeira vista, talvez um pouco

595
00:26:46,870 --> 00:26:49,400
estranho, mas convencional.

596
00:26:49,400 --> 00:26:55,010
Eu vou dizer que o fundo
cor desta página deve ser verde.

597
00:26:55,010 --> 00:26:57,960
E esta é, infelizmente,
tipo de não o melhor design.

598
00:26:57,960 --> 00:27:00,710
Note-se que anteriormente
no mundo do HTML,

599
00:27:00,710 --> 00:27:03,190
Eu disse que os atributos
são esses pares chave-valor.

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

601
00:27:05,760 --> 00:27:08,810
No mundo dos CSS, que estava
desenhado por algumas pessoas diferentes,

602
00:27:08,810 --> 00:27:11,020
eles decidiram que, na sua
mundo, pares chave-valor

603
00:27:11,020 --> 00:27:13,920
Seria palavra cólon alguma coisa.

604
00:27:13,920 --> 00:27:15,220
Então é a mesma idéia, embora.

605
00:27:15,220 --> 00:27:18,620
É associando um valor
com alguma chave que de alguma maneira

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

607
00:27:20,330 --> 00:27:21,901
>> E você provavelmente pode adivinhar.

608
00:27:21,901 --> 00:27:24,150
O que é isso, provavelmente, vai
para se fazer se você nunca

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

610
00:27:27,867 --> 00:27:29,450
AUDIÊNCIA: Alterar a cor de fundo.

611
00:27:29,450 --> 00:27:30,560
DAVID J. MALAN: Sim,
mudar a cor do fundo.

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

613
00:27:33,280 --> 00:27:36,290
Mas desde que o
corpo por agora é a web

614
00:27:36,290 --> 00:27:38,870
página-- é a única coisa
abaixo do realmente-- barra de título

615
00:27:38,870 --> 00:27:40,870
ele provavelmente vai
influenciar a mesma coisa.

616
00:27:40,870 --> 00:27:41,430
Então vamos ver.

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

618
00:27:42,490 --> 00:27:44,310
Vá aqui e recarregar.

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

620
00:27:46,140 --> 00:27:48,070
E o que está acontecendo
aqui é um efeito colateral.

621
00:27:48,070 --> 00:27:49,850
Eu só escolheu esta imagem aleatoriamente.

622
00:27:49,850 --> 00:27:53,305
Porque é que o não é verde
permeando atrás de Mickey?

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

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

625
00:27:56,880 --> 00:27:57,880
DAVID J. MALAN: Exatamente.

626
00:27:57,880 --> 00:28:01,750
Acontece que as imagens, muito
muito todas as imagens para que possamos usar,

627
00:28:01,750 --> 00:28:03,670
são todos rectangles-- de retângulos.

628
00:28:03,670 --> 00:28:07,710
Mesmo se tem algumas curvas Mickey
a si mesmo e tem um fundo,

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

630
00:28:09,330 --> 00:28:10,280
Tem que ser branco.

631
00:28:10,280 --> 00:28:11,910
Tem que ser preto ou outra coisa.

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

633
00:28:13,650 --> 00:28:16,100
E, na verdade, eu poderia
abrir Mickey Mouse aqui

634
00:28:16,100 --> 00:28:18,590
em um programa chamado Photoshop
ou algo semelhante

635
00:28:18,590 --> 00:28:21,176
e mudar tudo isso branca
fundo para transparente,

636
00:28:21,176 --> 00:28:22,550
de modo que o verde iria brilhar.

637
00:28:22,550 --> 00:28:25,980
Mas isso é algo que eu preciso
para perguntar de mim mesmo ou um artista gráfico

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

639
00:28:28,130 --> 00:28:31,490
de fazer, especialmente desde que eu apenas
emprestado esta da internet.

640
00:28:31,490 --> 00:28:33,030
Mas isso é porque isso está acontecendo.

641
00:28:33,030 --> 00:28:34,980
>> Então, o que mais poderia queremos fazer?

642
00:28:34,980 --> 00:28:41,040
Bem, nós pode querer dizer que
realmente espero que você aproveite a sua estadia.

643
00:28:41,040 --> 00:28:44,150
E para dar ênfase, eu quero
para fazer este forte,

644
00:28:44,150 --> 00:28:48,310
e assim eu vou dizer aberta forte e
fechar forte e, em seguida, recarregar.

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

646
00:28:50,320 --> 00:28:53,250
mas talvez realmente agora
salta em você um pouco mais.

647
00:28:53,250 --> 00:28:56,180
Então você pode adicionar itálico neste
forma, virados para o negrito desta forma.

648
00:28:56,180 --> 00:28:57,500
Nós poderíamos mudar as cores.

649
00:28:57,500 --> 00:29:01,610
Na verdade, apenas por diversão, eu sou
indo para ir em frente e fazer isso.

650
00:29:01,610 --> 00:29:05,120
Eu realmente não gosto de como meu
parágrafos são tão perto juntos,

651
00:29:05,120 --> 00:29:06,870
assim que eu poderia fazer algo assim.

652
00:29:06,870 --> 00:29:13,310
Vou dizer ao navegador,
mudar a cada tag de parágrafo para ter,

653
00:29:13,310 --> 00:29:16,952
vamos dizer-- na verdade, você sabe o quê,
vamos alinhar text-align, centro.

654
00:29:16,952 --> 00:29:19,410
E mais uma vez, eu sei que isso só
porque alguém ensinou-me isso

655
00:29:19,410 --> 00:29:21,118
ou eu olhei para cima no
uma referência online.

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

657
00:29:22,450 --> 00:29:25,070
E, ah, agora eu tenho
centrada a imagem lá.

658
00:29:25,070 --> 00:29:28,490
E, na verdade, você sabe o que, se
Eu movo minha imagem em um parágrafo

659
00:29:28,490 --> 00:29:34,510
tag-- então um terceiro parágrafo,
embora não do texto.

660
00:29:34,510 --> 00:29:36,917
Vamos guardar isso e recarregar.

661
00:29:36,917 --> 00:29:40,000
Agora, a página está começando a parecer tipo
de-- Quero dizer, ele é ainda muito feio,

662
00:29:40,000 --> 00:29:43,180
mas pelo menos parece que passei
dois minutos em vez de um minuto

663
00:29:43,180 --> 00:29:43,950
fazendo isso.

664
00:29:43,950 --> 00:29:47,200
>> E assim, de forma incremental, podemos fazer
essas mudanças estéticas agora para a página?

665
00:29:47,200 --> 00:29:50,860
Eu não tenho realmente mudado os dados no
página que não seja adicionando a palavra de verdade.

666
00:29:50,860 --> 00:29:52,650
Eu adicionei metadados, se você quiser.

667
00:29:52,650 --> 00:29:54,830
Hey, browser, fazer o
palavra "realmente" negrito.

668
00:29:54,830 --> 00:29:56,940
Mas os dados não é forte.

669
00:29:56,940 --> 00:29:57,830
Isso é metadados.

670
00:29:57,830 --> 00:29:59,410
Os dados são "realmente".

671
00:29:59,410 --> 00:30:02,200
Portanto, ainda temos alguns dos
os mesmos conceitos como antes.

672
00:30:02,200 --> 00:30:05,990
Agora, é claro, isso não está na web,
então eu vou fazer um passo final aqui.

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

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

675
00:30:12,285 --> 00:30:13,910
Vou levá-lo através de apenas um momento.

676
00:30:13,910 --> 00:30:17,080
E as probabilidades são em breve você vai ser, se
não o fez, em uma tela como esta.

677
00:30:17,080 --> 00:30:21,080
E deixe-me apenas dar-lhe uma rápida
excursão do que Cloud9 realmente é.

678
00:30:21,080 --> 00:30:26,590
Então, novamente Cloud 9 é
este serviço baseado em nuvem

679
00:30:26,590 --> 00:30:30,580
que lhe dá e me a ilusão
de ter a nossa própria máquina virtual

680
00:30:30,580 --> 00:30:33,090
na nuvem, tecnicamente
um recipiente na nuvem,

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

682
00:30:35,160 --> 00:30:37,130
Assim, em teoria, ninguém
outra parte do mundo tem

683
00:30:37,130 --> 00:30:39,152
Acesso à tela que eu sou
olhando agora,

684
00:30:39,152 --> 00:30:40,860
exceto talvez as pessoas
que gerir o site,

685
00:30:40,860 --> 00:30:43,470
porque tecnicamente eles têm
acesso físico e assim por diante.

686
00:30:43,470 --> 00:30:44,740
>> Então, o que vemos neste ambiente?

687
00:30:44,740 --> 00:30:46,230
Vou diminuir o zoom,
porque é um pouco pequeno.

688
00:30:46,230 --> 00:30:48,104
E deixe-me salientar mais
aqui por apenas um momento.

689
00:30:48,104 --> 00:30:53,210
No lado esquerdo do meu e seu
tela, há um navegador de arquivos à esquerda.

690
00:30:53,210 --> 00:30:55,362
Então semelhante em espírito
para Mac OS e Windows.

691
00:30:55,362 --> 00:30:57,070
Estes são todos do
arquivos em minha conta.

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

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

694
00:31:05,090 --> 00:31:07,950
Por aqui, à direita, este é
onde meus arquivos de texto estão a ir.

695
00:31:07,950 --> 00:31:11,620
Se você já usou o Microsoft
Word ou o Bloco de Notas ou TextEdit,

696
00:31:11,620 --> 00:31:14,100
esta é a palavra minha edição
de arquivos está a ir.

697
00:31:14,100 --> 00:31:16,540
E então o mais arcano
característica deste ambiente

698
00:31:16,540 --> 00:31:20,100
que não vamos realmente precisa usar é
aqui chamado de uma janela de terminal.

699
00:31:20,100 --> 00:31:23,390
Se você já usou DOS de
passado, 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
É um interface-- baseado em texto
há cliques do mouse, sem arrastamento.

702
00:31:28,190 --> 00:31:30,770
Tudo que você pode fazer é digitar
comandos, mas esses comandos

703
00:31:30,770 --> 00:31:34,400
pode criar arquivos, mover arquivos, aberta
anuários, de anuários próximos,

704
00:31:34,400 --> 00:31:35,740
fazer qualquer número de coisas.

705
00:31:35,740 --> 00:31:38,060
Mas, por enquanto, vamos apenas
gastar o nosso tempo aqui em cima.

706
00:31:38,060 --> 00:31:39,050
>> E assim vamos fazer isso.

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

708
00:31:41,008 --> 00:31:45,900
se você criou um espaço de trabalho
já, vá em frente e apenas ir para cima

709
00:31:45,900 --> 00:31:48,690
em File, New por um momento.

710
00:31:48,690 --> 00:31:51,740
E isso vai lhe dar um novo
tab aqui mesmo no meio.

711
00:31:51,740 --> 00:31:54,250
E eu só-- e vamos
vá em frente e fazer isso.

712
00:31:54,250 --> 00:31:59,910
Vamos em frente e agora não File, Save
e vá em frente e chamá-lo hello.html,

713
00:31:59,910 --> 00:32:02,740
não deve ser confundido com
HelloWorld.html, onde

714
00:32:02,740 --> 00:32:06,910
veio com a sua nova conta gratuita,
que é apenas um exemplo de arquivo.

715
00:32:06,910 --> 00:32:11,020
Você vai vê-lo aparecer de repente,
mais provável no lado da mão esquerda,

716
00:32:11,020 --> 00:32:12,810
ea guia ainda será aberto.

717
00:32:12,810 --> 00:32:21,300
E deixe-me encorajá-lo a recriar
este arquivo ou algumas variantes do mesmo.

718
00:32:21,300 --> 00:32:24,607
E se você não consegue vê-lo no
tela, esta é idêntica para os slides

719
00:32:24,607 --> 00:32:26,190
que você provavelmente tem em outra guia.

720
00:32:26,190 --> 00:32:29,296
>> Assim, em breve, fazer a sua primeira página web,
salvá-lo e, em seguida, em apenas um momento,

721
00:32:29,296 --> 00:32:31,170
Eu vou te mostrar como você
pode realmente ver isso.

722
00:32:31,170 --> 00:32:32,970
Mas mudar pelo menos uma coisa.

723
00:32:32,970 --> 00:32:35,400
Alterar helloworld para
algo de sua própria escolha,

724
00:32:35,400 --> 00:32:39,821
de modo que você está convencido de que é a sua
arquivo e não o que eu acabou de criar.

725
00:32:39,821 --> 00:32:40,320
Tudo certo.

726
00:32:40,320 --> 00:32:43,804
E quando você está ready-- não
rush-- quando estiver pronto,

727
00:32:43,804 --> 00:32:46,220
vá em frente e salvar o arquivo
uma vez que você fez essas alterações.

728
00:32:46,220 --> 00:32:49,540
E se você clicar no
botão para cima correr superior, este

729
00:32:49,540 --> 00:32:53,610
deve abrir uma nova aba que vai dizer
o que URL que você pode visitar o seu arquivo em,

730
00:32:53,610 --> 00:32:56,380
mas pode ter um momento para
entre aspas "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
Portanto, tenha cuidado para fazer exatamente
o que está no arquivo, em última instância.

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

734
00:33:04,610 --> 00:33:07,780
Se eu começar a digitar
-Colchete de abertura HTML, o aviso prévio

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

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

737
00:33:13,750 --> 00:33:17,190
Mas a expectativa é então eu vou bater
Enter, e depois passar lá dentro

738
00:33:17,190 --> 00:33:21,180
e não a cabeça dentro e
então eu faço corpo dentro.

739
00:33:21,180 --> 00:33:24,430
E é um pouco estranho no início,
porque ele está fazendo o trabalho para você,

740
00:33:24,430 --> 00:33:27,110
mas perceber que, em última instância
você economiza teclas.

741
00:33:27,110 --> 00:33:30,500
E, de fato, uma característica muito comum de
programação ambientes nos dias de hoje

742
00:33:30,500 --> 00:33:33,260
tanto para o desenvolvimento da web como
isso e programação real,

743
00:33:33,260 --> 00:33:36,960
que falaremos amanhã,
São estas características de auto-completar,

744
00:33:36,960 --> 00:33:39,710
coisas que só permitem que um
programador ou um designer

745
00:33:39,710 --> 00:33:42,010
para digitar menos teclas para
realizar a mesma coisa.

746
00:33:42,010 --> 00:33:43,176
Às vezes é bom, no entanto.

747
00:33:43,176 --> 00:33:44,560
Às vezes é apenas irritante.

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

749
00:33:49,290 --> 00:33:54,010
E, novamente, uma vez que você transcrito
a corrediça ou uma sua variante,

750
00:33:54,010 --> 00:33:57,360
você pode clicar no botão Executar em cima.

751
00:33:57,360 --> 00:33:59,910
E, em seguida, na parte inferior
janela, você será informado

752
00:33:59,910 --> 00:34:04,290
em que URL você pode visitar sua página web.

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

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

755
00:34:11,480 --> 00:34:14,580
Tudo bem, então, deixe-me-- alguma dúvida?

756
00:34:14,580 --> 00:34:19,460
Quaisquer outras perguntas sobre apenas começando
este trabalho antes de adicionar recursos?

757
00:34:19,460 --> 00:34:21,692
E deixe-me propor, apenas
para obter as pessoas comfortable--

758
00:34:21,692 --> 00:34:24,400
porque é uma coisa a apenas
copy-paste cegamente o que eu fiz.

759
00:34:24,400 --> 00:34:27,177
Mas só para que as pessoas lutam
com pelo menos um de afazeres,

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

761
00:34:28,510 --> 00:34:32,630
Vou propor uma lista de
coisas que você pode potencialmente adicionar.

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

763
00:34:34,086 --> 00:34:36,210
E por que nós não apenas
propor que você tenta resolver

764
00:34:36,210 --> 00:34:38,710
pelo menos, um problema particular aqui.

765
00:34:38,710 --> 00:34:45,090
Portanto, em termos de marcas,
deixe-me reutilizar este aqui.

766
00:34:45,090 --> 00:34:48,280
>> Na verdade, deixe-me colocar
-lo em uma forma textual.

767
00:34:48,280 --> 00:35:02,380
Vamos dizer que, entre as tags Poderíamos
usar aqui estão algumas tags aqui.

768
00:35:02,380 --> 00:35:06,090
Nós vimos a marca de parágrafo.

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

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

771
00:35:12,220 --> 00:35:15,250
Vamos dizer que você quer
fazer algo maior,

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

773
00:35:19,480 --> 00:35:23,010
Bem, você pode precisar de alguma ajuda
para que, em apenas um momento.

774
00:35:23,010 --> 00:35:24,830
Nós vimos div.

775
00:35:24,830 --> 00:35:26,170
Você verá que há mesa.

776
00:35:26,170 --> 00:35:27,928
Há 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
Voltar a isso em um momento.

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

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

782
00:35:38,310 --> 00:35:43,640
Há ênfase, ou melhor, em.

783
00:35:43,640 --> 00:35:50,110
There's-- o que mais
pode você gosta aqui?

784
00:35:50,110 --> 00:35:51,930
Bem, vamos dar uma
olhar para isso juntos.

785
00:35:51,930 --> 00:35:53,230
Formulário, que nós vimos.

786
00:35:53,230 --> 00:35:54,130
Há formulário.

787
00:35:54,130 --> 00:35:56,500
Há entrada e alguns outros.

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

789
00:35:58,924 --> 00:36:00,090
Tudo bem, então vamos fazer isso.

790
00:36:00,090 --> 00:36:02,330
Para atender uma Victoria
pergunta, deixe-me primeiro

791
00:36:02,330 --> 00:36:05,020
apenas certifique-se de que todos são
capazes de obter seu trabalho Olá.

792
00:36:05,020 --> 00:36:06,900
Então deixe-me apresentar
um par de outras idéias.

793
00:36:06,900 --> 00:36:09,209
Então vamos deixar povos resolver
algum problema por conta própria.

794
00:36:09,209 --> 00:36:11,500
Então vamos realmente voltar
a essa noção de um formulário,

795
00:36:11,500 --> 00:36:14,950
e nós realmente reimplementar
junto a interface de front-end,

796
00:36:14,950 --> 00:36:16,450
por assim dizer, para o próprio Google.

797
00:36:16,450 --> 00:36:19,700
Vamos usar o Google como o back-end e deixe
-los fazer o trabalho duro, a pesquisa,

798
00:36:19,700 --> 00:36:22,760
mas vamos recriar o front-end
do Google e o formulário de busca

799
00:36:22,760 --> 00:36:24,520
que eles têm sobre a sua própria home page.

800
00:36:24,520 --> 00:36:27,050
E por isso vamos voltar a
estas tags em apenas um momento.

801
00:36:27,050 --> 00:36:30,270
>> Portanto, este foi o que eu
propôs apenas um momento atrás.

802
00:36:30,270 --> 00:36:33,940
Podemos acrescentar a estilização de um
A página dentro desta tag estilo,

803
00:36:33,940 --> 00:36:36,950
e podemos estilizar a fundo
cor, o alinhamento do texto,

804
00:36:36,950 --> 00:36:39,000
se é o centro ou para a esquerda ou para a direita.

805
00:36:39,000 --> 00:36:41,630
Mas muito rapidamente faria
encontrar ou um web designer

806
00:36:41,630 --> 00:36:44,060
acharia que este
se torna um pouco complicado,

807
00:36:44,060 --> 00:36:48,330
porque você está fazendo o que é
chamado de conteúdo misturando

808
00:36:48,330 --> 00:36:50,120
com a apresentação dos mesmos.

809
00:36:50,120 --> 00:36:53,756
Você está misturando seus dados
e a estética da mesma.

810
00:36:53,756 --> 00:36:56,380
E, de fato, se você considerar
o que vai acontecer ao longo do tempo--

811
00:36:56,380 --> 00:36:58,350
este é um muito pequeno
A página web, é claro.

812
00:36:58,350 --> 00:37:01,590
Mas se eu adicionar conteúdo a esta página
e eu adicionar estilo esta página,

813
00:37:01,590 --> 00:37:04,650
a página fica muito rapidamente
mais e mais e mais.

814
00:37:04,650 --> 00:37:07,510
E suponha que eu quero
ter uma segunda página da web que

815
00:37:07,510 --> 00:37:09,010
compartilha alguns desses atributos.

816
00:37:09,010 --> 00:37:12,350
Suponha que a minha segunda página web para o meu
site-- também, eu quero tudo center,

817
00:37:12,350 --> 00:37:14,960
e eu também quero tudo
com um fundo verde.

818
00:37:14,960 --> 00:37:17,940
Estou praticamente vai ter que
copiar e colar algumas dessas linhas

819
00:37:17,940 --> 00:37:20,730
em que o segundo arquivo, o que se sente bem.

820
00:37:20,730 --> 00:37:22,030
Ele vai resolver o problema.

821
00:37:22,030 --> 00:37:26,060
>> Mas o que se eu quiser uma terceira página
ou uma página 30 ou a página 40?

822
00:37:26,060 --> 00:37:28,730
Agora eu vou estar copiando e
colar um monte de código duplicado

823
00:37:28,730 --> 00:37:30,430
em múltiplos arquivos.

824
00:37:30,430 --> 00:37:32,600
E assim supor que
Eu decido ou eu sou dito,

825
00:37:32,600 --> 00:37:34,780
hey, não estamos usando um
fundo verde mais.

826
00:37:34,780 --> 00:37:36,380
Nós vamos começar a usar laranja.

827
00:37:36,380 --> 00:37:38,690
O que você tem que mudar?

828
00:37:38,690 --> 00:37:42,900
Bem, você tem que mudar esse estilo
de verde para laranja em quantos lugares?

829
00:37:42,900 --> 00:37:44,920
Como há 30 ou 40 lugares.

830
00:37:44,920 --> 00:37:45,900
É tedioso.

831
00:37:45,900 --> 00:37:47,039
É propenso a erros.

832
00:37:47,039 --> 00:37:49,580
Há uma série de razões
onde você não gostaria de induzir

833
00:37:49,580 --> 00:37:51,840
esse tipo de dor para si mesmo.

834
00:37:51,840 --> 00:37:54,760
E por isso não seria bom
se pudéssemos tomar o que eu apenas

835
00:37:54,760 --> 00:37:58,240
colocado entre estes dois amarelos
etiquetas, estas marcas de estilo,

836
00:37:58,240 --> 00:38:04,050
incluí-lo para fora, e colocar toda a minha
estilização em um arquivo central

837
00:38:04,050 --> 00:38:08,470
que todos os 30 ou 40 dos meus outros arquivos
pedir emprestado ou de alguma forma de referência,

838
00:38:08,470 --> 00:38:11,640
não muito diferente da rede
diagramas que estávamos fazendo antes?

839
00:38:11,640 --> 00:38:15,030
>> Então, se eu entrar aqui, eu sou
indo para realmente propor

840
00:38:15,030 --> 00:38:17,880
que substitui o
tag de estilo com algo

841
00:38:17,880 --> 00:38:21,620
chamado de tag link, que
é horrivelmente, terrivelmente nomeado,

842
00:38:21,620 --> 00:38:24,370
porque você não usar o
link de tag para criar o que

843
00:38:24,370 --> 00:38:26,380
nós, humanos, conhecido como um link em uma página da Web.

844
00:38:26,380 --> 00:38:29,750
Para isso, você usa o que marca?

845
00:38:29,750 --> 00:38:31,464
Como você cria um link em uma página da web?

846
00:38:31,464 --> 00:38:32,130
AUDIÊNCIA: A a.

847
00:38:32,130 --> 00:38:34,870
DAVID J. MALAN: A uma, ou âncora
tag, que entrou para a Disney antes.

848
00:38:34,870 --> 00:38:39,090
O link tag aqui está dizendo
isto-- link para um arquivo chamado

849
00:38:39,090 --> 00:38:44,350
styles.css, a relação aos quais
vai ser que é o meu estilo.

850
00:38:44,350 --> 00:38:48,290
Portanto, este é um dos S de em
folhas de estilo em cascata CSS--.

851
00:38:48,290 --> 00:38:50,490
Estilo sheet-- dois dos S de em CSS.

852
00:38:50,490 --> 00:38:52,550
Planilha em estilo cascata.

853
00:38:52,550 --> 00:38:58,640
Isto apenas significa que, hey, navegador, vá
encontrar styles.css no servidor local

854
00:38:58,640 --> 00:39:01,870
e usá-lo como sua folha de estilo,
o que significa que dentro desse arquivo

855
00:39:01,870 --> 00:39:05,310
vai ser toda a
estilizações que temos de fazer.

856
00:39:05,310 --> 00:39:07,396
E então o que esse arquivo
pode parecer é este.

857
00:39:07,396 --> 00:39:10,020
E eu vou fazer isso é um rápido
exemplo, porque não precisamos

858
00:39:10,020 --> 00:39:12,000
para obter muito para as ervas daninhas aqui.

859
00:39:12,000 --> 00:39:17,840
Mas se eu copiar este, o que estou propondo
é que um programador criar um novo arquivo,

860
00:39:17,840 --> 00:39:24,450
colar naqueles lines--
whoops-- colar nessas linhas,

861
00:39:24,450 --> 00:39:32,270
guardá-lo como styles.css e, em seguida, em
o outro arquivo, apagar tudo isso

862
00:39:32,270 --> 00:39:35,450
e substituí-lo em vez
com este link tag.

863
00:39:35,450 --> 00:39:43,090
Assim que se eu ligar href = "styles.css",
a relação deve ser "estilo"

864
00:39:43,090 --> 00:39:44,170
perto tag.

865
00:39:44,170 --> 00:39:45,250
Salve isso.

866
00:39:45,250 --> 00:39:47,000
Voltar para o meu helloworld.

867
00:39:47,000 --> 00:39:48,690
Recarregar.

868
00:39:48,690 --> 00:39:51,290
>> Literalmente nada tivesse acontecido.

869
00:39:51,290 --> 00:39:54,710
Isso é uma coisa boa, porque
significa que é realmente tudo de trabalho.

870
00:39:54,710 --> 00:39:58,860
Para provar tanto, suponha que eu faça uma
erro de digitação, e eu chamo isso de "Styles.css"

871
00:39:58,860 --> 00:40:03,080
com um capital S, que é
incorreto, e depois recarregar.

872
00:40:03,080 --> 00:40:05,470
Agora você pode vê-lo simplesmente não funciona.

873
00:40:05,470 --> 00:40:06,362
Agora, por quê?

874
00:40:06,362 --> 00:40:08,070
Bem, vamos usar um
técnica de mais cedo.

875
00:40:08,070 --> 00:40:10,153
Deixe-me ir em frente e, em
meu navegador, no Chrome, eu sou

876
00:40:10,153 --> 00:40:12,900
vai abrir esse especial
separador de rede como antes,

877
00:40:12,900 --> 00:40:15,560
e deixe-me recarregar a página.

878
00:40:15,560 --> 00:40:19,341
O que não é você surpreso ao ver agora?

879
00:40:19,341 --> 00:40:20,840
Ou talvez você está surpresa ao vê-lo.

880
00:40:20,840 --> 00:40:23,225
De qualquer maneira, o que você vê agora?

881
00:40:23,225 --> 00:40:24,100
AUDIÊNCIA: [inaudível]

882
00:40:24,100 --> 00:40:24,770
DAVID J. MALAN: Não é encontrada.

883
00:40:24,770 --> 00:40:25,680
Por que não é encontrado?

884
00:40:25,680 --> 00:40:28,480
Bem, o capital Styles.css--
O S- não existe.

885
00:40:28,480 --> 00:40:29,230
I misnamed-lo.

886
00:40:29,230 --> 00:40:30,430
typo simples.

887
00:40:30,430 --> 00:40:33,816
Mas eu estou ficando compreensivelmente agora um
404, porque o servidor está dizendo, hey,

888
00:40:33,816 --> 00:40:34,440
não é encontrado.

889
00:40:34,440 --> 00:40:36,300
Literalmente, eu não sei
onde esse arquivo é.

890
00:40:36,300 --> 00:40:38,880
Assim como resultado, o navegador
mostra o que pode,

891
00:40:38,880 --> 00:40:42,860
o conteúdo bruto da página,
que foi de 200, o código HTML,

892
00:40:42,860 --> 00:40:45,390
mas a estilização não pode
ser adicionados posteriormente.

893
00:40:45,390 --> 00:40:47,120
E é isso que se quer dizer com cascata.

894
00:40:47,120 --> 00:40:49,070
Você pode tipo de adicioná-lo
depois, e tipo de

895
00:40:49,070 --> 00:40:50,874
refina a estética da página da web.

896
00:40:50,874 --> 00:40:53,790
E você pode até mesmo substituir os
estilos com ainda outros arquivos de estilo

897
00:40:53,790 --> 00:40:54,700
se você quiser.

898
00:40:54,700 --> 00:40:57,780
Não é encontrada, embora, neste caso,
porque é claro, eu misnamed-lo.

899
00:40:57,780 --> 00:41:00,330
Então eu teria que consertar isso em primeiro lugar.

900
00:41:00,330 --> 00:41:04,667
>> Então, vamos em frente e
propor o seguinte.

901
00:41:04,667 --> 00:41:07,410

902
00:41:07,410 --> 00:41:11,140
Vamos ir em frente e fazer isso.

903
00:41:11,140 --> 00:41:14,220
Começando com talvez
seu arquivo helloworld,

904
00:41:14,220 --> 00:41:17,740
deixe-me apenas convidar um casal
apresentam de sugestões.

905
00:41:17,740 --> 00:41:20,400
Então, Victoria, que queria
fazer algum texto maior, certo?

906
00:41:20,400 --> 00:41:24,555
Tudo bem, então nós podemos
não tornar o texto maior.

907
00:41:24,555 --> 00:41:26,860
E nós vamos arrancar cada off
apenas um problema para resolver.

908
00:41:26,860 --> 00:41:30,867
Tornar o texto maior.

909
00:41:30,867 --> 00:41:32,700
Eu não vou incomodá
escrevendo isso quando nós

910
00:41:32,700 --> 00:41:35,600
têm tecnologia bala bem aqui.

911
00:41:35,600 --> 00:41:39,970
Então alguns problemas.

912
00:41:39,970 --> 00:41:44,670
Então, nós estamos indo para tentar
para tornar o texto maior.

913
00:41:44,670 --> 00:41:45,170
Tudo certo.

914
00:41:45,170 --> 00:41:48,360
O que mais alguém propõe?

915
00:41:48,360 --> 00:41:50,332
O que mais poderia queremos
a fazer em uma página web?

916
00:41:50,332 --> 00:41:52,040
Vamos chegar a um
pequena lista de coisas

917
00:41:52,040 --> 00:41:55,366
e, em seguida, delegar ao
grupo para descobrir isso.

918
00:41:55,366 --> 00:41:56,270
>> AUDIÊNCIA: [inaudível]

919
00:41:56,270 --> 00:42:02,251
>> DAVID J. MALAN: OK, texto da posição
em diferentes lados da página?

920
00:42:02,251 --> 00:42:02,750
Tudo certo.

921
00:42:02,750 --> 00:42:04,620
Algo mais.

922
00:42:04,620 --> 00:42:05,784
>> AUDIÊNCIA: [inaudível]

923
00:42:05,784 --> 00:42:06,700
DAVID J. MALAN: É.

924
00:42:06,700 --> 00:42:08,720
Assim, um gif é apenas um
formato de arquivo diferente.

925
00:42:08,720 --> 00:42:12,830
Acabamos utilizado, o que, a
png ou jpg, provavelmente?

926
00:42:12,830 --> 00:42:14,480
Foi utilizado um jpg.

927
00:42:14,480 --> 00:42:16,780
Se você estiver curioso, uma excessiva
responder à sua pergunta

928
00:42:16,780 --> 00:42:19,404
é um jpg é geralmente usado para
fotografias, porque ele suporta

929
00:42:19,404 --> 00:42:21,500
milhões de cores ou cores de 24 bits.

930
00:42:21,500 --> 00:42:26,930
Um GIF é geralmente utilizado para, como,
memes de internet Estas animações dias--,

931
00:42:26,930 --> 00:42:28,810
como GIFs animados.

932
00:42:28,810 --> 00:42:32,320
Mas isso acontece para usar uma cor mais pequena
paleta, apenas 256 cores possíveis,

933
00:42:32,320 --> 00:42:35,230
mas ele suporta
transparência e animação.

934
00:42:35,230 --> 00:42:40,330
E depois há o png, que suporta
transparência e mais cores

935
00:42:40,330 --> 00:42:41,300
mas não animação.

936
00:42:41,300 --> 00:42:42,133
Portanto, é um trade-off.

937
00:42:42,133 --> 00:42:44,144

938
00:42:44,144 --> 00:42:46,060
Assim, a adição de um gif, porém,
seria funcionalmente

939
00:42:46,060 --> 00:42:48,396
equivalente a adicionar um png ou jpg.

940
00:42:48,396 --> 00:42:49,110
Sim.

941
00:42:49,110 --> 00:42:50,550
Fonte da imagem é igual.

942
00:42:50,550 --> 00:42:51,590
Então outra coisa.

943
00:42:51,590 --> 00:42:57,288
Vamos chegar a algo que
que enviamos para Victoria a fazer aqui.

944
00:42:57,288 --> 00:42:59,209
>> AUDIÊNCIA: Adicionar botões de um formulário.

945
00:42:59,209 --> 00:43:00,000
DAVID J. MALAN: OK.

946
00:43:00,000 --> 00:43:02,179
Então adicionar botões em um formulário.

947
00:43:02,179 --> 00:43:03,470
E nós vamos fazer isso junto.

948
00:43:03,470 --> 00:43:07,220
Assim que vai ser um segue perfeita
logo após este desafio.

949
00:43:07,220 --> 00:43:10,357
Algo mais?

950
00:43:10,357 --> 00:43:11,440
O que você gostaria de fazer?

951
00:43:11,440 --> 00:43:14,040

952
00:43:14,040 --> 00:43:16,516
A web se sente muito abaixo do esperado
se isso é tudo que podemos fazer.

953
00:43:16,516 --> 00:43:18,140
AUDIÊNCIA: Mude a cor do texto.

954
00:43:18,140 --> 00:43:19,500
DAVID J. MALAN: Alterar o quê?

955
00:43:19,500 --> 00:43:20,666
AUDIÊNCIA: cor do texto.

956
00:43:20,666 --> 00:43:22,311
DAVID J. MALAN: Alterar a cor do texto.

957
00:43:22,311 --> 00:43:22,810
Tudo certo.

958
00:43:22,810 --> 00:43:23,790
Então, vamos fazer isso.

959
00:43:23,790 --> 00:43:27,209
Apenas novamente não que você é, apenas
de forma mecânica, fazendo exatamente o que estou fazendo,

960
00:43:27,209 --> 00:43:29,500
Eu estou indo para ligar a música
para talvez cinco minutos aqui.

961
00:43:29,500 --> 00:43:30,450
Você está convidado a usar o Google.

962
00:43:30,450 --> 00:43:33,130
Você está convidado a me perguntar, e
Vou sussurrar uma dica em seu ouvido.

963
00:43:33,130 --> 00:43:35,171
Você é bem-vindo para olhar
sobre os ombros de outros.

964
00:43:35,171 --> 00:43:37,340
Mas resolver apenas um destes problemas.

965
00:43:37,340 --> 00:43:40,190
Mas vamos fazer o último, o
constitui um, se pudéssemos, juntos.

966
00:43:40,190 --> 00:43:42,790
Assim, cinco minutos para resolver
qualquer um destes problemas

967
00:43:42,790 --> 00:43:46,780
usando o Google, a intuição, ou qualquer
outros meios disponíveis para você.

968
00:43:46,780 --> 00:43:48,630
>> [REPRODUÇÃO DE MÚSICA]

969
00:43:48,630 --> 00:43:49,130
Tudo certo.

970
00:43:49,130 --> 00:43:50,838
Não se preocupe se você quer
para manter mexer,

971
00:43:50,838 --> 00:43:53,880
mas eu vou estragar um par
destas respostas.

972
00:43:53,880 --> 00:43:57,986
Assim, a primeira sugestão de
Victoria foi para tornar o texto maior.

973
00:43:57,986 --> 00:43:59,360
Portanto, há algumas maneiras de fazer isso.

974
00:43:59,360 --> 00:44:01,530
Eu atualmente restaurada
minha tela para esse tamanho,

975
00:44:01,530 --> 00:44:04,310
embora eu tenha ampliado
artificialmente só para ver as coisas.

976
00:44:04,310 --> 00:44:07,470
E vamos fazer isso.

977
00:44:07,470 --> 00:44:11,380
Deixe-me ir em frente e agarrar
algum texto genérico Latina

978
00:44:11,380 --> 00:44:19,540
só assim temos algo para trabalhar.

979
00:44:19,540 --> 00:44:20,715
Então me dê apenas um momento.

980
00:44:20,715 --> 00:44:21,840
Vou fazer três parágrafos.

981
00:44:21,840 --> 00:44:53,430

982
00:44:53,430 --> 00:44:53,930
ESTÁ BEM.

983
00:44:53,930 --> 00:44:55,560
Este será um exemplo melhor.

984
00:44:55,560 --> 00:44:57,840
Assim, para os curiosos, em
meu hello.html, eu só

985
00:44:57,840 --> 00:45:01,645
colado três absurda
parágrafos Latina

986
00:45:01,645 --> 00:45:03,270
só assim temos algum texto para trabalhar.

987
00:45:03,270 --> 00:45:06,720
E o objetivo da Victoria era
fazem parte do texto maior.

988
00:45:06,720 --> 00:45:09,879
Então eu poderia, como antes, entrar aqui.

989
00:45:09,879 --> 00:45:11,170
E deixe-me fazê-lo da maneira certa.

990
00:45:11,170 --> 00:45:13,253
Eu vou ter um link
tag que aponta para um arquivo

991
00:45:13,253 --> 00:45:20,560
chamado "styles.css," o relacionamento
dos quais é novo "estilo".

992
00:45:20,560 --> 00:45:25,221
E então eu vou guardar esse
e abrir este "styles.css."

993
00:45:25,221 --> 00:45:28,940
>> Então, como antes, tenho a
capacidade neste arquivo CSS

994
00:45:28,940 --> 00:45:31,569
para realmente substituir o padrão
estética de uma página web,

995
00:45:31,569 --> 00:45:33,860
ea estética padrão,
é claro, são bastante aborrecido.

996
00:45:33,860 --> 00:45:36,943
É uma espécie de tamanho de fonte normal, preto
texto, fundo branco, e assim por diante.

997
00:45:36,943 --> 00:45:39,440
Então, suponhamos que eu quero fazer
tudo isso de texto maior.

998
00:45:39,440 --> 00:45:40,460
Eu poderia fazer algumas coisas.

999
00:45:40,460 --> 00:45:43,750
No meu arquivo styles.css, I
poderia dizer, você sabe o quê,

1000
00:45:43,750 --> 00:45:46,950
aplicarão o seguinte aos
o corpo de minha página.

1001
00:45:46,950 --> 00:45:51,390
Vá em frente e fazer a
tamanho da fonte 24 pontos,

1002
00:45:51,390 --> 00:45:54,130
que é um número que eu poderia
usar no Microsoft Word.

1003
00:45:54,130 --> 00:45:57,620
Deixe-me voltar para o meu web
página aqui e recarregar,

1004
00:45:57,620 --> 00:45:59,640
e você pode ver que
já é muito maior.

1005
00:45:59,640 --> 00:46:02,223
E nós podemos ficar um pouco louco,
assim como nós pode em um desktop--

1006
00:46:02,223 --> 00:46:03,670
torná-lo 96 pontos.

1007
00:46:03,670 --> 00:46:04,950
Recarregar.

1008
00:46:04,950 --> 00:46:07,610
E está ficando um pouco
complicado neste momento.

1009
00:46:07,610 --> 00:46:09,500
>> Mas eu poderia ser um pouco mais preciso.

1010
00:46:09,500 --> 00:46:14,530
Em vez de aplicar este
folha de estilo para o corpo da minha página,

1011
00:46:14,530 --> 00:46:21,740
o que mais eu poderia aplicá-lo ao invés,
o que outra tag que podem ainda

1012
00:46:21,740 --> 00:46:25,445
funcionam da mesma maneira?

1013
00:46:25,445 --> 00:46:26,444
>> AUDIÊNCIA: A tag p?

1014
00:46:26,444 --> 00:46:27,360
DAVID J. MALAN: tag P.

1015
00:46:27,360 --> 00:46:29,350
Então, a cabeça não seria
correto, porque a cabeça,

1016
00:46:29,350 --> 00:46:31,300
você não pode realmente
controlar a estética.

1017
00:46:31,300 --> 00:46:32,700
Não há qualquer texto lá ou não.

1018
00:46:32,700 --> 00:46:36,760
Mas o p tag-- I pode mergulhar em um pouco
mais profundo, por assim dizer, para o parágrafo

1019
00:46:36,760 --> 00:46:37,350
etiquetas.

1020
00:46:37,350 --> 00:46:41,600
E mesmo que há três,
isso é perfeitamente bem, porque em CSS,

1021
00:46:41,600 --> 00:46:44,900
quando eu apenas dizer "p", este
significa aplicar o seguinte

1022
00:46:44,900 --> 00:46:48,300
a qualquer tag que corresponde a esta
selector, o selector de apenas

1023
00:46:48,300 --> 00:46:49,430
sendo o nome da marca.

1024
00:46:49,430 --> 00:46:52,350
Assim, sempre que você ver um
"P", aplicar o tamanho da fonte,

1025
00:46:52,350 --> 00:46:55,222
e vamos torná-lo mais
razoável novamente-- 24 pontos.

1026
00:46:55,222 --> 00:46:56,930
E sabe de uma coisa,
apenas para uma boa medida,

1027
00:46:56,930 --> 00:46:59,810
vamos fazer a cor
apenas vermelho para o momento.

1028
00:46:59,810 --> 00:47:03,740
E agora, se eu recarregar, agora nós
veja três parágrafos feias.

1029
00:47:03,740 --> 00:47:07,180
>> Mas agora suponha que eu sou uma espécie
de-- eu quero o primeiro parágrafo

1030
00:47:07,180 --> 00:47:08,210
para saltar para o usuário.

1031
00:47:08,210 --> 00:47:11,150
Eu não quero apenas aumentar
o tamanho da fonte de tudo.

1032
00:47:11,150 --> 00:47:16,105
E assim eu realmente quero para identificar ou
distinguir entre esses parágrafos.

1033
00:47:16,105 --> 00:47:18,730
Então, vamos nos livrar do vermelho,
porque é apenas um tipo de brega,

1034
00:47:18,730 --> 00:47:23,885
e vamos em frente e fazer o
tamanho de fonte de 12 pontos por padrão,

1035
00:47:23,885 --> 00:47:26,260
de modo que estamos de volta a algo
um pouco mais razoável.

1036
00:47:26,260 --> 00:47:29,190
E agora eu só quero aumentar o
tamanho da fonte do primeiro parágrafo.

1037
00:47:29,190 --> 00:47:31,440
Eu posso fazer isso em poucos
maneiras, mas uma forma que é

1038
00:47:31,440 --> 00:47:37,180
talvez mais de instrução no
momento é fazer o seguinte.

1039
00:47:37,180 --> 00:47:43,280
Deixe-me ir em frente e dizer, este
parágrafo tem uma identificação única de "primeira".

1040
00:47:43,280 --> 00:47:45,000
Eu poderia chamar isso de qualquer coisa que eu quiser.

1041
00:47:45,000 --> 00:47:46,874
Eu poderia chamar isso de "foo"
ou qualquer outra palavra,

1042
00:47:46,874 --> 00:47:49,290
mas eu vou dar-lhe algum
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 identificação, para o meu primeiro parágrafo.

1045
00:47:54,790 --> 00:47:59,360
>> O que posso fazer agora na minha folha de estilo
é ser um pouco mais precisa.

1046
00:47:59,360 --> 00:48:02,330
Em vez de dizer, aplicar
o seguinte para a tag p,

1047
00:48:02,330 --> 00:48:04,890
Posso dizer que o following--
aplicar o seguinte,

1048
00:48:04,890 --> 00:48:11,000
ou selecione, o elemento HTML
que tem uma identificação única dos "primeiro".

1049
00:48:11,000 --> 00:48:12,350
O que eu quero aplicar a ele?

1050
00:48:12,350 --> 00:48:15,250
Um tamanho de fonte de 24 pontos.

1051
00:48:15,250 --> 00:48:16,640
Então, eu tenho dois seletores agora.

1052
00:48:16,640 --> 00:48:19,690
Um faz toda a
n.os 12 pontos.

1053
00:48:19,690 --> 00:48:24,960
Mas este, especialmente porque se trata
second-- se trata último na file--

1054
00:48:24,960 --> 00:48:27,090
isto tem um efeito em cascata.

1055
00:48:27,090 --> 00:48:30,200
Acabei de fazer todo o meu
parágrafo marcas de 12 pontos,

1056
00:48:30,200 --> 00:48:34,350
mas isso agora cascatas e
substitui isso por quaisquer elementos

1057
00:48:34,350 --> 00:48:38,800
na página, qualquer tag da página cujo
ID único é entre aspas "em primeiro lugar."

1058
00:48:38,800 --> 00:48:41,720
E a hashtag neste contexto
apenas significa "identificador único".

1059
00:48:41,720 --> 00:48:43,750
Eu não colocá-lo no arquivo HTML.

1060
00:48:43,750 --> 00:48:46,880
Eu, aqui, apenas dizer
entre aspas "em primeiro lugar."

1061
00:48:46,880 --> 00:48:48,470
>> Então deixe-me recarregar.

1062
00:48:48,470 --> 00:48:49,919
E agora eu vejo, ah, OK.

1063
00:48:49,919 --> 00:48:51,710
Quer dizer, não é que
bonita, mas é o tipo

1064
00:48:51,710 --> 00:48:53,600
de como o prefácio de uma
livro ou algo assim,

1065
00:48:53,600 --> 00:48:55,100
onde o primeiro parágrafo é maior.

1066
00:48:55,100 --> 00:48:57,933
Poderia ser ainda mais preciso com
apenas as primeiras letras, mas pelo menos

1067
00:48:57,933 --> 00:48:59,110
Eu tenho exercido mais controle.

1068
00:48:59,110 --> 00:49:04,760
Agora maybe-- talvez eu quero fazer isso
ocasionalmente, por qualquer motivo,

1069
00:49:04,760 --> 00:49:09,010
e por isso eu não quero que isso
aplicar-se a apenas uma tag HTML.

1070
00:49:09,010 --> 00:49:15,110
Em vez disso, vamos dizer-- vamos
também fazer o seguinte.

1071
00:49:15,110 --> 00:49:18,810
Class = "importação".

1072
00:49:18,810 --> 00:49:23,970
Considerando que a ID é usado para unicamente
identificar uma coisa, uma tag,

1073
00:49:23,970 --> 00:49:30,190
na sua página web, uma classe é para ser
usado em qualquer número de elementos ou tags

1074
00:49:30,190 --> 00:49:30,950
na sua página web.

1075
00:49:30,950 --> 00:49:31,710
Portanto, é reutilizável.

1076
00:49:31,710 --> 00:49:33,090
Um ID não é reutilizável.

1077
00:49:33,090 --> 00:49:34,450
Uma classe é reutilizável.

1078
00:49:34,450 --> 00:49:37,830
>> E você sabe o que, por qualquer
reasons-- filosófica

1079
00:49:37,830 --> 00:49:40,180
Eu não terminar a minha
thought-- eu vou dizer

1080
00:49:40,180 --> 00:49:44,300
que o primeiro parágrafo eo
segundo parágrafo, são importantes.

1081
00:49:44,300 --> 00:49:48,600
Então eu vou para aplicar a classe chamada
"Importante", que, se eu salvar meu arquivo

1082
00:49:48,600 --> 00:49:51,510
e recarregar, não tem
impacto funcional ainda.

1083
00:49:51,510 --> 00:49:53,780
Mas eu adicionei alguns
metadados para o arquivo,

1084
00:49:53,780 --> 00:49:56,610
tipo de algo separado
a partir dos dados do núcleo do arquivo,

1085
00:49:56,610 --> 00:50:02,300
de modo que agora na minha folha de estilo, se eu
em vez dizer ".Importante" - você sabe,

1086
00:50:02,300 --> 00:50:07,110
tudo o que é importante, eu sou
vai fazer font-cor, red--

1087
00:50:07,110 --> 00:50:09,930
ou melhor, não font-cor, apenas a cor.

1088
00:50:09,930 --> 00:50:12,930
Há inconsistências
em CSS infelizmente.

1089
00:50:12,930 --> 00:50:14,120
E recarregar.

1090
00:50:14,120 --> 00:50:17,640
Agora observe o primeiro
dois parágrafos são vermelhos

1091
00:50:17,640 --> 00:50:20,880
mas não o terceiro, porque eu só
aplicou a classe de "importante"

1092
00:50:20,880 --> 00:50:25,020
para as duas primeiras dessas coisas.

1093
00:50:25,020 --> 00:50:28,030
>> Assim, em IDs, você tem a capacidade
para especificar de forma muito precisa.

1094
00:50:28,030 --> 00:50:30,110
Com aulas, você tem a capacidade de reutilização.

1095
00:50:30,110 --> 00:50:33,800
Mas em ambos os casos, observe a
tipo de princípio de boa-design

1096
00:50:33,800 --> 00:50:39,072
onde eu consignado fora todo o
estética no meu arquivo styles.css.

1097
00:50:39,072 --> 00:50:40,280
Portanto, não há confusão aqui.

1098
00:50:40,280 --> 00:50:44,490
Não há nenhuma menção de vermelho ou
bold-facing ou tamanho da fonte neste arquivo.

1099
00:50:44,490 --> 00:50:49,430
Em vez disso eu tenho semanticamente,
significativamente caracterizado meus dados como,

1100
00:50:49,430 --> 00:50:51,240
aqui é alguns dados importantes.

1101
00:50:51,240 --> 00:50:52,800
Aqui está alguns dados mais importantes.

1102
00:50:52,800 --> 00:50:56,500
Além disso, aqui é o
"Primeiro" dos meus dados importantes.

1103
00:50:56,500 --> 00:51:01,050
Então HTML é tudo sobre a espécie
de marcação, literalmente, palavras

1104
00:51:01,050 --> 00:51:05,270
e parágrafos e construções em sua
página com essas pequenas dicas, se você

1105
00:51:05,270 --> 00:51:07,640
vai, que você pode
de alguma forma, alavancar usando

1106
00:51:07,640 --> 00:51:10,880
outras técnicas como CSS desta forma.

1107
00:51:10,880 --> 00:51:14,760
>> Assim, em resposta à pergunta de Victoria,
podemos fazer um texto maior nesse sentido.

1108
00:51:14,760 --> 00:51:18,380
Há tantas outras maneiras, mas
a fonte tag-- colchete de abertura "font" -

1109
00:51:18,380 --> 00:51:19,770
é, na verdade vários anos de idade.

1110
00:51:19,770 --> 00:51:21,410
E esse é o problema,
também, com base apenas

1111
00:51:21,410 --> 00:51:23,485
em resources-- on-line
eles tendem a ser ultrapassada.

1112
00:51:23,485 --> 00:51:26,110
E, de fato, que foi descontinuado,
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
Isso não acontece.

1115
00:51:29,670 --> 00:51:32,770
E assim por muitos anos e
este dia-- um do lado

1116
00:51:32,770 --> 00:51:36,060
observa aqui é que é realmente
incrivelmente dolorosa às vezes ainda

1117
00:51:36,060 --> 00:51:38,900
para desenvolver sites para o
web, porque a Microsoft

1118
00:51:38,900 --> 00:51:44,220
e Google e Mozilla e
os outros muitas vezes discordam sobre a forma como

1119
00:51:44,220 --> 00:51:47,480
para interpretar uma especificação como HTML.

1120
00:51:47,480 --> 00:51:52,490
>> Há um livro de regras para HTML que
geralmente diz o que significa que cada tag.

1121
00:51:52,490 --> 00:51:55,690
Mas às vezes é deixado à
critério da aplicação,

1122
00:51:55,690 --> 00:51:57,290
discrição e Google, da Microsoft.

1123
00:51:57,290 --> 00:52:00,000
E assim você vai muitas vezes
ver em um site algo

1124
00:52:00,000 --> 00:52:04,954
parece diferente em um PC
do que ele faz em um Mac,

1125
00:52:04,954 --> 00:52:06,995
e isso é realmente porque,
No fim do dia,

1126
00:52:06,995 --> 00:52:08,891
eles não testá-lo
bem em ambas as plataformas.

1127
00:52:08,891 --> 00:52:11,390
Mas é também por causa razoável,
pessoas inteligentes irão discordar

1128
00:52:11,390 --> 00:52:14,970
e as empresas vão discordar, e assim
um dos desafios da programação

1129
00:52:14,970 --> 00:52:16,980
para a web ou design
coisas para a web

1130
00:52:16,980 --> 00:52:21,700
está escrevendo o seu site de uma forma
que funciona em todos os navegadores web.

1131
00:52:21,700 --> 00:52:23,410
Mas mesmo isso é razoável, certo?

1132
00:52:23,410 --> 00:52:27,807
Há tantas versões de tantos
navegadores lá fora, que, em algum momento,

1133
00:52:27,807 --> 00:52:30,890
você também tem que fazer um julgamento
e você tem que decidir como uma empresa,

1134
00:52:30,890 --> 00:52:33,082
especialmente para e-commerce de estilo
locais onde você está

1135
00:52:33,082 --> 00:52:36,290
tentando usar o mais recente e maior
tecnologias para dar realmente um bom usuário

1136
00:52:36,290 --> 00:52:37,110
experiência.

1137
00:52:37,110 --> 00:52:41,019
Mas alguma porcentagem de seus usuários podem
ainda estar usando o Internet Explorer 6 ou 7

1138
00:52:41,019 --> 00:52:43,810
ou 8, em especial, dependendo do
país que eles estão vindo.

1139
00:52:43,810 --> 00:52:46,760
>> E assim por muito comumente
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 formos a-- vejamos Wikipedia
e ver como up-to-date este gráfico é

1142
00:52:56,560 --> 00:52:59,320
Se houver um.

1143
00:52:59,320 --> 00:53:02,420
Então, aqui você pode ver
onde os navegadores na verdade

1144
00:53:02,420 --> 00:53:06,160
são, de acordo com dezembro de 2015,
de acordo com o Governo dos Estados Unidos.

1145
00:53:06,160 --> 00:53:11,170
Chrome é a quota de mercado de 42%, seguido
pelo IE, em grande parte em ambientes corporativos

1146
00:53:11,170 --> 00:53:14,490
ou as configurações do PC, é claro,
seguido pelo Firefox,

1147
00:53:14,490 --> 00:53:17,440
em seguida, Safari, então Opera não o fez
fazer o mapa aqui por alguma razão,

1148
00:53:17,440 --> 00:53:18,210
e que outros.

1149
00:53:18,210 --> 00:53:19,500
Talvez seja sob outros.

1150
00:53:19,500 --> 00:53:27,700
Mas mais problemático do que é--
vamos ver se Wikipedia também tem

1151
00:53:27,700 --> 00:53:35,194
versões de navegadores version--

1152
00:53:35,194 --> 00:53:36,160

1153
00:53:36,160 --> 00:53:39,190
>> Vamos para as estatísticas do navegador.

1154
00:53:39,190 --> 00:53:40,680
IE.

1155
00:53:40,680 --> 00:53:42,030
Mesmo isso não é suficiente.

1156
00:53:42,030 --> 00:53:44,854
estatísticas do navegador.

1157
00:53:44,854 --> 00:53:45,353
Minha versão.

1158
00:53:45,353 --> 00:53:48,980

1159
00:53:48,980 --> 00:53:50,540
Isso não vai ser certo.

1160
00:53:50,540 --> 00:53:53,414
Vamos ver versões.

1161
00:53:53,414 --> 00:53:54,830
navegador quota de mercado.

1162
00:53:54,830 --> 00:53:57,110
Vamos ver se isso vem à tona.

1163
00:53:57,110 --> 00:53:57,610
ESTÁ BEM.

1164
00:53:57,610 --> 00:54:00,010
Agora isso está ficando
um pouco mais útil.

1165
00:54:00,010 --> 00:54:04,870
Então, aqui, perceber que todos nós temos
diferentes versões de navegadores.

1166
00:54:04,870 --> 00:54:09,887
E, meu Deus, se você look-- Chrome
48, Chrome 47, Chrome 31, Chrome 45.

1167
00:54:09,887 --> 00:54:12,970
Quer dizer, os navegadores cada vez mais atualizado,
e, por vezes, algumas dessas mudanças

1168
00:54:12,970 --> 00:54:16,430
são significativos em
termos de funcionalidade.

1169
00:54:16,430 --> 00:54:20,630
E assim, em algum momento, o
gerentes de produto ou os engenheiros

1170
00:54:20,630 --> 00:54:23,620
precisa fazer uma decision-- você
sabe o que, apenas 1% da população mundial

1171
00:54:23,620 --> 00:54:24,740
ainda está usando o IE 7.

1172
00:54:24,740 --> 00:54:25,490
Para o inferno com eles.

1173
00:54:25,490 --> 00:54:27,470
Nós apenas não vai
apoiar esse browser.

1174
00:54:27,470 --> 00:54:28,740
E o que significa não apoiar?

1175
00:54:28,740 --> 00:54:31,170
Isso pode significar que os botões
não funcionam na sua página web,

1176
00:54:31,170 --> 00:54:33,050
ou pode significar a
formatação está completamente desligado.

1177
00:54:33,050 --> 00:54:35,091
Ou você pode ter que fazer
esse mesmo julgamento

1178
00:54:35,091 --> 00:54:39,089
em móveis nos dias de hoje, onde, estamos
não vai apoiar IOS 5 mais.

1179
00:54:39,089 --> 00:54:40,380
Então, as pessoas só tem que atualizar.

1180
00:54:40,380 --> 00:54:45,850
Ou nós não vamos apoiar Cupcake
no sistema operacional Android para dispositivos Android,

1181
00:54:45,850 --> 00:54:48,629
porque, como o mundo-- como o
mundo da tecnologia quer avançar,

1182
00:54:48,629 --> 00:54:51,170
que tipo de quer arrastar o
mundo com ele para que eles não

1183
00:54:51,170 --> 00:54:53,295
tem que continuar a ser
compatíveis com versões anteriores para que eles

1184
00:54:53,295 --> 00:54:54,920
pode oferecer novas e boas características.

1185
00:54:54,920 --> 00:54:57,878
Esta é certamente uma das razões
por que tantas empresas estão lançando

1186
00:54:57,878 --> 00:55:01,440
atualizações automáticas e tipo de forçando
as últimas versões de software de nós.

1187
00:55:01,440 --> 00:55:04,010
E até mesmo empresas
como a Apple irá classificar de

1188
00:55:04,010 --> 00:55:07,280
forçá-lo quase ou obrigar
você em termos de forças de mercado

1189
00:55:07,280 --> 00:55:11,164
para comprar um novo telefone, porque eles simplesmente
não atualizará mais o seu telefone antigo.

1190
00:55:11,164 --> 00:55:13,330
Então você perca a
mais recentes e melhores recursos,

1191
00:55:13,330 --> 00:55:17,520
porque é dispendiosa a eles como um
empresa para manter mais velho, sem dúvida

1192
00:55:17,520 --> 00:55:19,330
versões inferiores de software.

1193
00:55:19,330 --> 00:55:23,660
Mas, o efeito líquido é que
nós também sofrem isso também.

1194
00:55:23,660 --> 00:55:26,550
>> Então, vamos dar uma olhada em apenas
um par de coisas finais aqui.

1195
00:55:26,550 --> 00:55:29,740
Vamos derrubar rápido real algumas das
essas outras balas, se curioso.

1196
00:55:29,740 --> 00:55:33,440
Então, se você estava tentando,
por exemplo, a posição

1197
00:55:33,440 --> 00:55:36,420
o texto em lados diferentes do
página, eu vou fazer uma maneira rápida,

1198
00:55:36,420 --> 00:55:38,360
mas não é diferente
maneiras de fazer isso.

1199
00:55:38,360 --> 00:55:42,610
Deixe-me ir em frente e eliminate--
simplificar este como se segue.

1200
00:55:42,610 --> 00:55:45,330
Deixe-me apenas voltar para o meu
, parágrafos simples simples.

1201
00:55:45,330 --> 00:55:47,760
Deixe-me voltar para o meu styles.css.

1202
00:55:47,760 --> 00:55:51,040
E eu só vou usar o simple--
que você pode ter visto no Google

1203
00:55:51,040 --> 00:55:54,430
ou recolha de earlier--
text-align direita.

1204
00:55:54,430 --> 00:55:56,220
E recarregue esta página.

1205
00:55:56,220 --> 00:55:58,470
Agora tudo parece
para ser alinhado à direita,

1206
00:55:58,470 --> 00:56:00,770
como você pode ver na sobrecarga aqui.

1207
00:56:00,770 --> 00:56:04,470
>> Nós podemos fazê-lo parecer um pouco mais
reservar-like, e podemos dizer "justify"

1208
00:56:04,470 --> 00:56:05,640
e recarregar.

1209
00:56:05,640 --> 00:56:09,870
Agora é bom e quadrado em ambos
os lados, o que é bem legal.

1210
00:56:09,870 --> 00:56:12,220
Outra meta que nós tivemos aqui
era a cor da mudança do texto.

1211
00:56:12,220 --> 00:56:13,650
Então vimos que com o meu texto em vermelho.

1212
00:56:13,650 --> 00:56:15,630
E agora adicionar botões de um formulário.

1213
00:56:15,630 --> 00:56:19,390
Então, por que não tentar fazer exatamente isso?

1214
00:56:19,390 --> 00:56:23,656
Mas, primeiro, deixe-me ir a um site que
a maioria de nós usar cada dia-- Google.

1215
00:56:23,656 --> 00:56:25,780
E vamos dar uma olhada
como o Google realmente funciona.

1216
00:56:25,780 --> 00:56:26,821
Mas eu vou fazer isso.

1217
00:56:26,821 --> 00:56:31,930
Primeiro deixe-me fazê-lo em-- sim,
deixe-me ir para o Google em primeiro lugar.

1218
00:56:31,930 --> 00:56:34,530
Eu vou ter que ir
em Configurações do Google,

1219
00:56:34,530 --> 00:56:40,660
porque eu quero desativar
algo chamado resultados imediatos.

1220
00:56:40,660 --> 00:56:43,580
>> Então você deve ter notado na
Google estes dias-- deixe-me voltar

1221
00:56:43,580 --> 00:56:44,850
e ativar isso.

1222
00:56:44,850 --> 00:56:47,900
Então, se eu começar a procurar
para "gatos" como este,

1223
00:56:47,900 --> 00:56:50,120
notar que não só
Recebo auto-completar-se

1224
00:56:50,120 --> 00:56:54,520
superior, de repente, a própria página
parece mudar muito rapidamente, bem como,

1225
00:56:54,520 --> 00:56:58,750
e isso é o Google usando uma linguagem
chamada JavaScript tentando ser útil.

1226
00:56:58,750 --> 00:57:01,540
Mas, infelizmente, tipo
da mexe-se a nossa discussão

1227
00:57:01,540 --> 00:57:04,010
do que está realmente acontecendo
por baixo do capuz aqui.

1228
00:57:04,010 --> 00:57:09,070
Então, eu sou apenas uma espécie de rapidamente
desligue resultados imediatos.

1229
00:57:09,070 --> 00:57:11,510
E eu vou clique em Salvar.

1230
00:57:11,510 --> 00:57:13,930
E agora eu vou abrir
essa barra de ferramentas de diagnóstico que eu

1231
00:57:13,930 --> 00:57:16,150
manter abertura sob a guia Rede.

1232
00:57:16,150 --> 00:57:17,720
Então, vamos fazer isso.

1233
00:57:17,720 --> 00:57:21,960
Deixe-me-- whoops--
rolar esta um pouco para baixo.

1234
00:57:21,960 --> 00:57:24,410
E deixe-me procurar "gatos".

1235
00:57:24,410 --> 00:57:26,790
>> E agora notice-- na verdade,
esta é uma boa oportunidade

1236
00:57:26,790 --> 00:57:28,840
para discutir por um momento.

1237
00:57:28,840 --> 00:57:32,460
Observe o momento em que eu type-- pará-lo.

1238
00:57:32,460 --> 00:57:35,250
Pare com isso.

1239
00:57:35,250 --> 00:57:35,790
ESTÁ BEM.

1240
00:57:35,790 --> 00:57:40,870
Observe o momento em que eu escreva a letra
C, ver a parte inferior da tela.

1241
00:57:40,870 --> 00:57:48,600
A- T- S. O que faz o fundo
desta tela, meu guia Rede,

1242
00:57:48,600 --> 00:57:53,320
sugerem está acontecendo cada
vez que eu escreva uma carta?

1243
00:57:53,320 --> 00:57:57,700
Infelizmente, o sapo é muito
perturbador hoje ou o trevo

1244
00:57:57,700 --> 00:58:00,339
ou o que ele é.

1245
00:58:00,339 --> 00:58:01,880
O que estava acontecendo cada vez que eu digitei?

1246
00:58:01,880 --> 00:58:04,230
E deixe-me limpar o
tampão e digitá-lo novamente.

1247
00:58:04,230 --> 00:58:06,580
whoops assim--.

1248
00:58:06,580 --> 00:58:13,280
Toda vez que eu digitar uma letra, C- A- T--
assim uma nova linha, obviamente, continua aparecendo.

1249
00:58:13,280 --> 00:58:16,530
O que cada uma dessas linhas representam,
com base no que temos visto e discutido

1250
00:58:16,530 --> 00:58:17,339
até agora?

1251
00:58:17,339 --> 00:58:18,130
AUDIÊNCIA: Uma busca?

1252
00:58:18,130 --> 00:58:21,770
DAVID J. MALAN: Uma pesquisa ou
mais genericamente, uma solicitação 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
Bem, porque é o meu navegador fazendo um HTTP
solicitar cada vez que eu escreva uma carta?

1255
00:58:29,090 --> 00:58:30,502
>> AUDIÊNCIA: [inaudível]

1256
00:58:30,502 --> 00:58:33,210
DAVID J. MALAN: Sim, ele está dando
me estes resultados de auto-completar.

1257
00:58:33,210 --> 00:58:35,190
Como, Onde é que esses
resultados da pesquisa vêm?

1258
00:58:35,190 --> 00:58:38,120
Bem, cada vez que eu escreva um
carta, o Google envia mais

1259
00:58:38,120 --> 00:58:40,460
e mais e mais de
a palavra que eu estou escrevendo.

1260
00:58:40,460 --> 00:58:41,040
Por quê?

1261
00:58:41,040 --> 00:58:44,540
Porque eles querem me dar uma
melhor e melhor, melhor sugestão,

1262
00:58:44,540 --> 00:58:48,880
uma lista de sugestões, para que a palavra
Eu estou tentando realmente completa.

1263
00:58:48,880 --> 00:58:53,030
Então, isso quer dizer literalmente cada
caractere que você digitar no Google

1264
00:58:53,030 --> 00:58:56,900
está a ser enviado, em última análise,
granel, mas também, por vezes, um

1265
00:58:56,900 --> 00:59:00,620
de cada vez, a fim de implementar
esses recursos de preenchimento automático Quando

1266
00:59:00,620 --> 00:59:03,000
os dados é, é claro, na web.

1267
00:59:03,000 --> 00:59:08,780
>> Agora, vamos dar uma olhada no que realmente
acontece quando clico Google Search.

1268
00:59:08,780 --> 00:59:10,420
E então nós vamos aproveitar isso nós mesmos.

1269
00:59:10,420 --> 00:59:15,320
Então, se eu rolar para baixo agora à própria
primeiro pedido que acabou de acontecer.

1270
00:59:15,320 --> 00:59:17,130
Observe o seguinte.

1271
00:59:17,130 --> 00:59:25,550
Ele foi enviado para um longo URL--
https://www.google.com/search?

1272
00:59:25,550 --> 00:59:27,100
e depois um monte de coisas.

1273
00:59:27,100 --> 00:59:29,620
Vamos ver isso na verdade agora
na aba do navegador em si.

1274
00:59:29,620 --> 00:59:31,310
Vamos nos livrar da barra de ferramentas aqui.

1275
00:59:31,310 --> 00:59:33,140
Aqui está a página de resultados de pesquisa.

1276
00:59:33,140 --> 00:59:34,790
E notem aqui está a URL.

1277
00:59:34,790 --> 00:59:37,430
Agora, você provavelmente pode adivinhar
o que está acontecendo aqui, em parte.

1278
00:59:37,430 --> 00:59:39,090
Então, em primeiro lugar, uma definição.

1279
00:59:39,090 --> 00:59:42,570
Isto aparentemente é o destino
onde o formulário é enviado.

1280
00:59:42,570 --> 00:59:44,910
Então, quando eu digitei no
palavras "gatos" e pressione Enter,

1281
00:59:44,910 --> 00:59:48,460
Aparentemente, o Google enviou
a minha entrada de texto para este URL

1282
00:59:48,460 --> 00:59:50,770
que eu tenho realçado
lá, barra de pesquisa.

1283
00:59:50,770 --> 00:59:56,530
Acontece que, em uma URL, qualquer coisa que
acontece após um ponto de interrogação é,

1284
00:59:56,530 --> 01:00:01,270
como nós continuar a dizer, um par de valores-chave
que foi digitado no formulário ou de alguma forma

1285
01:00:01,270 --> 01:00:04,500
transmitido a partir da
navegador para o servidor.

1286
01:00:04,500 --> 01:00:07,180
>> Então toda vez que você digitar a entrada
para uma forma na web

1287
01:00:07,180 --> 01:00:10,000
e é enviado como nós temos
vindo a discutir, através de um get,

1288
01:00:10,000 --> 01:00:12,400
um destes Virtual
envelopes, o conteúdo

1289
01:00:12,400 --> 01:00:15,510
de que envelope-- sim, manter
ficando recheado fisicamente

1290
01:00:15,510 --> 01:00:19,010
no envelope em sala de aula
hoje, mas tecnologicamente

1291
01:00:19,010 --> 01:00:21,110
ele é realmente colocar na URL.

1292
01:00:21,110 --> 01:00:22,940
Então, na verdade, deixe-me peneirar isso.

1293
01:00:22,940 --> 01:00:25,010
Onde você vê a entrada do usuário?

1294
01:00:25,010 --> 01:00:27,490
Onde você vê algo
que eu mesmo digitado aqui em cima?

1295
01:00:27,490 --> 01:00:32,100

1296
01:00:32,100 --> 01:00:33,491
Sim, por isso "gatos".

1297
01:00:33,491 --> 01:00:33,990
Certo?

1298
01:00:33,990 --> 01:00:36,380
Então deixe-me destilar esta
em algo mais simples.

1299
01:00:36,380 --> 01:00:39,917
Eu vou apagar tudo sobre
esta URL que eu não entendo,

1300
01:00:39,917 --> 01:00:42,250
e eu só vou sair
-lo como isto-- / search? q = gatos.

1301
01:00:42,250 --> 01:00:45,640

1302
01:00:45,640 --> 01:00:47,890
Vamos ver onde q
vem em um momento,

1303
01:00:47,890 --> 01:00:51,220
mas que se sente como o mínimo
quantidade de informações que eu forneci.

1304
01:00:51,220 --> 01:00:53,050
E agora eu vou bater Enter.

1305
01:00:53,050 --> 01:00:55,520
E perceber que ainda funciona.

1306
01:00:55,520 --> 01:00:57,950
Nós ainda voltar um monte de gatos.

1307
01:00:57,950 --> 01:01:00,340
Então, o Google é mais extravagante
do que isso nos dias de hoje.

1308
01:01:00,340 --> 01:01:01,934
É 2016, não em 1999.

1309
01:01:01,934 --> 01:01:04,600
Portanto, há outras coisas que o meu
navegador está enviando para o servidor.

1310
01:01:04,600 --> 01:01:07,100
Mas esta é minimamente
tudo que é necessário.

1311
01:01:07,100 --> 01:01:08,380
>> Então o que está acontecendo?

1312
01:01:08,380 --> 01:01:14,320
Bem, primeiro deixe-me ir em frente e ir
de volta para Cloud9 e deixe-me ir em frente

1313
01:01:14,320 --> 01:01:15,620
e fechar os guias anteriormente.

1314
01:01:15,620 --> 01:01:18,230
E eu vou fazer isso no meu
possui apenas por um momento.

1315
01:01:18,230 --> 01:01:20,730
Eu estou indo para ir em frente
e criar novo arquivo.

1316
01:01:20,730 --> 01:01:23,739
E eu vou guardá-lo como google.html.

1317
01:01:23,739 --> 01:01:26,280
E eu vou muito quickly--
Eu vou roubar, na verdade,

1318
01:01:26,280 --> 01:01:28,510
algum deste texto apenas para economizar tempo.

1319
01:01:28,510 --> 01:01:30,610
Vou colocar esta aqui.

1320
01:01:30,610 --> 01:01:33,850
Eu não vou incomodar-se com
estilização qualquer momento.

1321
01:01:33,850 --> 01:01:38,340
Nós vamos chamar isso de "My Google."

1322
01:01:38,340 --> 01:01:41,230
E eu estou indo para se livrar
de tudo no corpo.

1323
01:01:41,230 --> 01:01:42,740
E eu vou fazer o seguinte.

1324
01:01:42,740 --> 01:01:45,690
Deixe-me fazer 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, à acção de um
formulário é onde você envia os dados.

1327
01:01:54,130 --> 01:01:56,620
Então google.com/search.

1328
01:01:56,620 --> 01:01:59,390
E o método que deseja usar
pode ser uma de duas coisas.

1329
01:01:59,390 --> 01:02:02,870
Pode ser tanto "pegar", como mantemos
discutir, ou pode ser "pós".

1330
01:02:02,870 --> 01:02:05,340
Por agora, o essencial
diferença é que, se você usar "obter",

1331
01:02:05,340 --> 01:02:09,590
todas as informações que o
usuário fornece é enviado na URL.

1332
01:02:09,590 --> 01:02:13,530
>> Isso é ótimo para coisas como pesquisa
motores e algumas outras aplicações,

1333
01:02:13,530 --> 01:02:17,080
mas em que circunstâncias
você não quer preencher um formulário

1334
01:02:17,080 --> 01:02:21,620
e ter as informações acabar o
URL, como na barra de endereços 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 fazer você--

1337
01:02:26,605 --> 01:02:27,480
AUDIÊNCIA: [inaudível]

1338
01:02:27,480 --> 01:02:28,450
DAVID J. MALAN: Sim, como o quê?

1339
01:02:28,450 --> 01:02:29,270
AUDIÊNCIA: As senhas.

1340
01:02:29,270 --> 01:02:31,936
DAVID J. MALAN: Sim, então você log
no Facebook ou algum site.

1341
01:02:31,936 --> 01:02:34,395
Essa é a entrada do usuário a partir de
um formulário, uma caixa de texto,

1342
01:02:34,395 --> 01:02:37,020
mas você provavelmente não quer que ele
aparecendo na URL do navegador.

1343
01:02:37,020 --> 01:02:38,121
Por quê?

1344
01:02:38,121 --> 01:02:40,870
Quer dizer, talvez há alguns
implicações de segurança na rede,

1345
01:02:40,870 --> 01:02:44,830
mas more-- gosta, mais simplesmente, o que se
seu companheiro de quarto, o seu outro significativo,

1346
01:02:44,830 --> 01:02:47,710
seus filhos, seu cônjuge parece
através do histórico do navegador?

1347
01:02:47,710 --> 01:02:50,762
Não é a sua senha correta
há na história do seu navegador.

1348
01:02:50,762 --> 01:02:52,220
Que não se sente como um bom design.

1349
01:02:52,220 --> 01:02:54,500
Ou ainda mais tecnicamente,
suponha que você está tentando

1350
01:02:54,500 --> 01:02:59,180
para fazer upload de uma foto para o Flickr
ou Facebook ou wherever--

1351
01:02:59,180 --> 01:03:03,010
que é a entrada de utilizador, embora
é um pouco mais interessante-- como

1352
01:03:03,010 --> 01:03:05,530
faço para empinar uma imagem na barra de URL?

1353
01:03:05,530 --> 01:03:06,730
Você tipo de meio que não pode.

1354
01:03:06,730 --> 01:03:07,396
Você meio que pode.

1355
01:03:07,396 --> 01:03:10,210
Mas, realmente, eu sou duramente pressionado
imaginar fazendo isso.

1356
01:03:10,210 --> 01:03:13,470
Então eu preciso de um outro método para
upload de fotos para um site,

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
Mas, por enquanto, vamos apenas falar sobre
"Obter", que é o mais simples dos dois.

1359
01:03:18,740 --> 01:03:21,100
Ele só coloca toda a
entrada do usuário para o URL.

1360
01:03:21,100 --> 01:03:22,830
>> Então aqui está a forma que eu estou criando.

1361
01:03:22,830 --> 01:03:24,070
Quero uma entrada.

1362
01:03:24,070 --> 01:03:24,820
E sabe de uma coisa?

1363
01:03:24,820 --> 01:03:26,111
Vou dar um palpite aqui.

1364
01:03:26,111 --> 01:03:31,600
Eu vou lembrar o meu
input "q" para "consulta".

1365
01:03:31,600 --> 01:03:34,970
E eu acho que este é um dos
desenhos originais, talvez, a partir de 1999.

1366
01:03:34,970 --> 01:03:39,560
E, em seguida, o tipo de entrada
é apenas vai ser "texto".

1367
01:03:39,560 --> 01:03:43,040
E então eu vou ter outra entrada
que não precisa de um nome, como veremos em 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 isso vai
dá-me um botão especial.

1370
01:03:47,070 --> 01:03:48,320
E é isso.

1371
01:03:48,320 --> 01:03:50,790
>> Então deixe-me ir em frente e salve este arquivo.

1372
01:03:50,790 --> 01:03:54,910
Vou voltar para o meu
navegador e vá para google.html.

1373
01:03:54,910 --> 01:03:56,140
Entrar.

1374
01:03:56,140 --> 01:03:59,680
E é uma espécie de escassa
para dizer o mínimo.

1375
01:03:59,680 --> 01:04:03,110
Mas deixe-me ir em frente
e procure por "gatos".

1376
01:04:03,110 --> 01:04:06,510
E notem que eu estou atualmente
neste URL Cloud9.

1377
01:04:06,510 --> 01:04:09,240
Mas no momento eu clico isto,
onde você espera que eu vou acabar?

1378
01:04:09,240 --> 01:04:10,160
>> AUDIÊNCIA: Google.

1379
01:04:10,160 --> 01:04:11,118
>> DAVID J. MALAN: Google.

1380
01:04:11,118 --> 01:04:12,740
Então, vamos clicar em Enviar.

1381
01:04:12,740 --> 01:04:15,200
E, de fato eu re-implementado Google.

1382
01:04:15,200 --> 01:04:15,700
Certo?

1383
01:04:15,700 --> 01:04:16,480
É mais simples.

1384
01:04:16,480 --> 01:04:17,120
É mais leve.

1385
01:04:17,120 --> 01:04:20,350
Quer dizer, o meu código é claramente melhor do que
deles, da confusão vimos anteriormente.

1386
01:04:20,350 --> 01:04:21,100
E sabe de uma coisa?

1387
01:04:21,100 --> 01:04:22,610
Eu estou indo para apimentar isso um pouco.

1388
01:04:22,610 --> 01:04:23,860
Eu não mencionei isso antes.

1389
01:04:23,860 --> 01:04:27,860
Há tags como H1, para a rubrica 1,
o título mais importante em uma página.

1390
01:04:27,860 --> 01:04:30,570
"Meu Google," Eu vou chamar este.

1391
01:04:30,570 --> 01:04:31,940
Deixe-me recarregar.

1392
01:04:31,940 --> 01:04:33,772
É olhar um pouco melhor já.

1393
01:04:33,772 --> 01:04:34,980
E, na verdade, você sabe o quê?

1394
01:04:34,980 --> 01:04:36,430
Eu tenho já-- eu menti.

1395
01:04:36,430 --> 01:04:40,200
Eu disse que não ia estilo este,
mas eu vou estilo este como antes.

1396
01:04:40,200 --> 01:04:46,860
E meu corpo vai ser,
digamos, centro de text-align.

1397
01:04:46,860 --> 01:04:48,800
Está parecendo mais como o Google já.

1398
01:04:48,800 --> 01:04:51,090
>> Eu preciso de uma quebra de linha, no entanto,
para esse botão Enviar.

1399
01:04:51,090 --> 01:04:52,798
E acontece, você
pode utilizar n,

1400
01:04:52,798 --> 01:04:57,320
ou você pode mais literalmente apenas dizer,
dá-me uma linha de quebra aqui-- a tag br.

1401
01:04:57,320 --> 01:04:59,319
E se eu recarregar isso, agora ele vai para lá.

1402
01:04:59,319 --> 01:05:01,610
É um pouco feio, então eu
poderia fazer várias quebras de linha,

1403
01:05:01,610 --> 01:05:03,310
mas não vamos ficar muito ganancioso aqui.

1404
01:05:03,310 --> 01:05:06,430
Então agora vamos ver se ele funciona para "cães".

1405
01:05:06,430 --> 01:05:08,640
Parece que funciona para "cães", como bem.

1406
01:05:08,640 --> 01:05:10,780
Então qual é o takeaway convincente aqui?

1407
01:05:10,780 --> 01:05:13,600
Um-- não era um grande salto para
introduzir mais algumas marcas,

1408
01:05:13,600 --> 01:05:15,370
como a marca de formulário na marca de entrada.

1409
01:05:15,370 --> 01:05:17,120
Mas fundamentalmente
é, tudo o que estamos fazendo

1410
01:05:17,120 --> 01:05:20,610
está alavancando a nossa compreensão
de HTTP e o facto

1411
01:05:20,610 --> 01:05:24,900
em última análise, que as formas alterar
o que está na URL do navegador,

1412
01:05:24,900 --> 01:05:28,540
e assim, portanto, nós podemos
mecanicamente fornecer dados para um servidor

1413
01:05:28,540 --> 01:05:33,600
fazendo um formulário HTML e saber
que compreende o servidor HTTP,

1414
01:05:33,600 --> 01:05:36,890
Tal como o nosso corpo compreende, como,
apertando minha mão, que mesmo protocolo,

1415
01:05:36,890 --> 01:05:40,920
e assim que voltarmos a resposta
que em última análise, de esperar.

1416
01:05:40,920 --> 01:05:44,050
>> Então, vamos tentar fazer um
última coisa agora com móvel,

1417
01:05:44,050 --> 01:05:47,052
e eu vou make-- vou acrescentar
este código para os slides.

1418
01:05:47,052 --> 01:05:49,760
Então, se você gostaria de mexer, você
certamente pode levá-la de lá.

1419
01:05:49,760 --> 01:05:51,551
Mas eu estou indo para ir
em frente e fazer uma coisa.

1420
01:05:51,551 --> 01:05:54,120
Eu estou indo para ir em frente e
abrir meu índice página--

1421
01:05:54,120 --> 01:05:59,030
minha página Olá, como antes, o que
tem um monte de este texto faux-Latina,

1422
01:05:59,030 --> 01:06:05,470
ou um texto sem sentido Latina e has--
parece que isso neste tamanho da fonte.

1423
01:06:05,470 --> 01:06:07,850
Mas deixe-me ir em frente e fazer isso.

1424
01:06:07,850 --> 01:06:09,300
Eu estou indo para ir para Cloud9.

1425
01:06:09,300 --> 01:06:10,380
E você não tem que fazer este passo.

1426
01:06:10,380 --> 01:06:11,420
Eu só vou fazer isso sozinho.

1427
01:06:11,420 --> 01:06:12,890
Vou clique em Compartilhar.

1428
01:06:12,890 --> 01:06:15,170
E esta é uma característica
apenas de Cloud9, em que

1429
01:06:15,170 --> 01:06:17,710
Eu posso fazer o meu ambiente público.

1430
01:06:17,710 --> 01:06:20,240
>> E apenas por uma questão de
demonstração, deixe-me fazer isso.

1431
01:06:20,240 --> 01:06:22,870
Vou fazer a minha aplicação pública.

1432
01:06:22,870 --> 01:06:25,230
Observe que está me avisando, sou
I certeza se quero fazer isso,

1433
01:06:25,230 --> 01:06:28,438
porque isso vai fazer com que todos
no mundo, se eles estão aqui agora

1434
01:06:28,438 --> 01:06:33,560
ou assistir o vídeo mais tarde na
internet capaz de ver o que eu vejo.

1435
01:06:33,560 --> 01:06:34,440
Mas isso é OK.

1436
01:06:34,440 --> 01:06:37,870
Eu vou dizer "Done".

1437
01:06:37,870 --> 01:06:42,080
E deixe-me encorajá-lo, se eu fiz
este correctly-- deixe-me testá-lo primeiro.

1438
01:06:42,080 --> 01:06:45,590
Vá em frente, se você não mente--
em um navegador no seu computador,

1439
01:06:45,590 --> 01:06:49,900
vá a este URL, e espero
você vai ver o meu texto em latim.

1440
01:06:49,900 --> 01:06:52,820
E para ficar claro, é
não em execução no meu laptop.

1441
01:06:52,820 --> 01:06:53,610
É na nuvem.

1442
01:06:53,610 --> 01:06:58,120
Está na Cloud9, literalmente, mas
Eu fiz a minha área de trabalho público

1443
01:06:58,120 --> 01:07:03,450
para que qualquer pessoa na internet
pode acessar minha página Latina.

1444
01:07:03,450 --> 01:07:07,209
>> Ir para o mesmo URL em
seu telefone, se pudesse.

1445
01:07:07,209 --> 01:07:09,750
Se ele vai custar-lhe, porém, você
pode apenas olhar por cima do ombro.

1446
01:07:09,750 --> 01:07:40,688

1447
01:07:40,688 --> 01:07:42,467
AUDIÊNCIA: [inaudível]

1448
01:07:42,467 --> 01:07:43,550
DAVID J. MALAN: Eu sinto muito?

1449
01:07:43,550 --> 01:07:45,390
AUDIÊNCIA: [inaudível]

1450
01:07:45,390 --> 01:07:47,710
DAVID J. MALAN: Apenas palavras latinas.

1451
01:07:47,710 --> 01:07:48,210
Isso é tudo.

1452
01:07:48,210 --> 01:07:49,250
Mas isso é o que você deve ver.

1453
01:07:49,250 --> 01:07:49,875
>> AUDIÊNCIA: É.

1454
01:07:49,875 --> 01:07:50,790
DAVID J. MALAN: Yeah.

1455
01:07:50,790 --> 01:07:51,300
Sim.

1456
01:07:51,300 --> 01:07:51,540
ESTÁ BEM.

1457
01:07:51,540 --> 01:07:53,530
Para que eu possa manter o seu
telefone por um momento?

1458
01:07:53,530 --> 01:07:57,504
Então, espero que, se você está acessando
-lo, ele deve olhar quase ilegível.

1459
01:07:57,504 --> 01:07:59,920
É still-- Quero dizer, é
ilegíveis por causa da Latina.

1460
01:07:59,920 --> 01:08:01,920
Mas também é ilegível
para que outro motivo?

1461
01:08:01,920 --> 01:08:03,775
Como, o que lhe desagrada sobre isso?

1462
01:08:03,775 --> 01:08:04,650
AUDIÊNCIA: É 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ão, como podemos corrigir isso?

1465
01:08:07,920 --> 01:08:09,730
É super, super pequeno
no telefone do Victoria

1466
01:08:09,730 --> 01:08:11,400
e, se você puxou
-lo você mesmo, provavelmente,

1467
01:08:11,400 --> 01:08:14,660
pequeno em seu telefone, bem como, a menos que você
têm configurações de acessibilidade habilitado.

1468
01:08:14,660 --> 01:08:15,530
O que é isso?

1469
01:08:15,530 --> 01:08:18,497
Você poderia simplesmente apertar e
zoom, o que é viável,

1470
01:08:18,497 --> 01:08:20,330
mas então você só vê
algumas palavras de cada vez.

1471
01:08:20,330 --> 01:08:20,859
Então, espere um minuto.

1472
01:08:20,859 --> 01:08:21,720
Eu sei como consertar isso.

1473
01:08:21,720 --> 01:08:22,219
Certo?

1474
01:08:22,219 --> 01:08:26,130
Eu poderia usar CSS, e eu poderia mudar o
tamanho de fonte de 12 pontos para 24 pontos.

1475
01:08:26,130 --> 01:08:29,020
Mas o efeito colateral de que,
é claro, vai ser agora,

1476
01:08:29,020 --> 01:08:32,630
em um desktop ou um laptop,
Agora o texto é duas vezes maior.

1477
01:08:32,630 --> 01:08:35,810
E por isso seria tipo de ser agradável
para distinguir entre dispositivos,

1478
01:08:35,810 --> 01:08:37,840
e verifica-se lá fora
são maneiras de fazer isso.

1479
01:08:37,840 --> 01:08:39,590
Existem vários
maneiras diferentes, de facto,

1480
01:08:39,590 --> 01:08:44,189
pelo qual usando CSS e recursos mais sofisticados
que não vai entrar em em grande detalhe,

1481
01:08:44,189 --> 01:08:46,960
você pode essencialmente consulta
o navegador e dizer:

1482
01:08:46,960 --> 01:08:51,550
se a sua tela é menor do que isso
muitos pixels, use este tamanho da fonte.

1483
01:08:51,550 --> 01:08:55,180
Se a tela é maior do que isso
muitos pixels, use este outro tamanho da fonte.

1484
01:08:55,180 --> 01:08:57,080
>> Pode ser ainda mais extravagante ainda.

1485
01:08:57,080 --> 01:09:00,140
Se você já visitou um
página web que, em um desktop,

1486
01:09:00,140 --> 01:09:04,404
tem um grande menu talvez fora para a
lado, e então todo o conteúdo

1487
01:09:04,404 --> 01:09:07,029
é para o lado de que menu--
que é uma espécie de paradigma comum.

1488
01:09:07,029 --> 01:09:09,670
Menu do lado esquerdo, o conteúdo
à direita, ou vice-versa.

1489
01:09:09,670 --> 01:09:13,569
realmente não funciona no celular quando seu
tela é apenas isso muitas pixels de largura.

1490
01:09:13,569 --> 01:09:16,233
Então, mais comum no celular é,
seu menu de repente começar

1491
01:09:16,233 --> 01:09:18,399
entrou em colapso, e você tem que
clicar em um botão para vê-lo,

1492
01:09:18,399 --> 01:09:22,404
ou o site irá colocar o menu
acima dele e colocar o conteúdo abaixo dele.

1493
01:09:22,404 --> 01:09:24,779
E você pode implementar estas
coisas de várias maneiras, também.

1494
01:09:24,779 --> 01:09:28,340
Você pode perguntar a seus programadores,
hey, a equipe, a qualquer hora

1495
01:09:28,340 --> 01:09:34,450
você vê uma solicitação HTTP a partir de um Android
dispositivo, um dispositivo Microsoft, a Google

1496
01:09:34,450 --> 01:09:39,930
dispositivo, um dispositivo da Apple, use esta
tamanho da fonte e usar esse layout do menu,

1497
01:09:39,930 --> 01:09:42,670
ou então usar este padrão maior do layout.

1498
01:09:42,670 --> 01:09:45,410
>> Agora, usando o
técnica fundamental hoje

1499
01:09:45,410 --> 01:09:48,529
poderia usar os engenheiros
para saber se é

1500
01:09:48,529 --> 01:09:53,660
um iPhone, um telefone Android, um computador portátil,
um desktop visitar o servidor da empresa?

1501
01:09:53,660 --> 01:09:55,310
Em que é que vão obter essa informação?

1502
01:09:55,310 --> 01:09:56,080
>> AUDIÊNCIA: cabeçalho?

1503
01:09:56,080 --> 01:09:57,740
>> DAVID J. MALAN: Sim, o cabeçalho HTTP.

1504
01:09:57,740 --> 01:10:01,714
Assim, a cada pedido HTTP proveniente de
seus clientes para os seus servidores

1505
01:10:01,714 --> 01:10:03,880
incluir, dentro desse virtual
envelope, um grupo inteiro

1506
01:10:03,880 --> 01:10:08,260
de cabeçalhos de HTTP, um dos quais está
o navegador eo sistema operacional

1507
01:10:08,260 --> 01:10:10,290
ainda, se o cuidado de
esse nível de detalhe.

1508
01:10:10,290 --> 01:10:13,790
Agora, é uma cadeia de críptica de aparência, mas
existe software que só vai

1509
01:10:13,790 --> 01:10:18,530
simplificar isso, e você pode simplesmente pedir
na programação code-- PHP, Java, C ++,

1510
01:10:18,530 --> 01:10:23,650
whatever-- o telefone é isto--
o dispositivo é este usuário usando?

1511
01:10:23,650 --> 01:10:27,501
E então você pode dizer, mostrar-lhes esta
versão do site, se é um telefone.

1512
01:10:27,501 --> 01:10:30,250
Mostre-lhes esta versão do
website se for um laptop ou desktop.

1513
01:10:30,250 --> 01:10:32,316
Mas você não precisa mesmo
complexidade do lado do servidor.

1514
01:10:32,316 --> 01:10:33,940
Você pode fazer mesmo a mais simples das coisas.

1515
01:10:33,940 --> 01:10:34,815
>> Eu vou fazer isso.

1516
01:10:34,815 --> 01:10:38,995
Eu estou indo para ir em frente para
meu ambiente Cloud9,

1517
01:10:38,995 --> 01:10:41,370
e eu estou indo para adicionar uma marca
que você viu no Google antes.

1518
01:10:41,370 --> 01:10:42,770
É o chamado metatag.

1519
01:10:42,770 --> 01:10:45,520
E eu nunca me lembro um presente, então
Vou transcrevê-lo aqui.

1520
01:10:45,520 --> 01:10:50,552
meta name = "viewport" e, em seguida,
content = "width = largura do dispositivo, intital

1521
01:10:50,552 --> 01:11:02,060
scale = 1 "e é isso.

1522
01:11:02,060 --> 01:11:06,230
>> Por isso, poderia muito bem ser
como um encantamento mágico.

1523
01:11:06,230 --> 01:11:11,300
Não é todo o que claro, mas isso tem
algo a ver com a janela de exibição,

1524
01:11:11,300 --> 01:11:15,070
e janela de exibição é apenas o corpo de um
A página web, a região retangular que

1525
01:11:15,070 --> 01:11:16,690
define a maior parte da página.

1526
01:11:16,690 --> 01:11:19,060
E este é apenas dizer
o navegador, você sabe o quê?

1527
01:11:19,060 --> 01:11:22,589
Faça a largura da página
efectivamente igual à largura do dispositivo.

1528
01:11:22,589 --> 01:11:25,380
Em outras palavras, não assuma que
temos um tipo de espaço ilimitado.

1529
01:11:25,380 --> 01:11:29,920
Suponha que você só tem tanto
espaço como o próprio dispositivo é grande.

1530
01:11:29,920 --> 01:11:34,454
E agora, se eu recarregar esta
no meu navegador, não vejo nenhuma mudança.

1531
01:11:34,454 --> 01:11:37,370
Mas se eu fizesse isso correctly-- e
deixe-me pela minha fingers-- se todos

1532
01:11:37,370 --> 01:11:42,920
recarregar seus telefones, você
ver uma mudança atraente?

1533
01:11:42,920 --> 01:11:43,620
Sim, é isso--

1534
01:11:43,620 --> 01:11:45,067
>> AUDIÊNCIA: [inaudível]

1535
01:11:45,067 --> 01:11:45,900
DAVID J. MALAN: Sim.

1536
01:11:45,900 --> 01:11:46,400
ESTÁ BEM.

1537
01:11:46,400 --> 01:11:47,850
Então, sem dúvida, mais legível agora?

1538
01:11:47,850 --> 01:11:53,070
Ainda pequeno, para ser justo, mas não
tão pequena quanto a ser incontrolável.

1539
01:11:53,070 --> 01:11:56,920
E eu certamente poderia substituir essa
ainda mais com CSS ou no lado do servidor,

1540
01:11:56,920 --> 01:12:00,120
mas cada vez que você está
vendo é mais e mais recursos

1541
01:12:00,120 --> 01:12:02,900
sendo adicionado a
environments-- do lado do cliente

1542
01:12:02,900 --> 01:12:06,530
JavaScript, como discutiremos
amanhã, CSS e HTML-- assim

1543
01:12:06,530 --> 01:12:09,190
que todas essas consultas
pode ser feito no cliente

1544
01:12:09,190 --> 01:12:11,910
de modo a incomodar o
servidor muito menos e não

1545
01:12:11,910 --> 01:12:14,530
ter que manter-se com, por
exemplo, o constante ataque

1546
01:12:14,530 --> 01:12:17,210
de novo o sistema operativo
versões, novas versões do navegador.

1547
01:12:17,210 --> 01:12:20,190
Você pode simplesmente deixar o navegador
pedir o dispositivo, quão grande é você,

1548
01:12:20,190 --> 01:12:22,890
e em seguida, fazer um pouco lógico
decisões com base nisso.

1549
01:12:22,890 --> 01:12:25,140
Mas vamos ver mais oportunidades
para decisões lógicas

1550
01:12:25,140 --> 01:12:27,223
amanhã no contexto
de uma linguagem de programação.

1551
01:12:27,223 --> 01:12:29,800

1552
01:12:29,800 --> 01:12:32,760
>> Assim, todas as perguntas, então,
sobre o desenvolvimento web?

1553
01:12:32,760 --> 01:12:36,130
Hoje não é de programação web, por
se, já que a maioria tudo o que fizemos

1554
01:12:36,130 --> 01:12:38,370
foi muito estético, se quiserem.

1555
01:12:38,370 --> 01:12:41,750
Não há nenhuma tomada de decisões em
o código que nós escrevemos,

1556
01:12:41,750 --> 01:12:44,990
e é por isso que o HTML é uma marcação
linguagem, não uma linguagem de programação.

1557
01:12:44,990 --> 01:12:47,140
Mas amanhã vamos dar
um olhar rápido, em última análise,

1558
01:12:47,140 --> 01:12:49,340
em JavaScript, que é
uma programação real

1559
01:12:49,340 --> 01:12:54,220
linguagem que nos permite fazer um pouco mais.

1560
01:12:54,220 --> 01:12:56,800
>> Alguma pergunta?

1561
01:12:56,800 --> 01:13:00,480
Bem, deixe-me propor dois
oportunidades opcionais para trabalhos de casa.

1562
01:13:00,480 --> 01:13:02,900
Um é-- estes Cloud9
contas não irá expirar.

1563
01:13:02,900 --> 01:13:04,669
Você está convidado a usar
-los para mexer com.

1564
01:13:04,669 --> 01:13:05,960
É o nível de serviço grátis.

1565
01:13:05,960 --> 01:13:08,754
Perceba que, se ao criar
seu espaço de trabalho, você tornou público,

1566
01:13:08,754 --> 01:13:11,670
que significa que qualquer pessoa na
Internet pode ver o que você está digitando.

1567
01:13:11,670 --> 01:13:15,104
Então, talvez apenas considere
não embaraçar a si mesmo

1568
01:13:15,104 --> 01:13:18,020
se você está colocando o seu primeiro web
Página lá fora publicamente acidentalmente,

1569
01:13:18,020 --> 01:13:20,134
mas ninguém vai
saber para olhar lá de qualquer maneira.

1570
01:13:20,134 --> 01:13:23,760
>> E dois-- deixe-me atirar
-se esta URL, bem como,

1571
01:13:23,760 --> 01:13:28,250
especialmente se você veio hoje uma
pouco menos confortável do que outros,

1572
01:13:28,250 --> 01:13:30,430
sem saber o que significa tudo isso.

1573
01:13:30,430 --> 01:13:36,780
Perceber que muito mais deste vídeo,
que é tanto uma boa maneira de adormecer

1574
01:13:36,780 --> 01:13:39,380
e também para rir enquanto
Fazendo isso, também tem

1575
01:13:39,380 --> 01:13:44,300
um monte de socialmente interessante
e discussões relevantes para a segurança

1576
01:13:44,300 --> 01:13:47,370
nele de John Oliver,
embora um comediante.

1577
01:13:47,370 --> 01:13:55,456
>> Mas se não há mais dúvidas,
que nos traz para a recepção.

1578
01:13:55,456 --> 01:13:56,830
Então por que não ligo a música.

1579
01:13:56,830 --> 01:13:58,610
Deve haver bebidas
e lanches fora.

1580
01:13:58,610 --> 01:14:00,220
Estou feliz por conviver por tanto
desde que as pessoas gostariam,

1581
01:14:00,220 --> 01:14:01,600
responder a perguntas mais one-on-one.

1582
01:14:01,600 --> 01:14:03,330
Mas, caso contrário, você é bem-vindo
para decolar a qualquer momento,

1583
01:14:03,330 --> 01:14:05,740
e vamos vê-lo novamente
amanhã de manhã para um pouco mais.

1584
01:14:05,740 --> 01:14:07,290
Tudo bem, obrigado.

1585
01:14:07,290 --> 01:14:10,428