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

2
00:00:00,127 --> 00:00:01,210
DAVID J. MALAN: Está bien.

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

4
00:00:02,160 --> 00:00:05,810
Por lo tanto, el objetivo de esta sesión final
es introducir unos cuantos conceptos

5
00:00:05,810 --> 00:00:09,290
sino también dar a todos la oportunidad
para estirar la clase de los dedos

6
00:00:09,290 --> 00:00:11,270
y en realidad hacer algo
un poco de práctica.

7
00:00:11,270 --> 00:00:13,897
El objetivo no es convertir
todos nosotros en los desarrolladores web

8
00:00:13,897 --> 00:00:16,230
por cualquier medio, pero en realidad sólo
para darle un sabor de algunos

9
00:00:16,230 --> 00:00:21,750
de los constructos fundamentales de lo
entra en la programación web y hoy Web

10
00:00:21,750 --> 00:00:23,980
el desarrollo, por lo que la
lado estático de cosas--

11
00:00:23,980 --> 00:00:26,660
sin lógica, sin necesidad de programación
idioma, simplemente el contenido estático.

12
00:00:26,660 --> 00:00:29,660
Y nos dará una oportunidad
para ver realmente lo que es un servidor web,

13
00:00:29,660 --> 00:00:34,140
ver lo que es un archivo HTML, ver qué
HTTP es en realidad está sirviendo.

14
00:00:34,140 --> 00:00:38,600
Pero antes de sumergirse en cualquier retrospectiva
preguntas acerca de la computación en nube

15
00:00:38,600 --> 00:00:43,922
o la seguridad o cualquier otra cosa?

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

17
00:00:44,890 --> 00:00:47,181
Está bien, bueno, vamos a
hacer esto, por si acaso

18
00:00:47,181 --> 00:00:49,680
el proceso de inscribirse en
algo que lleva unos pocos minutos.

19
00:00:49,680 --> 00:00:51,221
Vamos a dejar que lo haga en el fondo.

20
00:00:51,221 --> 00:00:56,860
Vaya por delante, si se pudiera,
c9.io. a este URL aquí--

21
00:00:56,860 --> 00:01:02,810
Se trata de un tercero clientes--
plataforma como servicio, si Voluntad--

22
00:01:02,810 --> 00:01:05,190
que va a invitar a usted
para registrarse en una cuenta,

23
00:01:05,190 --> 00:01:08,650
y que va a dar a cada uno de ustedes
una cuenta en el llamado nube

24
00:01:08,650 --> 00:01:11,330
en la infraestructura de otra persona,
una compañía llamada Cloud9.

25
00:01:11,330 --> 00:01:13,350
Pero lo bueno de
esto es que te dan

26
00:01:13,350 --> 00:01:15,990
una aproximación de una
desarrollo real en el mundo real

27
00:01:15,990 --> 00:01:18,530
ambiente, aunque en el
nube y en un navegador web,

28
00:01:18,530 --> 00:01:21,175
y vamos a utilizar esto en realidad
experimentar un poco hoy.

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

30
00:01:27,116 --> 00:01:30,260
Y luego seguir adelante y simplemente navegar
su camino hacia el proceso de registro

31
00:01:30,260 --> 00:01:32,630
Si tu pudieras.

32
00:01:32,630 --> 00:01:36,080
Así que nos pasó a utilizar esto en la clase
Doy clases para todos los estudiantes,

33
00:01:36,080 --> 00:01:39,140
tanto en el campus y fuera ahora, y
es reemplazado lo que históricamente

34
00:01:39,140 --> 00:01:41,390
era lo contrario de software descargable.

35
00:01:41,390 --> 00:01:44,620
Así que lo que estaban ganando acceso a
es una de las máquinas virtuales,

36
00:01:44,620 --> 00:01:46,460
en esencia, que he descrito anteriormente.

37
00:01:46,460 --> 00:01:50,260
Así que esta empresa probablemente Cloud9
rentas procedentes de un tercer hecho Party--

38
00:01:50,260 --> 00:01:52,760
en este caso, Google-- conjunto
manojo de máquinas virtuales

39
00:01:52,760 --> 00:01:56,500
que de alguna manera para arriba en picar
la ilusión de servidores individuales

40
00:01:56,500 --> 00:01:58,610
que cada uno de nosotros tiene un control total sobre.

41
00:01:58,610 --> 00:02:01,640
No es exacto decir
que son máquinas virtuales,

42
00:02:01,640 --> 00:02:04,550
sin embargo, porque lo
Cloud9 utiliza en realidad

43
00:02:04,550 --> 00:02:07,570
es un poco más nueva tecnología
llama la contenerización.

44
00:02:07,570 --> 00:02:13,150
Y déjame agarrar esta foto
aquí para pintar este cuadro.

45
00:02:13,150 --> 00:02:16,540
>> Un contenedor es, si
recuerdan la imagen

46
00:02:16,540 --> 00:02:19,900
de antes, un poco más ligero
peso que una máquina virtual.

47
00:02:19,900 --> 00:02:22,090
De hecho, mientras que la última
vez que hablamos de que hay

48
00:02:22,090 --> 00:02:25,170
ser un operativo
sistema y un hipervisor

49
00:02:25,170 --> 00:02:28,260
y luego el sistema operativo huésped, invitado
sistema operativo, operativo invitado

50
00:02:28,260 --> 00:02:30,940
sistema, en la parte superior de su
hardware físico,

51
00:02:30,940 --> 00:02:33,740
la diferencia con este nuevo
la tecnología, la contenerización,

52
00:02:33,740 --> 00:02:37,290
es que todos ellos comparten alguna manera
el mismo sistema operativo.

53
00:02:37,290 --> 00:02:39,970
Pero todavía crean
la ilusión de todo el mundo

54
00:02:39,970 --> 00:02:44,590
aun teniendo su propia y exclusiva
derechos administrativos y archivos

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

56
00:02:45,400 --> 00:02:48,230
Pero hay menos en el software
entre el usuario y el hardware.

57
00:02:48,230 --> 00:02:52,260
El resultado de los cuales es, de
teoría, un mayor rendimiento,

58
00:02:52,260 --> 00:02:55,470
porque usted está utilizando o
desperdiciar menos recursos

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

60
00:02:57,360 --> 00:02:59,420
Así que este se llama
contenerización por naturaleza

61
00:02:59,420 --> 00:03:02,920
por medio de una tecnología llamada acoplable,
que es mucho entrar en su cuenta.

62
00:03:02,920 --> 00:03:05,086
Y esto es algo que
ingenieros de su empresa

63
00:03:05,086 --> 00:03:08,610
podría tipo de especie de comenzar a hablar
acerca pronto si no lo han hecho ya,

64
00:03:08,610 --> 00:03:11,590
aunque ciertamente no hay
razón para saltar sobre cualquier bandwagons.

65
00:03:11,590 --> 00:03:15,410
>> Así que con eso dicho, lo
es probable que ves ahora

66
00:03:15,410 --> 00:03:22,670
es una pantalla que se parece un poco a esto.

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

68
00:03:23,170 --> 00:03:25,260
Y sólo me llaman de nuevo si no.

69
00:03:25,260 --> 00:03:27,440
Y si así que-- Voy a venir si no.

70
00:03:27,440 --> 00:03:30,244
Vaya por delante y haga clic en ese gran
además de crear un espacio de trabajo,

71
00:03:30,244 --> 00:03:31,660
y verá una pantalla como esta.

72
00:03:31,660 --> 00:03:35,020
Puede llamar al área de trabajo
nombrar cualquier cosa que desee, por ahora.

73
00:03:35,020 --> 00:03:38,660
Y de la misma realidad, por simplicidad,
y- ir bien, algunos de ustedes

74
00:03:38,660 --> 00:03:39,660
ya tienen espacios de trabajo.

75
00:03:39,660 --> 00:03:47,050
Llamar lo que want-- negocio,
Harvard, jueves, lo que usted desea.

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

77
00:03:48,800 --> 00:03:52,380
Puede dejarlo privada, a menos que
ya tienen un montón de espacios de trabajo.

78
00:03:52,380 --> 00:03:55,280
Si uno se ve obligado a hacerlo público,
eso está bien para los propósitos de la actualidad.

79
00:03:55,280 --> 00:03:56,750
Aquí, también, es una de las ventas adicionales.

80
00:03:56,750 --> 00:03:59,939
Se obtiene un espacio de trabajo privado
defecto. Pero si quieres más,

81
00:03:59,939 --> 00:04:00,980
usted tiene que pagar más.

82
00:04:00,980 --> 00:04:02,870
De lo contrario, te obligan
para hacer su trabajo público.

83
00:04:02,870 --> 00:04:05,600
Pero eso está bien, porque también
apuntar esto en las comunidades de código abierto

84
00:04:05,600 --> 00:04:07,700
animar a la gente a
En realidad colaborar.

85
00:04:07,700 --> 00:04:10,699
>> Y la última cosa que es importante,
sin embargo, es, después de elegir un nombre

86
00:04:10,699 --> 00:04:17,140
y después de su elección privada o pública,
haga clic en HTML 5, el icono naranja grande

87
00:04:17,140 --> 00:04:22,430
segundo desde la izquierda, y
a continuación, haga clic en Crear espacio de trabajo.

88
00:04:22,430 --> 00:04:24,580
Y probablemente lo hará
tomar un minuto más o menos,

89
00:04:24,580 --> 00:04:26,540
pero vas a continuación, tiene una
medio ambiente, una vez que se

90
00:04:26,540 --> 00:04:30,544
hacer eso, que parece una reminiscencia de
lo que tengo en la pantalla aquí ahora.

91
00:04:30,544 --> 00:04:33,210
Pero, de nuevo, puede ser que tome un minuto
o más para llegar a esta pantalla

92
00:04:33,210 --> 00:04:34,770
una vez que haya hecho clic en Crear espacio de trabajo.

93
00:04:34,770 --> 00:04:37,936
Pero sólo me Indicador sobre si le gustaría mí
para echar un vistazo a cualquier cosa o asesoramiento.

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

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

96
00:04:40,690 --> 00:04:42,390
Así que voy a este fondo por ahora.

97
00:04:42,390 --> 00:04:44,260
Llámame sobre si parece
tiene alguna dificultad técnica.

98
00:04:44,260 --> 00:04:46,210
Pero, de nuevo, puede ser que tome una
poco para que se abra.

99
00:04:46,210 --> 00:04:49,570
Y vamos a seguir adelante y hablar de lo
que en realidad significa hacer una página web,

100
00:04:49,570 --> 00:04:52,780
lo que es HTML, y cómo todo esto
Ahora interconecta como estamos empezando

101
00:04:52,780 --> 00:04:54,730
utilizar realmente parte de la tecnología.

102
00:04:54,730 --> 00:04:58,310
Así resulta que lo que pueda
ir en mi pequeño Mac aquí,

103
00:04:58,310 --> 00:05:01,650
abrir un programa simple llamado
Edición de textos, o en Windows que pude

104
00:05:01,650 --> 00:05:04,480
abierto algo que se llama el Bloc de notas.

105
00:05:04,480 --> 00:05:08,260
Y podría simplemente hacer algo
así- "hola, mundo".

106
00:05:08,260 --> 00:05:12,020
Y entonces podría guardar esto como
hola.txt Así que hay magia allí.

107
00:05:12,020 --> 00:05:15,200
Esto no tiene nada que ver con la Web
programación, nada que ver con el lenguaje HTML.

108
00:05:15,200 --> 00:05:16,790
Sólo la creación de un archivo de texto simple.

109
00:05:16,790 --> 00:05:20,600
Pero resulta que una banda
página es literalmente eso.

110
00:05:20,600 --> 00:05:24,020
Es un simple archivo de texto que contiene el texto
que podría escribir en su teclado,

111
00:05:24,020 --> 00:05:30,070
pero típicamente, pero no siempre
No termina en .txt pero .html o .htm.

112
00:05:30,070 --> 00:05:32,050
Y no lo hace solo
escribir palabras en el archivo.

113
00:05:32,050 --> 00:05:35,280
De hecho tienes que usar cosas llamadas
etiquetas o, más en general, algo

114
00:05:35,280 --> 00:05:37,190
llamado lenguaje de marcas.

115
00:05:37,190 --> 00:05:40,510
>> Así que voy a escribir muy rápidamente
y luego explicar lo siguiente.

116
00:05:40,510 --> 00:05:42,290
Voy a primera
escriba esto, que dice:

117
00:05:42,290 --> 00:05:45,730
Hey, navegador, aquí viene una
página Web escritas en HTML.

118
00:05:45,730 --> 00:05:51,850
Y estas dos cosas juntas dicen, oye,
navegador, la siguiente es de hecho HTML.

119
00:05:51,850 --> 00:05:55,790
Hey, navegador, aquí viene la
cabeza o la parte superior de mi página.

120
00:05:55,790 --> 00:05:59,900
Hey, navegador, en el interior de la parte superior de
mi página, poner un título que es, "hola,

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

122
00:06:01,610 --> 00:06:08,370
Hey, navegador, después de que la cabeza de mi
página, aquí viene el cuerpo de la página.

123
00:06:08,370 --> 00:06:12,170
Y, oye, el navegador, el cuerpo de mi
página también debería decir, "hola mundo".

124
00:06:12,170 --> 00:06:15,500
¿Cuáles son los detalles más destacados en esta lista?

125
00:06:15,500 --> 00:06:17,960
Esto es lo que generalmente
llama una declaración de tipo de documento,

126
00:06:17,960 --> 00:06:20,190
y, la verdad, que es un poco
difícil de memorizar esto al principio.

127
00:06:20,190 --> 00:06:21,481
Usted sólo tipo de copiar-pegar.

128
00:06:21,481 --> 00:06:23,760
Esta es la manera formal
de decir, oye, navegador,

129
00:06:23,760 --> 00:06:28,030
Estoy utilizando la versión de HTML 5, lo cual
salió un poco recientemente.

130
00:06:28,030 --> 00:06:31,380
Es un encantamiento mágico que algunos
los seres humanos con un pobre sentido del diseño

131
00:06:31,380 --> 00:06:33,640
decidido poner en el
muy superior del archivo.

132
00:06:33,640 --> 00:06:35,473
A pesar de que se trata de una
poco arcano, eso es todo

133
00:06:35,473 --> 00:06:38,250
que designa todas oye, navegador, aquí
viene con la versión 5 de HTML.

134
00:06:38,250 --> 00:06:41,741
>> El resto de lo que ha estado con nosotros
desde hace algún tiempo, históricamente,

135
00:06:41,741 --> 00:06:44,740
pero ha ido evolucionando, y es
Probablemente estado recibiendo un poco más simple.

136
00:06:44,740 --> 00:06:47,320
Notar algunas características
de lo que he resaltado.

137
00:06:47,320 --> 00:06:49,890
Hay estas cosas con ángulo
brackets-- del soporte izquierdo

138
00:06:49,890 --> 00:06:51,040
y el soporte de la derecha.

139
00:06:51,040 --> 00:06:52,490
Y notar la simetría aquí.

140
00:06:52,490 --> 00:06:57,340
Y por simetría, es decir, al igual que yo
tener esta etiqueta de inicio aquí o una etiqueta abierta

141
00:06:57,340 --> 00:07:01,560
si se quiere, aquí tengo una
cerca de la etiqueta o una etiqueta de cierre que es

142
00:07:01,560 --> 00:07:06,460
diferentes sólo en la medida en que tiene esta
barra al comienzo de la palabra

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

144
00:07:07,360 --> 00:07:09,360
Y que se pueda imaginar
esto como yo estaba casualmente

145
00:07:09,360 --> 00:07:12,280
proponiendo antes, bueno,
navegador, aquí viene algo de HTML.

146
00:07:12,280 --> 00:07:16,060
Y, a la inversa, hey, navegador, que es
que para el inicio y el final HTML--.

147
00:07:16,060 --> 00:07:18,440
>> Mientras tanto, oye, navegador, aquí
viene la cabecera de mi página.

148
00:07:18,440 --> 00:07:20,140
Hey, navegador, eso es todo por la cabeza.

149
00:07:20,140 --> 00:07:22,240
Hey, navegador, aquí es
el cuerpo de la página.

150
00:07:22,240 --> 00:07:24,020
Hey, navegador, eso es todo por el cuerpo.

151
00:07:24,020 --> 00:07:26,940
Y dentro de eso es cierto
texto arbitrario por ahora.

152
00:07:26,940 --> 00:07:30,520
Y en el interior de la cabeza, por su parte,
es arbitraria, sino que algunos etiquetados,

153
00:07:30,520 --> 00:07:34,410
por así decirlo, el texto que dice, el título
de mi página será "Hola, mundo".

154
00:07:34,410 --> 00:07:37,470
Ahora, por ahora, se puede
asumir que los navegadores

155
00:07:37,470 --> 00:07:41,762
tienen only-- o, más bien, las páginas web tienen
sólo dos parts-- la cabeza y el cuerpo.

156
00:07:41,762 --> 00:07:44,220
Y la cabeza es generalmente solo
al igual que la barra de menús, la materia

157
00:07:44,220 --> 00:07:45,510
en realidad sólo en la parte superior.

158
00:07:45,510 --> 00:07:48,910
Y el cuerpo es la tripa de la página,
todo en ese gran rectángulo

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

160
00:07:50,239 --> 00:07:51,780
Así que voy a seguir adelante y hacerlo.

161
00:07:51,780 --> 00:07:54,400
Me va a seguir adelante y
haga clic en Guardar, Guardar archivo.

162
00:07:54,400 --> 00:07:58,580
Y voy a ahorrar
esto como hello.html,

163
00:07:58,580 --> 00:08:00,870
y yo sólo voy a
ponerla en mi escritorio.

164
00:08:00,870 --> 00:08:03,520
Y voy a ir
adelante y haga clic en Guardar.

165
00:08:03,520 --> 00:08:05,806
Y notice-- en mi Mac
menos está gritando a mí.

166
00:08:05,806 --> 00:08:07,180
¿Seguro que quieres hacer esto?

167
00:08:07,180 --> 00:08:08,710
Y voy a decir, sí, usar HTML.

168
00:08:08,710 --> 00:08:10,400
Yo sé mejor en este caso.

169
00:08:10,400 --> 00:08:14,686
Y ahora voy a ir a mi escritorio
donde tengo este archivo repente.

170
00:08:14,686 --> 00:08:16,060
Y voy hacer doble clic en él.

171
00:08:16,060 --> 00:08:18,268
Y se dará cuenta de que, por
De forma predeterminada, Chrome abierto.

172
00:08:18,268 --> 00:08:19,996
Esto se debe a que es
mi navegador por defecto.

173
00:08:19,996 --> 00:08:21,370
Y que sólo dice: "hola, mundo".

174
00:08:21,370 --> 00:08:23,078
Pero dice "hola,
mundo "en dos lugares.

175
00:08:23,078 --> 00:08:23,979
Observe la parte superior izquierda.

176
00:08:23,979 --> 00:08:25,020
Bastante difícil pasar por alto eso.

177
00:08:25,020 --> 00:08:26,180
Es grande y en negrita.

178
00:08:26,180 --> 00:08:30,690
Y donde más hace que parezca
decir, "hola, mundo"?

179
00:08:30,690 --> 00:08:31,470
>> AUDIENCIA: La pestaña.

180
00:08:31,470 --> 00:08:33,100
>> DAVID J. MALAN: Sí, la ficha en sí.

181
00:08:33,100 --> 00:08:35,159
Así que cuando le dije al jefe de la
la página es todo hasta top--

182
00:08:35,159 --> 00:08:36,367
y de hecho este es el título.

183
00:08:36,367 --> 00:08:37,710
Es sólo en la pestaña aquí.

184
00:08:37,710 --> 00:08:40,320
Y puedo tirar de esta ficha
a cabo de manera que no se confunda.

185
00:08:40,320 --> 00:08:43,360
Esto es sólo una única pestaña ahora,
y de hecho vemos "hola, mundo"

186
00:08:43,360 --> 00:08:45,970
aquí y "hola, mundo" aquí abajo.

187
00:08:45,970 --> 00:08:47,160
Por lo tanto bastante sencillo.

188
00:08:47,160 --> 00:08:49,050
Pero también es bastante simple.

189
00:08:49,050 --> 00:08:50,440
Y, en realidad, el zoom.

190
00:08:50,440 --> 00:08:53,272
Puedo cambiar el tamaño de la fuente apenas
para ampliar la accesibilidad.

191
00:08:53,272 --> 00:08:56,830
Pero ahora vamos a hacer algo
un poco más interesante.

192
00:08:56,830 --> 00:08:59,760
>> Voy a vaya-- gritos, y mucho
Me regreso a mi archivo de texto.

193
00:08:59,760 --> 00:09:02,400
Voy a volver a mi
archivo de texto, y voy

194
00:09:02,400 --> 00:09:06,320
para cambiar esto y decir
"Hola, Disney World."

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

196
00:09:07,970 --> 00:09:10,919
Y volver a mi
navegador y haga clic en Actualizar.

197
00:09:10,919 --> 00:09:12,710
Y ahora, por supuesto,
dice "Disney World".

198
00:09:12,710 --> 00:09:15,500
Y voy a enfocar artificialmente
en tan sólo por lo que es fácil de ver.

199
00:09:15,500 --> 00:09:19,012
Así que ahora, por desgracia, que tipo de deseo
a-- realidad, esta es una característica de Mac.

200
00:09:19,012 --> 00:09:21,720
Quiero hacer clic en Disney World
e ir a un lugar como disney.com,

201
00:09:21,720 --> 00:09:23,290
pero eso no funciona.

202
00:09:23,290 --> 00:09:26,850
Por lo que un principio básico de la web es
hipervínculos, enlaces que van en otro lugar.

203
00:09:26,850 --> 00:09:28,390
Entonces, ¿cómo lo hago?

204
00:09:28,390 --> 00:09:34,690
Bueno, podría simplemente decir,
"Hola, http://www.disney.com."

205
00:09:34,690 --> 00:09:36,110
Guarda esto.

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

207
00:09:37,620 --> 00:09:39,400
Pero esto también, no se puede hacer clic.

208
00:09:39,400 --> 00:09:42,930
Y lo que es agradable aquí, a pesar de que
esto todavía no es funcional,

209
00:09:42,930 --> 00:09:45,930
es que parece que la
navegador, literalmente, sólo lo hace

210
00:09:45,930 --> 00:09:46,950
lo que le digo que haga.

211
00:09:46,950 --> 00:09:50,110
Así que si acabo de escribir una dirección URL como esta,
sólo va a mostrarme la URL.

212
00:09:50,110 --> 00:09:54,270
Necesito usar etiquetas o marcas
idioma para contar realidad

213
00:09:54,270 --> 00:09:55,621
el navegador para hacer aún más.

214
00:09:55,621 --> 00:09:57,870
Así que voy a seguir adelante y
Eliminar esto por un momento.

215
00:09:57,870 --> 00:10:00,980
Y voy a decir, oye,
explorador, inicie un ancla aquí,

216
00:10:00,980 --> 00:10:02,650
un enlace por así decirlo.

217
00:10:02,650 --> 00:10:07,500
Y la hiper-referencia, el destino
de ese anclaje, debería ser este URL.

218
00:10:07,500 --> 00:10:08,750
Y note mis citas.

219
00:10:08,750 --> 00:10:11,590
Podría usar comillas simples, también,
pero hay que ser coherente,

220
00:10:11,590 --> 00:10:14,270
y se lo general sólo tiene que utilizar
comillas dobles que sea sencillo.

221
00:10:14,270 --> 00:10:16,820
Noto que voy a cerrar la etiqueta.

222
00:10:16,820 --> 00:10:21,160
Y entonces aquí voy
decir, "Disney World".

223
00:10:21,160 --> 00:10:26,890
Y ahora necesito un poco de symmetry--
corchete abierto, / a, soporte cerrado.

224
00:10:26,890 --> 00:10:28,090
>> Entonces, ¿qué he introducido?

225
00:10:28,090 --> 00:10:30,100
Hemos tenido algunas etiquetas ya.

226
00:10:30,100 --> 00:10:32,410
HTML, cabeza, título, el cuerpo,
son todas las etiquetas, por así decirlo,

227
00:10:32,410 --> 00:10:34,280
con sus homólogos abiertos y cerrados.

228
00:10:34,280 --> 00:10:36,530
Pero aviso, esto es una especie
de fundamentalmente diferente.

229
00:10:36,530 --> 00:10:39,140
Esto es lo que llamaremos
en HTML un atributo.

230
00:10:39,140 --> 00:10:41,451
Y es un atributo
sólo un par clave-valor.

231
00:10:41,451 --> 00:10:43,950
Esto es una cosa común en
par clave-valor ciencias-- equipo.

232
00:10:43,950 --> 00:10:45,770
Es una especie de la herramienta de trabajo.

233
00:10:45,770 --> 00:10:47,040
Una clave y un valor.

234
00:10:47,040 --> 00:10:49,390
Palabras y algo más
otra palabra o palabras.

235
00:10:49,390 --> 00:10:53,790
Y en este caso, la clave es href,
y el valor es la URL completa.

236
00:10:53,790 --> 00:10:57,890
Y lo que es un atributo que hace
influye en el comportamiento de una etiqueta.

237
00:10:57,890 --> 00:11:01,010
Y en este caso, tenemos que influir
el comportamiento de la etiqueta de anclaje,

238
00:11:01,010 --> 00:11:04,140
porque tenemos que anclar
este enlace a alguna parte.

239
00:11:04,140 --> 00:11:06,960
¿Y cómo se hace eso es
por medio del atributo.

240
00:11:06,960 --> 00:11:08,970
>> Así que voy a seguir adelante
y guardar el archivo ahora.

241
00:11:08,970 --> 00:11:11,300
Volver a mi navegador y recarga.

242
00:11:11,300 --> 00:11:14,580
Y, voilá, ahora tenemos la
comienzos de una página Web legítimo.

243
00:11:14,580 --> 00:11:18,420
-Super simple, pero si se ciernen sobre
esto-- aviso en la esquina inferior izquierda,

244
00:11:18,420 --> 00:11:19,830
Es súper pequeño.

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

246
00:11:21,730 --> 00:11:27,076
Y si hago clic en él, de hecho, esta
Me bate lejos a disney.com.

247
00:11:27,076 --> 00:11:29,380
Ahora, lo curioso
aquí es que no es

248
00:11:29,380 --> 00:11:33,940
la mejor-- el URL más comercial, pero
eso está bien porque este archivo no lo hace

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

250
00:11:35,360 --> 00:11:39,740
Existe como un archivo local en apariencia
Mis usuarios directory-- / jharvard--

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

252
00:11:41,890 --> 00:11:42,634
Pero tiene una URL.

253
00:11:42,634 --> 00:11:43,800
Que sólo pasa a ser local.

254
00:11:43,800 --> 00:11:47,050
Por desgracia, ninguno de ustedes puede visitar
esto, porque si escribe esta URL,

255
00:11:47,050 --> 00:11:49,980
que estaría diciendo a su navegador,
buscar un archivo llamado hello.html

256
00:11:49,980 --> 00:11:50,772
en su disco duro.

257
00:11:50,772 --> 00:11:53,271
Y, por supuesto, a menos que haya
estado siguiendo de forma manual,

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

259
00:11:54,530 --> 00:11:55,190
>> Así que eso está bien.

260
00:11:55,190 --> 00:11:57,815
Todavía tenemos una forma, en última instancia,
para obtener este archivo en la web,

261
00:11:57,815 --> 00:12:01,180
pero vamos a desmenuzar un par de
implicaciones de seguridad de lo que acabamos de

262
00:12:01,180 --> 00:12:04,850
sierra y atarlo de nuevo a la anterior
la discusión de esta mañana.

263
00:12:04,850 --> 00:12:08,200
Resulta que, si una
navegador, literalmente, sólo hace

264
00:12:08,200 --> 00:12:12,560
lo que le digo que lo haga, y parece
ser el caso de que una etiqueta de anclaje es

265
00:12:12,560 --> 00:12:17,380
influido por el valor de
este atributo llamado href

266
00:12:17,380 --> 00:12:20,810
pero muestra este
texto, esto parecería

267
00:12:20,810 --> 00:12:26,520
dar a entender que podría poner la URL
en ambos lugares y vuelva a cargar

268
00:12:26,520 --> 00:12:29,100
y ahora ver la URL e ir a la URL.

269
00:12:29,100 --> 00:12:32,680
Aviso, si se ciernen sobre la parte inferior izquierda,
de hecho voy a disney.com todavía.

270
00:12:32,680 --> 00:12:38,340
>> Así que si alguna vez has estado
phished-- P-H-I-S-H-E-D-

271
00:12:38,340 --> 00:12:42,820
con uno de esos correos electrónicos falsos
como PayPal desde su banco,

272
00:12:42,820 --> 00:12:46,470
es probable que haya conseguido el interior de enlaces
del correo electrónico que usted está leyendo que

273
00:12:46,470 --> 00:12:49,970
le indica que haga clic aquí para ir confirman
su contraseña o confirmar su fecha de nacimiento

274
00:12:49,970 --> 00:12:53,840
social o social o algo
ingeniería que divulga

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

276
00:12:54,920 --> 00:12:57,625
Bueno, podría tomar la clase de
ventaja de esto, no iba a hacerlo?

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

278
00:13:01,240 --> 00:13:11,340
Y en vez de disney.com, me
podría ir a, como, badguy.com.

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

280
00:13:12,850 --> 00:13:16,620
Y lo fácil que es para engañar,
especialmente un lector no técnico

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

282
00:13:20,649 --> 00:13:23,940
un enlace como este, que si hago clic it--
En realidad, yo no quiero ir badguy.com.

283
00:13:23,940 --> 00:13:25,398
No sé lo que está realmente allí.

284
00:13:25,398 --> 00:13:30,080
Así paypal.com, aviso, es
lo que dice que va a,

285
00:13:30,080 --> 00:13:33,210
pero por supuesto, si miro hacia abajo
súper bajo, que es un poco borrosa,

286
00:13:33,210 --> 00:13:34,230
pero no dice badguy.com.

287
00:13:34,230 --> 00:13:38,644
Esa es la única digo en este momento
que voy a un lugar equivocado.

288
00:13:38,644 --> 00:13:41,560
Y cuando he dicho antes que los bancos
realmente no debería alentar o entrenar

289
00:13:41,560 --> 00:13:44,510
los usuarios hacen clic en los enlaces, esto
es sólo una manifestación de la misma.

290
00:13:44,510 --> 00:13:45,430
Y es así de simple.

291
00:13:45,430 --> 00:13:48,120
Ahora eres un adversario si
se hace algo como esto

292
00:13:48,120 --> 00:13:51,000
y tratar de engañar a un usuario
para que visite su sitio web.

293
00:13:51,000 --> 00:13:53,320
Pero por ahora, vamos a seguir
todo limpio y ordenado.

294
00:13:53,320 --> 00:13:55,640
Vamos a seguir adelante
y rebobinar estos cambios.

295
00:13:55,640 --> 00:13:56,530
Recargar la página.

296
00:13:56,530 --> 00:13:57,740
Y vuelvo a disney.com.

297
00:13:57,740 --> 00:14:00,660
>> Vamos a ver si no podemos molestar
esto aparte un poco más.

298
00:14:00,660 --> 00:14:04,160
Por lo tanto "hola, Disney World."

299
00:14:04,160 --> 00:14:05,950
Voy a decir aquí abajo.

300
00:14:05,950 --> 00:14:08,220
Tal vez voy a hacer un poco de espacio.

301
00:14:08,220 --> 00:14:12,730
"¡Esperamos que disfrute su estadía!"

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

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

304
00:14:15,850 --> 00:14:19,010
No es que eso no es rea--
lo que quería, ¿verdad?

305
00:14:19,010 --> 00:14:21,870
Es decir, si yo estoy tratando mi texto
presentar como un procesador de textos,

306
00:14:21,870 --> 00:14:24,894
¿Qué esperaba que sucedería aquí?

307
00:14:24,894 --> 00:14:27,060
Sí, me siento como si hubiera
debe ser un salto de línea aquí,

308
00:14:27,060 --> 00:14:28,799
así que se siente con errores de alguna manera.

309
00:14:28,799 --> 00:14:31,090
Pero que en realidad es deliberada,
porque al igual que antes,

310
00:14:31,090 --> 00:14:33,381
el navegador sólo se va a
hacer lo que diga que haga.

311
00:14:33,381 --> 00:14:34,806
No he dicho que para romper las líneas.

312
00:14:34,806 --> 00:14:37,930
Yo no he dicho que se mueva hacia abajo, incluso
sin embargo, intuitivamente, siento que lo hice.

313
00:14:37,930 --> 00:14:39,805
Así que resulta que necesitamos
un poco más de margen de beneficio,

314
00:14:39,805 --> 00:14:41,390
y voy a arreglar esto de la siguiente manera.

315
00:14:41,390 --> 00:14:46,160
Voy a incondicional esta primera hola
con lo que se llama una etiqueta de párrafo.

316
00:14:46,160 --> 00:14:48,920
Y luego voy a seguir adelante
y envolver esta otra frase

317
00:14:48,920 --> 00:14:54,370
en otra etiqueta de párrafo, a pesar de que
son los párrafos súper cortos.

318
00:14:54,370 --> 00:14:55,930
Ahora voy a guardar.

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

320
00:14:57,160 --> 00:14:59,070
Y ahora tenemos que
espacio, y que tipo de

321
00:14:59,070 --> 00:15:01,680
tienen la semántica de
dos párrafos separados.

322
00:15:01,680 --> 00:15:05,290
>> Eso es todo bien y bueno, pero sería
ser agradable para añadir una imagen a esta página,

323
00:15:05,290 --> 00:15:08,710
así que voy a ir a buscar
Mickey Mouse en Google Imágenes.

324
00:15:08,710 --> 00:15:12,830
Y sólo por diversión, yo soy
va a tomar esta imagen.

325
00:15:12,830 --> 00:15:15,350
Voy a seguir adelante y ahora
agarrar la URL de esta imagen,

326
00:15:15,350 --> 00:15:16,510
aunque hay diferentes
maneras de hacer esto.

327
00:15:16,510 --> 00:15:18,520
Por ahora, sólo voy a copiar la URL.

328
00:15:18,520 --> 00:15:24,770
Voy a volver a mi texto
archivo, y lo voy a decir aquí,

329
00:15:24,770 --> 00:15:31,160
img src = entre comillas
esa URL, súper larga.

330
00:15:31,160 --> 00:15:34,580
Y entonces la noción de una
la imagen es un poco diferente.

331
00:15:34,580 --> 00:15:38,640
En realidad no hay noción de partida
una imagen y terminando una imagen,

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

333
00:15:40,630 --> 00:15:43,840
Así que parece un poco raro
Me semánticamente Para ello,

334
00:15:43,840 --> 00:15:45,390
tener una etiqueta de cerca la imagen.

335
00:15:45,390 --> 00:15:46,780
No es incorrecto.

336
00:15:46,780 --> 00:15:48,840
Es perfectamente correcto,
y se animó,

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

338
00:15:50,870 --> 00:15:53,780
Puedo tipo de forma simultánea
abrir y cerrar la misma etiqueta,

339
00:15:53,780 --> 00:15:55,510
y que va a hacer feliz al navegador.

340
00:15:55,510 --> 00:15:56,950
Así que es sólo un poco
más sucinta de las cosas

341
00:15:56,950 --> 00:15:59,408
que, conceptualmente, realmente no hacer
tener sentido para iniciar y finalizar.

342
00:15:59,408 --> 00:16:01,190
Ellos simplemente están ahí, o no lo son.

343
00:16:01,190 --> 00:16:06,020
>> Así que voy a guardar esta y volver
a mi "hola, mundo" página y recarga.

344
00:16:06,020 --> 00:16:09,880
Y es un poco fuera de control,
porque que la imagen es en realidad

345
00:16:09,880 --> 00:16:12,210
un poco grande, pero eso está bien.

346
00:16:12,210 --> 00:16:13,710
Podría cambiar su tamaño en un programa.

347
00:16:13,710 --> 00:16:14,900
O usted sabe qué.

348
00:16:14,900 --> 00:16:17,350
Sólo para demostrar, estoy
va a decir en realidad

349
00:16:17,350 --> 00:16:21,760
que la anchura de esta cosa debe
sólo será de 200 píxeles, 200 puntos.

350
00:16:21,760 --> 00:16:24,360
Déjame ir por delante y guardar
y volver a cargar, y ahora la página

351
00:16:24,360 --> 00:16:25,690
se ve un poco más razonable.

352
00:16:25,690 --> 00:16:27,260
Pero note el patrón.

353
00:16:27,260 --> 00:16:30,030
Bueno, he tipo de enseñado a todos
de HTML, en cierto sentido, al menos

354
00:16:30,030 --> 00:16:33,531
conceptualmente, porque todo el HTML es decir
éstos tags-- etiquetas abiertas, cerradas las etiquetas,

355
00:16:33,531 --> 00:16:35,280
y atributos que
modificar su comportamiento.

356
00:16:35,280 --> 00:16:38,380
Y, al parecer, cada
la etiqueta puede tener cero o uno

357
00:16:38,380 --> 00:16:43,005
o dos o más atributos, cada uno de
el que hace algo un poco diferente.

358
00:16:43,005 --> 00:16:44,380
Ahora, ¿cómo saber lo que existe?

359
00:16:44,380 --> 00:16:46,800
Usted acaba de escuchar a alguien
como yo te diga lo que existe,

360
00:16:46,800 --> 00:16:50,860
o simplemente Google en torno a un tutorial
en HTML, y lo que realmente es así de simple.

361
00:16:50,860 --> 00:16:54,030
>> En verdad, cuando yo era un estudiante universitario
Hace años y aprendió HTML,

362
00:16:54,030 --> 00:16:56,530
uno de mi enseñanza de matemáticas
acabamos de pasar asistentes

363
00:16:56,530 --> 00:16:59,600
un poco de tiempo me tutoría
para como media hora, una hora,

364
00:16:59,600 --> 00:17:00,660
y entonces yo estaba en mi camino.

365
00:17:00,660 --> 00:17:03,300
Yo estaba en mi camino hacia la fabricación
los sitios web más horribles nunca,

366
00:17:03,300 --> 00:17:05,549
que, al parecer, no lo he hecho
Realmente progresado más allá.

367
00:17:05,549 --> 00:17:09,849
Pero el punto es que, una vez que se
entender estas simples ideas--

368
00:17:09,849 --> 00:17:13,450
si arcano texto-- pero estos simples
ideas de comenzar un pensamiento

369
00:17:13,450 --> 00:17:15,960
y el cierre de un pensamiento, manteniendo
todo muy bien equilibrado,

370
00:17:15,960 --> 00:17:19,150
mirando algo, la modificación de la
comportamiento de esa etiqueta, que es realmente todo

371
00:17:19,150 --> 00:17:20,079
que hay que hacer.

372
00:17:20,079 --> 00:17:28,140
Y de hecho, si ahora vamos a
algo así como google.com-- realidad,

373
00:17:28,140 --> 00:17:31,920
vamos a ir a un lugar un poco más
razonable-- stanford.edu.

374
00:17:31,920 --> 00:17:37,800
Y voy a ir a Ver,
Desarrollador, Ver código fuente.

375
00:17:37,800 --> 00:17:41,400
Es feo, pero notice--
y voy a zoom en el aviso

376
00:17:41,400 --> 00:17:43,432
algunas cosas que es familiar ya.

377
00:17:43,432 --> 00:17:45,140
Hay esta aquí,
que es un navegador.

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

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

380
00:17:47,634 --> 00:17:49,550
Al parecer, hay una
atribuyo que no lo hice

381
00:17:49,550 --> 00:17:51,540
que especifica el uso
idioma de la página,

382
00:17:51,540 --> 00:17:54,380
y esto puede ayudar con cambio automático
traducción y cosas por el estilo.

383
00:17:54,380 --> 00:17:55,546
Aquí está la cabeza de la página.

384
00:17:55,546 --> 00:17:57,790
Así es el título de la página de Stanford.

385
00:17:57,790 --> 00:17:59,832
Hay una etiqueta que no lo hice
hablar yet-- etiqueta Meta.

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

387
00:18:01,540 --> 00:18:04,210
Ayuda con SEO, o
optimización de motores de búsqueda,

388
00:18:04,210 --> 00:18:06,320
o los resultados de búsqueda de Google o similares.

389
00:18:06,320 --> 00:18:09,029
Pero si seguimos mirando, mantenga
mira, aquí está el cuerpo de la etiqueta.

390
00:18:09,029 --> 00:18:11,570
Y hay racimos de otra
etiquetas que no han hablado todavía.

391
00:18:11,570 --> 00:18:13,750
Pero Div es uno para una
la división de la página.

392
00:18:13,750 --> 00:18:16,680
Es como un rectángulo invisible
si quieres tipo de mental

393
00:18:16,680 --> 00:18:20,160
dividir la página en
diferentes unidades de línea.

394
00:18:20,160 --> 00:18:22,650
Y luego un montón de divs I
ver, algo que se llama la clase,

395
00:18:22,650 --> 00:18:24,440
pero vamos a volver a eso.

396
00:18:24,440 --> 00:18:26,200
>> Esto es Forms interesting--.

397
00:18:26,200 --> 00:18:27,730
Los formularios están en toda la web.

398
00:18:27,730 --> 00:18:30,310
Cualquier cuadro de búsqueda que está
Ha usado alguna vez es una forma.

399
00:18:30,310 --> 00:18:31,490
Y, entonces, vamos a ver realmente.

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

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

402
00:18:33,910 --> 00:18:37,660
La acción de esta forma, por cualquier
razones históricas, es que el URL.

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

404
00:18:38,840 --> 00:18:44,060
Resulta que las solicitudes HTTP pueden utilizar
el verbo "obtener", como vimos antes,

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

406
00:18:45,070 --> 00:18:47,030
Y va a ver una diferencia
de esto en un momento.

407
00:18:47,030 --> 00:18:48,363
Vamos a ver en realidad lo que es esto.

408
00:18:48,363 --> 00:18:49,830
Permítanme volver a la página de Stanford.

409
00:18:49,830 --> 00:18:53,330
¿Qué forma están hablando
sobre, qué te parece?

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

411
00:18:54,485 --> 00:18:54,970
>> AUDIENCIA: cuadro de búsqueda.

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

413
00:18:55,845 --> 00:18:58,410
Así que en la parte superior derecha
aquí es la siguiente caja de búsqueda.

414
00:18:58,410 --> 00:19:02,441
Y así es como se implementó un it--
etiqueta que literalmente forma paréntesis abierto.

415
00:19:02,441 --> 00:19:03,940
Y luego vamos a buscar algo.

416
00:19:03,940 --> 00:19:09,220
Vamos a buscar un compañero
mine-- de "Nick Parlante".

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

418
00:19:11,380 --> 00:19:13,750
Y, por supuesto, fue a
una URL ligeramente diferente.

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

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

421
00:19:18,960 --> 00:19:19,460
Maldición.

422
00:19:19,460 --> 00:19:20,484
Fuimos a una URL diferente.

423
00:19:20,484 --> 00:19:23,400
Así, Stanford de la adición de un poco de magia
que no están llevándome a la URL

424
00:19:23,400 --> 00:19:25,820
que vimos en el
acción atributo allí.

425
00:19:25,820 --> 00:19:32,480
Pero esta forma se lleva a cabo aquí puramente
a través de este marcado aquí, estas etiquetas.

426
00:19:32,480 --> 00:19:35,710
De hecho, aquí está la entrada para
el tipo de búsqueda que desea.

427
00:19:35,710 --> 00:19:38,940
Aquí está la entrada para
otro tipo de búsqueda.

428
00:19:38,940 --> 00:19:41,960
Aquí es la entrada para la propia cadena.

429
00:19:41,960 --> 00:19:45,394
Y por lo que el objetivo no es envolver
nuestra mente alrededor de todas estas etiquetas

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

431
00:19:46,060 --> 00:19:48,300
Es sólo abrir y cerrar
etiquetas y mirando las cosas.

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

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

434
00:19:48,920 --> 00:19:49,795
>> AUDIENCIA: [inaudible]

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

436
00:19:51,925 --> 00:19:53,550
DAVID J. MALAN: Esa es una buena pregunta.

437
00:19:53,550 --> 00:19:54,660
Eso es un poco más difícil de ver.

438
00:19:54,660 --> 00:19:56,300
Permítanme volver a ese
pregunta en tan sólo unos minutos

439
00:19:56,300 --> 00:19:59,000
cuando nos fijamos en algo que se llama
hojas CSS, o de estilo en cascada,

440
00:19:59,000 --> 00:20:02,500
y podemos tratar de inferir
tanto desde la página.

441
00:20:02,500 --> 00:20:08,090
Así que si ahora echar un vistazo a google.com,
vamos a ver lo que su página se parece.

442
00:20:08,090 --> 00:20:09,840
Se podría they're-- eso es lindo hoy.

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

444
00:20:12,490 --> 00:20:12,990
DE ACUERDO.

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

446
00:20:13,690 --> 00:20:15,260
Muy bien, así Ver código fuente.

447
00:20:15,260 --> 00:20:19,590
Se podría pensar que Google tiene
código fuente muy agradable.

448
00:20:19,590 --> 00:20:24,970
Así que, al parecer, lo que está pasando aquí?

449
00:20:24,970 --> 00:20:27,880
Y de hecho, esto no es aún HTML.

450
00:20:27,880 --> 00:20:30,930
Esto es algo que se llama JavaScript.

451
00:20:30,930 --> 00:20:32,344
Y vamos a seguir yendo y viniendo.

452
00:20:32,344 --> 00:20:34,010
Ni siquiera sé dónde empieza la página.

453
00:20:34,010 --> 00:20:37,240
Voy a utilizar Command
M, abierta HTML soporte.

454
00:20:37,240 --> 00:20:38,200
Muy bien, ahí está.

455
00:20:38,200 --> 00:20:44,150
Me pareció que el inicio de la página, y
hay tanto cosas aquí.

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

457
00:20:45,310 --> 00:20:47,460
Bueno, ya sabes lo que,
podemos limpiar esto.

458
00:20:47,460 --> 00:20:52,109
Si en lugar de ir a este Inspeccionar
barra de herramientas, esta herramienta de diagnóstico especial,

459
00:20:52,109 --> 00:20:54,150
e ir no a red,
donde seguimos hacia el día de hoy,

460
00:20:54,150 --> 00:20:56,420
pero si voy a los elementos,
lo que es realmente agradable

461
00:20:56,420 --> 00:20:59,990
es que un navegador tiene mucho
mucho mejores ojos que yo.

462
00:20:59,990 --> 00:21:02,670
Y el navegador puede leer
que lío de una página web,

463
00:21:02,670 --> 00:21:04,700
que el correo HTML que acabamos
mirado, y puede

464
00:21:04,700 --> 00:21:08,340
analizar o leer y
analizarla y volver a darle formato

465
00:21:08,340 --> 00:21:09,910
de una manera agradable de usar humano.

466
00:21:09,910 --> 00:21:11,740
Así que lo que estoy viendo ahora
en esta pantalla aquí

467
00:21:11,740 --> 00:21:15,470
En Elementos, exactamente el mismo contenido,
pero han sangría todo,

468
00:21:15,470 --> 00:21:18,140
que han colorized, pero
que es exactamente el mismo texto

469
00:21:18,140 --> 00:21:19,620
que he descargado desde el servidor.

470
00:21:19,620 --> 00:21:23,630
>> Y lo que es agradable ahora es que puedo ver
en el cuerpo, para la notificación instance--,

471
00:21:23,630 --> 00:21:26,480
La página aún se compone
de sólo una cabeza y un cuerpo,

472
00:21:26,480 --> 00:21:28,660
y puedo bucear jerárquicamente aquí.

473
00:21:28,660 --> 00:21:32,420
Tenga en cuenta que Google parece tener
divs-- a éste y éste.

474
00:21:32,420 --> 00:21:33,310
Puedo ampliar eso.

475
00:21:33,310 --> 00:21:35,370
Hay un montón de otros divs.

476
00:21:35,370 --> 00:21:36,900
Así que es un poco más compleja.

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

478
00:21:37,400 --> 00:21:40,970
Esto parece mucho más
legible, relativamente, que esto.

479
00:21:40,970 --> 00:21:43,840
¿Por qué es Google embarazosa
sí sólo enviando

480
00:21:43,840 --> 00:21:50,400
este gran lío de código de algunas
tipo que acabamos de implementar algo

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

482
00:21:53,640 --> 00:21:55,270
Al igual que, ¿por qué no añadir más espacios?

483
00:21:55,270 --> 00:21:56,811
¿Por qué no se pulse Enter como lo hice?

484
00:21:56,811 --> 00:21:59,110
Mira lo bien que estaba
en la escritura de una página web.

485
00:21:59,110 --> 00:22:00,680
Yo golpe entra de forma diligente.

486
00:22:00,680 --> 00:22:03,760
Yo con sangría así que todo
que es muy bonita y fácil de leer.

487
00:22:03,760 --> 00:22:08,463
¿Por qué Google no practica la misma?

488
00:22:08,463 --> 00:22:11,409
>> AUDIENCIA: [inaudible]

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

490
00:22:12,305 --> 00:22:13,180
DAVID J. MALAN: Bueno.

491
00:22:13,180 --> 00:22:14,270
Muy justo.

492
00:22:14,270 --> 00:22:16,650
No tienen alguna
persona en Google manualmente

493
00:22:16,650 --> 00:22:18,160
la actualización de la página de inicio más.

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

495
00:22:20,010 --> 00:22:21,140
Así que tienen el software.

496
00:22:21,140 --> 00:22:25,397
Tienen otras herramientas que
generar dinámicamente son HTML.

497
00:22:25,397 --> 00:22:27,480
Por supuesto, que el código en sí
fue escrito por los seres humanos,

498
00:22:27,480 --> 00:22:30,220
pero la realidad es,
que es bastante justo decir,

499
00:22:30,220 --> 00:22:33,340
el navegador ciertamente no hace
importa cómo es sucio es el código.

500
00:22:33,340 --> 00:22:35,940
Pero hay una aún más
razón técnica convincente

501
00:22:35,940 --> 00:22:42,580
que Google distribuye su HTML
código en un descuidado por ejemplo, aparentemente

502
00:22:42,580 --> 00:22:48,350
manera abrumadora todo ello incluido en conjunto
con muy poco muy poco manera--

503
00:22:48,350 --> 00:22:51,274
en el camino de formato, como lo hice.

504
00:22:51,274 --> 00:22:52,570
>> AUDIENCIA: [inaudible]

505
00:22:52,570 --> 00:22:53,528
>> DAVID J. MALAN: más rápido?

506
00:22:53,528 --> 00:22:54,040
¿Por qué?

507
00:22:54,040 --> 00:22:55,680
Y lo que has dicho, Lydia?

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

509
00:22:56,240 --> 00:22:57,281
¿Por qué más rápido?

510
00:22:57,281 --> 00:22:58,156
AUDIENCIA: [inaudible]

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

512
00:23:00,522 --> 00:23:02,230
DAVID J. MALAN: Hay
no hay espacio para leer.

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

514
00:23:02,730 --> 00:23:04,560
Así que pensar en lo que es un espacio.

515
00:23:04,560 --> 00:23:08,394
Por lo que cada carácter en el teclado toma
una cierta cantidad de espacio para representar,

516
00:23:08,394 --> 00:23:10,560
ya sea física, al igual que
ocupa mucho espacio,

517
00:23:10,560 --> 00:23:13,250
o de alguna manera por debajo de la
campana, que requiere memoria.

518
00:23:13,250 --> 00:23:15,740
Y como un aside-- y vamos a
hablar más sobre este tomorrow--

519
00:23:15,740 --> 00:23:19,930
cada carácter en el teclado
normalmente requiere 8 bits, o un byte.

520
00:23:19,930 --> 00:23:23,360
Así que un patrón de 8 ceros o
queridos, o sólo 1 byte, como hemos

521
00:23:23,360 --> 00:23:24,720
los seres humanos diría normalmente.

522
00:23:24,720 --> 00:23:27,690
Así que es pequeña, pero
todavía es distinto de cero.

523
00:23:27,690 --> 00:23:29,940
Es todavía una cierta cantidad de espacio.

524
00:23:29,940 --> 00:23:36,082
Así que si un ingeniero o Google golpea
la barra espaciadora una vez, y supongamos

525
00:23:36,082 --> 00:23:38,540
Google, sino super-popular--
Supongamos que un mil millones de personas

526
00:23:38,540 --> 00:23:40,780
visite su página de inicio un día,
o algún número de personas

527
00:23:40,780 --> 00:23:43,290
visitar la página principal de una
mil millones de veces al día,

528
00:23:43,290 --> 00:23:48,890
cuántos bytes adicionales que tiene
ingeniero de software de Google solo cuestan

529
00:23:48,890 --> 00:23:51,310
por golpear a su barra espaciadora una vez?

530
00:23:51,310 --> 00:23:52,692
>> AUDIENCIA: [inaudible]

531
00:23:52,692 --> 00:23:54,150
DAVID J. MALAN: No es tan malo.

532
00:23:54,150 --> 00:23:57,070
A sólo una veces byte de mil millones.

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

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

535
00:23:59,120 --> 00:24:00,370
DAVID J. MALAN: No 8 mil millones.

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

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

538
00:24:02,410 --> 00:24:04,080
1 gigabyte sería la unidad de medida.

539
00:24:04,080 --> 00:24:08,240
Si él o ella hace dos
espacios, 2 gigabytes.

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

541
00:24:09,030 --> 00:24:09,530
¿Derecha?

542
00:24:09,530 --> 00:24:11,860
Se escala costosamente.

543
00:24:11,860 --> 00:24:16,150
Y así, en casos como Google,
el cual, es cierto, son casos extremos,

544
00:24:16,150 --> 00:24:21,450
hay otras cuestiones que surgen justo
tomando decisiones muy razonables

545
00:24:21,450 --> 00:24:25,744
o tomar las acciones humanas muy simples,
porque tiene este efecto magnificado.

546
00:24:25,744 --> 00:24:27,660
Así que una de las razones
esto se ve tan comprimida

547
00:24:27,660 --> 00:24:30,660
es exactamente como Victoria said-- era
simplemente generado por los ordenadores de todos modos.

548
00:24:30,660 --> 00:24:31,900
Así que no es gran cosa.

549
00:24:31,900 --> 00:24:33,309
Deje que el navegador a resolverlo.

550
00:24:33,309 --> 00:24:35,350
Pero también deliberadamente
no tiene mucho espacio,

551
00:24:35,350 --> 00:24:36,766
debido a que el espacio no es necesario.

552
00:24:36,766 --> 00:24:38,250
Y el espacio de realidad cuesta dinero.

553
00:24:38,250 --> 00:24:40,670
>> Es bien cuesta tiempo,
porque justo para empujar

554
00:24:40,670 --> 00:24:44,670
que muchos más datos de cada
La sede de google.com solo

555
00:24:44,670 --> 00:24:47,710
tiene que tomar una cierta cantidad de
tiempo, incluso si se trata de milisegundos

556
00:24:47,710 --> 00:24:51,190
o microsegundos, sino que se suma
más de lo que muchos usuarios, o más probablemente,

557
00:24:51,190 --> 00:24:52,270
es probable que cuesta dinero.

558
00:24:52,270 --> 00:24:54,690
Google probablemente se conecta a
otra persona en el mundo, uno

559
00:24:54,690 --> 00:24:56,398
de los que mira con fijeza
puntos, y si tienen

560
00:24:56,398 --> 00:24:59,880
algún tipo de relación financiera
por lo que los costos de sus datos dinero,

561
00:24:59,880 --> 00:25:01,730
pues que lo hagan
reducir al mínimo la cantidad de datos

562
00:25:01,730 --> 00:25:04,530
que están escupiendo en
su conexión a Internet.

563
00:25:04,530 --> 00:25:07,630
>> Así que lo más divertido, sin embargo, en última instancia,
o tal vez lo más tranquilizador,

564
00:25:07,630 --> 00:25:11,030
es que a pesar de que esto parece terriblemente
abrumadora, al final de la día,

565
00:25:11,030 --> 00:25:16,750
sigue siendo los mismos principios exactos como
esta página muy simple aquí de un HTML

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

567
00:25:17,390 --> 00:25:20,610
Así que para resumir y para que
tener una versión canónica si no fueras

568
00:25:20,610 --> 00:25:25,900
siguiendo a lo largo de elección aquí, aquí
podría ser la más simple de las páginas web,

569
00:25:25,900 --> 00:25:28,240
así que algo para jugar con quizás más adelante.

570
00:25:28,240 --> 00:25:30,790
>> Bueno, vamos a introducir una
par de otras ideas ahora.

571
00:25:30,790 --> 00:25:33,420
Estamos a punto de introducir
algo que se llama una etiqueta de estilo.

572
00:25:33,420 --> 00:25:38,110
Podemos estilizar esta página
en formas más interesantes.

573
00:25:38,110 --> 00:25:40,860
Así, mientras correo electrónico HTML
se trata de marcar

574
00:25:40,860 --> 00:25:44,470
los datos, tipo de especificación a una
navegador cómo estructurar los datos,

575
00:25:44,470 --> 00:25:48,110
donde ponerlo, CSS o
Hojas de estilo en cascada,

576
00:25:48,110 --> 00:25:52,640
es una segunda lengua que
consigue generalmente mezclados con HTML

577
00:25:52,640 --> 00:25:55,670
como vamos a ver-- pero podemos limpiar
que hasta en un moment-- que toma

578
00:25:55,670 --> 00:25:59,850
que la última milla, y se estiliza ella.

579
00:25:59,850 --> 00:26:02,460
Se pone los colores apenas a la derecha,
el tamaño de la fuente apenas a la derecha,

580
00:26:02,460 --> 00:26:03,860
el posicionamiento justo.

581
00:26:03,860 --> 00:26:06,510
Es todo acerca de la estética
o el formato, no se trata de

582
00:26:06,510 --> 00:26:08,330
los datos fundamental en sí.

583
00:26:08,330 --> 00:26:11,390
Y la manera más fácil para mostrar
este es quizás el ejemplo.

584
00:26:11,390 --> 00:26:15,320
Así que voy a ir
a mi archivo de texto sencillo.

585
00:26:15,320 --> 00:26:17,970
Y en un momento, me quedo
nos guiará por el proceso

586
00:26:17,970 --> 00:26:19,360
de hacer esto por nosotros mismos.

587
00:26:19,360 --> 00:26:23,310
>> Voy a volver a mi archivo
aquí y volver a cargar la página

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

589
00:26:25,800 --> 00:26:27,190
Ahí es donde estamos ahora.

590
00:26:27,190 --> 00:26:31,170
Siento que los niños disfrutarían
tener un poco de color a esta página web.

591
00:26:31,170 --> 00:26:34,480
Así que voy a subir aquí
en la cabecera de la página.

592
00:26:34,480 --> 00:26:38,130
Y yo voy a hacer el estilo, / estilo.

593
00:26:38,130 --> 00:26:44,060
Y luego dentro de esta, voy
para decirle al cuerpo de mi page--

594
00:26:44,060 --> 00:26:46,870
y este formato es, por lo
primera vista, tal vez un poco

595
00:26:46,870 --> 00:26:49,400
extraño, pero convencional.

596
00:26:49,400 --> 00:26:55,010
Voy a decir que el fondo
color de esta página debe ser de color verde.

597
00:26:55,010 --> 00:26:57,960
Y esto es, por desgracia
tipo de diseño no es el mejor.

598
00:26:57,960 --> 00:27:00,710
Tenga en cuenta que con anterioridad
en el mundo de HTML,

599
00:27:00,710 --> 00:27:03,190
Le dije que los atributos
son estos pares de valores clave.

600
00:27:03,190 --> 00:27:05,760
Algo es igual a la cita
Fin de la cita "algo".

601
00:27:05,760 --> 00:27:08,810
En el mundo de CSS, que era
diseñada por algunas personas diferentes,

602
00:27:08,810 --> 00:27:11,020
decidieron que, en su
mundo, pares de valores clave

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

604
00:27:13,920 --> 00:27:15,220
Así que es la misma idea, sin embargo.

605
00:27:15,220 --> 00:27:18,620
Se asocia un valor
con alguna clave que de alguna manera

606
00:27:18,620 --> 00:27:20,330
influye en el comportamiento de esta página.

607
00:27:20,330 --> 00:27:21,901
>> Y que es fácil adivinar.

608
00:27:21,901 --> 00:27:24,150
¿Qué es esto probablemente va
que hacer, incluso si usted nunca ha

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

610
00:27:27,867 --> 00:27:29,450
AUDIENCIA: Cambiar el color de fondo.

611
00:27:29,450 --> 00:27:30,560
DAVID J. MALAN: Sí,
cambiar el color de fondo.

612
00:27:30,560 --> 00:27:33,280
Y específicamente el
color de fondo del cuerpo.

613
00:27:33,280 --> 00:27:36,290
Pero en la medida en la
cuerpo por ahora es la web

614
00:27:36,290 --> 00:27:38,870
page-- que es la única cosa
por debajo de la barra de título realmente--

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

616
00:27:40,870 --> 00:27:41,430
Así que vamos a ver.

617
00:27:41,430 --> 00:27:42,490
Vamos a guardar esto.

618
00:27:42,490 --> 00:27:44,310
Vaya aquí y volver a cargar.

619
00:27:44,310 --> 00:27:46,140
Es bastante horrible.

620
00:27:46,140 --> 00:27:48,070
Y que esta pasando
aquí es un efecto secundario.

621
00:27:48,070 --> 00:27:49,850
Acabo de elegir esta imagen al azar.

622
00:27:49,850 --> 00:27:53,305
¿Por qué el no verdes
impregnando detrás de Mickey?

623
00:27:53,305 --> 00:27:54,180
AUDIENCIA: [inaudible]

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

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

626
00:27:57,880 --> 00:28:01,750
Pues resulta que las imágenes, bastante
tanto todas las imágenes que podríamos usar,

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

628
00:28:03,670 --> 00:28:07,710
Incluso si Mickey tiene algunas curvas
para sí mismo y tiene un fondo,

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

630
00:28:09,330 --> 00:28:10,280
Tiene que ser de color blanco.

631
00:28:10,280 --> 00:28:11,910
Tiene que ser negro o alguna otra cosa.

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

633
00:28:13,650 --> 00:28:16,100
Y, de hecho, podría
abrir Mickey Mouse aquí

634
00:28:16,100 --> 00:28:18,590
en un programa llamado Photoshop
o algo similar

635
00:28:18,590 --> 00:28:21,176
y cambiar todo eso blanca
fondo a transparente,

636
00:28:21,176 --> 00:28:22,550
por lo que el verde brille a través.

637
00:28:22,550 --> 00:28:25,980
Pero eso es algo que necesitaría
a pedir de mí mismo o un artista gráfico

638
00:28:25,980 --> 00:28:28,130
o un diseñador en mi
compañía, por ejemplo,

639
00:28:28,130 --> 00:28:31,490
hacer, sobre todo porque acabo
prestado éste de internet.

640
00:28:31,490 --> 00:28:33,030
Pero eso es por qué ocurre esto.

641
00:28:33,030 --> 00:28:34,980
>> Entonces, ¿qué más podríamos desear hacer?

642
00:28:34,980 --> 00:28:41,040
Pues bien, lo que se quiere decir que
Realmente esperamos que disfrute de su estancia.

643
00:28:41,040 --> 00:28:44,150
Y para dar énfasis, quiero
para hacer de este fuerte,

644
00:28:44,150 --> 00:28:48,310
y por lo que voy a decir abierta y fuerte
cerrar fuerte y vuelva a cargar.

645
00:28:48,310 --> 00:28:50,320
Y es un poco difícil
para ver en el proyector

646
00:28:50,320 --> 00:28:53,250
pero tal vez realmente ahora
salta a un poco más.

647
00:28:53,250 --> 00:28:56,180
Lo que puede añadir cursiva en este
Así, frente negrita de esta manera.

648
00:28:56,180 --> 00:28:57,500
Podríamos cambiar los colores.

649
00:28:57,500 --> 00:29:01,610
De hecho, sólo por diversión, yo soy
va a seguir adelante y hacer esto.

650
00:29:01,610 --> 00:29:05,120
Realmente no me gusta la forma en que mi
párrafos son tan cerca juntos,

651
00:29:05,120 --> 00:29:06,870
por lo que podría hacer algo como esto.

652
00:29:06,870 --> 00:29:13,310
Voy a decirle al navegador,
cambiar cada etiqueta de párrafo para tener,

653
00:29:13,310 --> 00:29:16,952
vamos a decir-- realidad, sabes qué,
vamos a alinear se text-align, centro.

654
00:29:16,952 --> 00:29:19,410
Y de nuevo, sé que esto sólo se
porque alguien me lo enseñó

655
00:29:19,410 --> 00:29:21,118
o que lo busqué en
una referencia en línea.

656
00:29:21,118 --> 00:29:22,450
Así que me deja guardar esto.

657
00:29:22,450 --> 00:29:25,070
Y, ah, ahora tengo
centrada en la imagen allí.

658
00:29:25,070 --> 00:29:28,490
Y en realidad, ¿sabes qué, si
Muevo la imagen en un párrafo

659
00:29:28,490 --> 00:29:34,510
tag-- por lo que un tercer párrafo,
a pesar de que no es de texto.

660
00:29:34,510 --> 00:29:36,917
Guardamos el archivo y volver a cargar.

661
00:29:36,917 --> 00:29:40,000
Ahora la página está empezando a verse especie
de-- Es decir, sigue siendo bastante feo,

662
00:29:40,000 --> 00:29:43,180
pero al menos parece que pasé
dos minutos en lugar de un minuto y

663
00:29:43,180 --> 00:29:43,950
haciendolo.

664
00:29:43,950 --> 00:29:47,200
>> Y así, de forma incremental, podemos hacer
estos cambios estéticos ahora a la página?

665
00:29:47,200 --> 00:29:50,860
Realmente no he cambiado los datos en el
página que no sea la adición de la palabra de verdad.

666
00:29:50,860 --> 00:29:52,650
He añadido metadatos, si se quiere.

667
00:29:52,650 --> 00:29:54,830
Hey, navegador, hacen que el
palabra "realmente" en negrita.

668
00:29:54,830 --> 00:29:56,940
Sin embargo, los datos no es fuerte.

669
00:29:56,940 --> 00:29:57,830
Eso es metadatos.

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

671
00:29:59,410 --> 00:30:02,200
Así que todavía tenemos algunos de
los mismos conceptos como antes.

672
00:30:02,200 --> 00:30:05,990
Ahora, por supuesto, esto no es en la web,
así que voy a hacer un paso final aquí.

673
00:30:05,990 --> 00:30:10,300
>> Voy a ir a hello.html
y acaba de seleccionar y copiar esto.

674
00:30:10,300 --> 00:30:12,285
Y ahora voy a
entrar en Cloud9, que

675
00:30:12,285 --> 00:30:13,910
Voy a caminar a través de un momento.

676
00:30:13,910 --> 00:30:17,080
Y las probabilidades son que pronto será, si
no lo ha hecho, en una pantalla como esta.

677
00:30:17,080 --> 00:30:21,080
Y permítanme darle una rápida
Cloud9 recorrido de lo que realmente es.

678
00:30:21,080 --> 00:30:26,590
Así que de nuevo Cloud 9 es
este servicio basado en la nube

679
00:30:26,590 --> 00:30:30,580
y que me da la ilusión
de tener nuestra propia máquina virtual

680
00:30:30,580 --> 00:30:33,090
en la nube, técnicamente
un contenedor en la nube,

681
00:30:33,090 --> 00:30:35,160
que tenemos plena
privilegios administrativos a.

682
00:30:35,160 --> 00:30:37,130
Por lo tanto, en teoría, nadie
otra parte del mundo tiene

683
00:30:37,130 --> 00:30:39,152
el acceso a la pantalla estoy
mirando en este momento,

684
00:30:39,152 --> 00:30:40,860
excepto quizás las personas
que dirige el sitio,

685
00:30:40,860 --> 00:30:43,470
porque técnicamente tienen
el acceso físico y así sucesivamente.

686
00:30:43,470 --> 00:30:44,740
>> Entonces, ¿qué es lo que vemos en este entorno?

687
00:30:44,740 --> 00:30:46,230
Voy a alejar,
porque es un poco pequeña.

688
00:30:46,230 --> 00:30:48,104
Y permítanme señalar lo largo
aquí sólo por un momento.

689
00:30:48,104 --> 00:30:53,210
En el lado izquierdo de mi y su
la pantalla, hay un explorador de archivos de la izquierda.

690
00:30:53,210 --> 00:30:55,362
Así similar en espíritu
para Mac OS y Windows.

691
00:30:55,362 --> 00:30:57,070
Estos son todos de la
archivos en mi cuenta.

692
00:30:57,070 --> 00:30:59,250
Y por defecto, si su
cuenta es como la mía,

693
00:30:59,250 --> 00:31:05,090
verá o poco ves
holamundo.html y readme.md.

694
00:31:05,090 --> 00:31:07,950
Por aquí a la derecha, esto es
donde mis archivos de texto se van a ir.

695
00:31:07,950 --> 00:31:11,620
Si alguna vez has utilizado Microsoft
Word o el Bloc de notas o TextEdit,

696
00:31:11,620 --> 00:31:14,100
este es mi palabra de edición
de archivos que se va a ir.

697
00:31:14,100 --> 00:31:16,540
Y entonces el más arcano
característica de este entorno

698
00:31:16,540 --> 00:31:20,100
que no vamos a utilizar realmente necesita es
aquí se llama una ventana de terminal.

699
00:31:20,100 --> 00:31:23,390
Si ha utilizado desde DOS
antaño, este es el Linux

700
00:31:23,390 --> 00:31:25,450
o el equivalente para Linux de DOS.

701
00:31:25,450 --> 00:31:28,190
Es un interface-- basado en texto
no hay clics del ratón, sin arrastre.

702
00:31:28,190 --> 00:31:30,770
Todo lo que puedes hacer es escribir
comandos, pero esos comandos

703
00:31:30,770 --> 00:31:34,400
puede crear archivos, mover archivos, abierto
directorios, cerca de directorios,

704
00:31:34,400 --> 00:31:35,740
hacer cualquier número de cosas.

705
00:31:35,740 --> 00:31:38,060
Pero por ahora, sólo tendremos
pasar el tiempo aquí.

706
00:31:38,060 --> 00:31:39,050
>> Y así vamos a hacer esto.

707
00:31:39,050 --> 00:31:41,008
Si estás en esta
medio ambiente, que debe

708
00:31:41,008 --> 00:31:45,900
ser si ha creado un espacio de trabajo
ya, seguir adelante y sólo tiene que ir hasta

709
00:31:45,900 --> 00:31:48,690
a Archivo, Nuevo por un momento.

710
00:31:48,690 --> 00:31:51,740
Y eso le dará un nuevo
pestaña derecha aquí en el medio.

711
00:31:51,740 --> 00:31:54,250
Y solo-- y de dejar
seguir adelante y hacerlo.

712
00:31:54,250 --> 00:31:59,910
Vamos a seguir adelante y ahora no Archivo, Guardar
y seguir adelante y llamar hello.html,

713
00:31:59,910 --> 00:32:02,740
No debe confundirse con
holamundo.html, que

714
00:32:02,740 --> 00:32:06,910
llegó con su nueva cuenta gratuita,
que es simplemente un archivo de ejemplo.

715
00:32:06,910 --> 00:32:11,020
Verá que aparecen de repente,
más probable en el lado de la izquierda,

716
00:32:11,020 --> 00:32:12,810
y la ficha seguirá siendo abierta.

717
00:32:12,810 --> 00:32:21,300
Y deja que te animo ahora para recrear
este archivo o algunas variantes de los mismos.

718
00:32:21,300 --> 00:32:24,607
Y si no puede verlo del todo en el
pantalla, esto es idéntico a las diapositivas

719
00:32:24,607 --> 00:32:26,190
que es probable que tenga en otra pestaña.

720
00:32:26,190 --> 00:32:29,296
>> Así que en resumen, hacer su primera página web,
guardarlo y, a continuación, en un momento,

721
00:32:29,296 --> 00:32:31,170
Voy a mostrar cómo se
en realidad puede ver esto.

722
00:32:31,170 --> 00:32:32,970
Pero cambiar al menos una cosa.

723
00:32:32,970 --> 00:32:35,400
Cambiar a holamundo
algo de su propia elección,

724
00:32:35,400 --> 00:32:39,821
por lo que está convencido de que es su
presentar y no la acabo de crear.

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

726
00:32:40,320 --> 00:32:43,804
Y cuando haya ningún lista--
rush-- cuando esté listo,

727
00:32:43,804 --> 00:32:46,220
seguir adelante y guardar el archivo
una vez que haya realizado estos cambios.

728
00:32:46,220 --> 00:32:49,540
Y si hace clic en el
botón hasta ejecutar la parte superior, esta

729
00:32:49,540 --> 00:32:53,610
debe abrir una nueva pestaña que le dirá
lo URL se puede visitar el archivo en,

730
00:32:53,610 --> 00:32:56,380
pero puede ser que tome un momento para
entre comillas "iniciar Apache", que

731
00:32:56,380 --> 00:32:58,820
es el nombre del servidor web.

732
00:32:58,820 --> 00:33:02,430
Así que tenga cuidado de hacer exactamente
lo que está en el archivo, en última instancia.

733
00:33:02,430 --> 00:33:04,610
Así que ahora mismo, voy a acercar.

734
00:33:04,610 --> 00:33:07,780
Si comienzo a escribir
-Corchete abierto HTML, previo aviso

735
00:33:07,780 --> 00:33:09,650
me está incitando a terminar mi pensamiento.

736
00:33:09,650 --> 00:33:13,750
Y si he terminado mi pensamiento,
Me da automáticamente la etiqueta de cierre.

737
00:33:13,750 --> 00:33:17,190
Pero la expectativa es entonces me va a golpear
Entrar y, a continuación, pasar el interior hay

738
00:33:17,190 --> 00:33:21,180
y no dentro de la cabeza y
entonces que hago en el interior del cuerpo.

739
00:33:21,180 --> 00:33:24,430
Y es un poco raro al principio,
porque está haciendo un trabajo para usted,

740
00:33:24,430 --> 00:33:27,110
pero se dan cuenta de que en última instancia
que le ahorra pulsaciones de teclas.

741
00:33:27,110 --> 00:33:30,500
Y de hecho, una característica muy común de
entornos de programación de estos días

742
00:33:30,500 --> 00:33:33,260
tanto para el desarrollo web como
esto y programación real,

743
00:33:33,260 --> 00:33:36,960
de la cual hablaremos en el mañana,
Son estas características de auto-completado,

744
00:33:36,960 --> 00:33:39,710
cosas que simplemente permiten una
programador o un diseñador

745
00:33:39,710 --> 00:33:42,010
para escribir menos pulsaciones a
lograr la misma cosa.

746
00:33:42,010 --> 00:33:43,176
A veces es bueno, sin embargo.

747
00:33:43,176 --> 00:33:44,560
A veces es sólo una molestia.

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

749
00:33:49,290 --> 00:33:54,010
Y, de nuevo, una vez que haya transcrito
la corredera o alguna variante de la misma,

750
00:33:54,010 --> 00:33:57,360
puede hacer clic en el botón Ejecutar encima de la tapa.

751
00:33:57,360 --> 00:33:59,910
Y luego, en la parte inferior
ventana, se le informará

752
00:33:59,910 --> 00:34:04,290
en qué URL se puede visitar su página web.

753
00:34:04,290 --> 00:34:08,790
La mía, por ejemplo, está en
business-daharvard.c9users.io

754
00:34:08,790 --> 00:34:11,480
Etcétera.

755
00:34:11,480 --> 00:34:14,580
Muy bien, así, dejar que me-- alguna pregunta?

756
00:34:14,580 --> 00:34:19,460
Cualquier otra pregunta sobre conseguir justo
este trabajo antes de añadir características?

757
00:34:19,460 --> 00:34:21,692
Y permítanme proponer, justo
para conseguir que la gente comfortable--

758
00:34:21,692 --> 00:34:24,400
porque una cosa es simplemente
copiar y pegar ciegamente lo que he hecho.

759
00:34:24,400 --> 00:34:27,177
Pero sólo para que la gente luchan
con al menos una tarea pendiente,

760
00:34:27,177 --> 00:34:28,510
Voy a encender un poco de música.

761
00:34:28,510 --> 00:34:32,630
Voy a proponer una lista de
cosas que potencialmente puede añadir.

762
00:34:32,630 --> 00:34:34,086
Y que sin duda puede utilizar Google.

763
00:34:34,086 --> 00:34:36,210
¿Y por qué no nos
Proponemos que intenta resolver

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

765
00:34:38,710 --> 00:34:45,090
Así que en términos de etiquetas,
permítanme volver a utilizar este aquí.

766
00:34:45,090 --> 00:34:48,280
>> En realidad, déjenme poner
en una forma textual.

767
00:34:48,280 --> 00:35:02,380
Digamos que entre las etiquetas que podríamos
utilizar aquí están algunas etiquetas aquí.

768
00:35:02,380 --> 00:35:06,090
Hemos visto la etiqueta de párrafo.

769
00:35:06,090 --> 00:35:07,850
Ahora se va a auto-completar.

770
00:35:07,850 --> 00:35:12,220
etiqueta de párrafo, la etiqueta de anclaje.

771
00:35:12,220 --> 00:35:15,250
Digamos que usted quiere
hacer algo más grande,

772
00:35:15,250 --> 00:35:19,480
por lo que podría como-
la etiqueta span puede ayudar.

773
00:35:19,480 --> 00:35:23,010
Bueno, es posible que necesite un poco de ayuda
para que, en un momento.

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

775
00:35:24,830 --> 00:35:26,170
Usted verá que hay tabla.

776
00:35:26,170 --> 00:35:27,928
Hay algo que se llama tr, td.

777
00:35:27,928 --> 00:35:30,736

778
00:35:30,736 --> 00:35:32,860
Th, td.

779
00:35:32,860 --> 00:35:34,770
Volver a eso en un momento.

780
00:35:34,770 --> 00:35:36,590
¿Qué otra cosa podría ser útil?

781
00:35:36,590 --> 00:35:38,310
Hay fuertes.

782
00:35:38,310 --> 00:35:43,640
Hay énfasis, o más bien em.

783
00:35:43,640 --> 00:35:50,110
There's-- qué otra cosa
puede ser que le apetece aquí?

784
00:35:50,110 --> 00:35:51,930
Bueno, vamos a echar un
mira que en su conjunto.

785
00:35:51,930 --> 00:35:53,230
Forma, que hemos visto.

786
00:35:53,230 --> 00:35:54,130
No hay forma.

787
00:35:54,130 --> 00:35:56,500
Hay entrada y algunos otros.

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

789
00:35:58,924 --> 00:36:00,090
Muy bien, así que vamos a hacer esto.

790
00:36:00,090 --> 00:36:02,330
Para responder a una Victoria
pregunta, me dejó entrar primero

791
00:36:02,330 --> 00:36:05,020
sólo asegúrese de que todo el mundo está
capaz de conseguir su trabajo hola.

792
00:36:05,020 --> 00:36:06,900
A continuación voy a presentar
un par de otras ideas.

793
00:36:06,900 --> 00:36:09,209
A continuación, vamos a dejar que la gente a resolver
algún problema por su cuenta.

794
00:36:09,209 --> 00:36:11,500
A continuación, vamos a realmente volver
a la noción de una forma,

795
00:36:11,500 --> 00:36:14,950
y vamos a volver a implementar en realidad
juntos la interfaz para el usuario,

796
00:36:14,950 --> 00:36:16,450
por así decirlo, por el propio Google.

797
00:36:16,450 --> 00:36:19,700
Vamos a utilizar Google como la parte de atrás y dejamos
ellos hacen el trabajo duro, la búsqueda,

798
00:36:19,700 --> 00:36:22,760
pero vamos a recrear el extremo delantero
de Google y el formulario de búsqueda

799
00:36:22,760 --> 00:36:24,520
que tienen en su propia página.

800
00:36:24,520 --> 00:36:27,050
Y así vamos a volver a
estas etiquetas en un momento.

801
00:36:27,050 --> 00:36:30,270
>> Así que esto era lo que yo
propuesta hace un momento.

802
00:36:30,270 --> 00:36:33,940
Podemos añadir la estilización a una
página dentro de esta etiqueta de estilo,

803
00:36:33,940 --> 00:36:36,950
y podemos estilizar el fondo
el color, la alineación del texto,

804
00:36:36,950 --> 00:36:39,000
ya sea central o hacia la izquierda o la derecha.

805
00:36:39,000 --> 00:36:41,630
Pero muy rápidamente que lo haría
encontrar o un diseñador de páginas web

806
00:36:41,630 --> 00:36:44,060
se verá que esta
se vuelve un poco difícil de manejar,

807
00:36:44,060 --> 00:36:48,330
porque estás haciendo lo que hay
denominada mezcla de contenido

808
00:36:48,330 --> 00:36:50,120
con la presentación de los mismos.

809
00:36:50,120 --> 00:36:53,756
Que va a mezclar sus datos
y la estética de la misma.

810
00:36:53,756 --> 00:36:56,380
Y de hecho, si se tiene en cuenta
lo que va a suceder con el tiempo--

811
00:36:56,380 --> 00:36:58,350
esta es una muy pequeña
página Web, por supuesto.

812
00:36:58,350 --> 00:37:01,590
Pero si añado contenido a esta página
y añado estilo a esta página,

813
00:37:01,590 --> 00:37:04,650
la página se pone muy rápidamente
más y más y más.

814
00:37:04,650 --> 00:37:07,510
Y supongamos que yo quiero
tener una segunda página web que

815
00:37:07,510 --> 00:37:09,010
comparte algunos de estos atributos.

816
00:37:09,010 --> 00:37:12,350
Supongamos que mi página web para mi segundo
site-- también, quiero centro de todo,

817
00:37:12,350 --> 00:37:14,960
y yo también quiero todo
con un fondo verde.

818
00:37:14,960 --> 00:37:17,940
Estoy más o menos va a tener que
copiar y pegar algunas de estas líneas

819
00:37:17,940 --> 00:37:20,730
en ese segundo archivo, que se siente bien.

820
00:37:20,730 --> 00:37:22,030
Se va a resolver el problema.

821
00:37:22,030 --> 00:37:26,060
>> Pero lo que si quiero una tercera página
o una página o una página 30 de 40º?

822
00:37:26,060 --> 00:37:28,730
Ahora voy a ser copiado y
pegar una gran cantidad de código duplicado

823
00:37:28,730 --> 00:37:30,430
en varios archivos.

824
00:37:30,430 --> 00:37:32,600
Y así suponer que
Decido o me han dicho,

825
00:37:32,600 --> 00:37:34,780
Hey, no estamos utilizando una
fondo verde más.

826
00:37:34,780 --> 00:37:36,380
Vamos a empezar a usar naranja.

827
00:37:36,380 --> 00:37:38,690
¿Qué hay que cambiar?

828
00:37:38,690 --> 00:37:42,900
Bueno, usted tiene que cambiar ese estilo
de verde a naranja en la forma en muchos lugares?

829
00:37:42,900 --> 00:37:44,920
Como 30 o 40 plazas.

830
00:37:44,920 --> 00:37:45,900
Es tedioso.

831
00:37:45,900 --> 00:37:47,039
Es propenso a error.

832
00:37:47,039 --> 00:37:49,580
Hay una serie de razones
en el que no quiere inducir

833
00:37:49,580 --> 00:37:51,840
ese tipo de dolor por sí mismo.

834
00:37:51,840 --> 00:37:54,760
Y así, ¿no sería agradable
si podíamos tomar lo que acabo

835
00:37:54,760 --> 00:37:58,240
poner entre estos dos amarillas
etiquetas, estas etiquetas de estilo,

836
00:37:58,240 --> 00:38:04,050
factorizarlo a cabo, y poner todo de mi
estilización en un archivo central

837
00:38:04,050 --> 00:38:08,470
que todos los 30 o 40 de mis otros archivos
prestado de alguna manera o de referencia,

838
00:38:08,470 --> 00:38:11,640
no muy diferente de la creación de redes
diagramas que hacíamos antes?

839
00:38:11,640 --> 00:38:15,030
>> Así que si entro aquí, estoy
va a proponer en realidad

840
00:38:15,030 --> 00:38:17,880
que se sustituye la
etiqueta de estilo con algo

841
00:38:17,880 --> 00:38:21,620
llama la etiqueta de enlace, el cual
es horrible, horrible llamado,

842
00:38:21,620 --> 00:38:24,370
porque no se utiliza el
etiqueta de enlace para crear lo

843
00:38:24,370 --> 00:38:26,380
Sabemos que los seres humanos como un enlace en una página web.

844
00:38:26,380 --> 00:38:29,750
Para ello, se utiliza la cual la etiqueta?

845
00:38:29,750 --> 00:38:31,464
¿Cómo se crea un enlace en una página web?

846
00:38:31,464 --> 00:38:32,130
AUDIENCIA: La a.

847
00:38:32,130 --> 00:38:34,870
DAVID J. MALAN: La una o anclaje
etiqueta, que fue a Disney antes.

848
00:38:34,870 --> 00:38:39,090
La etiqueta de enlace aquí está diciendo
esto-- enlace a un archivo llamado

849
00:38:39,090 --> 00:38:44,350
styles.css, la relación a la que
va a ser que es mi estilo.

850
00:38:44,350 --> 00:38:48,290
Así que este es uno de los de S en
las hojas de estilo en cascada CSS--.

851
00:38:48,290 --> 00:38:50,490
Estilo sheet-- dos de la década de S en CSS.

852
00:38:50,490 --> 00:38:52,550
Hoja estilo cascada.

853
00:38:52,550 --> 00:38:58,640
Esto sólo significa, bueno, navegador, ir
styles.css encuentra en el servidor local

854
00:38:58,640 --> 00:39:01,870
y utilizarlo como su hoja de estilo,
lo que significa dentro de ese archivo

855
00:39:01,870 --> 00:39:05,310
va a ser la totalidad de la
estilizaciones que acabamos de hecho.

856
00:39:05,310 --> 00:39:07,396
Y así lo que ese archivo
podría ser como es ésta.

857
00:39:07,396 --> 00:39:10,020
Y sólo voy a hacer esto es un rápido
ejemplo, debido a que no es necesario

858
00:39:10,020 --> 00:39:12,000
para obtener demasiado en las malas hierbas aquí.

859
00:39:12,000 --> 00:39:17,840
Pero si copio esto, lo que estoy proponiendo
es que un programador crear un nuevo archivo,

860
00:39:17,840 --> 00:39:24,450
pegar en aquellos lines--
whoops-- pegar en esas líneas,

861
00:39:24,450 --> 00:39:32,270
guardarlo como styles.css y, a continuación, en
el otro archivo, eliminar todo eso

862
00:39:32,270 --> 00:39:35,450
y vuelva a colocar en su lugar
con esta etiqueta de enlace.

863
00:39:35,450 --> 00:39:43,090
Así que si me enlace href = "styles.css",
la relación será "estilo"

864
00:39:43,090 --> 00:39:44,170
el código de cierre.

865
00:39:44,170 --> 00:39:45,250
Guardarlo.

866
00:39:45,250 --> 00:39:47,000
Volver a mi holamundo.

867
00:39:47,000 --> 00:39:48,690
Recargar.

868
00:39:48,690 --> 00:39:51,290
>> Literalmente no ha pasado nada.

869
00:39:51,290 --> 00:39:54,710
Eso es una buena cosa, porque
significa en realidad es todo trabajo.

870
00:39:54,710 --> 00:39:58,860
Para probar tanto, supongo que hago una
error tipográfico, y esto lo llamo "styles.css"

871
00:39:58,860 --> 00:40:03,080
con un capital S, que es
incorrecto y, a continuación, volver a cargar.

872
00:40:03,080 --> 00:40:05,470
Ahora se puede ver que simplemente no funciona.

873
00:40:05,470 --> 00:40:06,362
¿Ahora por qué?

874
00:40:06,362 --> 00:40:08,070
Bueno, vamos a utilizar una
técnica de antes.

875
00:40:08,070 --> 00:40:10,153
Déjame ir adelante y, en
mi navegador, en Chrome, estoy

876
00:40:10,153 --> 00:40:12,900
va a abrir ese especial
pestaña de red como antes,

877
00:40:12,900 --> 00:40:15,560
y deja que vuelva a cargar la página.

878
00:40:15,560 --> 00:40:19,341
Lo que no te sorprende ver ahora?

879
00:40:19,341 --> 00:40:20,840
O quizás usted es sorprendido al verlo.

880
00:40:20,840 --> 00:40:23,225
De cualquier manera, ¿qué ves ahora?

881
00:40:23,225 --> 00:40:24,100
AUDIENCIA: [inaudible]

882
00:40:24,100 --> 00:40:24,770
DAVID J. MALAN: No ha encontrado.

883
00:40:24,770 --> 00:40:25,680
¿Por qué no se encontró?

884
00:40:25,680 --> 00:40:28,480
Asimismo, el capital Styles.css--
S- no existe.

885
00:40:28,480 --> 00:40:29,230
Yo mal llamada ella.

886
00:40:29,230 --> 00:40:30,430
simple error tipográfico.

887
00:40:30,430 --> 00:40:33,816
Pero me estoy comprensiblemente ahora
404, porque el servidor está diciendo, hey,

888
00:40:33,816 --> 00:40:34,440
no ha encontrado.

889
00:40:34,440 --> 00:40:36,300
Literalmente, no sé
donde dicho archivo es.

890
00:40:36,300 --> 00:40:38,880
Así, como resultado, el navegador
te muestra lo que puede,

891
00:40:38,880 --> 00:40:42,860
el contenido en bruto de la página,
el cual era un 200, el código HTML,

892
00:40:42,860 --> 00:40:45,390
pero la estilización no puede
se añade después de eso.

893
00:40:45,390 --> 00:40:47,120
Y esto es lo que se quiere decir con cascada.

894
00:40:47,120 --> 00:40:49,070
Puede especie de agregarlo
después, y que tipo de

895
00:40:49,070 --> 00:40:50,874
refina la estética de la página web.

896
00:40:50,874 --> 00:40:53,790
E incluso se puede anular los
sin embargo, los estilos con otros archivos de hojas de estilo

897
00:40:53,790 --> 00:40:54,700
si tu quieres.

898
00:40:54,700 --> 00:40:57,780
No ha encontrado, sin embargo, en este caso,
porque, por supuesto, que mal llamada ella.

899
00:40:57,780 --> 00:41:00,330
Así que tendría que arreglar eso primero.

900
00:41:00,330 --> 00:41:04,667
>> Así que vamos a seguir adelante y
proponer la siguiente.

901
00:41:04,667 --> 00:41:07,410

902
00:41:07,410 --> 00:41:11,140
Vamos a seguir adelante y hacer esto.

903
00:41:11,140 --> 00:41:14,220
A partir de tal vez
holamundo su archivo,

904
00:41:14,220 --> 00:41:17,740
me dejaron de invitar a una pareja
de presentar sugerencias.

905
00:41:17,740 --> 00:41:20,400
Así, Victoria, que quería
hacer un poco de texto más grande, ¿verdad?

906
00:41:20,400 --> 00:41:24,555
Muy bien, así que puede
no hacer el texto más grande.

907
00:41:24,555 --> 00:41:26,860
Y vamos a arrancar cada uno
sólo un problema a resolver.

908
00:41:26,860 --> 00:41:30,867
Hacer texto más grande.

909
00:41:30,867 --> 00:41:32,700
Yo no me voy a molestar
escribir esto cuando

910
00:41:32,700 --> 00:41:35,600
contar con tecnología de bala por aquí.

911
00:41:35,600 --> 00:41:39,970
Así algunos problemas.

912
00:41:39,970 --> 00:41:44,670
Así que vamos a tratar
para hacer el texto más grande.

913
00:41:44,670 --> 00:41:45,170
Todo bien.

914
00:41:45,170 --> 00:41:48,360
¿Qué otra cosa podría proponer a alguien?

915
00:41:48,360 --> 00:41:50,332
¿Qué más podríamos queremos
que hacer en una página web?

916
00:41:50,332 --> 00:41:52,040
Vamos a llegar a una
lista corta de cosas

917
00:41:52,040 --> 00:41:55,366
y luego delegar en el
grupo para resolver esto.

918
00:41:55,366 --> 00:41:56,270
>> AUDIENCIA: [inaudible]

919
00:41:56,270 --> 00:42:02,251
>> DAVID J. MALAN: OK, texto de la posición
en diferentes lados de la página?

920
00:42:02,251 --> 00:42:02,750
Todo bien.

921
00:42:02,750 --> 00:42:04,620
Algo más.

922
00:42:04,620 --> 00:42:05,784
>> AUDIENCIA: [inaudible]

923
00:42:05,784 --> 00:42:06,700
DAVID J. MALAN: Es.

924
00:42:06,700 --> 00:42:08,720
Por lo que un gif es sólo una
formato de archivo diferente.

925
00:42:08,720 --> 00:42:12,830
Que la utilizamos, lo que, una
png o jpg, probablemente?

926
00:42:12,830 --> 00:42:14,480
Se utilizó un jpg.

927
00:42:14,480 --> 00:42:16,780
Si tienes curiosidad, una excesiva
responder a su pregunta

928
00:42:16,780 --> 00:42:19,404
es un archivo JPG se utiliza generalmente para
fotografías, ya que soporta

929
00:42:19,404 --> 00:42:21,500
millones de colores o color de 24 bits.

930
00:42:21,500 --> 00:42:26,930
Un GIF se utiliza generalmente para, como,
memes de Internet, estas animaciones days--

931
00:42:26,930 --> 00:42:28,810
gifs animados similares.

932
00:42:28,810 --> 00:42:32,320
Pero sucede utilizar un color más pequeña
paleta, sólo 256 colores posibles,

933
00:42:32,320 --> 00:42:35,230
pero apoya
la transparencia y la animación.

934
00:42:35,230 --> 00:42:40,330
Y luego está png, que apoya
transparencia y más colores

935
00:42:40,330 --> 00:42:41,300
pero no animación.

936
00:42:41,300 --> 00:42:42,133
Así que es un trade-off.

937
00:42:42,133 --> 00:42:44,144

938
00:42:44,144 --> 00:42:46,060
Por lo que añadir un gif, sin embargo,
sería funcionalmente

939
00:42:46,060 --> 00:42:48,396
equivalente a añadir un png o jpg.

940
00:42:48,396 --> 00:42:49,110
Sí.

941
00:42:49,110 --> 00:42:50,550
Fuente de la imagen es igual.

942
00:42:50,550 --> 00:42:51,590
Así que otra cosa.

943
00:42:51,590 --> 00:42:57,288
Vamos a llegar a algo que
enviamos a Victoria a hacer aquí.

944
00:42:57,288 --> 00:42:59,209
>> AUDIENCIA: Agrega botones para un formulario.

945
00:42:59,209 --> 00:43:00,000
DAVID J. MALAN: OK.

946
00:43:00,000 --> 00:43:02,179
Así que añadir botones para un formulario.

947
00:43:02,179 --> 00:43:03,470
Y haremos todo lo que uno juntos.

948
00:43:03,470 --> 00:43:07,220
De manera que habrá una transición perfecta
justo después de este desafío.

949
00:43:07,220 --> 00:43:10,357
¿Algo más?

950
00:43:10,357 --> 00:43:11,440
¿Qué podría hacer?

951
00:43:11,440 --> 00:43:14,040

952
00:43:14,040 --> 00:43:16,516
La web siente muy decepcionante
si esto es todo lo que podemos hacer.

953
00:43:16,516 --> 00:43:18,140
AUDIENCIA: Cambiar el color del texto.

954
00:43:18,140 --> 00:43:19,500
DAVID J. MALAN: Cambiar el qué?

955
00:43:19,500 --> 00:43:20,666
PÚBLICO: El color del texto.

956
00:43:20,666 --> 00:43:22,311
DAVID J. MALAN: Cambiar el color del texto.

957
00:43:22,311 --> 00:43:22,810
Todo bien.

958
00:43:22,810 --> 00:43:23,790
Por lo tanto, vamos a hacer esto.

959
00:43:23,790 --> 00:43:27,209
Sólo una vez más de manera que usted no es, simplemente
de memoria, haciendo exactamente lo que estoy haciendo,

960
00:43:27,209 --> 00:43:29,500
Voy a encender la música
para tal vez cinco minutos aquí.

961
00:43:29,500 --> 00:43:30,450
Usted es bienvenido a usar Google.

962
00:43:30,450 --> 00:43:33,130
De nada para preguntarme, y
Voy a susurrar una pista en su oído.

963
00:43:33,130 --> 00:43:35,171
De nada mirar
sobre los hombros de otros.

964
00:43:35,171 --> 00:43:37,340
Pero resolver sólo uno de estos problemas.

965
00:43:37,340 --> 00:43:40,190
Pero nosotros haremos el último de ellos, el
forma uno, si pudiéramos, juntos.

966
00:43:40,190 --> 00:43:42,790
Así cinco minutos para resolver
cualquiera de estos problemas

967
00:43:42,790 --> 00:43:46,780
a través de Google, la intuición, o cualquier
otros medios disponibles para usted.

968
00:43:46,780 --> 00:43:48,630
>> [REPRODUCIENDO MÚSICA]

969
00:43:48,630 --> 00:43:49,130
Todo bien.

970
00:43:49,130 --> 00:43:50,838
No se preocupe si usted desea
para mantener pequeños ajustes,

971
00:43:50,838 --> 00:43:53,880
pero voy a echar a perder un par
de estas respuestas.

972
00:43:53,880 --> 00:43:57,986
Así que la primera sugerencia de
Victoria fue para hacer el texto más grande.

973
00:43:57,986 --> 00:43:59,360
Así que hay un par de maneras de hacer esto.

974
00:43:59,360 --> 00:44:01,530
Actualmente he restaurado
mi pantalla para este tamaño,

975
00:44:01,530 --> 00:44:04,310
aunque he zoom
artificialmente sólo para ver las cosas.

976
00:44:04,310 --> 00:44:07,470
Y vamos a hacer esto.

977
00:44:07,470 --> 00:44:11,380
Déjame ir por delante y agarrar
un texto genérico de América

978
00:44:11,380 --> 00:44:19,540
por lo que sólo tenemos algo con que trabajar.

979
00:44:19,540 --> 00:44:20,715
Así que dame sólo un momento.

980
00:44:20,715 --> 00:44:21,840
Voy a hacer tres párrafos.

981
00:44:21,840 --> 00:44:53,430

982
00:44:53,430 --> 00:44:53,930
DE ACUERDO.

983
00:44:53,930 --> 00:44:55,560
Este será un mejor ejemplo.

984
00:44:55,560 --> 00:44:57,840
Así que para los curiosos, en
mi hello.html, acabo

985
00:44:57,840 --> 00:45:01,645
pegado tres sin sentido
párrafos Latina

986
00:45:01,645 --> 00:45:03,270
por lo que sólo tenemos un poco de texto para trabajar.

987
00:45:03,270 --> 00:45:06,720
Y la meta de Victoria era
hacer que algunos de los textos más grande.

988
00:45:06,720 --> 00:45:09,879
Así que pude, como antes, vaya aquí.

989
00:45:09,879 --> 00:45:11,170
Y déjame hacer de la manera correcta.

990
00:45:11,170 --> 00:45:13,253
Voy a tener un vínculo
etiqueta que apunta a un archivo

991
00:45:13,253 --> 00:45:20,560
llamado "styles.css," la relación
de los cuales es nuevo "estilo".

992
00:45:20,560 --> 00:45:25,221
Y luego voy a salvar lo
y abrir este "styles.css."

993
00:45:25,221 --> 00:45:28,940
>> Así que, como antes, tengo el
capacidad en este archivo CSS

994
00:45:28,940 --> 00:45:31,569
para anular efectivamente el valor por defecto
estética de una página web,

995
00:45:31,569 --> 00:45:33,860
y la estética predeterminados,
por supuesto, son bastante aburrida.

996
00:45:33,860 --> 00:45:36,943
Es una especie de tamaño de fuente normal, negro
texto, el fondo blanco, y así sucesivamente.

997
00:45:36,943 --> 00:45:39,440
Así que supongamos que quiero hacer
todo esto texto más grande.

998
00:45:39,440 --> 00:45:40,460
Podría hacer algunas cosas.

999
00:45:40,460 --> 00:45:43,750
En mi archivo styles.css, me
podría decir, sabes qué,

1000
00:45:43,750 --> 00:45:46,950
aplicarán lo siguiente a
el cuerpo de la página.

1001
00:45:46,950 --> 00:45:51,390
Seguir adelante y hacer el
tamaño de fuente de 24 puntos,

1002
00:45:51,390 --> 00:45:54,130
que es un número que podría
utilizar en Microsoft Word.

1003
00:45:54,130 --> 00:45:57,620
Déjame volver a mi web
La página de aquí y volver a cargar,

1004
00:45:57,620 --> 00:45:59,640
y se puede ver que
que ya es mucho más grande.

1005
00:45:59,640 --> 00:46:02,223
Y podemos conseguir un poco loco,
al igual que puede en un desktop--

1006
00:46:02,223 --> 00:46:03,670
que sea 96 puntos.

1007
00:46:03,670 --> 00:46:04,950
Recargar.

1008
00:46:04,950 --> 00:46:07,610
Y cada vez es un poco
difícil de manejar en este punto.

1009
00:46:07,610 --> 00:46:09,500
>> Pero podría ser un poco más preciso.

1010
00:46:09,500 --> 00:46:14,530
En lugar de aplicar este
hoja de estilo para el cuerpo de la página,

1011
00:46:14,530 --> 00:46:21,740
¿Qué más podría yo aplicarlo a su lugar,
lo que otra etiqueta que aún podría

1012
00:46:21,740 --> 00:46:25,445
funcionan de la misma manera?

1013
00:46:25,445 --> 00:46:26,444
>> AUDIENCIA: La etiqueta p?

1014
00:46:26,444 --> 00:46:27,360
DAVID J. MALAN: etiqueta P.

1015
00:46:27,360 --> 00:46:29,350
Así que la cabeza no sería
correcta, porque la cabeza,

1016
00:46:29,350 --> 00:46:31,300
realidad no se puede
controlar la estética de.

1017
00:46:31,300 --> 00:46:32,700
Hay ya sea texto o no.

1018
00:46:32,700 --> 00:46:36,760
Pero la p tag-- que puede sumergirse en un poco
más profundo, por así decirlo, en el párrafo

1019
00:46:36,760 --> 00:46:37,350
las etiquetas.

1020
00:46:37,350 --> 00:46:41,600
Y a pesar de que hay tres,
eso es perfectamente bien, porque en CSS,

1021
00:46:41,600 --> 00:46:44,900
cuando acabo de decir "p", este
significa aplicar la siguiente

1022
00:46:44,900 --> 00:46:48,300
a cualquier etiqueta que coincida con esta
selector, el selector simplemente

1023
00:46:48,300 --> 00:46:49,430
es el nombre de la etiqueta.

1024
00:46:49,430 --> 00:46:52,350
Así que donde quiera que vea una
"P", aplicar el tamaño de la fuente,

1025
00:46:52,350 --> 00:46:55,222
y vamos a hacer que sea más
razonable nuevo-- 24 puntos.

1026
00:46:55,222 --> 00:46:56,930
Y sabes qué,
sólo por si acaso,

1027
00:46:56,930 --> 00:46:59,810
vamos a hacer el color
simplemente roja por el momento.

1028
00:46:59,810 --> 00:47:03,740
Y ahora si vuelvo a cargar, ahora nos
ver tres párrafos feas.

1029
00:47:03,740 --> 00:47:07,180
>> Pero ahora supongamos que yo soy una especie
de-- Quiero que el primer párrafo

1030
00:47:07,180 --> 00:47:08,210
que saltan a la vista del usuario.

1031
00:47:08,210 --> 00:47:11,150
No quiero simplemente para aumentar
el tamaño de la fuente de todo.

1032
00:47:11,150 --> 00:47:16,105
Y lo que en realidad quiero identificar o
distinguir entre estos párrafos.

1033
00:47:16,105 --> 00:47:18,730
Así que vamos a deshacernos de los números rojos,
porque eso es sólo un poco de mal gusto,

1034
00:47:18,730 --> 00:47:23,885
y vamos a seguir adelante y hacer que el
tamaño de letra de 12 puntos por defecto,

1035
00:47:23,885 --> 00:47:26,260
por lo que estamos de vuelta a algo
un poco más razonable.

1036
00:47:26,260 --> 00:47:29,190
Y ahora sólo quiero aumentar la
tamaño de la fuente del primer párrafo.

1037
00:47:29,190 --> 00:47:31,440
Puedo hacer esto en unos pocos
maneras, pero una manera que es

1038
00:47:31,440 --> 00:47:37,180
tal vez la mayoría de instrucción en el
es momento de hacer lo siguiente.

1039
00:47:37,180 --> 00:47:43,280
Déjame ir por delante y decir, este
párrafo tiene un identificador único de la "primera".

1040
00:47:43,280 --> 00:47:45,000
Podría llamar a este lo que quiera.

1041
00:47:45,000 --> 00:47:46,874
Podría llamar a esta "foo"
o cualquier otra palabra,

1042
00:47:46,874 --> 00:47:49,290
pero voy a darle un poco
Nombre semánticamente significativa

1043
00:47:49,290 --> 00:47:50,320
así como "primero".

1044
00:47:50,320 --> 00:47:54,790
Este es el identificador único,
la identificación, para mi primer párrafo.

1045
00:47:54,790 --> 00:47:59,360
>> Lo que ahora puedo hacer en mi hoja de estilo
es ser un poco más preciso.

1046
00:47:59,360 --> 00:48:02,330
En lugar de decir, aplicar
lo siguiente a la etiqueta p,

1047
00:48:02,330 --> 00:48:04,890
Puedo decir el following--
aplicará lo siguiente,

1048
00:48:04,890 --> 00:48:11,000
o seleccione el elemento HTML
que tiene un identificador único de la "primera".

1049
00:48:11,000 --> 00:48:12,350
¿Qué quiero para aplicar a ella?

1050
00:48:12,350 --> 00:48:15,250
Un tamaño de fuente de 24 puntos.

1051
00:48:15,250 --> 00:48:16,640
Así que tengo dos selectores ahora.

1052
00:48:16,640 --> 00:48:19,690
Uno hace todo el
los párrafos 12 puntos.

1053
00:48:19,690 --> 00:48:24,960
Pero éste, sobre todo porque se trata de
second-- que es el último en el archivo:

1054
00:48:24,960 --> 00:48:27,090
esto tiene un efecto en cascada.

1055
00:48:27,090 --> 00:48:30,200
Yo sólo he hecho toda mi
etiquetas de párrafo 12 puntos,

1056
00:48:30,200 --> 00:48:34,350
pero esto ahora y cascadas
prevalece sobre cualquier elemento que por

1057
00:48:34,350 --> 00:48:38,800
en la página, cualquier etiqueta de la página cuyo
ID único es, entre comillas "primero".

1058
00:48:38,800 --> 00:48:41,720
Y el hashtag en este contexto
sólo significa "identificador único".

1059
00:48:41,720 --> 00:48:43,750
Yo no puse en el archivo HTML.

1060
00:48:43,750 --> 00:48:46,880
Yo, por aquí, sólo decir
entre comillas "primero".

1061
00:48:46,880 --> 00:48:48,470
>> Así que permítanme volver a cargar.

1062
00:48:48,470 --> 00:48:49,919
Y ahora veo, ah, OK.

1063
00:48:49,919 --> 00:48:51,710
Es decir, que no es tan
bastante, pero es un poco

1064
00:48:51,710 --> 00:48:53,600
así como el prefacio de una
libro o algo por el estilo,

1065
00:48:53,600 --> 00:48:55,100
donde el primer párrafo es más grande.

1066
00:48:55,100 --> 00:48:57,933
Podría ser aún más preciso con
sólo las primeras letras, pero al menos

1067
00:48:57,933 --> 00:48:59,110
He ejercido más control.

1068
00:48:59,110 --> 00:49:04,760
Ahora maybe-- tal vez desee hacer esto
de vez en cuando por cualquier razón,

1069
00:49:04,760 --> 00:49:09,010
y por lo que no quiero que esto
aplicar a una sola etiqueta HTML.

1070
00:49:09,010 --> 00:49:15,110
Más bien, vamos a decir-- vamos
También hacer lo siguiente.

1071
00:49:15,110 --> 00:49:18,810
Class = "importación".

1072
00:49:18,810 --> 00:49:23,970
Mientras que un ID se utiliza para únicamente
identificar una cosa, una etiqueta,

1073
00:49:23,970 --> 00:49:30,190
en su página web, una clase está destinado a ser
utilizado en cualquier número de elementos o etiquetas

1074
00:49:30,190 --> 00:49:30,950
en su página web.

1075
00:49:30,950 --> 00:49:31,710
Así que es reutilizable.

1076
00:49:31,710 --> 00:49:33,090
Un ID no es reutilizable.

1077
00:49:33,090 --> 00:49:34,450
Una clase es reutilizable.

1078
00:49:34,450 --> 00:49:37,830
>> Y sabes qué, por cualquier
reasons-- filosófica

1079
00:49:37,830 --> 00:49:40,180
No he terminado mi
thought-- voy a decir

1080
00:49:40,180 --> 00:49:44,300
que el primer párrafo y el
párrafo segundo, son importantes.

1081
00:49:44,300 --> 00:49:48,600
Así que voy a aplicar la clase llamada
"Importante" que, si salvo mi archivo

1082
00:49:48,600 --> 00:49:51,510
y volver a cargar, no tiene
impacto funcional todavía.

1083
00:49:51,510 --> 00:49:53,780
Pero he añadido un poco
metadatos para el archivo,

1084
00:49:53,780 --> 00:49:56,610
especie de algo separado
a partir de los datos básicos del archivo,

1085
00:49:56,610 --> 00:50:02,300
por lo que ahora en mi hoja de estilo, si
en cambio decir ".importante" - usted sabe,

1086
00:50:02,300 --> 00:50:07,110
todo lo que es importante, estoy
va a hacer font-color, red--

1087
00:50:07,110 --> 00:50:09,930
o más bien no font-color, solo color.

1088
00:50:09,930 --> 00:50:12,930
Hay inconsistencias
CSS en desgracia.

1089
00:50:12,930 --> 00:50:14,120
Y volver a cargar.

1090
00:50:14,120 --> 00:50:17,640
Ahora note la primera
dos párrafos son rojos

1091
00:50:17,640 --> 00:50:20,880
pero no la tercera, porque sólo
aplicado a la clase de "importante"

1092
00:50:20,880 --> 00:50:25,020
a las dos primeras de esas cosas.

1093
00:50:25,020 --> 00:50:28,030
>> Así que en los ID, usted tiene la capacidad
para especificar de manera muy precisa.

1094
00:50:28,030 --> 00:50:30,110
Con las clases, tiene capacidad de reutilización.

1095
00:50:30,110 --> 00:50:33,800
Pero en ambos casos, la cuenta
especie de principio de buena diseño

1096
00:50:33,800 --> 00:50:39,072
donde eliminado casi todo de la
la estética a mi archivo styles.css.

1097
00:50:39,072 --> 00:50:40,280
Así que no hay desorden aquí.

1098
00:50:40,280 --> 00:50:44,490
No hay mención de color rojo o
negrita orientación o el tamaño de fuente en este archivo.

1099
00:50:44,490 --> 00:50:49,430
Más bien tengo semánticamente,
caracterizado significativa mis datos como,

1100
00:50:49,430 --> 00:50:51,240
aquí hay algunos datos importantes.

1101
00:50:51,240 --> 00:50:52,800
He aquí algunos datos más importantes.

1102
00:50:52,800 --> 00:50:56,500
Por otra parte, aquí está el
"Primero" de mis datos importantes.

1103
00:50:56,500 --> 00:51:01,050
Así HTML tiene que ver con una especie
de etiquetado, literalmente, palabras

1104
00:51:01,050 --> 00:51:05,270
y los párrafos y las construcciones en su
Página con estos pequeños consejos, si

1105
00:51:05,270 --> 00:51:07,640
voluntad, que pueda
de alguna manera aprovechar el uso

1106
00:51:07,640 --> 00:51:10,880
otras técnicas como el CSS de esta manera.

1107
00:51:10,880 --> 00:51:14,760
>> Así que en respuesta a la pregunta de Victoria,
podemos agrandar el texto de esa manera.

1108
00:51:14,760 --> 00:51:18,380
Hay muchas otras maneras, pero
la fuente tag-- paréntesis abierto "fuente" -

1109
00:51:18,380 --> 00:51:19,770
es en realidad varios años de edad.

1110
00:51:19,770 --> 00:51:21,410
Y este es el problema,
también, con confiar sólo

1111
00:51:21,410 --> 00:51:23,485
resources-- en línea
tienden a ser obsoleta.

1112
00:51:23,485 --> 00:51:26,110
Y, en efecto, que ya no utiliza,
porque el mundo se dio cuenta,

1113
00:51:26,110 --> 00:51:28,970
¿qué significa "font-size = 7"?

1114
00:51:28,970 --> 00:51:29,670
No es así.

1115
00:51:29,670 --> 00:51:32,770
Y así durante muchos años y que
este día-- uno de los laterales

1116
00:51:32,770 --> 00:51:36,060
señala aquí es que es en realidad
increíblemente doloroso todavía a veces

1117
00:51:36,060 --> 00:51:38,900
para desarrollar sitios para la
web, porque Microsoft

1118
00:51:38,900 --> 00:51:44,220
y Google y Mozilla y
otros a menudo no están de acuerdo en cuanto a cómo

1119
00:51:44,220 --> 00:51:47,480
para interpretar una especificación como HTML.

1120
00:51:47,480 --> 00:51:52,490
>> Hay un libro de reglas de HTML que
en general, dice el significado de cada etiqueta.

1121
00:51:52,490 --> 00:51:55,690
Pero a veces se deja a la
discreción de aplicación,

1122
00:51:55,690 --> 00:51:57,290
discreción y Google de Microsoft.

1123
00:51:57,290 --> 00:52:00,000
Y por lo que tendrá muy a menudo
ver en una página web algo

1124
00:52:00,000 --> 00:52:04,954
se ve diferente en un PC
que lo hace en un Mac,

1125
00:52:04,954 --> 00:52:06,995
y eso es realmente porque,
al final del día,

1126
00:52:06,995 --> 00:52:08,891
no probaron que
bien en ambas plataformas.

1127
00:52:08,891 --> 00:52:11,390
Pero también es debido razonable,
las personas inteligentes no estarán de acuerdo

1128
00:52:11,390 --> 00:52:14,970
y las empresas no están de acuerdo, y así
uno de los retos de la programación

1129
00:52:14,970 --> 00:52:16,980
para la red o diseñar
cosas para la web

1130
00:52:16,980 --> 00:52:21,700
está escribiendo su sitio web de una manera
que funciona en todos los navegadores web.

1131
00:52:21,700 --> 00:52:23,410
Pero incluso eso es razonable, ¿verdad?

1132
00:52:23,410 --> 00:52:27,807
Hay tantas versiones de tantos
navegadores allí que, en algún momento,

1133
00:52:27,807 --> 00:52:30,890
también hay que hacer un juicio
y usted tiene que decidir como una empresa,

1134
00:52:30,890 --> 00:52:33,082
especialmente para el comercio electrónico de estilo
sitios donde le

1135
00:52:33,082 --> 00:52:36,290
tratando de usar y más nuevo
tecnologías para dar un muy buen usuario

1136
00:52:36,290 --> 00:52:37,110
experiencia.

1137
00:52:37,110 --> 00:52:41,019
Pero un porcentaje de sus usuarios podrían
siendo el uso de Internet Explorer 6 o 7

1138
00:52:41,019 --> 00:52:43,810
o 8, especialmente en función de la
país que están viniendo.

1139
00:52:43,810 --> 00:52:46,760
>> Y así, con mucha frecuencia
Consultado es algo

1140
00:52:46,760 --> 00:52:50,920
así como "las estadísticas del navegador web."

1141
00:52:50,920 --> 00:52:56,560
Y si vamos a-- vamos a ver Wikipedia
y vea cómo hasta a la fecha de la tabla se encuentra

1142
00:52:56,560 --> 00:52:59,320
si hay uno.

1143
00:52:59,320 --> 00:53:02,420
Así que aquí se puede ver
cuando en realidad los navegadores

1144
00:53:02,420 --> 00:53:06,160
son, según diciembre de 2015,
de acuerdo con el gobierno de Estados Unidos.

1145
00:53:06,160 --> 00:53:11,170
Chrome es en la cuota de mercado del 42%, seguido
por IE en gran medida en los entornos corporativos

1146
00:53:11,170 --> 00:53:14,490
o la configuración del PC, por supuesto,
seguido por Firefox,

1147
00:53:14,490 --> 00:53:17,440
a continuación, Safari, Opera y luego no lo hizo
hacer el mapa aquí por alguna razón,

1148
00:53:17,440 --> 00:53:18,210
y que otros.

1149
00:53:18,210 --> 00:53:19,500
Tal vez sea en Otros.

1150
00:53:19,500 --> 00:53:27,700
Pero más problemática que la es--
vamos a ver si también tiene Wikipedia

1151
00:53:27,700 --> 00:53:35,194
versiones de navegadores version--

1152
00:53:35,194 --> 00:53:36,160

1153
00:53:36,160 --> 00:53:39,190
>> Vayamos a las estadísticas del navegador.

1154
00:53:39,190 --> 00:53:40,680
ES DECIR.

1155
00:53:40,680 --> 00:53:42,030
Incluso eso no es suficiente.

1156
00:53:42,030 --> 00:53:44,854
estadísticas del examinador.

1157
00:53:44,854 --> 00:53:45,353
Mi versión.

1158
00:53:45,353 --> 00:53:48,980

1159
00:53:48,980 --> 00:53:50,540
Eso no va a estar bien.

1160
00:53:50,540 --> 00:53:53,414
Veamos versiones.

1161
00:53:53,414 --> 00:53:54,830
cuota de mercado de los navegadores.

1162
00:53:54,830 --> 00:53:57,110
Vamos a ver si esto sale.

1163
00:53:57,110 --> 00:53:57,610
DE ACUERDO.

1164
00:53:57,610 --> 00:54:00,010
Ahora esto se está poniendo
un poco más útil.

1165
00:54:00,010 --> 00:54:04,870
Así que aquí, darse cuenta de que tenemos todo
diferentes versiones de los navegadores.

1166
00:54:04,870 --> 00:54:09,887
Y, por Dios, si look-- Chrome
48, Chrome 47, Chrome 31, Chrome 45.

1167
00:54:09,887 --> 00:54:12,970
Es decir, los navegadores cada vez más informado,
y, a veces algunos de esos cambios

1168
00:54:12,970 --> 00:54:16,430
son significativos en
términos de funcionalidad.

1169
00:54:16,430 --> 00:54:20,630
Y así, en algún momento, la
gerentes de producto o de los ingenieros

1170
00:54:20,630 --> 00:54:23,620
necesitará hacer una en decisión que
saber qué, sólo el 1% del mercado mundial

1171
00:54:23,620 --> 00:54:24,740
sigue utilizando IE 7.

1172
00:54:24,740 --> 00:54:25,490
Al diablo con ellos.

1173
00:54:25,490 --> 00:54:27,470
Simplemente no vamos a
apoyar ese navegador.

1174
00:54:27,470 --> 00:54:28,740
Y ¿qué significa no apoyar?

1175
00:54:28,740 --> 00:54:31,170
Podría significar que los botones
no funcionan en su página web,

1176
00:54:31,170 --> 00:54:33,050
o podría significar la
el formato es completamente apagado.

1177
00:54:33,050 --> 00:54:35,091
O puede que tenga que hacer
esa misma cuestión de criterio

1178
00:54:35,091 --> 00:54:39,089
en los teléfonos en estos días, en los que, las que estamos
no va a apoyar IOS 5 más.

1179
00:54:39,089 --> 00:54:40,380
Así que las personas sólo tienen que actualizar.

1180
00:54:40,380 --> 00:54:45,850
O no vamos a apoyar la magdalena
en Android OS para dispositivos Android,

1181
00:54:45,850 --> 00:54:48,629
porque como el mundo-- como el
mundo de la tecnología quiere avanzar,

1182
00:54:48,629 --> 00:54:51,170
es como que quiere arrastrar el
mundo con ella de modo que no lo hacen

1183
00:54:51,170 --> 00:54:53,295
tiene que seguir siendo
compatible hacia atrás para que

1184
00:54:53,295 --> 00:54:54,920
puede ofrecer nuevas y buenas características.

1185
00:54:54,920 --> 00:54:57,878
Este es de hecho una de las razones
por qué tantas empresas están desplegando

1186
00:54:57,878 --> 00:55:01,440
actualizaciones automáticas y tipo de forzamiento
las últimas versiones del software de nosotros.

1187
00:55:01,440 --> 00:55:04,010
E incluso empresas
como Apple va a clasificar de

1188
00:55:04,010 --> 00:55:07,280
que casi forzar u obligar
que en términos de las fuerzas del mercado

1189
00:55:07,280 --> 00:55:11,164
para comprar un nuevo teléfono, ya que sólo
no actualizará su teléfono antiguo más.

1190
00:55:11,164 --> 00:55:13,330
Por lo que se pierda en el
Los últimos y mejores características,

1191
00:55:13,330 --> 00:55:17,520
porque es costoso a ellos como una
compañía mantener mayores, podría decirse que

1192
00:55:17,520 --> 00:55:19,330
versiones inferiores de software.

1193
00:55:19,330 --> 00:55:23,660
Sin embargo, el efecto neto es que
también sufrimos esto también.

1194
00:55:23,660 --> 00:55:26,550
>> Así que vamos a echar un vistazo a sólo
un par de cosas finales aquí.

1195
00:55:26,550 --> 00:55:29,740
Vamos a golpe de extracción muy rápido algunos de
esas otras balas, si es curioso.

1196
00:55:29,740 --> 00:55:33,440
Así que si usted intentaba,
por ejemplo, la posición

1197
00:55:33,440 --> 00:55:36,420
el texto en diferentes lados de la
página, voy a hacerlo de una manera rápida,

1198
00:55:36,420 --> 00:55:38,360
pero hay diferentes
maneras de hacer esto.

1199
00:55:38,360 --> 00:55:42,610
Déjame ir adelante y eliminate--
simplificar esta de la siguiente manera.

1200
00:55:42,610 --> 00:55:45,330
Permítanme volver a mi
, párrafos simples simples.

1201
00:55:45,330 --> 00:55:47,760
Déjame volver a mi styles.css.

1202
00:55:47,760 --> 00:55:51,040
Y yo sólo voy a utilizar el simple--
el cual se puede haber visto en Google

1203
00:55:51,040 --> 00:55:54,430
o llamar desde antes les hablé
text-align derecha.

1204
00:55:54,430 --> 00:55:56,220
Y volver a cargar esta página.

1205
00:55:56,220 --> 00:55:58,470
Ahora todo parece
para ser alineado a la derecha,

1206
00:55:58,470 --> 00:56:00,770
como se puede ver en la cabeza aquí.

1207
00:56:00,770 --> 00:56:04,470
>> Podemos hacer que se vea un poco más
a modo de libro, y podemos decir "justificar"

1208
00:56:04,470 --> 00:56:05,640
y volver a cargar.

1209
00:56:05,640 --> 00:56:09,870
Ahora es agradable y cuadrado en ambos
lados, lo cual es un poco agradable.

1210
00:56:09,870 --> 00:56:12,220
Otro de los objetivos que teníamos aquí
fue el cambio de color del texto.

1211
00:56:12,220 --> 00:56:13,650
Así hemos visto que con mi texto en rojo.

1212
00:56:13,650 --> 00:56:15,630
Y ahora añadir botones para un formulario.

1213
00:56:15,630 --> 00:56:19,390
Entonces, ¿por qué no tratamos de hacer exactamente esto?

1214
00:56:19,390 --> 00:56:23,656
Pero primero déjame ir a un sitio que
la mayoría de nosotros usamos cada día-- Google.

1215
00:56:23,656 --> 00:56:25,780
Y vamos a echar un vistazo a
Google cómo funciona realmente.

1216
00:56:25,780 --> 00:56:26,821
Pero voy a hacer esto.

1217
00:56:26,821 --> 00:56:31,930
Primero déjame hacerlo en-- sí,
quiero ir a Google en primer lugar.

1218
00:56:31,930 --> 00:56:34,530
Voy a tener que ir
en Configuración de Google,

1219
00:56:34,530 --> 00:56:40,660
porque quiero desactivar
algo que se llama resultados inmediatos.

1220
00:56:40,660 --> 00:56:43,580
>> Así que usted puede haber notado en
Google days-- éstos permiten que vuelva

1221
00:56:43,580 --> 00:56:44,850
y activar esta opción.

1222
00:56:44,850 --> 00:56:47,900
Así que si me pongo a buscar
para "gatos" de este tipo,

1223
00:56:47,900 --> 00:56:50,120
cuenta de que no sólo hacer
Recibo auto-completar hasta

1224
00:56:50,120 --> 00:56:54,520
cima, de repente, la propia página
parece cambiar bastante rápidamente, así,

1225
00:56:54,520 --> 00:56:58,750
y eso es Google el uso de un lenguaje
llamada JavaScript tratando de ser útil.

1226
00:56:58,750 --> 00:57:01,540
Pero, por desgracia, que tipo
desordena de nuestra discusión

1227
00:57:01,540 --> 00:57:04,010
de lo que está sucediendo realmente
debajo de la campana aquí.

1228
00:57:04,010 --> 00:57:09,070
Así que soy sólo un poco de rapidez
desactivar los resultados instantáneos.

1229
00:57:09,070 --> 00:57:11,510
Y voy a hacer clic en Guardar.

1230
00:57:11,510 --> 00:57:13,930
Y ahora voy a abrir
que la barra de herramientas de diagnóstico que I

1231
00:57:13,930 --> 00:57:16,150
mantener la abertura debajo de la ficha Red.

1232
00:57:16,150 --> 00:57:17,720
Así que vamos a hacer esto.

1233
00:57:17,720 --> 00:57:21,960
Deje me-- whoops--
desplazarse esta un poco.

1234
00:57:21,960 --> 00:57:24,410
Y permítanme búsqueda de "gatos".

1235
00:57:24,410 --> 00:57:26,790
>> Y ahora notice-- realidad,
esta es una buena oportunidad

1236
00:57:26,790 --> 00:57:28,840
para discutir por un momento.

1237
00:57:28,840 --> 00:57:32,460
Observe el momento en que type-- detenerlo.

1238
00:57:32,460 --> 00:57:35,250
Para.

1239
00:57:35,250 --> 00:57:35,790
DE ACUERDO.

1240
00:57:35,790 --> 00:57:40,870
Observe el momento en que escribe la letra
C, ver la parte inferior de la pantalla.

1241
00:57:40,870 --> 00:57:48,600
A-T- S. Lo que hace la parte inferior
de esta pantalla, mi ficha Red,

1242
00:57:48,600 --> 00:57:53,320
sugerir que está sucediendo cada
vez que se escriba una carta?

1243
00:57:53,320 --> 00:57:57,700
Por desgracia, la rana es muy
hoy distracción o el trébol

1244
00:57:57,700 --> 00:58:00,339
o lo que sea.

1245
00:58:00,339 --> 00:58:01,880
Lo que estaba sucediendo cada vez que he escrito?

1246
00:58:01,880 --> 00:58:04,230
Y permítanme aclarar la
buffer y vuelva a escribirla.

1247
00:58:04,230 --> 00:58:06,580
tan-- gritos.

1248
00:58:06,580 --> 00:58:13,280
Cada vez que se escriba una carta, C- A- T-
por lo que una nueva fila, obviamente, sigue apareciendo.

1249
00:58:13,280 --> 00:58:16,530
¿Qué cada una de las filas representan,
en base a lo que hemos visto y discutido

1250
00:58:16,530 --> 00:58:17,339
¿hasta ahora?

1251
00:58:17,339 --> 00:58:18,130
AUDIENCIA: Una búsqueda?

1252
00:58:18,130 --> 00:58:21,770
DAVID J. MALAN: Una búsqueda o
más genéricamente, una solicitud HTTP

1253
00:58:21,770 --> 00:58:23,125
desde el navegador al servidor.

1254
00:58:23,125 --> 00:58:29,090
Bueno, ¿por qué es mi navegador haciendo un HTTP
solicitar cada vez que se escriba una carta?

1255
00:58:29,090 --> 00:58:30,502
>> AUDIENCIA: [inaudible]

1256
00:58:30,502 --> 00:58:33,210
DAVID J. MALAN: Sí, se da
Me estos resultados de auto-completado.

1257
00:58:33,210 --> 00:58:35,190
Al igual que, ¿de dónde éstos
resultados de la búsqueda vienen?

1258
00:58:35,190 --> 00:58:38,120
Bueno, cada vez que escriba una
carta, Google envía más

1259
00:58:38,120 --> 00:58:40,460
y más y más de
la palabra que estoy escribiendo.

1260
00:58:40,460 --> 00:58:41,040
¿Por qué?

1261
00:58:41,040 --> 00:58:44,540
Porque quieren darme una
mejor y mejor, mejor sugerencia,

1262
00:58:44,540 --> 00:58:48,880
una lista de sugerencias, por lo que la palabra
Estoy intentando realmente completa.

1263
00:58:48,880 --> 00:58:53,030
Así que esto quiere decir, literalmente, cada
personaje que se teclea en Google

1264
00:58:53,030 --> 00:58:56,900
está siendo enviado, en última instancia, en
mayor, pero también a veces uno

1265
00:58:56,900 --> 00:59:00,620
a la vez con el fin de poner en práctica
estas características de auto-completado cuando

1266
00:59:00,620 --> 00:59:03,000
los datos son, por supuesto, en la web.

1267
00:59:03,000 --> 00:59:08,780
>> Ahora, vamos a echar un vistazo a lo que en realidad
que sucede cuando hago clic en Búsqueda de Google.

1268
00:59:08,780 --> 00:59:10,420
Y luego vamos a aprovechar este nosotros mismos.

1269
00:59:10,420 --> 00:59:15,320
Así que si me desplazo hacia abajo ahora a la muy
primera solicitud que acaba de pasar.

1270
00:59:15,320 --> 00:59:17,130
Observe lo siguiente.

1271
00:59:17,130 --> 00:59:25,550
Fue enviado a un tiempo bastante largo URL--
https://www.google.com/search?

1272
00:59:25,550 --> 00:59:27,100
y luego un montón de cosas.

1273
00:59:27,100 --> 00:59:29,620
Veamos esto en realidad ahora
en la pestaña del navegador en sí.

1274
00:59:29,620 --> 00:59:31,310
Vamos a deshacernos de la barra de herramientas aquí.

1275
00:59:31,310 --> 00:59:33,140
Esta es la página de resultados de búsqueda.

1276
00:59:33,140 --> 00:59:34,790
Y noten que aquí está la URL.

1277
00:59:34,790 --> 00:59:37,430
Ahora, probablemente puede adivinar
lo que está pasando aquí en parte.

1278
00:59:37,430 --> 00:59:39,090
Así, en primer lugar, una definición.

1279
00:59:39,090 --> 00:59:42,570
Al parecer, esto es el destino
donde se envía el formulario.

1280
00:59:42,570 --> 00:59:44,910
Por eso, cuando he escrito en el
palabras "gatos" y pulsa Enter,

1281
00:59:44,910 --> 00:59:48,460
al parecer, Google envió
mi entrada de texto a esta URL

1282
00:59:48,460 --> 00:59:50,770
que He destacado
allí, reducir la búsqueda.

1283
00:59:50,770 --> 00:59:56,530
Resulta que, en una dirección URL, cualquier cosa que
que ocurre después de un signo de interrogación es,

1284
00:59:56,530 --> 01:00:01,270
a medida que seguimos diciendo, un par clave-valor
que se introduce en el formulario o de alguna manera

1285
01:00:01,270 --> 01:00:04,500
transmitida desde el
navegador al servidor.

1286
01:00:04,500 --> 01:00:07,180
>> Así que cada vez que el tipo de entrada
en una forma en la web

1287
01:00:07,180 --> 01:00:10,000
y se envía como hemos
estado discutiendo, a través de un encuentro,

1288
01:00:10,000 --> 01:00:12,400
uno de estos virtual
sobres, los contenidos

1289
01:00:12,400 --> 01:00:15,510
de ese envelope-- sí, mantener
conseguir rellenos físicamente

1290
01:00:15,510 --> 01:00:19,010
en el sobre en la clase
hoy en día, pero tecnológicamente

1291
01:00:19,010 --> 01:00:21,110
que es en realidad poner en la URL.

1292
01:00:21,110 --> 01:00:22,940
Así que, de hecho, que me tamizar a través de este.

1293
01:00:22,940 --> 01:00:25,010
¿Dónde se ve la entrada del usuario?

1294
01:00:25,010 --> 01:00:27,490
¿Dónde se ve algo
que yo mismo escribí aquí arriba?

1295
01:00:27,490 --> 01:00:32,100

1296
01:00:32,100 --> 01:00:33,491
Sí, por lo que "gatos".

1297
01:00:33,491 --> 01:00:33,990
¿Derecha?

1298
01:00:33,990 --> 01:00:36,380
Así que permítanme destilar este
en algo más simple.

1299
01:00:36,380 --> 01:00:39,917
Voy a eliminar todo lo relacionado
esta dirección URL que no entiendo,

1300
01:00:39,917 --> 01:00:42,250
y yo sólo voy a dejar
como esto- / search? q = gatos.

1301
01:00:42,250 --> 01:00:45,640

1302
01:00:45,640 --> 01:00:47,890
Veremos donde q
viene desde muy pronto,

1303
01:00:47,890 --> 01:00:51,220
pero que se siente al mínimo
cantidad de información que he proporcionado.

1304
01:00:51,220 --> 01:00:53,050
Y ahora voy a presionar Enter.

1305
01:00:53,050 --> 01:00:55,520
Y note que todavía funciona.

1306
01:00:55,520 --> 01:00:57,950
Todavía recibimos de vuelta un montón de gatos.

1307
01:00:57,950 --> 01:01:00,340
Así que Google es más elegante
que esta en estos días.

1308
01:01:00,340 --> 01:01:01,934
Es 2016, no de 1999.

1309
01:01:01,934 --> 01:01:04,600
Así que hay otras cosas que mi
el navegador envía al servidor.

1310
01:01:04,600 --> 01:01:07,100
Pero esto es mínimamente
todo lo que es necesario.

1311
01:01:07,100 --> 01:01:08,380
>> Entonces, ¿qué está pasando?

1312
01:01:08,380 --> 01:01:14,320
Bueno, en primer lugar quiero seguir adelante e ir
de nuevo a Cloud9 y me dejó ir por delante

1313
01:01:14,320 --> 01:01:15,620
y cerrar las pestañas antes.

1314
01:01:15,620 --> 01:01:18,230
Y voy a hacer esto en mi
poseer sólo por un momento.

1315
01:01:18,230 --> 01:01:20,730
Voy a seguir adelante
y crear nuevo archivo.

1316
01:01:20,730 --> 01:01:23,739
Y voy a guardarlo como google.html.

1317
01:01:23,739 --> 01:01:26,280
Y voy a muy quickly--
Voy a robar, en realidad,

1318
01:01:26,280 --> 01:01:28,510
Parte de este texto sólo para ahorrar tiempo.

1319
01:01:28,510 --> 01:01:30,610
Voy a pegar esto aquí.

1320
01:01:30,610 --> 01:01:33,850
Yo no me voy a molestar con
cualquier estilización este momento.

1321
01:01:33,850 --> 01:01:38,340
Vamos a llamar a esta "Mi Google."

1322
01:01:38,340 --> 01:01:41,230
Y voy a deshacerme
de todo en el cuerpo.

1323
01:01:41,230 --> 01:01:42,740
Y voy a hacer lo siguiente.

1324
01:01:42,740 --> 01:01:45,690
Permítanme Ampliar.

1325
01:01:45,690 --> 01:01:50,620
Formo acción-- y como he mencionado brevemente
antes les hablé brevemente como me whoops--

1326
01:01:50,620 --> 01:01:54,130
se mencionó anteriormente, la acción de una
la forma es la que envía los datos a.

1327
01:01:54,130 --> 01:01:56,620
Así google.com/search.

1328
01:01:56,620 --> 01:01:59,390
Y el método que desea utilizar
puede ser una de dos cosas.

1329
01:01:59,390 --> 01:02:02,870
O bien puede ser "conseguir", ya que mantenemos
discutiendo, o puede ser "post".

1330
01:02:02,870 --> 01:02:05,340
Por ahora, la frecuencia fundamental
diferencia es, si se utiliza "conseguir"

1331
01:02:05,340 --> 01:02:09,590
toda la información que la
Usuario facilite es enviado en la dirección URL.

1332
01:02:09,590 --> 01:02:13,530
>> Esto es grande para cosas como la búsqueda
motores y algunas otras aplicaciones,

1333
01:02:13,530 --> 01:02:17,080
pero en qué circunstancias
usted no desea llenar un formulario

1334
01:02:17,080 --> 01:02:21,620
y tener la información a terminar la
URL, como en la barra de direcciones del navegador?

1335
01:02:21,620 --> 01:02:25,470

1336
01:02:25,470 --> 01:02:26,605
¿Qué tipo de formas de hacer usted--

1337
01:02:26,605 --> 01:02:27,480
AUDIENCIA: [inaudible]

1338
01:02:27,480 --> 01:02:28,450
DAVID J. MALAN: Sí, como qué?

1339
01:02:28,450 --> 01:02:29,270
PÚBLICO: Las contraseñas.

1340
01:02:29,270 --> 01:02:31,936
DAVID J. MALAN: Sí, por lo que se conecte
a Facebook o algún sitio web.

1341
01:02:31,936 --> 01:02:34,395
Esa es la entrada del usuario
un formulario, un cuadro de texto,

1342
01:02:34,395 --> 01:02:37,020
pero es probable que no lo quiere
aparecer en la URL del navegador.

1343
01:02:37,020 --> 01:02:38,121
¿Por qué?

1344
01:02:38,121 --> 01:02:40,870
Es decir, tal vez hay alguna
implicaciones para la seguridad de la red,

1345
01:02:40,870 --> 01:02:44,830
pero más-- gustaría, más simplemente, si lo
su compañero de cuarto, su otro significativo,

1346
01:02:44,830 --> 01:02:47,710
sus hijos, su cónyuge se ve
a través de su historial de navegación?

1347
01:02:47,710 --> 01:02:50,762
No es su derecho contraseña
existe en el historial del navegador.

1348
01:02:50,762 --> 01:02:52,220
Que no se siente como un buen diseño.

1349
01:02:52,220 --> 01:02:54,500
O incluso más técnicamente,
supongamos que usted está tratando

1350
01:02:54,500 --> 01:02:59,180
subir una foto a Flickr
o Facebook o wherever--

1351
01:02:59,180 --> 01:03:03,010
que es la entrada del usuario, aunque
que es un poco más cómo interesting--

1352
01:03:03,010 --> 01:03:05,530
Cómo puedo cram una imagen en la barra de direcciones?

1353
01:03:05,530 --> 01:03:06,730
De alguna especie de no se puede.

1354
01:03:06,730 --> 01:03:07,396
De alguna manera se puede.

1355
01:03:07,396 --> 01:03:10,210
Pero, en serio, estoy en apuros
imaginar hacer eso.

1356
01:03:10,210 --> 01:03:13,470
Así que necesito otro método para
la posibilidad de subir fotos a un sitio web,

1357
01:03:13,470 --> 01:03:15,657
y que otro método se llama "post".

1358
01:03:15,657 --> 01:03:18,740
Pero por ahora, sólo hablaremos de
"Hágase", que es el más simple de los dos.

1359
01:03:18,740 --> 01:03:21,100
Simplemente pone toda la
la entrada del usuario en la URL.

1360
01:03:21,100 --> 01:03:22,830
>> Así que aquí está la forma que estoy creando.

1361
01:03:22,830 --> 01:03:24,070
Quiero una entrada.

1362
01:03:24,070 --> 01:03:24,820
¿Y sabes qué?

1363
01:03:24,820 --> 01:03:26,111
Voy a tomar una conjetura aquí.

1364
01:03:26,111 --> 01:03:31,600
Voy a recordar mi
entrada "q" por "consulta."

1365
01:03:31,600 --> 01:03:34,970
Y creo que esto es una de las
diseños originales, tal vez, a partir de 1999.

1366
01:03:34,970 --> 01:03:39,560
Y a continuación, el tipo de esta entrada
es sólo va a ser "texto".

1367
01:03:39,560 --> 01:03:43,040
Y luego voy a tener otra entrada
que no necesita un nombre, como veremos pronto

1368
01:03:43,040 --> 01:03:45,120
ver, el tipo de los cuales es "enviar".

1369
01:03:45,120 --> 01:03:47,070
Y esto va a
dame un botón especial.

1370
01:03:47,070 --> 01:03:48,320
Y eso es.

1371
01:03:48,320 --> 01:03:50,790
>> Así que déjame ir adelante y guardar este archivo.

1372
01:03:50,790 --> 01:03:54,910
Voy a volver a mi
navegador y vaya a google.html.

1373
01:03:54,910 --> 01:03:56,140
Entrar.

1374
01:03:56,140 --> 01:03:59,680
Y es una especie de escasa
por decir lo menos.

1375
01:03:59,680 --> 01:04:03,110
Pero déjame ir por delante
y la búsqueda de "gatos".

1376
01:04:03,110 --> 01:04:06,510
Y noto que estoy actualmente
en esta dirección URL Cloud9.

1377
01:04:06,510 --> 01:04:09,240
Pero el momento en que haga clic en este,
¿dónde se espera que voy a terminar?

1378
01:04:09,240 --> 01:04:10,160
>> AUDIENCIA: Google.

1379
01:04:10,160 --> 01:04:11,118
>> DAVID J. MALAN: Google.

1380
01:04:11,118 --> 01:04:12,740
Así que haga clic en Enviar.

1381
01:04:12,740 --> 01:04:15,200
Y, de hecho he reimplementado Google.

1382
01:04:15,200 --> 01:04:15,700
¿Derecha?

1383
01:04:15,700 --> 01:04:16,480
Es más sencillo.

1384
01:04:16,480 --> 01:04:17,120
Es más ligero.

1385
01:04:17,120 --> 01:04:20,350
Es decir, mi código es claramente mejor que
de ellos, desde el desastre en el que vimos anteriormente.

1386
01:04:20,350 --> 01:04:21,100
¿Y sabes qué?

1387
01:04:21,100 --> 01:04:22,610
Voy a darle vida a esto un poco.

1388
01:04:22,610 --> 01:04:23,860
No he mencionado esto antes.

1389
01:04:23,860 --> 01:04:27,860
Hay etiquetas como H1, para la rúbrica 1,
el título más importante de una página.

1390
01:04:27,860 --> 01:04:30,570
"Mi Google," llamaré a esto.

1391
01:04:30,570 --> 01:04:31,940
Permítanme volver a cargar.

1392
01:04:31,940 --> 01:04:33,772
Se ve un poco mejor ya.

1393
01:04:33,772 --> 01:04:34,980
Y, en realidad, ¿sabes qué?

1394
01:04:34,980 --> 01:04:36,430
Tengo ya-- mentí.

1395
01:04:36,430 --> 01:04:40,200
Le dije que no iba a labrar esto,
pero voy con el estilo de este como antes.

1396
01:04:40,200 --> 01:04:46,860
Y mi cuerpo va a ser,
digamos, el centro text-align.

1397
01:04:46,860 --> 01:04:48,800
Se ve más como Google ya.

1398
01:04:48,800 --> 01:04:51,090
>> Necesito un salto de línea, sin embargo,
para ese botón Enviar.

1399
01:04:51,090 --> 01:04:52,798
Y resulta, que
puede usar párrafos,

1400
01:04:52,798 --> 01:04:57,320
o puede simplemente decir más literalmente,
dame una línea de ruptura aquí-- la etiqueta br.

1401
01:04:57,320 --> 01:04:59,319
Y si vuelvo a cargar esto, ahora se va allí.

1402
01:04:59,319 --> 01:05:01,610
Es un poco feo, así que
podría hacer múltiples saltos de línea,

1403
01:05:01,610 --> 01:05:03,310
pero no vamos a entrar aquí demasiado codicioso.

1404
01:05:03,310 --> 01:05:06,430
Así que ahora vamos a ver si funciona para "perros."

1405
01:05:06,430 --> 01:05:08,640
Parece que funciona para perros "," también.

1406
01:05:08,640 --> 01:05:10,780
¿Cuál es la comida para llevar convincente aquí?

1407
01:05:10,780 --> 01:05:13,600
Uno-- no fue un gran salto para
introducir un poco más de las etiquetas,

1408
01:05:13,600 --> 01:05:15,370
al igual que la etiqueta de formulario en la etiqueta de entrada.

1409
01:05:15,370 --> 01:05:17,120
Pero más fundamentalmente
es decir, todo lo que estamos haciendo

1410
01:05:17,120 --> 01:05:20,610
está aprovechando nuestra comprensión
de HTTP y el hecho de

1411
01:05:20,610 --> 01:05:24,900
que las formas en última instancia alteran
lo que está en la dirección URL del navegador,

1412
01:05:24,900 --> 01:05:28,540
y así, por lo tanto, podemos
mecánicamente proporcionar información a un servidor

1413
01:05:28,540 --> 01:05:33,600
al hacer un formulario HTML y saber
que el servidor HTTP entiende,

1414
01:05:33,600 --> 01:05:36,890
Al igual que nuestro cuerpo entiende, como,
agitando la mano, el mismo protocolo,

1415
01:05:36,890 --> 01:05:40,920
y así volvamos la respuesta
que en última instancia esperamos.

1416
01:05:40,920 --> 01:05:44,050
>> Así que vamos a tratar de hacer una
Lo último que ahora con el móvil,

1417
01:05:44,050 --> 01:05:47,052
y voy a make-- Voy a añadir
este código para las diapositivas.

1418
01:05:47,052 --> 01:05:49,760
Así que si desea retocar, se
sin duda puede tomar desde allí.

1419
01:05:49,760 --> 01:05:51,551
Pero voy a ir
adelante y hacer una cosa.

1420
01:05:51,551 --> 01:05:54,120
Voy a seguir adelante y
abrir mi índice de page--

1421
01:05:54,120 --> 01:05:59,030
hola mi página como antes, que
tiene una gran cantidad de este texto imitación de América,

1422
01:05:59,030 --> 01:06:05,470
o sin sentido texto latino, y has--
parece que este en este tamaño de fuente.

1423
01:06:05,470 --> 01:06:07,850
Pero déjame seguir adelante y hacer esto.

1424
01:06:07,850 --> 01:06:09,300
Voy a entrar en Cloud9.

1425
01:06:09,300 --> 01:06:10,380
Y usted no tiene que hacer este paso.

1426
01:06:10,380 --> 01:06:11,420
Voy a hacerlo yo mismo.

1427
01:06:11,420 --> 01:06:12,890
Voy a hacer clic en Compartir.

1428
01:06:12,890 --> 01:06:15,170
Y esta es una característica
acaba de Cloud9, con lo cual

1429
01:06:15,170 --> 01:06:17,710
Puedo hacer mi entorno público.

1430
01:06:17,710 --> 01:06:20,240
>> Y sólo por el hecho de
demostración, vamos a hacer esto.

1431
01:06:20,240 --> 01:06:22,870
Voy a hacer pública mi solicitud.

1432
01:06:22,870 --> 01:06:25,230
Tenga en cuenta que me está advirtiendo, soy
Yo si quiero hacer esto,

1433
01:06:25,230 --> 01:06:28,438
porque esto va a hacer que todos
en el mundo, ya sea que estén aquí ahora

1434
01:06:28,438 --> 01:06:33,560
o ver el vídeo más tarde en el
Internet capaz de ver lo que veo.

1435
01:06:33,560 --> 01:06:34,440
Pero eso esta bien.

1436
01:06:34,440 --> 01:06:37,870
Voy a decir "Hecho".

1437
01:06:37,870 --> 01:06:42,080
Y deja que te animo, si lo hiciera
este correctly-- déjame probarlo primero.

1438
01:06:42,080 --> 01:06:45,590
Vaya por delante, si no mente--
en un navegador en su ordenador,

1439
01:06:45,590 --> 01:06:49,900
vaya a esta dirección URL, y es de esperar
verá mi texto latino.

1440
01:06:49,900 --> 01:06:52,820
Y para que quede claro, que es
No se ejecuta en mi ordenador portátil.

1441
01:06:52,820 --> 01:06:53,610
Está en la nube.

1442
01:06:53,610 --> 01:06:58,120
Está en Cloud9, literalmente, pero
He hecho pública mi espacio de trabajo

1443
01:06:58,120 --> 01:07:03,450
de manera que cualquier usuario de Internet
puede acceder a mi página de inicio América.

1444
01:07:03,450 --> 01:07:07,209
>> Ir a la misma URL en
su teléfono, si pudiera.

1445
01:07:07,209 --> 01:07:09,750
Si te costará, sin embargo,
puede simplemente mirar por encima de un hombro.

1446
01:07:09,750 --> 01:07:40,688

1447
01:07:40,688 --> 01:07:42,467
AUDIENCIA: [inaudible]

1448
01:07:42,467 --> 01:07:43,550
DAVID J. MALAN: Lo siento?

1449
01:07:43,550 --> 01:07:45,390
AUDIENCIA: [inaudible]

1450
01:07:45,390 --> 01:07:47,710
DAVID J. MALAN: Sólo palabras latinas.

1451
01:07:47,710 --> 01:07:48,210
Eso es todo.

1452
01:07:48,210 --> 01:07:49,250
Pero eso es lo que debería ver.

1453
01:07:49,250 --> 01:07:49,875
>> AUDIENCIA: Sí.

1454
01:07:49,875 --> 01:07:50,790
DAVID J. MALAN: Sí.

1455
01:07:50,790 --> 01:07:51,300
Sí.

1456
01:07:51,300 --> 01:07:51,540
DE ACUERDO.

1457
01:07:51,540 --> 01:07:53,530
Así que puedo aguantar su
teléfono por un momento?

1458
01:07:53,530 --> 01:07:57,504
Por lo tanto, es de esperar, si accede
ella, que debe ser casi ilegible.

1459
01:07:57,504 --> 01:07:59,920
Es still-- quiero decir, es
ilegibles debido a la América.

1460
01:07:59,920 --> 01:08:01,920
Pero también es ilegible
¿por qué otra razón?

1461
01:08:01,920 --> 01:08:03,775
Al igual, lo que desagrada al respecto?

1462
01:08:03,775 --> 01:08:04,650
PÚBLICO: Es pequeño.

1463
01:08:04,650 --> 01:08:06,420
DAVID J. MALAN: Es súper, súper pequeño.

1464
01:08:06,420 --> 01:08:07,920
Entonces, ¿cómo podemos solucionar este problema?

1465
01:08:07,920 --> 01:08:09,730
Es super, super pequeña
en el teléfono de Victoria

1466
01:08:09,730 --> 01:08:11,400
y, si se ha tirado
tú mismo, probablemente

1467
01:08:11,400 --> 01:08:14,660
pequeña en su teléfono, así, a menos que
tienen la configuración de accesibilidad habilitadas.

1468
01:08:14,660 --> 01:08:15,530
¿Que es eso?

1469
01:08:15,530 --> 01:08:18,497
Se podía pellizcar y
zoom, que es viable,

1470
01:08:18,497 --> 01:08:20,330
pero entonces sólo se ve
unas pocas palabras a la vez.

1471
01:08:20,330 --> 01:08:20,859
Así que espere un minuto.

1472
01:08:20,859 --> 01:08:21,720
Yo sé cómo solucionar este problema.

1473
01:08:21,720 --> 01:08:22,219
¿Derecha?

1474
01:08:22,219 --> 01:08:26,130
Podría usar CSS, y podría cambiar el
tamaño de fuente de 12 puntos a 24 puntos.

1475
01:08:26,130 --> 01:08:29,020
Pero el efecto secundario de que,
por supuesto, va a ser ahora,

1476
01:08:29,020 --> 01:08:32,630
en un sobremesa o un portátil,
Ahora el texto es dos veces más grande.

1477
01:08:32,630 --> 01:08:35,810
Y por lo que sería la clase de ser agradable
para distinguir entre los dispositivos,

1478
01:08:35,810 --> 01:08:37,840
y resulta que hay
son formas de hacer eso.

1479
01:08:37,840 --> 01:08:39,590
Hay varios
diferentes maneras, de hecho,

1480
01:08:39,590 --> 01:08:44,189
por lo que el uso de CSS y las características más elegantes
que no vamos a entrar en gran detalle,

1481
01:08:44,189 --> 01:08:46,960
se puede consultar en esencia
el navegador y decir,

1482
01:08:46,960 --> 01:08:51,550
Si la pantalla es más pequeña que esta
muchos píxeles, utilizan esta fuente.

1483
01:08:51,550 --> 01:08:55,180
Si la pantalla es más grande que esto
muchos píxeles, utilizan esta otra fuente.

1484
01:08:55,180 --> 01:08:57,080
>> Puede ser incluso aún más elegante.

1485
01:08:57,080 --> 01:09:00,140
Si alguna vez has estado en una
página web que, en un escritorio,

1486
01:09:00,140 --> 01:09:04,404
tiene un gran menú tal vez fuera a la
lado, y luego todo el contenido

1487
01:09:04,404 --> 01:09:07,029
es el lado de que menú--
que es una especie de un paradigma común.

1488
01:09:07,029 --> 01:09:09,670
Menú a la izquierda, el contenido
a la derecha, o viceversa.

1489
01:09:09,670 --> 01:09:13,569
En realidad no trabajar en el móvil cuando su
pantalla es sólo esta cantidad de píxeles de ancho.

1490
01:09:13,569 --> 01:09:16,233
Así que más común en el móvil es,
su menú de repente obtendrá

1491
01:09:16,233 --> 01:09:18,399
colapsado, y hay que
haga clic en un botón para verlo,

1492
01:09:18,399 --> 01:09:22,404
o el sitio web pondrá el menú
por encima de ella y poner el contenido debajo de ella.

1493
01:09:22,404 --> 01:09:24,779
Y se puede poner en práctica estos
cosas en múltiples formas.

1494
01:09:24,779 --> 01:09:28,340
Usted puede pedir a sus programadores,
Ey, equipo, en cualquier momento

1495
01:09:28,340 --> 01:09:34,450
ves una solicitud HTTP desde un Android
dispositivo, un dispositivo de Microsoft, un Google

1496
01:09:34,450 --> 01:09:39,930
dispositivo, un dispositivo de Apple, utilice esta
tamaño de la fuente y el uso de este diseño del menú,

1497
01:09:39,930 --> 01:09:42,670
o bien utilizar el diseño de este defecto más grande.

1498
01:09:42,670 --> 01:09:45,410
>> Ahora, con lo
técnica fundamental hoy

1499
01:09:45,410 --> 01:09:48,529
podrían utilizar los ingenieros
saber si se trata de

1500
01:09:48,529 --> 01:09:53,660
un iPhone, un teléfono con Android, un ordenador portátil,
un escritorio visitar el servidor de la empresa?

1501
01:09:53,660 --> 01:09:55,310
En el que no consiguen que la información?

1502
01:09:55,310 --> 01:09:56,080
>> AUDIENCIA: Cabecera?

1503
01:09:56,080 --> 01:09:57,740
>> DAVID J. MALAN: Sí, la cabecera HTTP.

1504
01:09:57,740 --> 01:10:01,714
Así que cada petición HTTP procedente de
sus clientes a sus servidores

1505
01:10:01,714 --> 01:10:03,880
incluir, dentro de esa virtuales
sobre, en su conjunto manojo

1506
01:10:03,880 --> 01:10:08,260
de cabeceras HTTP, uno de los cuales es
el navegador y el sistema operativo

1507
01:10:08,260 --> 01:10:10,290
incluso, si es que quiere
ese nivel de detalle.

1508
01:10:10,290 --> 01:10:13,790
Ahora, es una cadena de aspecto críptico, pero
existe un software que acaba de

1509
01:10:13,790 --> 01:10:18,530
simplificar eso, y sólo se puede pedir
en la programación code-- PHP, Java, C ++,

1510
01:10:18,530 --> 01:10:23,650
whatever-- qué teléfono es esto-
qué dispositivo es el uso de este usuario?

1511
01:10:23,650 --> 01:10:27,501
Y entonces se puede decir, mostrar que esta
versión de la página web si se trata de un teléfono.

1512
01:10:27,501 --> 01:10:30,250
Mostrarles esta versión de la
página web si se trata de un ordenador portátil o de sobremesa.

1513
01:10:30,250 --> 01:10:32,316
Pero usted ni siquiera necesita
la complejidad del lado del servidor.

1514
01:10:32,316 --> 01:10:33,940
Usted puede hacer incluso el más simple de las cosas.

1515
01:10:33,940 --> 01:10:34,815
>> Voy a hacer esto.

1516
01:10:34,815 --> 01:10:38,995
Voy a seguir adelante en
Cloud9 mi entorno,

1517
01:10:38,995 --> 01:10:41,370
y voy a añadir una etiqueta
que vio en Google antes.

1518
01:10:41,370 --> 01:10:42,770
Se llama la metaetiqueta.

1519
01:10:42,770 --> 01:10:45,520
Y nunca me acuerdo de éste, por lo
Voy a transcribir aquí.

1520
01:10:45,520 --> 01:10:50,552
meta name = "viewport" y luego
content = "width = anchura del dispositivo, intital

1521
01:10:50,552 --> 01:11:02,060
escala = 1 "y eso es todo.

1522
01:11:02,060 --> 01:11:06,230
>> Por lo que bien podría ser
como un encantamiento mágico.

1523
01:11:06,230 --> 01:11:11,300
No es del todo clara, pero esto no tiene
algo que ver con el visor,

1524
01:11:11,300 --> 01:11:15,070
y la vista es sólo el cuerpo de una
página web, la región rectangular que

1525
01:11:15,070 --> 01:11:16,690
define la mayor parte de la página.

1526
01:11:16,690 --> 01:11:19,060
Y esto es sólo diciendo
el navegador, ¿sabes qué?

1527
01:11:19,060 --> 01:11:22,589
Hacer que el ancho de esta página
efectivamente igual a la anchura del dispositivo.

1528
01:11:22,589 --> 01:11:25,380
En otras palabras, no asuma que se
Tiene una especie de espacio ilimitado.

1529
01:11:25,380 --> 01:11:29,920
Suponga que sólo tiene tanto
espacio que el dispositivo en sí es grande.

1530
01:11:29,920 --> 01:11:34,454
Y por lo que ahora, si vuelvo a cargar esta
en mi navegador, no veo ningún cambio.

1531
01:11:34,454 --> 01:11:37,370
Pero si hiciera esto y correctly--
déjame cruzar mi fingers-- si todo lo que

1532
01:11:37,370 --> 01:11:42,920
recargar sus teléfonos, ¿verdad
ver un cambio de peso?

1533
01:11:42,920 --> 01:11:43,620
Sí, es que--

1534
01:11:43,620 --> 01:11:45,067
>> AUDIENCIA: [inaudible]

1535
01:11:45,067 --> 01:11:45,900
DAVID J. MALAN: Sí.

1536
01:11:45,900 --> 01:11:46,400
DE ACUERDO.

1537
01:11:46,400 --> 01:11:47,850
Así que sin duda más fácil de leer ahora?

1538
01:11:47,850 --> 01:11:53,070
Aún pequeño, para ser justos, pero no
tan pequeña como para ser inmanejable.

1539
01:11:53,070 --> 01:11:56,920
Y no me resultaba difícil reemplazar este
aún más con CSS o en el lado del servidor,

1540
01:11:56,920 --> 01:12:00,120
pero cada vez más lo que eres
ver para más y más características

1541
01:12:00,120 --> 01:12:02,900
se añade a
environments-- del lado del cliente

1542
01:12:02,900 --> 01:12:06,530
JavaScript, como veremos
mañana, CSS, y por lo HTML--

1543
01:12:06,530 --> 01:12:09,190
que todas estas consultas
se puede hacer en el cliente

1544
01:12:09,190 --> 01:12:11,910
de manera que se molesta al
servidor mucho menos y no

1545
01:12:11,910 --> 01:12:14,530
a tener que seguir el ritmo, para
ejemplo, el ataque constante

1546
01:12:14,530 --> 01:12:17,210
de nuevo del sistema operativo
versiones, nuevas versiones de navegadores.

1547
01:12:17,210 --> 01:12:20,190
Puede dejar que el navegador
preguntar al dispositivo, lo grande que eres,

1548
01:12:20,190 --> 01:12:22,890
y luego hacer algo lógicos
decisiones en base a eso.

1549
01:12:22,890 --> 01:12:25,140
Pero veremos más oportunidades
para decisiones lógicas

1550
01:12:25,140 --> 01:12:27,223
mañana en el contexto
de un lenguaje de programación.

1551
01:12:27,223 --> 01:12:29,800

1552
01:12:29,800 --> 01:12:32,760
>> Por lo tanto, cualquier pregunta, entonces,
en el desarrollo web?

1553
01:12:32,760 --> 01:12:36,130
Hoy en día no es la programación web, por
en sí, ya que la mayoría todo lo que hicimos

1554
01:12:36,130 --> 01:12:38,370
era muy estético, si se quiere.

1555
01:12:38,370 --> 01:12:41,750
No hay en la toma de decisiones
el código que hemos escrito,

1556
01:12:41,750 --> 01:12:44,990
y por eso es que el HTML es un margen de beneficio
idioma, no es un lenguaje de programación.

1557
01:12:44,990 --> 01:12:47,140
Pero mañana vamos a tomar
una mirada rápida, en última instancia,

1558
01:12:47,140 --> 01:12:49,340
en JavaScript, que es
una programación real

1559
01:12:49,340 --> 01:12:54,220
el lenguaje que nos permite hacer un poco más.

1560
01:12:54,220 --> 01:12:56,800
>> ¿Alguna pregunta?

1561
01:12:56,800 --> 01:13:00,480
Bueno, permítanme proponer dos
oportunidades opcionales para hacer la tarea.

1562
01:13:00,480 --> 01:13:02,900
Una es-- estos Cloud9
cuentas no expirará.

1563
01:13:02,900 --> 01:13:04,669
Le invitamos a utilizar
a jugar con.

1564
01:13:04,669 --> 01:13:05,960
Es el nivel de servicio gratis.

1565
01:13:05,960 --> 01:13:08,754
Darse cuenta de que, si al crear
su espacio de trabajo, se hizo pública,

1566
01:13:08,754 --> 01:13:11,670
eso significa que cualquier persona en el
Internet puede ver lo que estás escribiendo.

1567
01:13:11,670 --> 01:13:15,104
Así que tal vez sólo tener en cuenta
No avergonzarse

1568
01:13:15,104 --> 01:13:18,020
si usted está poniendo su primera banda
página públicamente por ahí por accidente,

1569
01:13:18,020 --> 01:13:20,134
pero nadie va a
saber para buscar allí de todos modos.

1570
01:13:20,134 --> 01:13:23,760
>> Y dos-- dejarme lanzo
esta URL, asi,

1571
01:13:23,760 --> 01:13:28,250
especialmente si usted entró hoy una
poco menos cómodos que otros,

1572
01:13:28,250 --> 01:13:30,430
sin saber qué significa todo esto.

1573
01:13:30,430 --> 01:13:36,780
Darse cuenta de que mucho más de este video,
el cual es a la vez una buena manera de conciliar el sueño

1574
01:13:36,780 --> 01:13:39,380
y también para reírse mientras
Al hacerlo, también tiene

1575
01:13:39,380 --> 01:13:44,300
una gran cantidad de interesantes socialmente
y discusiones relevantes para la seguridad

1576
01:13:44,300 --> 01:13:47,370
en ella de John Oliver,
aunque un comediante.

1577
01:13:47,370 --> 01:13:55,456
>> Pero si no hay más preguntas,
Esto nos lleva a la recepción.

1578
01:13:55,456 --> 01:13:56,830
Entonces, ¿por qué no me enciendo la música.

1579
01:13:56,830 --> 01:13:58,610
No debe haber bebidas
y aperitivos fuera.

1580
01:13:58,610 --> 01:14:00,220
Estoy feliz de mezclarse durante el
siempre y cuando la gente le gustaría,

1581
01:14:00,220 --> 01:14:01,600
responder a las preguntas más de uno-a-uno.

1582
01:14:01,600 --> 01:14:03,330
Pero, por lo demás, de nada
para despegar en cualquier momento,

1583
01:14:03,330 --> 01:14:05,740
y nos veremos de nuevo
mañana por la mañana por un poco más.

1584
01:14:05,740 --> 01:14:07,290
Muy bien, gracias.

1585
01:14:07,290 --> 01:14:10,428