1
00:00:00,000 --> 00:00:10,570
[MÚSICA DE FONDO]

2
00:00:10,570 --> 00:00:13,030
DAVID MALAN: Muy bien,
esto es CS50 y vamos a iniciar

3
00:00:13,030 --> 00:00:16,030
la lección 6
y como recordarán, hoy

4
00:00:16,030 --> 00:00:19,340
comenzaremos la transición
de este mundo de bajo nivel en C

5
00:00:19,340 --> 00:00:22,180
y la programación de línea de comandos
hacia un área que seguramente

6
00:00:22,180 --> 00:00:24,190
les será un poco más
conocida, el de la web, al igual que

7
00:00:24,190 --> 00:00:27,610
todas las ideas que exploramos
hasta ahora como funciones, bucles,

8
00:00:27,610 --> 00:00:31,250
condiciones y otras más,
que seguirán siendo relevantes.

9
00:00:31,250 --> 00:00:34,420
Solo que utilizaremos una sintaxis
ligeramente diferente y la interfaz

10
00:00:34,420 --> 00:00:37,750
de usuario o UI será
nuestro navegador, en vez

11
00:00:37,750 --> 00:00:41,920
de la ventana de terminal en blanco
y negro con una sola línea de texto,

12
00:00:41,920 --> 00:00:43,000
pero, ¿cómo llegamos aquí?

13
00:00:43,000 --> 00:00:45,130
Bueno, recordemos que
hace poco vimos las estructuras

14
00:00:45,130 --> 00:00:48,040
y que lo bueno de las estructuras
en C, era que teníamos la habilidad

15
00:00:48,040 --> 00:00:51,760
para personalizar
nuestros datos y agrupar juntos

16
00:00:51,760 --> 00:00:54,370
los datos relacionados,
lo cual se volvió bastante poderoso

17
00:00:54,370 --> 00:00:58,330
cuando llegó la hora de que foresics
manipulara los archivos de mapa de bits

18
00:00:58,330 --> 00:01:01,870
o los JPEG, y aunque esta
estructura es mucho más complicada

19
00:01:01,870 --> 00:01:04,269
que la de los
estudiantes, a fin de cuentas

20
00:01:04,269 --> 00:01:07,780
solo son datos individuales que,
de algún modo, se relacionan entre sí

21
00:01:07,780 --> 00:01:10,900
y al ponerlos en una estructura
podemos manipularlos libremente,

22
00:01:10,900 --> 00:01:15,400
así como copiarlos o guardarlos
todos juntos como también hicimos.

23
00:01:15,400 --> 00:01:19,052
Pero hace poco, presentamos
una estructura un poco más elegante,

24
00:01:19,052 --> 00:01:20,260
que en esencia es la misma idea.

25
00:01:20,260 --> 00:01:22,330
Tiene una o más cosas adentro,

26
00:01:22,330 --> 00:01:24,820
pero una de las
cosas más poderosas

27
00:01:24,820 --> 00:01:29,240
tenía esta estrella o asterisco, el cual
nos dio un puntero o una ubicación,

28
00:01:29,240 --> 00:01:32,650
pero lo que fue tan poderoso
acerca de esta idea y de este símbolo

29
00:01:32,650 --> 00:01:36,670
aparentemente simples, es que 
podemos hilar juntos en la memoria

30
00:01:36,670 --> 00:01:38,387
de nuestra computadora cualquier
tipo de estructuras que queramos.

31
00:01:38,387 --> 00:01:39,970
No tienen que ser solo una entidad,

32
00:01:39,970 --> 00:01:42,310
de alguna manera pueden
vincularse con otras, y nosotros

33
00:01:42,310 --> 00:01:47,410
también podemos mantener unidas
estas estructuras, lo cual, desde luego,

34
00:01:47,410 --> 00:01:50,620
fue una mejora simple en los inicios
de nuestras estructuras de datos,

35
00:01:50,620 --> 00:01:53,080
un arreglo o una
lista, pero tan pronto

36
00:01:53,080 --> 00:01:56,290
como tenemos punteros
comenzamos a conectar las cosas

37
00:01:56,290 --> 00:02:00,040
hasta que obtenemos algo como
esto y ahora con la implementación

38
00:02:00,040 --> 00:02:03,900
del diccionario podríamos explorar
una lista vinculada, una tabla hash,

39
00:02:03,900 --> 00:02:06,790
o intentarlo con algunas
variaciones de por medio.

40
00:02:06,790 --> 00:02:10,539
Por último, teníamos
una imagen, que representaba

41
00:02:10,539 --> 00:02:14,260
la memoria de nuestra computadora,
vista desde un modo más descriptivo

42
00:02:14,260 --> 00:02:17,230
y esto solo es relevante siempre
que nuestra computadora utilice

43
00:02:17,230 --> 00:02:19,390
de manera diferente,
los distintos fragmentos de la memoria.

44
00:02:19,390 --> 00:02:21,970
Todas nuestras llamadas a las
funciones al final utilizan el stack.

45
00:02:21,970 --> 00:02:24,070
Todos los usuarios
de malloc y sus primos

46
00:02:24,070 --> 00:02:27,640
al final utilizan el heap y luego,
por supuesto, esto de aquí arriba

47
00:02:27,640 --> 00:02:31,840
y ¿cuál fue el segmento de texto
en el que no hicimos mucho énfasis?

48
00:02:31,840 --> 00:02:35,340
¿De qué se trata
el segmento de texto?

49
00:02:35,340 --> 00:02:38,460
Texto, eres un voluntario.

50
00:02:38,460 --> 00:02:40,788
Sí, ¿de qué trata
el segmento de texto?

51
00:02:40,788 --> 00:02:42,030
PÚBLICO: ¿son
 archivos de datos?

52
00:02:42,030 --> 00:02:43,100
DAVID: Son archivos de datos, sí.

53
00:02:43,100 --> 00:02:45,820
Específicamente, los ceros
y los unos que conforman el programa.

54
00:02:45,820 --> 00:02:49,890
Cuando compilamos un código
fuente, como en hello.c, con ceros y unos,

55
00:02:49,890 --> 00:02:53,190
estos, al final, se almacenan
en este lugar de la memoria

56
00:02:53,190 --> 00:02:54,630
mientras el programa se ejecuta,

57
00:02:54,630 --> 00:02:57,870
a largo plazo se almacenarán en el disco
o en el disco duro, o lo que haya dentro

58
00:02:57,870 --> 00:03:01,440
de la computadora o el servidor, para
preservar los archivos incluso cuando

59
00:03:01,440 --> 00:03:03,564
se estos se apagan
o nos alejamos del teclado,

60
00:03:03,564 --> 00:03:06,480
pero en cuanto hagamos doble clic
en un programa, la Mac o la PC,

61
00:03:06,480 --> 00:03:09,570
ejecutemos ./ hello
o algún comando como ese,

62
00:03:09,570 --> 00:03:12,720
esos mismos ceros y unos
se cargan en el RAM de la computadora,

63
00:03:12,720 --> 00:03:16,710
la imagen que mostramos y ahí es
donde viven mientras están en uso

64
00:03:16,710 --> 00:03:19,440
por nuestra Mac, PC
o el servidor que usemos,

65
00:03:19,440 --> 00:03:23,790
pero hasta ahora, hemos ejecutado
todos estos programas con algo como

66
00:03:23,790 --> 00:03:27,360
./ hello o algún comando similar
y los ejecutamos en la tan conocida

67
00:03:27,360 --> 00:03:28,590
ventana de terminal.

68
00:03:28,590 --> 00:03:31,200
Pero sin duda,
estamos más familiarizados

69
00:03:31,200 --> 00:03:33,510
con las aplicaciones gráficas
de nuestros teléfonos modernos

70
00:03:33,510 --> 00:03:36,030
y cada vez que visitamos
un navegador web en el teléfono,

71
00:03:36,030 --> 00:03:40,080
la computadora de escritorio o la laptop,
seguimos interactuando con un programa,

72
00:03:40,080 --> 00:03:43,800
lo que sucede es que el programa
no solo se ejecuta en nuestra Mac o PC.

73
00:03:43,800 --> 00:03:47,397
Nuestro navegador es como
Chrome, Edge, Firefox, Safari

74
00:03:47,397 --> 00:03:48,480
o el que sea que utilicemos.

75
00:03:48,480 --> 00:03:50,700
Eso se ejecuta en
nuestra Mac o PC, pero

76
00:03:50,700 --> 00:03:53,700
nos comunicamos con
un programa que está en otro lugar,

77
00:03:53,700 --> 00:03:56,805
en alguna otra parte del Internet
y esos programas se llaman servidores web.

78
00:03:56,805 --> 00:04:01,080
Un servidor web es una parte del software,
que alguna persona o personas escribieron

79
00:04:01,080 --> 00:04:03,540
y su propósito en la vida
es soportar las páginas web.

80
00:04:03,540 --> 00:04:05,910
Cuando solicitamos
la página de inicio de Facebook,

81
00:04:05,910 --> 00:04:08,190
hay un servidor allí,
un programa que alguien escribió

82
00:04:08,190 --> 00:04:13,350
y que básicamente genera los ceros y unos
que conforman la página de Facebook,

83
00:04:13,350 --> 00:04:18,014
aunque esos ceros
y unos no se escriben así

84
00:04:18,014 --> 00:04:18,930
por los ingenieros de Facebook.

85
00:04:18,930 --> 00:04:21,638
En realidad su escritura
es más parecida a la del inglés,

86
00:04:21,638 --> 00:04:24,450
un poco más familiar y ni siquiera
es un código de programación como tal.

87
00:04:24,450 --> 00:04:28,902
Es lo que se llama lenguaje de marcado,
de eso y más hablaremos más adelante.

88
00:04:28,902 --> 00:04:31,110
Ya pasamos de compilar
nuestro código y ejecutarlo

89
00:04:31,110 --> 00:04:34,060
en algo como esto, a hacerlo
en un entorno basado en la web,

90
00:04:34,060 --> 00:04:38,180
pero cuando ejecutamos nuestros
programas en el IDE de CS50 aquí bajo,

91
00:04:38,180 --> 00:04:40,770
en realidad usamos
otra pieza del software

92
00:04:40,770 --> 00:04:43,590
que llena la pantalla, el IDE
de CS50 también conocido como

93
00:04:43,590 --> 00:04:48,249
Cloud9, un programa que básicamente
se ejecuta en algún lugar de la nube.

94
00:04:48,249 --> 00:04:50,790
Haremos esta distinción
y a través de ejemplos

95
00:04:50,790 --> 00:04:54,360
la distinción entre estos
diferentes tipos de software

96
00:04:54,360 --> 00:04:57,930
comenzará a tener sentido, pero
¿dónde se ejecuta algo como el IDE de CS50?

97
00:04:57,930 --> 00:04:59,370
¿Dónde se ejecuta Facebook. com?

98
00:04:59,370 --> 00:05:00,830
¿Dónde se ejecuta Google.com?

99
00:05:00,830 --> 00:05:05,370
Bueno, en 1998
Google.com se ejecutaba en esto.

100
00:05:05,370 --> 00:05:09,510
Larry y Sergey fueron los creadores
de la primera implementación de Google

101
00:05:09,510 --> 00:05:12,490
y al parecer, de su primer
estante de servidores.

102
00:05:12,490 --> 00:05:16,380
Los servidores por lo general
se almacenan en un estante como este,

103
00:05:16,380 --> 00:05:18,690
por convención miden
19 pulgadas de ancho

104
00:05:18,690 --> 00:05:21,690
y sirve para apilar las computadoras
una sobre otra, sobre otra, sobre otra,

105
00:05:21,690 --> 00:05:24,330
pero las cosas en Google eran muy
rudimentarias en ese entonces

106
00:05:24,330 --> 00:05:26,220
y ni siquiera había
cajas de plástico o metal

107
00:05:26,220 --> 00:05:28,740
alrededor de muchas
de sus computadoras.

108
00:05:28,740 --> 00:05:31,920
Al parecer, trataban de minimizar
el enfriamiento, los costos y de amontonar

109
00:05:31,920 --> 00:05:35,659
tanto hardware en ese
espacio como pudieron,

110
00:05:35,659 --> 00:05:37,950
por lo que vemos
muchos cables y hardware

111
00:05:37,950 --> 00:05:41,280
que sobresalen y esto ahora
está en una exhibición en el oeste.

112
00:05:41,280 --> 00:05:44,160
Por supuesto, mejoraron rápidamente,
en solo una década o dos y este

113
00:05:44,160 --> 00:05:48,000
es uno de los centros de datos
de Facebook, que opera bajo la misma idea,

114
00:05:48,000 --> 00:05:50,910
pero con servidores más elegantes,
más bonitos y mucho mejor iluminados,

115
00:05:50,910 --> 00:05:53,580
pero que al final del día,
desempeñan exactamente el mismo papel.

116
00:05:53,580 --> 00:05:56,190
Hay multitud de servidores
en todo el mundo que solo están

117
00:05:56,190 --> 00:05:58,470
sentados allí, esperando
por nosotros en el Internet

118
00:05:58,470 --> 00:06:01,350
para que solicitemos una página
de inicio, un correo electrónico,

119
00:06:01,350 --> 00:06:04,260
o cualquier otro tipo
de información, para termine

120
00:06:04,260 --> 00:06:05,910
enviándose desde
el servidor al cliente.

121
00:06:05,910 --> 00:06:10,410
Si alguna vez pensamos
en las palabras, servidor y clientes,

122
00:06:10,410 --> 00:06:12,300
la cual tal vez sea
la menos utilizada de las dos,

123
00:06:12,300 --> 00:06:15,030
pero la relación servidor-cliente,
es como cuando vamos a un restaurante

124
00:06:15,030 --> 00:06:17,363
y le pedimos al mesero
o a la mesera algo de comer,

125
00:06:17,363 --> 00:06:19,890
él o ella nos trae algo
de vuelta y por lo tanto nos sirve,

126
00:06:19,890 --> 00:06:23,610
la relación entre el cliente
y la web es más o menos lo mismo.

127
00:06:23,610 --> 00:06:24,630
Nosotros somos los clientes,

128
00:06:24,630 --> 00:06:26,850
nuestros navegadores
son los clientes y allá afuera

129
00:06:26,850 --> 00:06:31,530
existen servidores como estos,
que ofrecen contenido e información,

130
00:06:31,530 --> 00:06:32,580
como Facebook.

131
00:06:32,580 --> 00:06:35,070
Consideremos el modo en que
todos estos datos llegan a nosotros,

132
00:06:35,070 --> 00:06:39,030
actualmente, si deseamos visitar
Facebook.com en nuestra laptop,

133
00:06:39,030 --> 00:06:42,570
computadora de escritorio o teléfono
sin usar la aplicación, seguramente solo

134
00:06:42,570 --> 00:06:45,210
escribiremos
Facebook.com y presionaremos Enter.

135
00:06:45,210 --> 00:06:47,920
Si somos un mayores
o literalmente viejos,

136
00:06:47,920 --> 00:06:52,230
puede que escribamos
todo así www.Facebook.com.

137
00:06:52,230 --> 00:06:56,700
Ambas funcionan y existen razones
técnicas relacionadas con el tema

138
00:06:56,700 --> 00:06:58,950
del que hablamos hoy,
pero ambos funcionan

139
00:06:58,950 --> 00:07:00,825
porque Facebook
configuró su sitio web

140
00:07:00,825 --> 00:07:02,730
para que funcionara con
cualquiera de esas direcciones.

141
00:07:02,730 --> 00:07:09,126
Como un tema aparte, ¿por qué hay
tantos sitios web con el prefijo "www"

142
00:07:09,126 --> 00:07:11,040
si ambos funcionan?

143
00:07:11,040 --> 00:07:13,930


144
00:07:13,930 --> 00:07:15,090
¿por qué tenemos ambos?

145
00:07:15,090 --> 00:07:17,700
Parece redundante el escribir "www"

146
00:07:17,700 --> 00:07:21,690
si está implícito en Facebook.com.

147
00:07:21,690 --> 00:07:22,764
Sí, ¿qué piensas?

148
00:07:22,764 --> 00:07:24,719
PÚBLICO: ¿Qué el
"www" es necesario?

149
00:07:24,719 --> 00:07:26,010
DAVID: ¿Qué es necesario?

150
00:07:26,010 --> 00:07:27,690
No, no es necesario.

151
00:07:27,690 --> 00:07:29,100
No se necesita.

152
00:07:29,100 --> 00:07:29,600
¿Sí?

153
00:07:29,600 --> 00:07:31,680
PÚBLICO: ¿Es para identificar
que es parte de la World Wide Web?

154
00:07:31,680 --> 00:07:32,215
DAVID: Bueno, sí.

155
00:07:32,215 --> 00:07:34,175
Es para identificar que es
parte de la World Wide Web

156
00:07:34,175 --> 00:07:36,410
y nadie dice la World
Wide Web en estos días,

157
00:07:36,410 --> 00:07:40,440
solo decimos la web, pero de vuelta
a los tiempos y en mis tiempos,

158
00:07:40,440 --> 00:07:42,450
para muchas
personas no era obvio

159
00:07:42,450 --> 00:07:48,900
lo que Facebook.com
significaría, pese al hecho

160
00:07:48,900 --> 00:07:51,480
de que antes no existía.

161
00:07:51,480 --> 00:07:54,090
Y ahora había esta
señal para el mundo

162
00:07:54,090 --> 00:07:57,660
por la cual, empezaron los nombres
de dominio con el prefijo "www"

163
00:07:57,660 --> 00:08:00,240
para dejarle muy claro
a los usuarios, ¡oh, este es un sitio web!

164
00:08:00,240 --> 00:08:02,672
Esta es una de esas
cosas del Internet o algo así

165
00:08:02,672 --> 00:08:04,380
y en aquel
entonces también hubo

166
00:08:04,380 --> 00:08:07,180
diferentes servicios que
actualmente cayeron en desuso,

167
00:08:07,180 --> 00:08:10,020
como el FTP que era bastante
popular y Gopher lo usamos

168
00:08:10,020 --> 00:08:12,030
cuando estudié aquí
y otras cosas similares.

169
00:08:12,030 --> 00:08:15,390
De modo que, el "www" era un prefijo
absurdo, que solo decía lo que es

170
00:08:15,390 --> 00:08:20,760
pero ahora, nosotros los humanos
sabemos que son el .com, .net y .edu,

171
00:08:20,760 --> 00:08:24,400
pero esto está cambiando
de nuevo, porque hay docenas,

172
00:08:24,400 --> 00:08:26,700
de cientos de dominios de nivel superior.

173
00:08:26,700 --> 00:08:29,690
Ya no es solo .com
y .edu ahora hay otros.

174
00:08:29,690 --> 00:08:31,980
Me refiero a que, hay cientos
de estas cosas allá afuera

175
00:08:31,980 --> 00:08:34,490
que incluso, podrían no ser
tan evidentes hasta el día de hoy.

176
00:08:34,490 --> 00:08:39,713
Por lo tanto, algunas personas,
hacen todo el camino y escriben http: //

177
00:08:39,713 --> 00:08:43,230
y luego la dirección
que quieren visitar,

178
00:08:43,230 --> 00:08:46,470
pero la mayoría de nosotros no lo hacemos,
porque nuestros navegadores nos ayudan

179
00:08:46,470 --> 00:08:49,300
y le ponen prefijo a eso y allí
es donde nos enfocaremos hoy.

180
00:08:49,300 --> 00:08:52,830
Esto es importante,
porque se especifica

181
00:08:52,830 --> 00:08:57,780
qué protocolo o lenguaje,
qué convenciones debe seguir

182
00:08:57,780 --> 00:09:01,410
nuestra laptop cuando se comunica
con la dirección de ese servidor

183
00:09:01,410 --> 00:09:03,866
y de hecho, si queremos
que las comunicaciones sean seguras,

184
00:09:03,866 --> 00:09:06,240
el punto es, si nosotros lo escribimos
o el navegador lo hace por nosotros,

185
00:09:06,240 --> 00:09:11,640
agrega una s allí, que denota seguro
o encriptado a la Caesar y Vigenere

186
00:09:11,640 --> 00:09:14,350
que vimos hace algunas semanas
y técnicamente es probable que nuestro

187
00:09:14,350 --> 00:09:17,460
navegador agregue
una barra inclinada / aún

188
00:09:17,460 --> 00:09:21,600
si no nos la muestra, pero indica
que queremos ir a la raíz del servidor,

189
00:09:21,600 --> 00:09:23,761
la página de inicio
predeterminada, entre otras cosas.

190
00:09:23,761 --> 00:09:25,510
En efecto, tal vez queramos algo más,

191
00:09:25,510 --> 00:09:28,730
no solo el sitio web de Facebook,
también queremos la página de Mark,

192
00:09:28,730 --> 00:09:32,860
y en específico escribiríamos /zuck
o cualquiera que sea el nombre de usuario.

193
00:09:32,860 --> 00:09:35,730
Esta es una manera
muy larga de decirlo,

194
00:09:35,730 --> 00:09:39,480
pero escribimos
o autocompletamos y damos por hecho

195
00:09:39,480 --> 00:09:42,810
que esto tiene muchos
significados y todos ellos

196
00:09:42,810 --> 00:09:44,970
hacen posible a toda la web.

197
00:09:44,970 --> 00:09:49,210
Pero ¿qué sucede con
el http y qué es lo que significa?

198
00:09:49,210 --> 00:09:51,600
El http es un protocolo,

199
00:09:51,600 --> 00:09:54,180
es un conjunto de
convenciones, que dictan cómo un cliente

200
00:09:54,180 --> 00:09:58,870
de computadora, el navegador
en la Mac o PC, habla con un servidor web,

201
00:09:58,870 --> 00:10:01,857
y es un protocolo, en el sentido
de que no es un lenguaje como tal.

202
00:10:01,857 --> 00:10:03,690
Es un conjunto de
convenciones y por lo tanto,

203
00:10:03,690 --> 00:10:06,780
es una especie de costumbre
humana absurda e incómoda.

204
00:10:06,780 --> 00:10:08,290
Hola, soy David

205
00:10:08,290 --> 00:10:09,082
PÚBLICO: Yo soy Kara.

206
00:10:09,082 --> 00:10:11,665
DAVID: Kara, Kara
y yo nos presentamos,

207
00:10:11,665 --> 00:10:14,040
extendí mi mano y ella
como que sabía instintivamente

208
00:10:14,040 --> 00:10:17,910
que sería incómodo
no estrecharme la mano o sacudirla

209
00:10:17,910 --> 00:10:20,670
e intercambiamos 
cumplidos y nos saludamos.

210
00:10:20,670 --> 00:10:22,770
Esta es una especie
de convención humana tonta

211
00:10:22,770 --> 00:10:25,260
porque socialmente,
hemos acordado de antemano

212
00:10:25,260 --> 00:10:27,270
cómo saludarnos de esa manera.

213
00:10:27,270 --> 00:10:30,720
El http es más o menos
lo mismo, pero en este caso

214
00:10:30,720 --> 00:10:33,180
no hacemos algo físicamente,

215
00:10:33,180 --> 00:10:36,120
enviamos un mensaje
del cliente al servidor,

216
00:10:36,120 --> 00:10:39,960
ponemos una especie de nota
manuscrita en un sobre como este,

217
00:10:39,960 --> 00:10:43,470
la direccionamos de alguna manera
y se la enviamos a Kara con el Internet

218
00:10:43,470 --> 00:10:46,860
o a Facebook.com,
o a Google.com para que la reciban

219
00:10:46,860 --> 00:10:49,650
y luego cuando Google,
Facebook o Kara reciben esa nota,

220
00:10:49,650 --> 00:10:53,850
la leen y ven lo que quiero,
el servidor o el humano

221
00:10:53,850 --> 00:10:57,030
responden de alguna manera.

222
00:10:57,030 --> 00:11:00,010
¿qué pasa dentro de este sobre?

223
00:11:00,010 --> 00:11:02,400
Bueno, cuando
un navegador web,

224
00:11:02,400 --> 00:11:05,820
como Chrome, Edge, Firefox
o Safari hacen una solicitud

225
00:11:05,820 --> 00:11:09,480
el mensaje que ponen dentro de uno
de esos sobres, aunque de manera virtual,

226
00:11:09,480 --> 00:11:11,100
es prácticamente este texto,

227
00:11:11,100 --> 00:11:14,460
como si lo hubiera anotado
en un trozo de papel  GET / HTTP / 1.1

228
00:11:14,460 --> 00:11:19,800
Host: www.facebook.com y luego el "..."

229
00:11:19,800 --> 00:11:23,400
solo significa que allí hay otras cosas,
pero básicamente son menos interesantes

230
00:11:23,400 --> 00:11:24,270
por el momento.

231
00:11:24,270 --> 00:11:26,040
Pero, ¿qué significa todo esto?

232
00:11:26,040 --> 00:11:28,260
GET es un verbo
y hace lo que significa.

233
00:11:28,260 --> 00:11:30,000
Busca algo en el servidor.

234
00:11:30,000 --> 00:11:35,700
HTTP / 1.1 indica la versión de HTTP
que utilizo o la convención humana

235
00:11:35,700 --> 00:11:38,640
que Kara y yo
implementábamos allí,

236
00:11:38,640 --> 00:11:42,750
el 1.1 es el que más se utiliza
actualmente y luego el / otra vez,

237
00:11:42,750 --> 00:11:48,330
es el identificador predeterminado
para la página de inicio de un sitio web,

238
00:11:48,330 --> 00:11:51,610
la página predeterminada que
vemos cuando no escribimos algo

239
00:11:51,610 --> 00:11:54,330
como /zuck o algún otro sufijo.

240
00:11:54,330 --> 00:11:58,440
Host: Es lo que está
en el exterior del sobre,

241
00:11:58,440 --> 00:12:00,780
si envío un mensaje
a www.Facebook.com,

242
00:12:00,780 --> 00:12:06,750
dejo muy en claro dentro del sobre
cuál es el servidor que debe recibir

243
00:12:06,750 --> 00:12:10,320
esta solicitud, en caso de que
haya varios sitios web ejecutándose

244
00:12:10,320 --> 00:12:13,470
en el mismo servidor físico, lo cual
es muy posible por razones económicas y de

245
00:12:13,470 --> 00:12:14,640
desempeño, actualmente.

246
00:12:14,640 --> 00:12:18,210
Por otra parte, si tratara
de visitar la página de Mark Zuckerberg,

247
00:12:18,210 --> 00:12:20,790
la solicitud en ese
sobre se vería casi igual,

248
00:12:20,790 --> 00:12:22,164
pero seré más preciso.

249
00:12:22,164 --> 00:12:24,870
/ zuck en lugar de solo /

250
00:12:24,870 --> 00:12:27,599
Sin embargo, si solicito algo
de la página de inicio de Yale

251
00:12:27,599 --> 00:12:30,140
la solicitud sería así: www.yale.edu,
o de la página web de Harvard

252
00:12:30,140 --> 00:12:34,060
la solicitud se vería así: www.harvard.edu
y así sucesivamente.

253
00:12:34,060 --> 00:12:37,110
Una vez Harvard, Yale o Facebook

254
00:12:37,110 --> 00:12:40,350
recibieron la solicitud en
ese sobre, lo abrieron y lo miraron,

255
00:12:40,350 --> 00:12:42,300
¿cómo deciden de qué manera responder?

256
00:12:42,300 --> 00:12:44,610
Bueno, al final del día,
probablemente espero

257
00:12:44,610 --> 00:12:47,870
que el servidor web
me devuelva alguna, discúlpeme,

258
00:12:47,870 --> 00:12:51,780
página web que me permita
ver mis noticias en Facebook,

259
00:12:51,780 --> 00:12:54,024
o quiero ver la página
de búsqueda en Google,

260
00:12:54,024 --> 00:12:56,190
o quiero ver la página
principal de Harvard o la de Yale

261
00:12:56,190 --> 00:12:57,540
o cualquier cosa que sea.

262
00:12:57,540 --> 00:13:01,380
Probablemente haya mucha
información empaquetada en ese sobre,

263
00:13:01,380 --> 00:13:04,350
pero también hay
una respuesta convencional

264
00:13:04,350 --> 00:13:07,180
o estándar que se
ve de esta manera,

265
00:13:07,180 --> 00:13:10,980
por ejemplo, en la parte superior
de la "carta" que regresa de Google

266
00:13:10,980 --> 00:13:13,000
o de Facebook
hay un mensaje como este:

267
00:13:13,000 --> 00:13:13,500
Lo tengo,

268
00:13:13,500 --> 00:13:16,650
también hablo HTTP versión 1.1,

269
00:13:16,650 --> 00:13:19,010
todo está bien y 200.

270
00:13:19,010 --> 00:13:20,760
Volveremos a eso en
un segundo y luego

271
00:13:20,760 --> 00:13:23,650
el tipo de
contenido dentro del sobre,

272
00:13:23,650 --> 00:13:25,830
si voy más
profundo en esto, será

273
00:13:25,830 --> 00:13:28,140
texto, pero más
específicamente, será HTML y también

274
00:13:28,140 --> 00:13:29,960
nos enfocaremos hoy en eso.

275
00:13:29,960 --> 00:13:32,460
El HTML o Lenguaje
de marcado de hipertexto.

276
00:13:32,460 --> 00:13:36,300
Este será el lenguaje en el que
se escribirán las páginas web.

277
00:13:36,300 --> 00:13:38,640
Luego usualmente hay
otras cosas y por acá abajo

278
00:13:38,640 --> 00:13:42,297
están los contenidos reales de la página
web de Yale, de Harvard o de Facebook,

279
00:13:42,297 --> 00:13:44,130
pero hagámosle un
acercamiento a esto por un momento.

280
00:13:44,130 --> 00:13:48,870
200, seguramente nunca vimos
o nos importó ver estos números antes,

281
00:13:48,870 --> 00:13:52,020
pero si alguna vez utilizamos
la web, solicitamos una página

282
00:13:52,020 --> 00:13:55,087
y ¿vimos algún número que por alguna
razón aún aparece en nuestra vida?

283
00:13:55,087 --> 00:13:56,170
PÚBLICO AL UNÍSONO: El 404.

284
00:13:56,170 --> 00:13:57,370
DAVID: Sí, el 404.

285
00:13:57,370 --> 00:14:00,330
Es algo raro que
muchos de nosotros en la sala

286
00:14:00,330 --> 00:14:02,755
conocemos el 404 incluso
si no necesariamente somos tecnófilos

287
00:14:02,755 --> 00:14:06,690
y sabemos qué es el HTTP,
pero en estos sobres que regresan

288
00:14:06,690 --> 00:14:11,500
desde los servidores a veces
no solo son 200 OK, sino que

289
00:14:11,500 --> 00:14:13,860
diablos, lo escribí mal.

290
00:14:13,860 --> 00:14:16,890
Esto sería mucho más
real si dijera que no es esto.

291
00:14:16,890 --> 00:14:18,210
No se encontró.

292
00:14:18,210 --> 00:14:25,260
Dentro del sobre no se encuentra 404,
que exactamente eso es lo que significa.

293
00:14:25,260 --> 00:14:28,740
No se encontró el archivo
que estábamos buscando.

294
00:14:28,740 --> 00:14:31,740
Escribimos mal la URL,
la página fue eliminada,

295
00:14:31,740 --> 00:14:34,470
en algún lugar u otro,
hubo algún tipo de error tipográfico,

296
00:14:34,470 --> 00:14:37,605
en HTTP existen
muchos códigos de estado

297
00:14:37,605 --> 00:14:39,480
hay incluso más
que estos, pero estos

298
00:14:39,480 --> 00:14:41,313
son los que podríamos
ver más frecuentemente.

299
00:14:41,313 --> 00:14:43,500
El 200 OK significa
que todo está bien,

300
00:14:43,500 --> 00:14:45,450
el 404 significa no encontrado,

301
00:14:45,450 --> 00:14:48,090
403 prohibido, que
podría ser, si no inició sesión

302
00:14:48,090 --> 00:14:51,510
o no se le permite
acceder a alguna carpeta

303
00:14:51,510 --> 00:14:53,100
o archivo en algún sitio web.

304
00:14:53,100 --> 00:14:56,190
Esto es malo, y lo sabremos
en las próximas semanas ya que

305
00:14:56,190 --> 00:14:58,470
nosotros mismos implementaremos
el código en un servidor.

306
00:14:58,470 --> 00:15:02,406
500 error interno del servidor, deberá ser
nuestro nuevo defecto de segmentación,

307
00:15:02,406 --> 00:15:03,780
espero que no sea demasiado frecuente.

308
00:15:03,780 --> 00:15:06,400
Significa que algo está mal
en el código del servidor.

309
00:15:06,400 --> 00:15:10,870
Esto pasó en el día de las
bromas de Abril en 1998, creo, sí.

310
00:15:10,870 --> 00:15:15,210
En ese día, algunos humanos decidieron
que sería divertido anunciar al mundo

311
00:15:15,210 --> 00:15:17,940
que hay otro código, el
cual es 418 Soy una Tetera,

312
00:15:17,940 --> 00:15:21,840
qué aparece de vez en cuando
en el código, y luego está este

313
00:15:21,840 --> 00:15:23,010
otro,

314
00:15:23,010 --> 00:15:24,630
301 Permanentemente movido.

315
00:15:24,630 --> 00:15:27,210
Es un tipo de sonido
espeluznante, como si un sitio web solo

316
00:15:27,210 --> 00:15:31,890
más o menos se fuera y se fuera a otro
lado, pero es un mecanismo poderoso

317
00:15:31,890 --> 00:15:32,980
de la siguiente manera.

318
00:15:32,980 --> 00:15:35,100
Si hay un servidor
dentro de uno de estos sobres

319
00:15:35,100 --> 00:15:38,550
que contesta con una
respuesta como esta, esto,

320
00:15:38,550 --> 00:15:41,110
al menos, tiende a
ser otra pieza información.

321
00:15:41,110 --> 00:15:47,230
Si visito un sitio web
como http://harvard.edu,

322
00:15:47,230 --> 00:15:51,300
devolvería en la contestación
del servidor web de Harvard

323
00:15:51,300 --> 00:15:54,000
esta respuesta,
301 Permanentemente movido.

324
00:15:54,000 --> 00:15:55,590
¿A dónde diablos fue Harvard?

325
00:15:55,590 --> 00:15:58,345
Bueno, podemos ver la
ubicación basada en esta otra línea

326
00:15:58,345 --> 00:16:00,720
y todas estas cosas
avanzando colectivamente

327
00:16:00,720 --> 00:16:03,180
a lo que llamaremos encabezado HTTP.

328
00:16:03,180 --> 00:16:06,060
Cada vez que veamos
una palabra y un punto, eso es

329
00:16:06,060 --> 00:16:08,549
un encabezado HTTP, con un
nombre, y un valor, y el primero

330
00:16:08,549 --> 00:16:10,590
es un poco anómalo
porque no tiene punto,

331
00:16:10,590 --> 00:16:12,810
pero ese es
el único sin punto.

332
00:16:12,810 --> 00:16:19,070
Entonces, ubicación,
punto, http://www.harvard.edu.

333
00:16:19,070 --> 00:16:20,070
Bueno, ¿qué es lo que pasa?

334
00:16:20,070 --> 00:16:24,100
Bien, si visito la página principal
de Harvard exactamente como sigue,

335
00:16:24,100 --> 00:16:25,660
veamos lo que sucede.

336
00:16:25,660 --> 00:16:31,290
Iré a http://harvard.edu, Enter.

337
00:16:31,290 --> 00:16:34,680
Noten que hay muchas más cosas
ocurriendo en la pantalla, gracias

338
00:16:34,680 --> 00:16:37,485
a lo que se llama autocompletar, que
es una función de Chrome o mi navegador.

339
00:16:37,485 --> 00:16:39,330
No tiene nada que ver
con el tema en cuestión.

340
00:16:39,330 --> 00:16:43,440
Solo trato de que Chrome hoy sea
útil, como también nuestra computadora,

341
00:16:43,440 --> 00:16:49,710
y de repente, aunque
traté de ir a http://hardvard.edu,

342
00:16:49,710 --> 00:16:52,500
claramente, ¿dónde terminé?

343
00:16:52,500 --> 00:16:56,340
HTTPS. Ellos agregaron la s
de alguna manera, ¿qué más agregaron?

344
00:16:56,340 --> 00:16:58,140
[VARIAS RESPUESTAS DEL PÚBLICO]

345
00:16:58,140 --> 00:16:59,390
DAVID: Sí, la web.

346
00:16:59,390 --> 00:17:00,950
Se añadió el prefijo www.

347
00:17:00,950 --> 00:17:04,260
Todo esto no es tan
importante para el usuario

348
00:17:04,260 --> 00:17:09,040
como el que llegue a mi destino,
pero la razón para esto es la siguiente.

349
00:17:09,040 --> 00:17:12,980
A continuación,
abriré, en el IDE,

350
00:17:12,980 --> 00:17:16,609
una ventana de terminal y
usaré un nuevo programa llamado cURL

351
00:17:16,609 --> 00:17:22,520
para conectarme a la
URL ://harvard.edu, Enter.

352
00:17:22,520 --> 00:17:25,411
Me devuelve cosas que parecen
misteriosas, en realidad eso es HTML,

353
00:17:25,411 --> 00:17:27,619
regresaremos a
esto en un momento

354
00:17:27,619 --> 00:17:30,900
porque hay dos partes
que nos devuelven los mensajes.

355
00:17:30,900 --> 00:17:34,640
Están los encabezados y luego el
contenido, nosotros vemos el contenido

356
00:17:34,640 --> 00:17:35,750
y más sobre eso en un momento.

357
00:17:35,750 --> 00:17:38,937
Quiero mirar un poco más
arriba en la respuesta y solo

358
00:17:38,937 --> 00:17:42,020
en los encabezados, y para hacer eso,
nosotros solo sabemos esto porque leemos

359
00:17:42,020 --> 00:17:43,340
la documentación.

360
00:17:43,340 --> 00:17:47,880
Me refiero a que me muestre
solo los encabezados que devuelve.

361
00:17:47,880 --> 00:17:50,360
Ahora vemos que
los encabezados regresan

362
00:17:50,360 --> 00:17:52,946
y de hecho, obtuvimos
un 301 Permanentemente movido,

363
00:17:52,946 --> 00:17:55,570
existen otras cosas en
las que realmente no nos enfocamos,

364
00:17:55,570 --> 00:17:57,740
pero, en la parte
inferior hay algo que tenemos

365
00:17:57,740 --> 00:18:01,452
ubicado, que le dice
al navegador ve a esta URL.

366
00:18:01,452 --> 00:18:02,660
De acuerdo, haré eso.

367
00:18:02,660 --> 00:18:09,080
Ahorraré tiempo, solo copiaré
pegaré esto y escribiré curl -I, de esto,

368
00:18:09,080 --> 00:18:13,280
Enter, y pretende ser un navegador
que solicita esa página, pero ahora

369
00:18:13,280 --> 00:18:16,126
¿A dónde están tratando de enviarme?

370
00:18:16,126 --> 00:18:18,440
HTTPS.

371
00:18:18,440 --> 00:18:21,890
Esto sugiere que por medio de algún
mecanismo, algunos humanos en Harvard

372
00:18:21,890 --> 00:18:23,450
decidieron uno, uh-uh.

373
00:18:23,450 --> 00:18:25,430
No iremos a algo
llamado hardvard.edu.

374
00:18:25,430 --> 00:18:29,240
Deberíamos estar en
www.hardvard.edu pero por cualquier razón

375
00:18:29,240 --> 00:18:34,430
y también decidieron que si un usuario
nos visita usando HTTP, que no está

376
00:18:34,430 --> 00:18:39,020
encriptada, no es segura,
nos forzarán a regresar

377
00:18:39,020 --> 00:18:43,460
por medio de un canal seguro, hoy no nos
detendremos en cómo se implementan,

378
00:18:43,460 --> 00:18:46,910
pero es como en Caesar o Vigenere, donde
había una manera de encriptar o codificar

379
00:18:46,910 --> 00:18:49,100
información, los navegadores
también pueden hacer eso

380
00:18:49,100 --> 00:18:53,600
e implica usar HTTPS
en lugar de solo HTTP.

381
00:18:53,600 --> 00:18:56,730
Muy bien, visitaremos
esto una vez más.

382
00:18:56,730 --> 00:18:59,560
A continuación,
resaltaré esa ubicación.

383
00:18:59,560 --> 00:19:04,220
curl -I de esa dirección y ahora una
cantidad abrumadora de información

384
00:19:04,220 --> 00:19:07,910
que regresa, es por eso puse
las eses, pero las cosas jugosas

385
00:19:07,910 --> 00:19:08,960
están en la parte superior.

386
00:19:08,960 --> 00:19:16,880
Ahora todo está 200 OK,
y de hecho, si lo ejecuto sin -I

387
00:19:16,880 --> 00:19:18,920
veo el
contenido del sobre,

388
00:19:18,920 --> 00:19:21,680
está como buscar
adentrarse en el sobre,

389
00:19:21,680 --> 00:19:25,190
ahora veo mucho más
contenido, que colectivamente

390
00:19:25,190 --> 00:19:29,240
compone la página
principal de Harvard, y

391
00:19:29,240 --> 00:19:30,914
podemos ver esto incluso en Chrome.

392
00:19:30,914 --> 00:19:33,830
Otra vez, proseguiré con mi
navegador, y si no hicimos esto antes,

393
00:19:33,830 --> 00:19:37,280
podemos ir a
nuestro menú View, Developer,

394
00:19:37,280 --> 00:19:40,490
e ir a Developer Tools, como lo haremos
en las siguientes series de problemas,

395
00:19:40,490 --> 00:19:43,280
puedo ir aquí y ver un montón
de funciones, y solo un par

396
00:19:43,280 --> 00:19:44,780
de las que podríamos ver hoy.

397
00:19:44,780 --> 00:19:47,120
Específicamente,
haré clic en la pestaña Network.

398
00:19:47,120 --> 00:19:50,819
Developer Tools en Chrome
todavía me muestra la página de inicio,

399
00:19:50,819 --> 00:19:52,610
pero de alguna manera
le dedica parte de la pantalla

400
00:19:52,610 --> 00:19:56,690
a estas herramientas especiales de
desarrollador que hacen fácil entender

401
00:19:56,690 --> 00:19:57,976
la creación de sitios web.

402
00:19:57,976 --> 00:19:59,850
Con el tiempo, comenzaremos
a usar esto nosotros mismos,

403
00:19:59,850 --> 00:20:04,130
lo bueno de los dispositivos de escucha de
red, es que podemos detectar o monitorear

404
00:20:04,130 --> 00:20:07,010
todas las solicitudes que
van y vienen entre el navegador

405
00:20:07,010 --> 00:20:09,396
y el servidor
en los llamados sobres.

406
00:20:09,396 --> 00:20:11,770
Primero presionaré 
el pequeño símbolo Clear de aquí

407
00:20:11,770 --> 00:20:13,580
para limpiar la pantalla.

408
00:20:13,580 --> 00:20:18,050
Haré clic en Preserve log
para poder ver lo que pasa

409
00:20:18,050 --> 00:20:19,757
ahora seguiré adelante,

410
00:20:19,757 --> 00:20:21,590
de hecho, seguiré
adelante y haré lo siguiente.

411
00:20:21,590 --> 00:20:27,380
http://harvard.edu, es el
tipo de versión incorrecta que

412
00:20:27,380 --> 00:20:28,910
espero el navegador arregle para mi

413
00:20:28,910 --> 00:20:30,050
y presiono Enter.

414
00:20:30,050 --> 00:20:33,500
Un montón de cosas
vuelan por la pantalla

415
00:20:33,500 --> 00:20:36,050
y, de hecho, si le hacemos
un acercamiento a esto,

416
00:20:36,050 --> 00:20:38,660
veremos que el visitar
la página de inicio de Harvard

417
00:20:38,660 --> 00:20:44,000
requiere de 85 sobres,
que parecen ir y venir con fragmentos

418
00:20:44,000 --> 00:20:46,790
de la página web y pronto veremos
lo que son algunos de esos fragmentos,

419
00:20:46,790 --> 00:20:48,710
pero no es solo
un archivo el que regresa,

420
00:20:48,710 --> 00:20:49,730
son montones de archivos,

421
00:20:49,730 --> 00:20:52,730
tal vez imágenes, fuentes
o también algunas otras cosas,

422
00:20:52,730 --> 00:20:54,770
pero me desplazaré
hacia arriba en esta salida,

423
00:20:54,770 --> 00:20:57,830
también noten 
la historia que se contó aquí.

424
00:20:57,830 --> 00:21:01,310
La primera solicitud,
sobre la que puedo pasar el mouse y verla,

425
00:21:01,310 --> 00:21:04,820
regresó con un 301, que ahora
sabemos es Permanentemente movido

426
00:21:04,820 --> 00:21:06,140
o una redirección

427
00:21:06,140 --> 00:21:08,330
Luego, si paso
el mouse sobre la segunda,

428
00:21:08,330 --> 00:21:12,980
veremos que es una URL www
un poco más precisa, pero aún con el HTTP,

429
00:21:12,980 --> 00:21:18,240
así, eso fue redirigido y por último,
si miramos la tercera línea de aquí,

430
00:21:18,240 --> 00:21:20,180
este es el único
que finalmente terminamos

431
00:21:20,180 --> 00:21:24,560
y de hecho regresa 200, al igual que los
montones de otros resultados posteriores

432
00:21:24,560 --> 00:21:27,860
y veremos lo que esos
200 significan en realidad.

433
00:21:27,860 --> 00:21:29,840
Podemos hacer esto un poco mejor

434
00:21:29,840 --> 00:21:33,380
y tal vez sea apropiado que
nuestros amigos lo hicieran en el futuro.

435
00:21:33,380 --> 00:21:35,250
Volveré al IDE.

436
00:21:35,250 --> 00:21:38,960
Para continuar, borraré esto
y en vez de usar cURL en harvard.edu,

437
00:21:38,960 --> 00:21:43,650
haré http://yale.edu
y preguntaré,

438
00:21:43,650 --> 00:21:47,570
¿cuál sería un mejor enfoque?
conocemos los ingredientes, que

439
00:21:47,570 --> 00:21:49,880
tenemos, sobre cómo
funcionan las redirecciones.

440
00:21:49,880 --> 00:21:54,890
¿Cómo mejoraría Harvard
respecto a llevar al usuario a la dirección

441
00:21:54,890 --> 00:21:57,560
en la que queremos que esté?

442
00:21:57,560 --> 00:21:58,161
Sí.

443
00:21:58,161 --> 00:22:00,270
PÚBLICO: ¿Al no forzar
dos redireccionamientos?

444
00:22:00,270 --> 00:22:02,210
DAVID: Sí, al no forzar dos
redireccionamientos, ¿cierto?

445
00:22:02,210 --> 00:22:04,001
Incluso si parte de este
material es nuevo, hablamos

446
00:22:04,001 --> 00:22:06,284
mucho sobre
la corrección, el diseño y el estilo,

447
00:22:06,284 --> 00:22:09,200
vimos un estilo desordenado 
en la pantalla y por ahora eso es todo,

448
00:22:09,200 --> 00:22:10,310
después hablaremos más sobre eso.

449
00:22:10,310 --> 00:22:12,230
Parece que es
correcto porque funciona,

450
00:22:12,230 --> 00:22:14,150
pero podría
tener un mejor diseño

451
00:22:14,150 --> 00:22:17,920
porque, ¿por qué hacemos
una solicitud y luego otra

452
00:22:17,920 --> 00:22:20,510
para arreglar la primera
y luego hacemos una tercera

453
00:22:20,510 --> 00:22:22,370
para arreglar la segunda?

454
00:22:22,370 --> 00:22:23,630
¿Por qué no combinarlas?

455
00:22:23,630 --> 00:22:26,480
Parece que alguien tuvo
la misma intuición en el camino

456
00:22:26,480 --> 00:22:31,610
así visitamos yale.edu,
solo con el HTTP y sin el www,

457
00:22:31,610 --> 00:22:34,820
ellos, de un solo golpe, nos redireccionan

458
00:22:34,820 --> 00:22:38,730
al lugar correcto, en este caso.

459
00:22:38,730 --> 00:22:42,950
Dicho esto, tal vez
lo más apropiado sea que

460
00:22:42,950 --> 00:22:45,980
en unos cuantos años,
bueno, ahora hace algunos años,

461
00:22:45,980 --> 00:22:49,400
puede que tratáramos
de visitar esta dirección en particular

462
00:22:49,400 --> 00:22:52,730
y esto es algo que solamente
puedo hacer en Cambridge.

463
00:22:52,730 --> 00:22:58,940
Si continúo, abro un nuevo
navegador y voy a digamos http: //

464
00:22:58,940 --> 00:23:05,240
safetyschool.org y presionamos
Enter si nunca hemos estado.

465
00:23:05,240 --> 00:23:06,350
¡Oh, que interesante!

466
00:23:06,350 --> 00:23:07,900
[RISAS]

467
00:23:07,900 --> 00:23:10,805


468
00:23:10,805 --> 00:23:13,430
DAVID: Me disculpo con
aquellos que nos sintonizan

469
00:23:13,430 --> 00:23:15,050
en vivo desde New Haven.

470
00:23:15,050 --> 00:23:17,127
¿cómo es posible que esto funcione?

471
00:23:17,127 --> 00:23:18,710
Es una heurística muy simple.

472
00:23:18,710 --> 00:23:21,770
Si en vez de seleccionar a Yale,
Harvard o cualquier otra dirección,

473
00:23:21,770 --> 00:23:25,520
pongo safetyschool.org,
podemos concentrarnos en

474
00:23:25,520 --> 00:23:29,150
lo que ocurre abajo del agua y parece que
safetyschool.org se mudó definitivamente

475
00:23:29,150 --> 00:23:33,980
a New Haven, pero es a través de este
mecanismo muy simple que alguien

476
00:23:33,980 --> 00:23:36,079
en el año 2000 registró
este nombre de dominio,

477
00:23:36,079 --> 00:23:38,870
y de hecho buscaba esto
en la historia de anoche,

478
00:23:38,870 --> 00:23:42,620
me divertí al descubrir que quien compró
el dominio ha estado pagando por este

479
00:23:42,620 --> 00:23:48,389
nombre durante 17 años para la
broma anual, pero bien vale la pena,

480
00:23:48,389 --> 00:23:49,430
pero creo que sería,

481
00:23:49,430 --> 00:23:50,652
[RISAS]

482
00:23:50,652 --> 00:23:52,610
DAVID: Pero ahora creo
que esto es algo justo,

483
00:23:52,610 --> 00:23:55,550
esto solo es justo, si también
le echamos un vistazo a este otro,

484
00:23:55,550 --> 00:24:03,230
si visitamos
harvardsucks.org, también esta

485
00:24:03,230 --> 00:24:05,100
redirigido,
esta vez a www.

486
00:24:05,100 --> 00:24:09,770
entonces sigamos este pequeño rastro
cURL -I http://www.harvardsucks.org/

487
00:24:09,770 --> 00:24:11,240
¡y este salió bien!.

488
00:24:11,240 --> 00:24:14,450
Eso significa que algo
vive en harvardsucks.org

489
00:24:14,450 --> 00:24:18,660
y no redirige de manera
ingeniosa hacia harvard.edu,

490
00:24:18,660 --> 00:24:20,660
pero para presentar esto,
permítanme presentarles

491
00:24:20,660 --> 00:24:23,090
a un amiga nuestra, quien muy
extrañamente hoy nos visita desde New

492
00:24:23,090 --> 00:24:23,420
Heaven.

493
00:24:23,420 --> 00:24:23,919
Hola Natalie.

494
00:24:23,919 --> 00:24:26,420
¿Quieres venir
y saludarnos por un momento?

495
00:24:26,420 --> 00:24:30,950
Esta es Natalie, nuestra titular
del curso junto con Benedict Brown,

496
00:24:30,950 --> 00:24:33,740
Anushri y Staleos en New Haven.

497
00:24:33,740 --> 00:24:35,360
¿Te gustaría saludarnos rápidamente?

498
00:24:35,360 --> 00:24:37,850
Hola, hola a todos.

499
00:24:37,850 --> 00:24:40,540
DAVID: Qué bueno tenerte
hoy aquí y como sabes,

500
00:24:40,540 --> 00:24:43,100
¿Quieres mencionar algo sobre
lo que estamos a punto de ver aquí?

501
00:24:43,100 --> 00:24:48,470
¿Sabes qué pasó algunos
años después del 2004?

502
00:24:48,470 --> 00:24:51,430
PÚBLICO: Ohh... hicimos... hicimos
una travesura... básicamente.

503
00:24:51,430 --> 00:24:53,090
DAVID: Bien,
la descripción es perfecta.

504
00:24:53,090 --> 00:24:53,950
Muchas gracias.

505
00:24:53,950 --> 00:24:54,658
Saluden a Natalie.

506
00:24:54,658 --> 00:24:57,770
Para continuar,
reproduciré en tres minutos

507
00:24:57,770 --> 00:25:00,020
algo que es difícil
de justificar académicamente,

508
00:25:00,020 --> 00:25:02,990
pero tal vez sea una de las mejores
bromas que se hicieron alguna vez.

509
00:25:02,990 --> 00:25:05,720
Para resumir, nuestros
amigos, en el camino

510
00:25:05,720 --> 00:25:08,840
se reunieron con otros, justo antes
del partido Harvard contra Yale, que

511
00:25:08,840 --> 00:25:11,870
ese año se efectuaría en Harvard

512
00:25:11,870 --> 00:25:14,780
y trazaron un mapa con un software,
una especie de sistema con cuadrículas

513
00:25:14,780 --> 00:25:18,260
con el que alinearon todos
los asientos en el estadio de Harvard,

514
00:25:18,260 --> 00:25:21,140
y supusieron que cada persona
ocupa cierta cantidad espacio,

515
00:25:21,140 --> 00:25:23,330
luego usaron un
software especial para averiguar

516
00:25:23,330 --> 00:25:27,080
cómo podrían deletrear algo
con el público, de una manera que

517
00:25:27,080 --> 00:25:30,416
fuera legible para los oponentes,
los Yalies, que estaban en el otro lado.

518
00:25:30,416 --> 00:25:32,415
Si pudiéramos atenuar las luces
para echarle un vistazo al pasado,

519
00:25:32,415 --> 00:25:37,106
a los ayeres 
y al pequeño uso de este software.

520
00:25:37,106 --> 00:25:39,082
[MÚSICA DE FONDO]

521
00:25:39,082 --> 00:26:04,223


522
00:26:04,223 --> 00:26:05,264
- Todos los lugares de arriba.

523
00:26:05,264 --> 00:26:08,280


524
00:26:08,280 --> 00:26:09,873
- Esto es por ti Yale.

525
00:26:09,873 --> 00:26:11,352
Te amamos Yale.

526
00:26:11,352 --> 00:26:13,810
- Estamos aquí para animar a Harvard.

527
00:26:13,810 --> 00:26:14,310
- ¡Sí!

528
00:26:14,310 --> 00:26:15,789
¡Vamos Harvard!

529
00:26:15,789 --> 00:26:17,268
- ¡Vamos, Harvard!

530
00:26:17,268 --> 00:26:19,733
- Toma la de arriba y pásala.

531
00:26:19,733 --> 00:26:23,184
- No va a decir algo
como Yale apesta, ¿verdad?

532
00:26:23,184 --> 00:26:25,156
- No, dice, ¡Vamos Harvard!

533
00:26:25,156 --> 00:26:26,635
- Somos geniales.

534
00:26:26,635 --> 00:26:28,114
- ¿Ves esa cosa?

535
00:26:28,114 --> 00:26:30,579
¡Miren, tienen las cartulinas!

536
00:26:30,579 --> 00:26:32,551
¡Las van a usar!

537
00:26:32,551 --> 00:26:35,190
¡En serio las van a usar!

538
00:26:35,190 --> 00:26:37,290
¡No puedo [PITIDO] creerlo!

539
00:26:37,290 --> 00:26:38,456
- ¿Señor, qué piensa de Yale?

540
00:26:38,456 --> 00:26:40,368
- ¡No creo que sean buenos!

541
00:26:40,368 --> 00:26:43,670
- Puede ser un
completo desastre, no lo sé.

542
00:26:43,670 --> 00:26:44,670
- ¿Ya todos tienen?

543
00:26:44,670 --> 00:26:46,732
¿Ya todos tienen sus cosas?

544
00:26:46,732 --> 00:26:49,485
- La probabilidad de que
sea legible es muy pequeña.

545
00:26:49,485 --> 00:26:50,318
¡Las van a usar!

546
00:26:50,318 --> 00:26:51,272
¡Las van a usar!

547
00:26:51,272 --> 00:26:52,230
- Es demasiado difícil.

548
00:26:52,230 --> 00:26:53,664
- Mira, mira todas las cartulinas.

549
00:26:53,664 --> 00:26:55,098
- Lo sé, pero es demasiado difícil.

550
00:26:55,098 --> 00:26:57,473
- ¿De qué fraternidad son ustedes?

551
00:26:57,473 --> 00:26:59,375
Esa no existe.

552
00:26:59,375 --> 00:27:01,800
- ¿Ho-fo?

553
00:27:01,800 --> 00:27:03,717
- Sí.

554
00:27:03,717 --> 00:27:05,545
Ustedes no son
de Harvard, ¿verdad?

555
00:27:05,545 --> 00:27:06,459
- No, fo-ho.

556
00:27:06,459 --> 00:27:07,830
¡Pforzheimer!

557
00:27:07,830 --> 00:27:08,967
- Sí, pero él dijo ho-fo.

558
00:27:08,967 --> 00:27:10,592
- Asegurémonos de que ya todos tengan.

559
00:27:10,592 --> 00:27:11,494
- Bueno, creo que ella está borracha.

560
00:27:11,494 --> 00:27:12,900
- ¿Ya se distribuyeron todas las tarjetas?

561
00:27:12,900 --> 00:27:13,400
- ¡Casi todas!

562
00:27:13,400 --> 00:27:17,612


563
00:27:17,612 --> 00:27:22,076
[APLAUSOS]

564
00:27:22,076 --> 00:27:27,036


565
00:27:27,036 --> 00:27:28,524
[PORRAS]

566
00:27:28,524 --> 00:27:29,516


567
00:27:29,516 --> 00:27:31,004
- ¡Levanten sus cartulinas!

568
00:27:31,004 --> 00:27:32,988
- ¡Lo [PITIDO] hicieron!

569
00:27:32,988 --> 00:27:34,972
[CORO GRITANDO "¡APESTAN!"]

570
00:27:34,972 --> 00:27:36,956


571
00:27:36,956 --> 00:27:38,940
- ¡Lo [PITIDO] hicieron!

572
00:27:38,940 --> 00:27:41,420
- ¡Lo [PITIDO] hicieron!

573
00:27:41,420 --> 00:27:46,380
[CORO GRITANDO "¡APESTAN!"]

574
00:27:46,380 --> 00:27:48,860
- ¿Señor, qué piensa de Yale?

575
00:27:48,860 --> 00:27:50,844
- ¡Apestan!

576
00:27:50,844 --> 00:27:52,332
- ¡Otra vez!

577
00:27:52,332 --> 00:27:53,820


578
00:27:53,820 --> 00:27:55,308
- ¡Otra vez!

579
00:27:55,308 --> 00:27:58,780


580
00:27:58,780 --> 00:28:02,028
- ¡Oh! ¡Ahí van de nuevo!

581
00:28:02,028 --> 00:28:18,654
[CORO GRITANDO "¡APESTAN!"]

582
00:28:18,654 --> 00:28:19,580
[FINALIZA LA REPRODUCCIÓN]

583
00:28:19,580 --> 00:28:21,455
DAVID: Muy bien, hablamos

584
00:28:21,455 --> 00:28:23,620
sobre lo que sucede
dentro de este sobre,

585
00:28:23,620 --> 00:28:26,062
pero, ¿qué sucede afuera?

586
00:28:26,062 --> 00:28:28,770
Cuando entregamos este
sobre desde la laptop o el teléfono

587
00:28:28,770 --> 00:28:31,510
al Internet,
¿cómo llega éste a su destino?

588
00:28:31,510 --> 00:28:34,600
Bien, probablemente escuchamos del
acrónimo IP, o protocolo de Internet

589
00:28:34,600 --> 00:28:37,930
y que cada computadora,
teléfono o laptop con Internet

590
00:28:37,930 --> 00:28:43,000
en esta sala tienen
una dirección única.

591
00:28:43,000 --> 00:28:46,810
Esa dirección única se conoce como
dirección IP y se parece mucho a la

592
00:28:46,810 --> 00:28:51,040
de un edificio en el mundo real,
como el Centro de Ciencias sería 1 Oxford

593
00:28:51,040 --> 00:28:53,860
Calle Cambridge,
Massachusetts 02138, EE.UU.

594
00:28:53,860 --> 00:28:55,270
En el camino está el edificio de CS.

595
00:28:55,270 --> 00:28:58,600
Calle Cambridge,
Massachusetts 02138, EE.UU.

596
00:28:58,600 --> 00:29:01,784
Esas largas cadenas identifican
de manera única a los edificios

597
00:29:01,784 --> 00:29:03,700
en el mundo,
para el servicio de correo, entre otros

598
00:29:03,700 --> 00:29:08,470
y es así como las direcciones IP
identifican las computadoras en Internet,

599
00:29:08,470 --> 00:29:10,570
aunque estas direcciones
son mucho más concisas,

600
00:29:10,570 --> 00:29:14,080
no son cadenas largas,
sino números con cuatro partes

601
00:29:14,080 --> 00:29:20,450
y cada uno de esos números de la
dirección IP tiene un valor de 0 a 255.

602
00:29:20,450 --> 00:29:23,710
Así, la dirección IP más
baja es cero y la más grande

603
00:29:23,710 --> 00:29:25,860
son todos hasta 255
con algunas restricciones.

604
00:29:25,860 --> 00:29:28,250
No podemos usar
todos esos números.

605
00:29:28,250 --> 00:29:32,530
A modo de avance rápido,
si el número más pequeño es 0

606
00:29:32,530 --> 00:29:37,450
y el número más grande para
cada sección de la dirección IP es 255,

607
00:29:37,450 --> 00:29:40,570
¿Cuántos bits se usan para
cada uno de esos cuatro números?

608
00:29:40,570 --> 00:29:41,790
PÚBLICO: Son 8.

609
00:29:41,790 --> 00:29:42,790
DAVID: Sí, son 8.

610
00:29:42,790 --> 00:29:47,320
Recordemos que 8 bits son 2 veces
2 veces 2 veces 2 veces 2 veces

611
00:29:47,320 --> 00:29:52,600
2 veces 2 veces 2, lo cual es 256 y en
efecto tenemos 256 valores totales de 0

612
00:29:52,600 --> 00:29:54,320
que llegan hasta 255.

613
00:29:54,320 --> 00:29:59,180
Entonces, una dirección IP es 8 más
8 más 8 veces 8, o 32 bits en total,

614
00:29:59,180 --> 00:30:03,250
o se completa el círculo con
la semana cero, si tenemos 32 bits,

615
00:30:03,250 --> 00:30:05,490
aproximadamente ¿cuál es el
mayor número que podemos contar?

616
00:30:05,490 --> 00:30:08,770
¿Cuánto es 2 a la potencia de 32?

617
00:30:08,770 --> 00:30:10,630
Sí, son aproximadamente 4 mil millones.

618
00:30:10,630 --> 00:30:14,500
En pocas palabras, lo que implica
esta definición tan simple es que

619
00:30:14,500 --> 00:30:19,730
en este modelo solo puede haber,
cuatro mil millones de computadoras,

620
00:30:19,730 --> 00:30:24,250
teléfonos, refrigeradores y dispositivos
conectados al Internet, al mismo tiempo

621
00:30:24,250 --> 00:30:27,064
y si lo hacen, todos necesitan
una dirección IP que sea única.

622
00:30:27,064 --> 00:30:29,230
Estuve diciendo una
pequeña mentira blanca, en la que

623
00:30:29,230 --> 00:30:32,246
técnicamente no todos tienen
que ser únicos, porque existen

624
00:30:32,246 --> 00:30:34,120
formas en las que
podemos compartir las direcciones

625
00:30:34,120 --> 00:30:37,545
además, actualmente hay direcciones aún
más grandes, que no son de 32 sino de 128

626
00:30:37,545 --> 00:30:42,160
bits, es tan grande este número que
resulta inmenso y supongo impronunciable.

627
00:30:42,160 --> 00:30:45,580
Ya nos adelantamos a este
problema, pero en muchos lugares

628
00:30:45,580 --> 00:30:49,900
empresas y proveedores de servicios
de internet como Comcast y Verizon

629
00:30:49,900 --> 00:30:53,950
al igual que campus como
Harvard y Yale, tienden a seguir

630
00:30:53,950 --> 00:30:57,640
patrones, como aquí en Harvard
muchas de las direcciones IP comienzan con

631
00:30:57,640 --> 00:31:02,329
140.247.algo.algo o 128.103.

632
00:31:02,329 --> 00:31:04,120
Más adelante, en New Haven,
gran parte de las direcciones

633
00:31:04,120 --> 00:31:08,110
IP de allí comienzan
con 130.132 o 128.36,

634
00:31:08,110 --> 00:31:12,790
lo cual no es interesante para
los humanos que usan estas direcciones

635
00:31:12,790 --> 00:31:16,570
IP, pero es útil para los
servidores o los dispositivos que

636
00:31:16,570 --> 00:31:20,570
distribuyen estos
sobres de un lugar a otro.

637
00:31:20,570 --> 00:31:24,040
Actualmente, en nuestros hogares
e incluso algunas veces en el campus,

638
00:31:24,040 --> 00:31:26,620
también hay lo que se llama
direcciones IP privadas, que

639
00:31:26,620 --> 00:31:29,230
son números que funcionan
dentro de estos rangos y que

640
00:31:29,230 --> 00:31:33,430
son una solución para que cuando nos
registremos en Verizon o en Comcast

641
00:31:33,430 --> 00:31:35,800
en casa o nuestros padres
lo hagan por el servicio de internet,

642
00:31:35,800 --> 00:31:39,194
obtengamos una sola dirección IP
del proveedor de servicios de Internet.

643
00:31:39,194 --> 00:31:41,860
Es por lo que pagamos cada
mes, pero es gracias a algo

644
00:31:41,860 --> 00:31:44,920
llamado traducción de
direcciones de red y a otras tecnologías,

645
00:31:44,920 --> 00:31:47,980
podemos darle a todos
nuestros hermanos, padres,

646
00:31:47,980 --> 00:31:52,160
familiares o compañeros de
cuarto, su propia y única dirección.

647
00:31:52,160 --> 00:31:55,270
Es privada en el sentido de que
nadie más en el mundo exterior

648
00:31:55,270 --> 00:31:59,360
puede acceder a ella,
a menos que se conecte.

649
00:31:59,360 --> 00:32:01,510
Generalmente, esta es la razón
por la que desde nuestro hogar entramos

650
00:32:01,510 --> 00:32:04,809
a cualquier sitio web o servicio
en Internet que queramos,

651
00:32:04,809 --> 00:32:06,850
pero no podemos
tener personas al azar

652
00:32:06,850 --> 00:32:09,730
tratando de entrar a nuestra computadora
portátil o a nuestro dispositivo en casa

653
00:32:09,730 --> 00:32:14,440
porque hay un dispositivo, un enrutador
en casa, que traduce direcciones privadas

654
00:32:14,440 --> 00:32:17,777
en direcciones, que de otro modo, serían
públicas, pero por ahora concluimos

655
00:32:17,777 --> 00:32:20,360
que cada computadora en
Internet tiene una dirección IP,

656
00:32:20,360 --> 00:32:23,530
y si alguna vez han hurgado en su Mac,
como en Preferencias del Sistema,

657
00:32:23,530 --> 00:32:24,620
de hecho podemos verlo.

658
00:32:24,620 --> 00:32:28,900
Acabo de sacar una captura de pantalla
de un panel de control de red en Mac OS

659
00:32:28,900 --> 00:32:31,120
y si miran más o
menos en su propia Mac,

660
00:32:31,120 --> 00:32:33,670
deberían ver que
su dirección IP es algo

661
00:32:33,670 --> 00:32:36,430
que varía completamente por
persona y de manera geográfica,

662
00:32:36,430 --> 00:32:38,170
pero verán su dirección IP ahí.

663
00:32:38,170 --> 00:32:41,110
En Windows, al menos en
Windows 10, pueden ver su dirección IP

664
00:32:41,110 --> 00:32:43,340
en Configuración, como se resalta aquí.

665
00:32:43,340 --> 00:32:45,340
Esta tiene una dirección
muy diferente, pero eso es

666
00:32:45,340 --> 00:32:48,310
porque esta persona estaba en una
red diferente a la de todos nosotros.

667
00:32:48,310 --> 00:32:50,797
Entonces, ¿de dónde
vienen estas direcciones IP?

668
00:32:50,797 --> 00:32:52,630
Bien, en
el día alguien

669
00:32:52,630 --> 00:32:56,680
llega a nuestra casa y configura nuestro
Comcast o servicio de Internet de Verizon

670
00:32:56,680 --> 00:33:00,640
y le gustaría ingresar estos
números en su Mac o PC

671
00:33:00,640 --> 00:33:03,370
luego irse, y usted tendría
una computadora en Internet.

672
00:33:03,370 --> 00:33:05,890
En estos días es mucho más dinámico.

673
00:33:05,890 --> 00:33:07,270
No necesitamos que venga alguien.

674
00:33:07,270 --> 00:33:10,570
Eso, ciertamente, no escala muy
bien porque hay otros protocolos.

675
00:33:10,570 --> 00:33:13,720
HTTP es este protocolo del que hablamos
anteriormente sobre páginas web,

676
00:33:13,720 --> 00:33:17,530
pero hay otros protocolos como el Protocolo
de configuración de host dinámico, que

677
00:33:17,530 --> 00:33:21,760
es un trabalenguas, pero significa que
las Macs, PCs, teléfonos Android, iPhones

678
00:33:21,760 --> 00:33:24,940
y similares, si hablan
este protocolo, cuando

679
00:33:24,940 --> 00:33:28,630
encienden sus teléfonos o
inician la computadora portátil sabe

680
00:33:28,630 --> 00:33:32,260
si tiene soporte para este
protocolo, para anunciar en el Internet,

681
00:33:32,260 --> 00:33:32,890
hello world.

682
00:33:32,890 --> 00:33:33,890
Estoy despierto.

683
00:33:33,890 --> 00:33:35,350
¿Cuál debería ser mi dirección IP?

684
00:33:35,350 --> 00:33:39,550
Este tipo transmisión de mensaje,
y si Harvard, Yale, Comcast

685
00:33:39,550 --> 00:33:41,860
o Verizon o donde sea
que estemos en el mundo

686
00:33:41,860 --> 00:33:46,720
tiene un servidor DHCP cuyo propósito
en la vida es solo escuchar esos hellos,

687
00:33:46,720 --> 00:33:51,490
ese servidor debe responder
usando el mismo protocolo con su

688
00:33:51,490 --> 00:33:55,660
dirección IP, y se da cuenta de cuál
nos da en función de la gama disponible

689
00:33:55,660 --> 00:33:57,320
de números típicos.

690
00:33:57,320 --> 00:33:59,170
Así es como
obtendríamos esto, pero hay

691
00:33:59,170 --> 00:34:00,711
otras cosas en estos paneles de control.

692
00:34:00,711 --> 00:34:03,950
De hecho, si miramos un poco más abajo
en Windows, también hay servidores DNS.

693
00:34:03,950 --> 00:34:05,110
Sistema de nombres de dominio,
(en inglés Domain Name System).

694
00:34:05,110 --> 00:34:10,906
Otro acrónimo y un poco de trabalenguas,
pero también puedes verlo en Mac OS/2

695
00:34:10,906 --> 00:34:13,239
si se hace clic en
Advanced y se echa un vistazo.

696
00:34:13,239 --> 00:34:17,690
Aquí, por ejemplo, se menciona algo
completamente diferente, un enrutador.

697
00:34:17,690 --> 00:34:20,080
Así que hay muchas
direcciones diferentes pasando aquí

698
00:34:20,080 --> 00:34:21,730
y muchos servidores diferentes

699
00:34:21,730 --> 00:34:23,889
Entonces, ¿cómo es que están todas juntas?

700
00:34:23,889 --> 00:34:28,750
Bueno, DNS es
interesante porque es

701
00:34:28,750 --> 00:34:34,280
el que traduce los nombres
de dominio a direcciones IP, ¿cierto?

702
00:34:34,280 --> 00:34:38,889
Ninguno de nosotros probablemente
visite http: // y luego un número, ¿cierto?

703
00:34:38,889 --> 00:34:41,650
Visitamos facebook.com,
google.com o similares,

704
00:34:41,650 --> 00:34:46,699
eso se debe a que las computadoras
saben cómo traducir una a la otra.

705
00:34:46,699 --> 00:34:51,040
Si hago este comando, nslookup,
para buscar el servidor de nombres

706
00:34:51,040 --> 00:34:55,840
y luego escribo algo como google.com,
le pregunto a la computadora,

707
00:34:55,840 --> 00:34:58,780
en este caso, el IDE, ¿cuál es la
dirección IP de google.com?

708
00:34:58,780 --> 00:35:02,470
Como humano la conozco como
google.com, pero Internet la conoce

709
00:35:02,470 --> 00:35:05,840
por su dirección numérica única, y resulta que Google tiene varios,

710
00:35:05,840 --> 00:35:08,680
esto es una mentira
piadosa porque tienen miles,

711
00:35:08,680 --> 00:35:11,590
pero los que le dicen
a mi computadora que usen

712
00:35:11,590 --> 00:35:15,940
son esta, esta o cualquiera
de estas otras direcciones.

713
00:35:15,940 --> 00:35:17,990
A continuación,
veré qué sucede aquí.

714
00:35:17,990 --> 00:35:24,430
Si destaco esa dirección y abro
un navegador, voy a http: // y esa

715
00:35:24,430 --> 00:35:29,950
dirección IP y presionamos Enter,
observamos que pareció funcionar.

716
00:35:29,950 --> 00:35:30,730
Bien, ¿cómo es eso?

717
00:35:30,730 --> 00:35:32,980
Es un poco difícil
verlo en Chrome, pero

718
00:35:32,980 --> 00:35:37,900
proseguiremos a abrir la pestaña Inspect tab
e iremos a la red al igual que antes.

719
00:35:37,900 --> 00:35:40,407
Haré clic en Conservar registro
para que guarde todo aquí,

720
00:35:40,407 --> 00:35:41,490
y podría usar curl.

721
00:35:41,490 --> 00:35:43,198
Curl era la
versión más simple.

722
00:35:43,198 --> 00:35:45,430
Ahora estoy usando la
versión gráfica más familiar.

723
00:35:45,430 --> 00:35:51,100
A continuación haré eso de nuevo e iré
a http: //, esa dirección IP y presionaré

724
00:35:51,100 --> 00:35:52,270
Enter.

725
00:35:52,270 --> 00:35:54,940
Un montón de cosas volaron, incluso
para la página de inicio de Google,

726
00:35:54,940 --> 00:35:56,290
noten lo que sucedió.

727
00:35:56,290 --> 00:35:57,670
En ese principio, ups,

728
00:35:57,670 --> 00:36:03,580
si desplazo el cursor sobre ella,
veo http: // y luego el número que

729
00:36:03,580 --> 00:36:06,791
ingresé, pero es un 301
porque, ¿cuál fue la respuesta?

730
00:36:06,791 --> 00:36:08,290
Podemos ver estas respuestas.

731
00:36:08,290 --> 00:36:12,250
Haré clic en el código de estado
aquí, o en la fila, ir a Encabezados

732
00:36:12,250 --> 00:36:16,780
y noten aquí, si hacemos un
acercamiento, veremos que Google

733
00:36:16,780 --> 00:36:19,210
respondió con esta ubicación.

734
00:36:19,210 --> 00:36:21,580
Alguien en Google
acaba de decidir, bien.

735
00:36:21,580 --> 00:36:23,350
Descifraron una de nuestras direcciones IP.

736
00:36:23,350 --> 00:36:25,480
Eso es genial, pero no
queremos que vean eso en la URL.

737
00:36:25,480 --> 00:36:26,397
Es malo para nuestra marca.

738
00:36:26,397 --> 00:36:28,188
No queremos que marquen
como favorita una dirección IP

739
00:36:28,188 --> 00:36:29,660
porque podría cambiar más adelante.

740
00:36:29,660 --> 00:36:31,899
Usamos los mismos
mecanismos que antes,

741
00:36:31,899 --> 00:36:34,690
pero así es como podemos hacer
la búsqueda y podemos ver lo mismo

742
00:36:34,690 --> 00:36:36,010
para cualquier cantidad de sitios web.

743
00:36:36,010 --> 00:36:40,772
Continuamos con nslookup de
harvard.edu y recuperamos solo un par.

744
00:36:40,772 --> 00:36:43,730
Si hago lo mismo en Yale,
recuperaré diferentes direcciones IP.

745
00:36:43,730 --> 00:36:45,880
Yale tiene aún más, en
este caso, y por lo tanto este

746
00:36:45,880 --> 00:36:48,740
es cómo averigua la computadora
hacia dónde se enviarán los datos.

747
00:36:48,740 --> 00:36:51,430
¿Qué ocurre
con este sobre?

748
00:36:51,430 --> 00:36:55,780
no son facebook.com, harvard.edu o
yale.edu,

749
00:36:55,780 --> 00:37:01,300
será una dirección
como 1.2.3.4

750
00:37:01,300 --> 00:37:04,510
o cualquiera que sea la dirección IP del
servidor al que estoy tratando de enviar.

751
00:37:04,510 --> 00:37:06,700
Ahora, desde luego,
espero una respuesta del servidor.

752
00:37:06,700 --> 00:37:08,740
Quiero recuperar mi
fuente de noticias o quiero

753
00:37:08,740 --> 00:37:10,670
recuperar la página
principal de Harvard o Yale.

754
00:37:10,670 --> 00:37:13,570
¿Qué más debería
poner en este sobre virtual,

755
00:37:13,570 --> 00:37:14,860
solo intuitivamente?

756
00:37:14,860 --> 00:37:15,360
Sí.

757
00:37:15,360 --> 00:37:16,800
PÚBLICO: ¿Su propia dirección IP?

758
00:37:16,800 --> 00:37:17,536
DAVID: ¿Qué es eso?

759
00:37:17,536 --> 00:37:17,920
PÚBLICO: Su propia dirección IP.

760
00:37:17,920 --> 00:37:19,250
DAVID: Mi propia dirección IP, sí.

761
00:37:19,250 --> 00:37:21,541
Como en el mundo
humano, por si acaso algo

762
00:37:21,541 --> 00:37:26,560
sale mal con la oficina de correos,
pondría mi propia dirección, 5.6.7.8,

763
00:37:26,560 --> 00:37:30,790
y podré eso en el sobre,
por si algo sale mal o, mejor

764
00:37:30,790 --> 00:37:34,210
si algo va bien y están listos
para darme unos 200 OK,

765
00:37:34,210 --> 00:37:37,010
volverían a mí
porque saben de qué

766
00:37:37,010 --> 00:37:39,250
de qué dirección vino esta cosa.

767
00:37:39,250 --> 00:37:42,046
¿Quién es o qué es lo que
hace todo este enrutamiento?

768
00:37:42,046 --> 00:37:44,920
Bien, hay servidores
en Internet que se denominan

769
00:37:44,920 --> 00:37:48,100
enrutadores, también conocidos
como portales, que es un sinónimo,

770
00:37:48,100 --> 00:37:50,620
aquí es como un tipo
de pintura artística de puntos

771
00:37:50,620 --> 00:37:54,070
en todo el mundo, y hay
cientos, miles, decenas de miles

772
00:37:54,070 --> 00:37:54,880
de enrutadores

773
00:37:54,880 --> 00:37:57,820
Lo más probable es que ustedes mismos
en casa, si tuvieran acceso a Internet,

774
00:37:57,820 --> 00:38:00,460
al tener uno de esos
enrutadores, y su propósito en la vida,

775
00:38:00,460 --> 00:38:03,930
de nuevo, es tomar datos
de su hogar y enviarlos a Internet,

776
00:38:03,930 --> 00:38:05,680
y cualquier respuesta
que reciba, regresarla

777
00:38:05,680 --> 00:38:08,560
a la laptop o escritorio
o teléfono apropiado

778
00:38:08,560 --> 00:38:13,010
o dispositivo inteligente
que resulta estar en tu propia casa.

779
00:38:13,010 --> 00:38:14,650
También podemos verlo.

780
00:38:14,650 --> 00:38:18,630
A continuación, en CS50
IDE, intentaré con otro comando.

781
00:38:18,630 --> 00:38:21,630
Continuaré y
haré un rastreo de ruta,

782
00:38:21,630 --> 00:38:25,620
es decir, rastrearé la
ruta a yale.edu desde aquí,

783
00:38:25,620 --> 00:38:27,570
o técnicamente desde el IDE.

784
00:38:27,570 --> 00:38:30,872
Si presiono Enter,
veremos algunas líneas de salida,

785
00:38:30,872 --> 00:38:32,580
y si intentamos esto en
casa, solo nos daremos cuenta

786
00:38:32,580 --> 00:38:36,450
de que configuré, un poco diferente,
mi IDE para simplificar la salida.

787
00:38:36,450 --> 00:38:39,420
Al parecer, existen
cinco pasos entre Cambridge

788
00:38:39,420 --> 00:38:41,935
y New Haven, o técnicamente
entre el IDE y New Haven,

789
00:38:41,935 --> 00:38:43,310
¿Cuáles son cada uno de estos pasos?

790
00:38:43,310 --> 00:38:47,010
Si continuamos esa versión
de la historia, entre Yale y nosotros

791
00:38:47,010 --> 00:38:49,080
al parecer, existen cinco enrutadores.

792
00:38:49,080 --> 00:38:52,860
Hay cinco computadoras que
tienen mucha RAM y CPU enormes

793
00:38:52,860 --> 00:38:54,780
que pueden manejar
mucho tráfico de Internet,

794
00:38:54,780 --> 00:38:58,620
que descifran cómo obtener
mi sobre desde este origen

795
00:38:58,620 --> 00:39:02,840
a este enrutador, a este enrutador,
a este enrutador, al enrutador anónimo,

796
00:39:02,840 --> 00:39:03,400
hacia este.

797
00:39:03,400 --> 00:39:06,150
A veces se configura a los enrutadores
para no responder estas preguntas

798
00:39:06,150 --> 00:39:07,390
de este programa que hace una ruta.

799
00:39:07,390 --> 00:39:10,530
Ellos están al tanto
de sí mismos, y de nosotros

800
00:39:10,530 --> 00:39:13,570
y ven algunos números a la derecha
de cada una de estas direcciones IP.

801
00:39:13,570 --> 00:39:19,776
Adivinen, ¿qué representan
cada uno de estos números?

802
00:39:19,776 --> 00:39:20,680
¿Qué es eso?

803
00:39:20,680 --> 00:39:22,040
No, está bien.

804
00:39:22,040 --> 00:39:23,200
PÚBLICO: ¿Milisegundos?

805
00:39:23,200 --> 00:39:24,616
DAVID: Milisegundos, sí.

806
00:39:24,616 --> 00:39:27,390
¿Qué piensan que
miden los milisegundos?

807
00:39:27,390 --> 00:39:32,430
Hora de ir, o hora de
alcanzar ese enrutador específico.

808
00:39:32,430 --> 00:39:34,050
Entonces podemos inferir,

809
00:39:34,050 --> 00:39:35,730
y este es el tipo de cosa increíble.

810
00:39:35,730 --> 00:39:38,960
Para llevarme a New Haven
toma como dos horas más,

811
00:39:38,960 --> 00:39:42,450
pero para recibir un correo electrónico,
para obtener un sobre con un mensaje

812
00:39:42,450 --> 00:39:49,140
toma como 10.597 milisegundos
para obtener datos de aquí hasta ahí,

813
00:39:49,140 --> 00:39:51,372
y con suerte de regreso,
si es una solicitud de una página.

814
00:39:51,372 --> 00:39:53,080
Hagamos algo
un poco más lejos.

815
00:39:53,080 --> 00:39:56,940
Hagamos como stanford.edu,
rastreando la ruta aquí,

816
00:39:56,940 --> 00:40:00,419
y ya podemos ver que
las cifras son un poco más altas,

817
00:40:00,419 --> 00:40:02,460
y eso tiene sentido
intuitivo que Stanford

818
00:40:02,460 --> 00:40:06,120
está un poco más lejos que
New Haven y tarda otros 41 milisegundos

819
00:40:06,120 --> 00:40:06,960
para llegar.

820
00:40:06,960 --> 00:40:10,590
Si voy más allá y leo como
las noticias de una empresa

821
00:40:10,590 --> 00:40:16,330
como cnn.co.jp, el dominio de nivel
superior para muchos servidores en Japón,

822
00:40:16,330 --> 00:40:20,160
podemos ver un repunte
de cuántos milisegundos se necesitan,

823
00:40:20,160 --> 00:40:22,320
y de hecho,
hay algo curioso aquí.

824
00:40:22,320 --> 00:40:26,850
¿Por qué toma mucho más tiempo
llegar desde el enrutador número tres

825
00:40:26,850 --> 00:40:30,756
al enrutador número cuatro?

826
00:40:30,756 --> 00:40:31,987
PÚBLICO: El océano.

827
00:40:31,987 --> 00:40:33,320
DAVID: El océano, sí.

828
00:40:33,320 --> 00:40:38,790
Hay una gran masa de agua entre la
costa oeste de los EE. UU. y la costa

829
00:40:38,790 --> 00:40:43,020
de Japón, lo que probablemente
explica por qué no entre tres y cuatro,

830
00:40:43,020 --> 00:40:47,416
y todos los enrutadores posteriores están
a muchos milisegundos de distancia.

831
00:40:47,416 --> 00:40:48,540
Entonces estos no son acumulativos.

832
00:40:48,540 --> 00:40:50,559
Medimos de manera
constante de aquí para allá,

833
00:40:50,559 --> 00:40:53,100
de aquí a un poco más lejos,
de aquí a un poco más lejos.

834
00:40:53,100 --> 00:40:55,410
Tiene sentido que una
vez que cruces ese océano,

835
00:40:55,410 --> 00:40:58,920
ese es el tipo de valor
total que veremos,

836
00:40:58,920 --> 00:41:00,150
es realmente fascinante.

837
00:41:00,150 --> 00:41:01,858
Quiero decir, en
todo el mundo hay

838
00:41:01,858 --> 00:41:06,692
hoy en día no solo existen tecnologías
inalámbricas, sino tecnologías de cable

839
00:41:06,692 --> 00:41:08,400
y si tomamos solo
unos segundos, podemos

840
00:41:08,400 --> 00:41:13,740
ver esta visualización de tantos
de los cables transoceánicos que tienen

841
00:41:13,740 --> 00:41:19,110
fueron descargados por grandes barcos
que llevan muchos, muchos bits de una

842
00:41:19,110 --> 00:41:21,090
costa a otra.

843
00:41:21,090 --> 00:41:22,575
[REPRODUCCIÓN DE VIDEO]

844
00:41:22,575 --> 00:41:46,335


845
00:41:46,335 --> 00:41:48,315
[MÚSICA DE FONDO]

846
00:41:48,315 --> 00:42:20,012


847
00:42:20,012 --> 00:42:21,530
[FINALIZA LA REPRODUCCIÓN]

848
00:42:21,530 --> 00:42:26,150
Con todos esos cables capaces
de transmitir datos en todo el mundo,

849
00:42:26,150 --> 00:42:28,390
todavía hay
un problema más.

850
00:42:28,390 --> 00:42:30,370
Incluso si queremos
hacer algo simple como

851
00:42:30,370 --> 00:42:33,490
descargar una imagen de
internet de un gato porque hay

852
00:42:33,490 --> 00:42:35,440
diferentes tipos de servidores por ahí.

853
00:42:35,440 --> 00:42:37,660
Aquí está mi computadora como mi laptop,

854
00:42:37,660 --> 00:42:38,949
que ejecuta Mac OS o Windows.

855
00:42:38,949 --> 00:42:40,990
Hay todos esos servidores en
el centro de datos de Google,

856
00:42:40,990 --> 00:42:43,310
en sus estantes, en los
de Facebook y similares,

857
00:42:43,310 --> 00:42:46,000
y entre todos esos servidores
hay muchos enrutadores,

858
00:42:46,000 --> 00:42:49,240
pero esos servidores
en esos estantes en Google,

859
00:42:49,240 --> 00:42:51,700
en Facebook, incluso
en Harvard y Yale,

860
00:42:51,700 --> 00:42:54,530
son servidores que pueden hacer
muchas cosas porque técnicamente,

861
00:42:54,530 --> 00:42:58,360
a pesar de tiende a hablarse de
los servidores como dispositivos físicos,

862
00:42:58,360 --> 00:43:01,840
un servidor es, como
iniciamos hoy, solo un programa.

863
00:43:01,840 --> 00:43:06,370
Es una pieza de software que
alguien escribió que, cuando se ejecuta,

864
00:43:06,370 --> 00:43:09,700
escucha las solicitudes
en Internet y responde a ellas,

865
00:43:09,700 --> 00:43:14,110
en general genera información, texto,
o ceros y unos, o en algunos casos,

866
00:43:14,110 --> 00:43:14,860
gatos.

867
00:43:14,860 --> 00:43:18,310
Al recibir un
sobre, ¿cómo es

868
00:43:18,310 --> 00:43:23,800
que un servidor sabe si es una solicitud
de una página web, un correo electrónico,

869
00:43:23,800 --> 00:43:27,610
un mensaje de chat, un mensaje de
voz o cualquier cantidad de otras cosas?

870
00:43:27,610 --> 00:43:31,510
Resulta que, necesitamos una pieza más
de información, al menos, en este sobre

871
00:43:31,510 --> 00:43:33,700
que en el mundo
se ha estandarizado

872
00:43:33,700 --> 00:43:37,900
por medio de otro protocolo llamado TCP,
Protocolo de control de transmisión, que

873
00:43:37,900 --> 00:43:40,270
necesitamos, al menos,
otra número de estos sobres,

874
00:43:40,270 --> 00:43:42,590
y ese número
corresponde al tipo de servicio

875
00:43:42,590 --> 00:43:44,590
al que tratamos
de acceder, o al tipo de datos

876
00:43:44,590 --> 00:43:46,570
que tratamos de enviar o recibir.

877
00:43:46,570 --> 00:43:50,052
Por ejemplo, 22 es para
algo llamado SSH, Secure Shell.

878
00:43:50,052 --> 00:43:53,260
Casi todos los directores de CS lo usan,
pero en el mundo la mayoría de la gente

879
00:43:53,260 --> 00:43:55,430
no porque es 
completamente una línea de comando

880
00:43:55,430 --> 00:43:57,970
y nos permite conectarnos de
manera segura a algún servidor remoto

881
00:43:57,970 --> 00:44:02,440
sin usar algo como un navegador, pero
todos en general usamos navegadores

882
00:44:02,440 --> 00:44:07,330
y HTTP todo este tiempo
tuvo un número único asociado

883
00:44:07,330 --> 00:44:08,800
con esas solicitudes.

884
00:44:08,800 --> 00:44:12,760
80 es el número y si visitamos
alguna URL que inicie con https,

885
00:44:12,760 --> 00:44:15,380
tiene el número
especial, 443,

886
00:44:15,380 --> 00:44:19,810
que hace años la gente decidió identificar
de manera única codificada en la web

887
00:44:19,810 --> 00:44:21,730
sus solicitudes de tráfico y respuestas.

888
00:44:21,730 --> 00:44:26,900
Para correos se usa 587, o Protocolo
simple de transferencia de correo.

889
00:44:26,900 --> 00:44:29,270
Disculpen, 53 se usa para DNS.

890
00:44:29,270 --> 00:44:31,270
Si alguna vez enviamos un
mensaje a un servidor que diga

891
00:44:31,270 --> 00:44:33,550
¿Cuál es la dirección
IP de google.com?

892
00:44:33,550 --> 00:44:38,530
Usamos el número 53 para identificar
cualquier máquina o software que

893
00:44:38,530 --> 00:44:42,130
responda ese tipo de
pregunta, y podemos ver esto.

894
00:44:42,130 --> 00:44:53,980
Si vuelvo a mi IDE y hago
curl -I https://www.harvard.edu,

895
00:44:53,980 --> 00:44:56,950
esto, por supuesto,
antes funcionó y fue 200 OK,

896
00:44:56,950 --> 00:45:01,540
también funcionará
si digo con más precisión esta

897
00:45:01,540 --> 00:45:06,160
solicitud al puerto TCP, o número 80 y,

898
00:45:06,160 --> 00:45:07,510
diablos.

899
00:45:07,510 --> 00:45:12,170
Oh, está mal porque cometí
un error pedagógico fascinante.

900
00:45:12,170 --> 00:45:14,732
¿Qué hice mal?

901
00:45:14,732 --> 00:45:15,676
PÚBLICO: Https.

902
00:45:15,676 --> 00:45:18,259
DAVID: Sí, aquí arruiné
mis números.

903
00:45:18,259 --> 00:45:23,320
Les dije https, pero quise decir
http porque usé el puerto 80

904
00:45:23,320 --> 00:45:27,790
o, por el contrario, si quiero hablar
con el puerto seguro que se conoce,

905
00:45:27,790 --> 00:45:31,390
quiero decir 443,
y ese, de hecho, funciona,

906
00:45:31,390 --> 00:45:33,250
puedo hacerlo otra vez incluso en Chrome.

907
00:45:33,250 --> 00:45:41,020
Si en mi navegador
escribo a http://yale.edu/80

908
00:45:41,020 --> 00:45:43,520
ocurren las redirecciones,
eso también funcionará.

909
00:45:43,520 --> 00:45:46,900
Son navegadores que mantienen nuestras
mentes enfocadas en el sitio web que

910
00:45:46,900 --> 00:45:50,050
intentamos visitar y no distraernos
en detalles técnicos como: 80

911
00:45:50,050 --> 00:45:53,830
o diagonales,
inclusive en http misma,

912
00:45:53,830 --> 00:45:55,450
solo esconde eso de la barra de URL.

913
00:45:55,450 --> 00:45:56,180
Todo está ahí.

914
00:45:56,180 --> 00:45:58,690
Todo sucede, pero los humanos
nos sentimos un poco más cómodos

915
00:45:58,690 --> 00:46:01,390
con Internet con el paso de los
años, Chrome y otros navegadores

916
00:46:01,390 --> 00:46:05,020
comienzan a ocultar algunos detalles
de implementación de bajo nivel.

917
00:46:05,020 --> 00:46:10,060
Eso significa que, cuando quiero
enviar una solicitud a un servidor web,

918
00:46:10,060 --> 00:46:14,150
debo escribir:
80 en el sobre

919
00:46:14,150 --> 00:46:16,660
para dejar claro que eso
irá a un servidor web que emite

920
00:46:16,660 --> 00:46:19,630
en el puerto 80 o tal
vez 443, y luego, ¿saben qué?

921
00:46:19,630 --> 00:46:22,120
Resulta que no nos detendremos
demasiado en los detalles,

922
00:46:22,120 --> 00:46:26,850
incluso mi Mac o su PC tienen su número
de puerto para todas estas solicitudes,

923
00:46:26,850 --> 00:46:27,350
¿verdad?

924
00:46:27,350 --> 00:46:31,330
Sería bastante molesto si solo
pudiéramos visitar un sitio web a la vez

925
00:46:31,330 --> 00:46:34,360
o que usáramos Gmail
o Skype, pero no ambos

926
00:46:34,360 --> 00:46:37,840
al mismo tiempo, o Facebook
Messenger o Google Chat, pero solo uno

927
00:46:37,840 --> 00:46:38,624
al mismo tiempo.

928
00:46:38,624 --> 00:46:40,540
Eso sería bastante
restrictivo, en especial cuando

929
00:46:40,540 --> 00:46:42,260
tenemos todo este poder computacional.

930
00:46:42,260 --> 00:46:45,210
En el caso de que
nuestra propia computadora,

931
00:46:45,210 --> 00:46:47,350
cada vez que envía
una solicitud por Internet,

932
00:46:47,350 --> 00:46:51,940
elige un número aleatorio o pseudoaleatorio
que identifica de manera única

933
00:46:51,940 --> 00:46:55,510
la pieza de software en nuestra
computadora que espera la respuesta.

934
00:46:55,510 --> 00:46:57,010
Puede que este no sea el puerto 80.

935
00:46:57,010 --> 00:47:00,820
Este será un número
más grande como 1025,

936
00:47:00,820 --> 00:47:04,690
o algún valor bastante
grande, de hasta 65,000

937
00:47:04,690 --> 00:47:08,917
o 32,000, que identifican de manera
única el puerto en mi computadora.

938
00:47:08,917 --> 00:47:11,500
Así es como nuestra computadora
puede hacer varias cosas a la vez,

939
00:47:11,500 --> 00:47:15,010
una vez que se obtiene la
respuesta, estos valores se desocupan,

940
00:47:15,010 --> 00:47:16,330
pero hay una pieza más.

941
00:47:16,330 --> 00:47:20,380
Los gatos pueden ser de muy
alta calidad y los videos, sin duda,

942
00:47:20,380 --> 00:47:22,230
ocupan una gran cantidad de datos.

943
00:47:22,230 --> 00:47:24,550
Los videos de Netflix, y cualquier
transmisión de video, ocupan

944
00:47:24,550 --> 00:47:26,350
una gran cantidad
de información y

945
00:47:26,350 --> 00:47:28,960
sería bastante molesto para
nuestros vecinos si alguna vez

946
00:47:28,960 --> 00:47:30,940
viéramos una película
en Netflix, y tuviéramos

947
00:47:30,940 --> 00:47:33,970
que hacer, al ver la
película, que un vecino

948
00:47:33,970 --> 00:47:38,140
también viera un video
en su computadora.

949
00:47:38,140 --> 00:47:44,920
Lo que las computadoras
también hacen gracias a IP

950
00:47:44,920 --> 00:47:49,780
y TCP es que, al usarlas en 
conjunto, ofrecen una función más.

951
00:47:49,780 --> 00:47:52,850
Si quiero descargar
una imagen de un gato,

952
00:47:52,850 --> 00:47:55,510
y tenemos una bonita
versión impresa aquí, estoy

953
00:47:55,510 --> 00:47:59,170
seguramente no conseguiré
el gato completo en un sobre.

954
00:47:59,170 --> 00:48:01,795
Este gato, archivo
de video o lo que sea

955
00:48:01,795 --> 00:48:06,310
se dividirá en
algunas piezas diferentes.

956
00:48:06,310 --> 00:48:14,290
Y este mensaje podría cortarse
o fragmentarse en cuatro partes.

957
00:48:14,290 --> 00:48:18,490
Cada una de esas cuatro piezas,
podría ir en cada uno de estos sobres

958
00:48:18,490 --> 00:48:24,130
aquí, aquí, y luego aquí
con el tercero y cuarto,

959
00:48:24,130 --> 00:48:26,650
y lo que es agradable
acerca de TCPIP es que

960
00:48:26,650 --> 00:48:28,540
nos brinda al menos dos funciones.

961
00:48:28,540 --> 00:48:33,610
Uno, IP garantiza que cada computadora
en Internet que hable este protocolo

962
00:48:33,610 --> 00:48:34,390
tenga una dirección.

963
00:48:34,390 --> 00:48:38,120
IP controla la obtención
de los datos de algún destino.

964
00:48:38,120 --> 00:48:41,680
TCP, la otra mitad
de esto, ofrece la garantía de

965
00:48:41,680 --> 00:48:45,370
entrega de alta probabilidad, y
que los datos realmente llegan ahí.

966
00:48:45,370 --> 00:48:48,287
Porque como pudimos deducir,
incluso de la animación de todos

967
00:48:48,287 --> 00:48:51,370
los cables transatlánticos y todas
las interconexiones entre enrutadores,

968
00:48:51,370 --> 00:48:52,810
las cosas pueden salir mal, ¿cierto?

969
00:48:52,810 --> 00:48:54,650
Los enrutadores
pueden sobrecargarse.

970
00:48:54,650 --> 00:48:57,430
Sus búferes pueden
desbordarse, de tal manera que

971
00:48:57,430 --> 00:49:00,280
no puede manejar todo
el tráfico que entra, y de hecho,

972
00:49:00,280 --> 00:49:03,190
si intentamos ver algún
episodio de Game of Thrones en HBO

973
00:49:03,190 --> 00:49:06,490
y no podemos acceder en algún momento o
[INAUDIBLE] alguna herramienta como esa.

974
00:49:06,490 --> 00:49:08,450
Si están sobrecargados,
¿qué significa eso?

975
00:49:08,450 --> 00:49:12,280
Significa que el servidor, o los
enrutadores entre nosotros y el servidor,

976
00:49:12,280 --> 00:49:15,160
reciben tantos mugrosos sobres
que no pueden mantener el ritmo

977
00:49:15,160 --> 00:49:19,120
y no pueden manejarlos
todos a la vez, y a veces los paquetes,

978
00:49:19,120 --> 00:49:22,810
por así decirlo, desaparecen,
tanto física como digitalmente,

979
00:49:22,810 --> 00:49:24,410
y esto significa que se pierde un paquete.

980
00:49:24,410 --> 00:49:27,820
Lo bueno de Internet es
que cuando mi computadora

981
00:49:27,820 --> 00:49:31,240
habla con el enrutador más cercano 
de Harvard que tendría buenas antenas

982
00:49:31,240 --> 00:49:35,980
en una sala o en un punto de acceso,
yo podría enviar un paquete aquí y aquí

983
00:49:35,980 --> 00:49:38,710
y devolveríamos
todo esto si pudiéramos

984
00:49:38,710 --> 00:49:41,566
pero estos paquetes, como
pueden ver, no necesariamente

985
00:49:41,566 --> 00:49:43,690
necesitan viajar por el
mismo [? camino?] porque, ¿cuál

986
00:49:43,690 --> 00:49:45,190
es tu nombre?, en la segunda fila.

987
00:49:45,190 --> 00:49:45,490
PÚBLICO: Monsi.

988
00:49:45,490 --> 00:49:45,850
DAVID: Monsi.

989
00:49:45,850 --> 00:49:47,266
Monsi se está un poco ocupada.

990
00:49:47,266 --> 00:49:49,914
Entonces Kara, si pudieras
encaminar a otra persona.

991
00:49:49,914 --> 00:49:52,330
Este es el efecto
que ocurre en Internet.

992
00:49:52,330 --> 00:49:54,640
Si un enrutador, como
Monsi, está un poco ocupada

993
00:49:54,640 --> 00:49:57,790
y su atención está en otra parte o tiene
demasiados paquetes con los que lidiar,

994
00:49:57,790 --> 00:50:00,070
ella ni siquiera
desaparecerán, pero tal vez

995
00:50:00,070 --> 00:50:02,650
su camino será
redirigido al de ella,

996
00:50:02,650 --> 00:50:06,299
y eso es lo bueno de tener esta
red encriptada en Internet.

997
00:50:06,299 --> 00:50:08,590
Desafortunadamente, uno de
esos paquetes puede desaparecer

998
00:50:08,590 --> 00:50:10,173
y de hecho este es un ejemplo perfecto.

999
00:50:10,173 --> 00:50:12,900
Si quieren lo soltamos, lo soltamos.

1000
00:50:12,900 --> 00:50:14,760
Oh-oh, ¡un paquete cayó!

1001
00:50:14,760 --> 00:50:17,560
Lo que TCP hace
por nosotros es lo siguiente.

1002
00:50:17,560 --> 00:50:22,592
Una vez que esos sobres alcanzan
con suerte a una persona específica,

1003
00:50:22,592 --> 00:50:23,800
OK, son los afortunados ganadores.

1004
00:50:23,800 --> 00:50:26,200
Quien quiera, quiere ... ¿cuántos tenemos?

1005
00:50:26,200 --> 00:50:26,730
¿Dos allí?

1006
00:50:26,730 --> 00:50:28,300
¿A dónde fue el tercero?

1007
00:50:28,300 --> 00:50:28,980
Está bien.

1008
00:50:28,980 --> 00:50:31,600
TCP puede manejar
múltiples paquetes que se pierden.

1009
00:50:31,600 --> 00:50:33,240
PÚBLICO: Está por allí.

1010
00:50:33,240 --> 00:50:36,490
DAVID: Ah, entonces los paquetes a
veces tampoco toman el camino más corto

1011
00:50:36,490 --> 00:50:37,730
en el Internet.

1012
00:50:37,730 --> 00:50:38,821
¿Qué pudo ocurrir?

1013
00:50:38,821 --> 00:50:40,570
Asumamos por
el bien de la discusión

1014
00:50:40,570 --> 00:50:44,320
que esos paquetes llegaron a,
por lo menos, alguien de nuestro público

1015
00:50:44,320 --> 00:50:44,980
aquí.

1016
00:50:44,980 --> 00:50:46,990
Él o ella, al recibirlos, también

1017
00:50:46,990 --> 00:50:50,620
vieron no solo la dirección de
origen y la dirección de destino.

1018
00:50:50,620 --> 00:50:54,040
También habría alguna notación, como
una línea de memo en el sobre que dice

1019
00:50:54,040 --> 00:50:58,870
1 de 4, 2 de 4, 3 de 4, 4 de 4, para
que el destinatario pueda inferir

1020
00:50:58,870 --> 00:51:03,070
de esa pequeña pista
si recibieron o no los 4 o solo,

1021
00:51:03,070 --> 00:51:06,070
como en este caso, un
subconjunto de los mismos, y en ese caso,

1022
00:51:06,070 --> 00:51:09,440
suponiendo que la
computadora habla TCP, solo diría,

1023
00:51:09,440 --> 00:51:13,280
hola David, reenvíame el paquete
número 1 o el paquete número 3

1024
00:51:13,280 --> 00:51:16,480
o cualquiera que se haya perdido.

1025
00:51:16,480 --> 00:51:19,330
Todo esto sucede
a velocidades vertiginosas.

1026
00:51:19,330 --> 00:51:22,780
10 milisegundos para hacer
todo de ida y vuelta a New Haven,

1027
00:51:22,780 --> 00:51:25,537
incluso así de rápido
en el campus, pero esos

1028
00:51:25,537 --> 00:51:27,370
son los principios
básicos y los componentes básicos

1029
00:51:27,370 --> 00:51:29,845
que obtienen
nuestros datos de un lugar a otro.

1030
00:51:29,845 --> 00:51:31,720
Algo interesante sucede

1031
00:51:31,720 --> 00:51:34,810
cuando profundizamos en
este sobre y miramos los contenidos.

1032
00:51:34,810 --> 00:51:38,770
No solo el gato, como en este
caso, sino el lenguaje HTML y algo más

1033
00:51:38,770 --> 00:51:40,990
llamado CSS, que
usaremos en poco tiempo, pero pensé

1034
00:51:40,990 --> 00:51:43,739
podría ser divertido, especialmente
en los talones de nuestra prueba forense,

1035
00:51:43,739 --> 00:51:47,320
echemos un vistazo a qué
tipo de Hollywood presuntuoso

1036
00:51:47,320 --> 00:51:50,080
tiende a ser cuando nos
presenta humanos con detalles técnicos

1037
00:51:50,080 --> 00:51:53,500
que ahora quizás
tengamos un mejor ojo, además

1038
00:51:53,500 --> 00:51:56,514
de la antigua línea de "mejorar".

1039
00:51:56,514 --> 00:51:57,430
[REPRODUCCIÓN DE VIDEO]

1040
00:51:57,430 --> 00:52:00,337
- Es una dirección IPP4 de 32 bits.

1041
00:52:00,337 --> 00:52:01,170
- ¿IP como en internet?

1042
00:52:01,170 --> 00:52:02,160
- Red privada.

1043
00:52:02,160 --> 00:52:03,610
Es red privada.

1044
00:52:03,610 --> 00:52:09,993


1045
00:52:09,993 --> 00:52:11,466
[RISAS DE ESTUDIANTES]

1046
00:52:11,466 --> 00:52:16,376


1047
00:52:16,376 --> 00:52:19,140
- Ella es tan increíble.

1048
00:52:19,140 --> 00:52:20,960
- Oh, Charlie.

1049
00:52:20,960 --> 00:52:22,130
- Es una dirección espejo IPP de bits.

1050
00:52:22,130 --> 00:52:26,527
Podemos ver lo
que hace en tiempo real.

1051
00:52:26,527 --> 00:52:27,110
[FINALIZA LA REPRODUCCIÓN]

1052
00:52:27,110 --> 00:52:28,970
DAVID: OK, lo mantendremos
en esta pantalla

1053
00:52:28,970 --> 00:52:31,790
porque uno, o algunos de ustedes
se rieron cuando vieron el IP falso

1054
00:52:31,790 --> 00:52:33,987
porque el número fue qué?

1055
00:52:33,987 --> 00:52:34,570
PÚBLICO: 275.

1056
00:52:34,570 --> 00:52:36,901
DAVID: 275, es
demasiado alto y eso

1057
00:52:36,901 --> 00:52:39,650
podríamos perdonarlo, porque
no queremos personas al azar que pausen

1058
00:52:39,650 --> 00:52:42,441
sus videos en Internet y
luego intenten hackear u obtener acceso

1059
00:52:42,441 --> 00:52:45,470
a esa URL, aún es más
divertido cuando se describe al hacker

1060
00:52:45,470 --> 00:52:47,769
que hace esto en la
pantalla, como parte de su ataque.

1061
00:52:47,769 --> 00:52:50,310
Es como el código fuente
en un lenguaje llamado Objective-C

1062
00:52:50,310 --> 00:52:52,820
para algún tipo de
programa de dibujo, como se sugiere

1063
00:52:52,820 --> 00:52:56,332
mediante el uso de crayones
en el código como una variable.

1064
00:52:56,332 --> 00:52:59,540
Hagamos una pausa, y cuando regresemos
en cinco minutos, echaremos un vistazo

1065
00:52:59,540 --> 00:53:03,486
al mismo HTML.

1066
00:53:03,486 --> 00:53:08,170
Muy bien, regresamos, estamos
a punto de aprender un nuevo lenguaje.

1067
00:53:08,170 --> 00:53:11,030
Aunque, esto podría
parecer demasiado en una hora,

1068
00:53:11,030 --> 00:53:12,380
este es un lenguaje de marcado.

1069
00:53:12,380 --> 00:53:14,090
Este no es un lenguaje
de programación, lo que

1070
00:53:14,090 --> 00:53:15,770
significa que no veremos bucles,

1071
00:53:15,770 --> 00:53:17,270
no veremos funciones,

1072
00:53:17,270 --> 00:53:20,240
no veremos condiciones,
ni ningún tipo de lógica

1073
00:53:20,240 --> 00:53:22,910
que incorporamos en C,
y en Scratch y, finalmente en

1074
00:53:22,910 --> 00:53:24,230
Python y JavaScript.

1075
00:53:24,230 --> 00:53:27,290
En cambio, veremos lo
que llamamos etiquetas, piezas

1076
00:53:27,290 --> 00:53:30,950
de sintaxis similar al inglés,
que solo le dicen al navegador qué hacer

1077
00:53:30,950 --> 00:53:32,510
y qué dejar de hacer.

1078
00:53:32,510 --> 00:53:35,870
Veremos las etiquetas que dicen:
inicia haz que este texto se centre.

1079
00:53:35,870 --> 00:53:37,370
Detén haz que este texto se centre.

1080
00:53:37,370 --> 00:53:38,510
Inicia haz que el texto sea negrita.

1081
00:53:38,510 --> 00:53:39,830
Detén haz que este texto sea negrita.

1082
00:53:39,830 --> 00:53:41,750
Este tipo de instrucciones
muy deliberadas

1083
00:53:41,750 --> 00:53:44,300
que expresaremos al
usar algo parecido a un código,

1084
00:53:44,300 --> 00:53:46,640
pero que no nos da control lógico.

1085
00:53:46,640 --> 00:53:49,430
Como tal, existe un lenguaje
bastante pequeño frente a nosotros

1086
00:53:49,430 --> 00:53:52,670
y mucho de lo que haremos
cuando aprendamos HTML es solo

1087
00:53:52,670 --> 00:53:55,730
verificar una referencia en línea, o un
ejemplo en línea, o mirar el código

1088
00:53:55,730 --> 00:53:59,350
fuente de páginas web reales,
para descubrir cómo se hacen estas cosas

1089
00:53:59,350 --> 00:54:01,940
y hoy, nos enfocaremos
en los fundamentos.

1090
00:54:01,940 --> 00:54:04,640
Tal vez, esta es una de las
páginas web más simples que

1091
00:54:04,640 --> 00:54:06,680
podremos escribir
en un lenguaje llamado HTML.

1092
00:54:06,680 --> 00:54:08,120
Es un lenguaje basado en texto.

1093
00:54:08,120 --> 00:54:10,400
Todas las etiquetas se
asemejan a algunas palabras en inglés

1094
00:54:10,400 --> 00:54:13,430
y hay un patrón para el tipo
de cosas que podremos escribir.

1095
00:54:13,430 --> 00:54:16,280
En primer lugar, si utilizamos
la última versión de HTML, que

1096
00:54:16,280 --> 00:54:18,710
da la casualidad que es la versión 5,
que ha estado aquí bastante tiempo,

1097
00:54:18,710 --> 00:54:22,800
iniciaremos cada página web con este
conjuro misterioso en la parte superior

1098
00:54:22,800 --> 00:54:23,300
aquí.

1099
00:54:23,300 --> 00:54:27,485
[!DOCTYPE html]

1100
00:54:27,485 --> 00:54:28,610
o como se le llaman esas cosas.

1101
00:54:28,610 --> 00:54:31,485
corchetes cuadrados, es posible que no
tuvieron muchas ocasiones para escribirlos

1102
00:54:31,485 --> 00:54:33,490
en su teclado, una vez
que inicien pronto lo harán.

1103
00:54:33,490 --> 00:54:36,380
Después de eso, inician un patrón.

1104
00:54:36,380 --> 00:54:41,630
Inicia con <html>, recorremos el camino,
y al fondo será lo opuesto </html>

1105
00:54:41,630 --> 00:54:42,350
de esa etiqueta.

1106
00:54:42,350 --> 00:54:46,070
Esta es una etiqueta de inicio, esta es
una etiqueta final, o esta es de apertura,

1107
00:54:46,070 --> 00:54:50,690
esta es una etiqueta de cierre,
que difiere con esta diagonal que está

1108
00:54:50,690 --> 00:54:51,950
dentro de la etiqueta.

1109
00:54:51,950 --> 00:54:54,620
Esto dice, hola navegador,
ahí viene una página web.

1110
00:54:54,620 --> 00:54:57,110
Esto dice, hola navegador,
eso es todo para la página web.

1111
00:54:57,110 --> 00:54:59,810
De nuevo, este tipo
de mentalidad de inicio y fin.

1112
00:54:59,810 --> 00:55:05,030
Mientras tanto, dentro de la página
web, se denota por la etiqueta de HTML,

1113
00:55:05,030 --> 00:55:07,910
que existen dos partes,
un titular y un cuerpo.

1114
00:55:07,910 --> 00:55:10,300
El titular de una página web
tiende a contener muy poco.

1115
00:55:10,300 --> 00:55:12,530
En general, es la
barra de título en la pestaña

1116
00:55:12,530 --> 00:55:14,540
que los humanos
vemos al visitar un sitio web,

1117
00:55:14,540 --> 00:55:17,720
y el cuerpo que es
como el 95% de los contenidos

1118
00:55:17,720 --> 00:55:20,570
de la página, la ventana
gráfica o la región rectangular

1119
00:55:20,570 --> 00:55:22,160
que abarca el contenido.

1120
00:55:22,160 --> 00:55:23,330
¿Cuál es ese elemento?

1121
00:55:23,330 --> 00:55:25,790
En el titular
tenemos un título que

1122
00:55:25,790 --> 00:55:28,190
será "hola, título"
solo porque sí y luego

1123
00:55:28,190 --> 00:55:30,380
en el cuerpo de la
página web, esta página web,

1124
00:55:30,380 --> 00:55:32,550
será "hola, cuerpo",

1125
00:55:32,550 --> 00:55:33,080
eso es todo.

1126
00:55:33,080 --> 00:55:34,040
Eso es HTML.

1127
00:55:34,040 --> 00:55:36,600
Si guardamos este texto en un
archivo, y lo abrimos en un navegador,

1128
00:55:36,600 --> 00:55:40,670
veremos una página web patética
que dice hello title y hello body,

1129
00:55:40,670 --> 00:55:44,210
pero esa es una página web que
usa las denominadas etiquetas de HTML.

1130
00:55:44,210 --> 00:55:46,077
Cualquier cosa dentro de esos
corchetes cuadrados son etiquetas.

1131
00:55:46,077 --> 00:55:48,410
Puedo ver esto bastante
claro incluso en mi Mac

1132
00:55:48,410 --> 00:55:50,090
y también pueden
hacer esto en su PC.

1133
00:55:50,090 --> 00:55:52,730
Abrí TextEdit y lo configuré
para que sea más sencillo que

1134
00:55:52,730 --> 00:55:55,410
el predeterminado, sé que
hice una pequeña cosa por adelantado,

1135
00:55:55,410 --> 00:55:58,535
podríamos usar notepad en Windows o
cualquier otro número de otros programas,

1136
00:55:58,535 --> 00:56:01,730
incluso Microsoft Word, si lo guardamos
de la manera correcta, o Google Docs,

1137
00:56:01,730 --> 00:56:06,230
a continuación recrearé
esto como <!DOCTYPE html>,

1138
00:56:06,230 --> 00:56:08,335
<html>, y solo para recordar
las cosas que hay que hacer,

1139
00:56:08,335 --> 00:56:11,210
Tendré que continuar
con el inicio y el final

1140
00:56:11,210 --> 00:56:13,460
pensar y luego profundizar.

1141
00:56:13,460 --> 00:56:17,750
Proseguiré con <head>
y con </head> aquí,

1142
00:56:17,750 --> 00:56:20,720
hago una sangría y por si acaso, 
una, dos, tres, cuatro sangrías,

1143
00:56:20,720 --> 00:56:23,300
siempre y cuando
seamos consistentes, el navegador

1144
00:56:23,300 --> 00:56:25,760
estará perfectamente feliz, como nosotros.

1145
00:56:25,760 --> 00:56:35,390
<title>hello, title</title>
después haré
<body>
</body>

1146
00:56:35,390 --> 00:56:38,479
y entonces: hello, body.

1147
00:56:38,479 --> 00:56:39,020
Eso es todo.

1148
00:56:39,020 --> 00:56:41,145
Acabo de escribir
exactamente lo mismo que antes.

1149
00:56:41,145 --> 00:56:44,600
A continuación guardaré esto
no como no hello.txt, o sin duda

1150
00:56:44,600 --> 00:56:48,200
no como hello.c,
por convención será hello.html.

1151
00:56:48,200 --> 00:56:49,160
Presionaré Save.

1152
00:56:49,160 --> 00:56:52,760
Mac OS me advierte que esto
es texto, no algo llamado HTML,

1153
00:56:52,760 --> 00:56:55,490
sé lo que hago
y le diré que use HTML,

1154
00:56:55,490 --> 00:57:00,690
ahora tengo un archivo llamado
hello.html, si voy a mi escritorio, aquí

1155
00:57:00,690 --> 00:57:01,350
está.

1156
00:57:01,350 --> 00:57:05,340
Si hago doble clic en él,
es esa página web bastante simple

1157
00:57:05,340 --> 00:57:07,400
si revelo la
pestaña, ahí está.

1158
00:57:07,400 --> 00:57:12,330
Hello, title en la pestaña superior de la
página, y una vez que me deshago de eso

1159
00:57:12,330 --> 00:57:14,330
veo el cuerpo otra vez.

1160
00:57:14,330 --> 00:57:17,420
Eso es HTML, al menos, en
términos de su estructura básica,

1161
00:57:17,420 --> 00:57:21,030
pero hay algunas otras funciones
que también podemos aprovechar,

1162
00:57:21,030 --> 00:57:22,730
a continuación descifraremos esto.

1163
00:57:22,730 --> 00:57:25,490
Noten, en primer
lugar, que existe esta simetría.

1164
00:57:25,490 --> 00:57:29,510
Lo que abre y lo que casi siempre
cierra, se encuentra en el orden opuesto.

1165
00:57:29,510 --> 00:57:32,010
El titular aquí,
el título aquí, y luego

1166
00:57:32,010 --> 00:57:34,722
seguido por el cuerpo,
y el contenido en el mismo,

1167
00:57:34,722 --> 00:57:36,930
debido a que existe
esta estructura, podemos

1168
00:57:36,930 --> 00:57:40,350
pensar acerca de esto, en
relación con las últimas dos semanas

1169
00:57:40,350 --> 00:57:42,180
cuando hablamos de estructuras de datos

1170
00:57:42,180 --> 00:57:45,420
Yo sostendría que
este HTML de la izquierda es

1171
00:57:45,420 --> 00:57:48,027
un algo de equivalente
a este árbol a la derecha,

1172
00:57:48,027 --> 00:57:50,610
no pasamos mucho
tiempo hablando de árboles,

1173
00:57:50,610 --> 00:57:52,984
e incluso los hicimos
cuando usamos razones algorítmicas

1174
00:57:52,984 --> 00:57:55,920
como un árbol de búsqueda binaria que
busca datos de manera bastante eficiente,

1175
00:57:55,920 --> 00:57:58,590
pero si lo pensamos,
aquí está el documento que

1176
00:57:58,590 --> 00:58:01,050
dibujé con esta forma
de alguna manera arbitraria

1177
00:58:01,050 --> 00:58:04,230
y tiene un hijo, como
la página entera que dibuje,

1178
00:58:04,230 --> 00:58:05,820
que es la etiqueta HTML.

1179
00:58:05,820 --> 00:58:09,345
La etiqueta HTML tiene dos hijos,
por así decirlo, para pedir prestado

1180
00:58:09,345 --> 00:58:12,270
de nuestro lenguaje
las estructuras de datos.

1181
00:58:12,270 --> 00:58:14,550
El titular y el cuerpo
de izquierda a derecha.

1182
00:58:14,550 --> 00:58:17,729
El titular tiene un niño llamado título,
y el título tiene un hijo de algún tipo,

1183
00:58:17,729 --> 00:58:19,020
a pesar de eso, es solo texto sin formato.

1184
00:58:19,020 --> 00:58:21,450
No es otra etiqueta
con corchetes cuadrados,

1185
00:58:21,450 --> 00:58:25,260
el cuerpo tiene su propio
contenido aquí, hello, body.

1186
00:58:25,260 --> 00:58:29,400
Esa jerarquía y la sangría deliberada,
que está ahí solo para nosotros

1187
00:58:29,400 --> 00:58:32,220
los humanos, el navegador
no se preocupa por el espacio en blanco,

1188
00:58:32,220 --> 00:58:34,950
se presta a una
implementación en la memoria,

1189
00:58:34,950 --> 00:58:38,820
y, en pocas palabras, cuando
nuestro navegador recibe un sobre,

1190
00:58:38,820 --> 00:58:42,270
dentro de los que no son
los titulares HTTP, fuera de los que

1191
00:58:42,270 --> 00:58:45,170
no son la dirección
IP y el puerto TCP,

1192
00:58:45,170 --> 00:58:49,920
dentro del cual hay un
archivo de texto que contiene HTML,

1193
00:58:49,920 --> 00:58:53,280
todo lo que el navegador
carga ese archivo en la memoria,

1194
00:58:53,280 --> 00:58:56,610
lo lee de arriba a abajo, de
izquierda a derecha y en esencia compila

1195
00:58:56,610 --> 00:59:00,630
una estructura de árbol en la
memoria para que sepa cómo representarla

1196
00:59:00,630 --> 00:59:02,820
por debajo del agua, por así decirlo.

1197
00:59:02,820 --> 00:59:06,060
De hecho, hemos
visto HTML a nuestro alrededor

1198
00:59:06,060 --> 00:59:08,940
incluso si nunca hemos mirado
por debajo del agua, como decimos.

1199
00:59:08,940 --> 00:59:11,340
De hecho, si voy a
me gusta harvard.edu y

1200
00:59:11,340 --> 00:59:15,125
las redirecciones ocurren de la manera
habitual, inspeccionaré la página.

1201
00:59:15,125 --> 00:59:17,250
Esta es otra manera en
Chrome, y en otros navegadores

1202
00:59:17,250 --> 00:59:18,660
para tener a las
herramientas de desarrollador.

1203
00:59:18,660 --> 00:59:22,710
Podemos hacer clic o clic derecho en la
página web y seleccionar Inspeccionar,

1204
00:59:22,710 --> 00:59:24,330
eso despliega su misma pestaña.

1205
00:59:24,330 --> 00:59:29,130
Antes, usamos el panel
Network, pero si hago clic en Elements

1206
00:59:29,130 --> 00:59:33,784
podemos ver todo el HTML
que compone la página de Harvard,

1207
00:59:33,784 --> 00:59:34,950
y se ve hermoso.

1208
00:59:34,950 --> 00:59:36,240
Está muy bien codificado por colores.

1209
00:59:36,240 --> 00:59:37,360
Tiene una sangría muy bonita.

1210
00:59:37,360 --> 00:59:40,380
Puedo sumergirme más
profundo con todas estas flechas,

1211
00:59:40,380 --> 00:59:42,330
es posible que no fue así
como lo hicieron los humanos

1212
00:59:42,330 --> 00:59:46,480
porque si hago clic derecho o clic en
Control y selecciono View Page Source,

1213
00:59:46,480 --> 00:59:48,480
también es posible hacerlo
en cualquier navegador,

1214
00:59:48,480 --> 00:59:52,170
aquí está el desastre que
devolvió el servidor de Harvard.

1215
00:59:52,170 --> 00:59:54,810
Esto es HTML,
y Dios mío, es mucho.

1216
00:59:54,810 --> 00:59:59,160
No veo ninguna sangría,
para style0 aquí, pero está bien

1217
00:59:59,160 --> 01:00:00,630
porque es un navegador que lo lee.

1218
01:00:00,630 --> 01:00:03,660
En este caso no es humano.
De manera similar,

1219
01:00:03,660 --> 01:00:08,970
si visitamos algo como yale.edu,
seguimos adelante y abrimos su página

1220
01:00:08,970 --> 01:00:13,110
fuente, será
abrumadora y mucho de eso,

1221
01:00:13,110 --> 01:00:15,979
pero podemos estar seguros de que,
aunque estas páginas web se vean

1222
01:00:15,979 --> 01:00:19,020
sofisticadas, como Dios mío,
nunca hemos escrito un programa C con

1223
01:00:19,020 --> 01:00:20,790
más de 500 líneas de código,

1224
01:00:20,790 --> 01:00:22,840
muchas de estas
cosas se generan, y de hecho,

1225
01:00:22,840 --> 01:00:26,580
uno de los desafíos de pset7 y pset8
cuando exploremos la programación web

1226
01:00:26,580 --> 01:00:30,600
será no escribir
cientos de líneas de HTML, que

1227
01:00:30,600 --> 01:00:34,470
adormecen la mente rápidamente, pero
escribiremos algunas líneas de Python

1228
01:00:34,470 --> 01:00:38,760
o unas pocas líneas de JavaScript
mediante programación, con bucles,

1229
01:00:38,760 --> 01:00:41,650
genera toda
la estructura de su página web.

1230
01:00:41,650 --> 01:00:44,640
Si es parecido una página web
de fotos con un álbum de Facebook,

1231
01:00:44,640 --> 01:00:47,850
Facebook no tiene personas que
escriban miles de líneas de código HTML

1232
01:00:47,850 --> 01:00:49,830
cada vez que cargamos una foto.

1233
01:00:49,830 --> 01:00:52,980
Ellos tienen código
en PHP o en otro lenguaje

1234
01:00:52,980 --> 01:00:56,520
que tiene un bucle for que
itera sobre todas las fotos que subimos

1235
01:00:56,520 --> 01:01:00,520
y genera el mismo HTML, con diferente
imagen para cada una de las fotos

1236
01:01:00,520 --> 01:01:03,270
que subimos, es ahí donde
la programación web entra en juego.

1237
01:01:03,270 --> 01:01:06,780
No escribimos el
código HTML, lo generamos

1238
01:01:06,780 --> 01:01:08,040
al escribir programas.

1239
01:01:08,040 --> 01:01:10,590
Hoy preparamos
el escenario para esa capacidad

1240
01:01:10,590 --> 01:01:13,270
pero primero necesitamos
un marco para hacer esto.

1241
01:01:13,270 --> 01:01:15,930
En lugar de
usar mi Mac local, que

1242
01:01:15,930 --> 01:01:19,140
es un poco patético porque puedo abrir
la página web pero nadie más en el mundo

1243
01:01:19,140 --> 01:01:21,900
puede acceder a ella,
si lo hacemos de nuevo,

1244
01:01:21,900 --> 01:01:28,860
noten que si hago doble clic
en hello.html y abro la barra de URL,

1245
01:01:28,860 --> 01:01:31,820
es claramente curioso
que no está en Internet.

1246
01:01:31,820 --> 01:01:36,600
No es http,
no es https, es file: //,

1247
01:01:36,600 --> 01:01:38,790
lo que significa que es un
archivo en mi computadora local.

1248
01:01:38,790 --> 01:01:41,730
No estaría al alcance de ninguno
de ustedes, porque desde luego

1249
01:01:41,730 --> 01:01:45,580
este usuario jharvard existe
solo en mi laptop Mac local.

1250
01:01:45,580 --> 01:01:49,860
Afortunadamente, tenemos un IDE
basado en web con el que poner cosas

1251
01:01:49,860 --> 01:01:51,880
en Internet, pero hay una trampa.

1252
01:01:51,880 --> 01:01:55,400
El IDE en sí es
una aplicación web, ¿cierto?

1253
01:01:55,400 --> 01:01:59,370
Es un código que fue escrito por amigos
en Amazon, al que agregamos ejecuciones

1254
01:01:59,370 --> 01:02:03,780
en un servidor en alguna parte y
también en su navegador, veremos

1255
01:02:03,780 --> 01:02:06,090
más sobre eso cuando
hablemos de JavaScript,

1256
01:02:06,090 --> 01:02:14,640
CS50 IDE ya tiene las URL
https://cs50.io o https://ide.cs50.io

1257
01:02:14,640 --> 01:02:17,190
diagonal cualquiera que
sea nuestro nombre de usuario.

1258
01:02:17,190 --> 01:02:23,140
Ya usamos el puerto 80
o quizás el 443 para el IDE.

1259
01:02:23,140 --> 01:02:28,680
¿Cómo diablos podríamos
escribir páginas web en el IDE

1260
01:02:28,680 --> 01:02:31,710
y luego servirlos
en Internet si el IDE

1261
01:02:31,710 --> 01:02:34,020
usa el puerto estándar?

1262
01:02:34,020 --> 01:02:37,500
Afortunadamente, podemos
escribir en los sobres,

1263
01:02:37,500 --> 01:02:41,064
se intenta el acceso a nuestras páginas
web, del número de puerto codificado TCP.

1264
01:02:41,064 --> 01:02:43,230
No tiene que ser 80,
no tiene que ser 443.

1265
01:02:43,230 --> 01:02:44,580
Esos son solo los valores predeterminados.

1266
01:02:44,580 --> 01:02:47,340
Si quiero visitar
páginas en mi IDE,

1267
01:02:47,340 --> 01:02:51,240
puedo ejecutar un servidor web
en un número de puerto diferente,

1268
01:02:51,240 --> 01:02:56,450
como 8,080 por
convención u 8,081, 8,082.

1269
01:02:56,450 --> 01:03:00,970
Es un número bastante grande
que nadie más usa en algún sistema.

1270
01:03:00,970 --> 01:03:02,350
Veamos esto de la siguiente manera.

1271
01:03:02,350 --> 01:03:07,000
A continuación,
crearé un archivo nuevo.

1272
01:03:07,000 --> 01:03:10,020
Lo llamaré
hello.html y

1273
01:03:10,020 --> 01:03:15,180
entraré en ese archivo
de texto, ups, que cerré.

1274
01:03:15,180 --> 01:03:17,700
Proseguiré a
tomar el código que

1275
01:03:17,700 --> 01:03:22,020
usamos aquí, que
está aquí, regresamos al IDE,

1276
01:03:22,020 --> 01:03:26,460
lo pegamos en el archivo de texto, haremos
clic en Save, y ahora tengo en el IDE

1277
01:03:26,460 --> 01:03:29,970
un archivo llamado hello.html,
si miro en el buscador de archivos

1278
01:03:29,970 --> 01:03:33,090
y miro en el lado izquierdo,
además del código de muestra,

1279
01:03:33,090 --> 01:03:37,110
es hello.html, pero si hago
doble clic en este archivo no es

1280
01:03:37,110 --> 01:03:39,660
muy útil porque
abrirá el editor, que

1281
01:03:39,660 --> 01:03:40,930
no es otra página web.

1282
01:03:40,930 --> 01:03:42,810
Es el código fuente de mi página web.

1283
01:03:42,810 --> 01:03:45,720
Necesito ejecutar
un programa para que

1284
01:03:45,720 --> 01:03:49,800
este archivo funcione
como Facebook, Google, Harvard

1285
01:03:49,800 --> 01:03:56,820
y Yale lo hacen, haré
esto al ejecutar http-server,

1286
01:03:56,820 --> 01:03:59,790
y le diré que en el puerto 8080.

1287
01:03:59,790 --> 01:04:02,670
En este programa
particular, -p significa puerto

1288
01:04:02,670 --> 01:04:07,260
solo le diré, hey CS50 IDE, inicié
un programa llamado httpserver

1289
01:04:07,260 --> 01:04:10,110
cuyo propósito en la vida es
escuchar las solicitudes en Internet,

1290
01:04:10,110 --> 01:04:14,730
en ese número de puerto, y hace que
funcione cualquier solicitud que ingrese.

1291
01:04:14,730 --> 01:04:16,410
Iré directo a presionar Enter.

1292
01:04:16,410 --> 01:04:17,730
Se Inicia httpserver.

1293
01:04:17,730 --> 01:04:20,071
Me dice: la URL larga
que está disponible en.

1294
01:04:20,071 --> 01:04:22,320
Nuestra URL será un poco diferente
con nuestro nombre de usuario,

1295
01:04:22,320 --> 01:04:27,240
y si abro esto en otra pestaña, a
primera vista, es un poco misterioso.

1296
01:04:27,240 --> 01:04:30,900
Ahora veo el índice o los contenidos
de mi directorio, y ahí hay

1297
01:04:30,900 --> 01:04:33,210
un secreto, .c9 para
el directorio de Cloud9.

1298
01:04:33,210 --> 01:04:34,620
No lo borres ni lo cambies.

1299
01:04:34,620 --> 01:04:37,320
Eso tiene metadatos
relacionados con el IDE.

1300
01:04:37,320 --> 01:04:41,100
Antes, descargué Source6, también pueden
hacerlo desde el sitio web del curso,

1301
01:04:41,100 --> 01:04:43,650
pero hay hello.html,
y aquí, en el lado izquierdo

1302
01:04:43,650 --> 01:04:45,780
verán algunos permisos
que tienen un aspecto complejo.

1303
01:04:45,780 --> 01:04:48,480
Tiene que ver con quién puede leer
y quién puede escribir sus archivos,

1304
01:04:48,480 --> 01:04:51,580
pero por hoy, todo lo que
me importa es que el archivo exista.

1305
01:04:51,580 --> 01:04:55,950
Así que ahora, como usuario de
Internet, iré aquí, haré clic en él,

1306
01:04:55,950 --> 01:04:56,960
¡y voilà!

1307
01:04:56,960 --> 01:04:58,420
Ahí está mi página web.

1308
01:04:58,420 --> 01:05:00,690
Noten que las
URL son muy similares.

1309
01:05:00,690 --> 01:05:06,090
Aquí estoy en cs50.io
y aquí estoy en cs50.io,

1310
01:05:06,090 --> 01:05:08,460
aunque sus nombres de usuario
por supuesto serán diferentes,

1311
01:05:08,460 --> 01:05:12,060
pero el IDE se ejecuta
en el puerto predeterminado 443.

1312
01:05:12,060 --> 01:05:15,180
Ahora estoy sirviendo
temporalmente a mis archivos HTML

1313
01:05:15,180 --> 01:05:17,550
y utilizo el puerto 8080,
simplemente porque es así

1314
01:05:17,550 --> 01:05:20,550
como un servidor puede hacer
varias cosas y como puedo hacer

1315
01:05:20,550 --> 01:05:22,590
varias cosas en el servidor a la vez.

1316
01:05:22,590 --> 01:05:24,720
Entonces, hagamos
algo además de eso.

1317
01:05:24,720 --> 01:05:27,120
Voy a presentar algunos
fundamentos más que

1318
01:05:27,120 --> 01:05:30,570
puede ser útiles al escribir HTML
y para continuar haremos lo siguiente.

1319
01:05:30,570 --> 01:05:36,010
Voy crear un nuevo archivo
y lo llamaremos

1320
01:05:36,010 --> 01:05:42,090
paragraphs.html, luego nombraré
esto como párrafos y abajo

1321
01:05:42,090 --> 01:05:44,430
tengo algunos 
párrafos de texto,

1322
01:05:44,430 --> 01:05:47,610
y realmente no sé lo que quiero decir,
así que voy a buscar en Google

1323
01:05:47,610 --> 01:05:50,760
algo de texto latino estándar.

1324
01:05:50,760 --> 01:05:54,599
Oh, quiero unos tres párrafos de
texto parecido al latín, y aquí vamos.

1325
01:05:54,599 --> 01:05:56,640
Hay un sitio web aleatorio
que simplemente genera

1326
01:05:56,640 --> 01:05:59,160
texto de marcadores
de posición en latín falso.

1327
01:05:59,160 --> 01:06:00,450
Entonces, lo pego

1328
01:06:00,450 --> 01:06:01,830
y ahí están mis tres párrafos.

1329
01:06:01,830 --> 01:06:05,820
Seré un poco amigable
y ordenado y les pondré sangría,

1330
01:06:05,820 --> 01:06:08,730
para que al menos
se vea un poco bien diseñado.

1331
01:06:08,730 --> 01:06:13,240
Guardaré el archivo y ahora volveré
a la URL que tenía hace un momento.

1332
01:06:13,240 --> 01:06:18,060
Noten que ahora tengo dos archivos
servidos por el programa de servidor HTTP.

1333
01:06:18,060 --> 01:06:19,460
Doy clic en... oh.

1334
01:06:19,460 --> 01:06:22,920
OK, Chrome piensa
que la página está en latín.

1335
01:06:22,920 --> 01:06:23,820
[RISAS]

1336
01:06:23,820 --> 01:06:32,920
"Fútbol y miedo elemento de
urbanización y planificación del tiempo".

1337
01:06:32,920 --> 01:06:35,320
"Mañana soss
tiemblan antes como el...",

1338
01:06:35,320 --> 01:06:37,730
eso se parece al latín
que aprendí hace años.

1339
01:06:37,730 --> 01:06:40,631
Bien, entonces,
Mostrar original.

1340
01:06:40,631 --> 01:06:44,440
El punto no es enfocarse
en el latín, sino en el error aparente.

1341
01:06:44,440 --> 01:06:48,569
Algo como, ¿qué no hace y creíste
que haría hace un segundo?

1342
01:06:48,569 --> 01:06:49,610
PÚBLICO: No tiene sangría.

1343
01:06:49,610 --> 01:06:52,642
DAVID: Sí, no tiene sangría,
¿y tampoco tiene qué?

1344
01:06:52,642 --> 01:06:53,350
No hay separación.

1345
01:06:53,350 --> 01:06:55,630
Quiero decir, este es
un gran párrafo en latín,

1346
01:06:55,630 --> 01:06:56,800
no son tres.

1347
01:06:56,800 --> 01:07:02,037
Bueno, esto ocurre simplemente porque un
navegador hace lo que le dices que haga.

1348
01:07:02,037 --> 01:07:04,870
Ahora reduciré
esta ventana y, como dato extra,

1349
01:07:04,870 --> 01:07:07,810
lo que ven aquí, todo este lío
en la ventana de terminal inferior,

1350
01:07:07,810 --> 01:07:12,640
como HTTP Server se está ejecutando,
registra todas las solicitudes HTTP

1351
01:07:12,640 --> 01:07:15,979
que vienen de los navegadores solo
para que podamos depurar o diagnosticar,

1352
01:07:15,979 --> 01:07:17,770
pero vamos a ignorar eso por ahora

1353
01:07:17,770 --> 01:07:21,350
y dejar que se ejecute
aquí, en segundo plano.

1354
01:07:21,350 --> 01:07:24,280
Pero si quiero párrafos,
necesito ser un poco más quisquilloso

1355
01:07:24,280 --> 01:07:29,044
y decir, hey navegador, haz un
párrafo con lo que llamamos etiqueta p

1356
01:07:29,044 --> 01:07:31,960
y luego pon una sangría,
aunque claramente poner una sangría

1357
01:07:31,960 --> 01:07:32,585
no es importante,

1358
01:07:32,585 --> 01:07:34,580
es solo para mantener
mi código limpio y ordenado.

1359
01:07:34,580 --> 01:07:36,204
Y luego digo, hey navegador,
comienza un párrafo.

1360
01:07:36,204 --> 01:07:36,870
Aquí está el texto.

1361
01:07:36,870 --> 01:07:38,530
Y después, hey navegador,
acaba el párrafo.

1362
01:07:38,530 --> 01:07:39,430
Lo mismo aquí.

1363
01:07:39,430 --> 01:07:41,500
Entonces, comenzaré un párrafo.

1364
01:07:41,500 --> 01:07:43,490
Luego detendré el párrafo.

1365
01:07:43,490 --> 01:07:45,197
Observen que el IDE
está tratando de ser útil.

1366
01:07:45,197 --> 01:07:46,030
Esto no es útil.

1367
01:07:46,030 --> 01:07:48,910
Esto no es una contraseña, pero está
intentando autocompletar mis pensamientos.

1368
01:07:48,910 --> 01:07:49,550
Eso está bien.

1369
01:07:49,550 --> 01:07:50,800
Simplemente voy a ignorarlo.

1370
01:07:50,800 --> 01:07:53,980
Ahora cerraré
el párrafo y lo guardaré.

1371
01:07:53,980 --> 01:07:57,490
Es más detallado, pero cualquier cosa
que haya en las etiquetas, el humano

1372
01:07:57,490 --> 01:08:01,030
no lo verá, hasta que recargue
la página, con comando o control + R,

1373
01:08:01,030 --> 01:08:03,580
o hasta que haga clic
en el icono de recarga,

1374
01:08:03,580 --> 01:08:05,300
lo que aparezca en su navegador.

1375
01:08:05,300 --> 01:08:09,947
Ahora tengo tres párrafos en latín.

1376
01:08:09,947 --> 01:08:11,530
Entonces aquí
es algo más deliberado.

1377
01:08:11,530 --> 01:08:14,363
Y ahora todo está bien,
pero la web es más interesante

1378
01:08:14,363 --> 01:08:16,204
cuando se pueden vincular cosas.

1379
01:08:16,204 --> 01:08:17,620
Veamos qué sucede.

1380
01:08:17,620 --> 01:08:23,020
Ahora crearé un nuevo archivo
llamado, digamos, link.html.

1381
01:08:23,020 --> 01:08:27,760
Pegaré esto aquí y
llamaremos al enlace link.

1382
01:08:27,760 --> 01:08:31,240
Ahora eliminaré todo esto
para tener un marcador de posición

1383
01:08:31,240 --> 01:08:33,460
y puedo decir algo
como "¡Hello, world!

1384
01:08:33,460 --> 01:08:36,880
My favorite school is...

1385
01:08:36,880 --> 01:08:40,720
y solo para ir a lo seguro,
stanford.edu.

1386
01:08:40,720 --> 01:08:48,069
Guardo, vuelvo a cargar,
hago clic en link.html y... nada.

1387
01:08:48,069 --> 01:08:53,140
Entonces parece un nombre de
dominio y ciertamente lo es, y francamente

1388
01:08:53,140 --> 01:08:56,859
es probable que estemos condicionados
por herramientas como Slack, Gmail y otras

1389
01:08:56,859 --> 01:08:59,380
como Facebook, que simplemente
se dan cuenta de que, oh,

1390
01:08:59,380 --> 01:09:02,229
si algo se parece a un nombre
de dominio, conviértalo en un enlace,

1391
01:09:02,229 --> 01:09:06,100
pero eso es porque alguien en
Facebook o en Google sabe HTML

1392
01:09:06,100 --> 01:09:08,640
y sabe cómo usar las condiciones
if y los elses y solo dice, oh,

1393
01:09:08,640 --> 01:09:11,740
si una cadena que el humano escribió
parece el final de un nombre de dominio

1394
01:09:11,740 --> 01:09:13,881
en .edu, conviértelo en enlace.

1395
01:09:13,881 --> 01:09:15,130
¿Pero cómo lo conviertes
en un enlace?

1396
01:09:15,130 --> 01:09:16,689
Podemos hacerlo manualmente.

1397
01:09:16,689 --> 01:09:20,300
Resulta que necesitan una
etiqueta de anclaje abreviada como <a>

1398
01:09:20,300 --> 01:09:23,920
y luego cierran la etiqueta
de anclaje al final del texto

1399
01:09:23,920 --> 01:09:27,800
que quieran anclar al enlace,
pero esto no es suficiente.

1400
01:09:27,800 --> 01:09:31,729
Necesito ser muy explícito en cuanto a
dónde quiero que vaya este enlace,

1401
01:09:31,729 --> 01:09:35,580
y resulta que HTML también
admite lo que llamamos atributos.

1402
01:09:35,580 --> 01:09:38,170
Entonces las etiquetas son esas cosas
que están en corchetes angulares.

1403
01:09:38,170 --> 01:09:40,359
Los atributos también están
dentro de esos corchetes angulares,

1404
01:09:40,359 --> 01:09:42,650
pero vienen después
del nombre de la etiqueta y solo

1405
01:09:42,650 --> 01:09:46,090
modificarán el comportamiento
de la etiqueta, y aquí cobra sentido

1406
01:09:46,090 --> 01:09:48,190
tener que modificarlo
porque hace 20,

1407
01:09:48,190 --> 01:09:50,529
o 30 años, cuando se
inventó el HTML, no creamos

1408
01:09:50,529 --> 01:09:52,640
una etiqueta que
nos llevara a stanford.edu.

1409
01:09:52,640 --> 01:09:56,830
Creamos una etiqueta más genérica
que nos anclaba a algún destino,

1410
01:09:56,830 --> 01:10:02,681
y ahora puedo poner
www.stanford.edu, guardar el archivo,

1411
01:10:02,681 --> 01:10:05,180
y noten que es como decirle
al navegador, hey, navegador,

1412
01:10:05,180 --> 01:10:08,500
aquí viene un enlace o
hipervínculo al sitio web de Stanford,

1413
01:10:08,500 --> 01:10:12,250
y luego el final aquí dice, hey,
navegador, eso es todo para el enlace,

1414
01:10:12,250 --> 01:10:14,290
y afortunadamente
no es súper detallado.

1415
01:10:14,290 --> 01:10:17,140
No tiene que repetir
el atributo al final.

1416
01:10:17,140 --> 01:10:19,360
Simplemente repite el nombre
de la etiqueta, de lo contrario

1417
01:10:19,360 --> 01:10:21,460
tendríamos que escribir
lo mismo una y otra vez.

1418
01:10:21,460 --> 01:10:26,590
Si ahora regreso y vuelvo a cargar
la página con comando o control + R,

1419
01:10:26,590 --> 01:10:29,020
ahora se convierte en el
familiar enlace subrayado en azul,

1420
01:10:29,020 --> 01:10:32,890
y si hago clic en él, primero
noten que es súper pequeño.

1421
01:10:32,890 --> 01:10:36,430
podemos ver hacia dónde
nos llevará el enlace,

1422
01:10:36,430 --> 01:10:40,540
y si hago clic ahí, veremos
el sitio web de Stanford y listo.

1423
01:10:40,540 --> 01:10:43,990
Ya pudimos visitar la página también, 
pero hay una interesante nota al margen,

1424
01:10:43,990 --> 01:10:47,200
si quieren pensar en cosas
llamadas ataques de phishing

1425
01:10:47,200 --> 01:10:49,510
pues francamente,
Harvard y Yale, de vez en cuando,

1426
01:10:49,510 --> 01:10:52,093
les enviarán por correo advertencias como
"tenga cuidado con este ataque de phishing".

1427
01:10:52,093 --> 01:10:54,356
P-H-I-S-H-I-N-G,
o suplantación de identidad.

1428
01:10:54,356 --> 01:10:56,230
Es cuando las personas
en Internet generalmente

1429
01:10:56,230 --> 01:10:59,320
les envían correos electrónicos o algún
tipo de spam tratando de engañarlos

1430
01:10:59,320 --> 01:11:03,700
para guiarlos a un sitio web falso y
obtener usuarios, contraseñas, tarjetas

1431
01:11:03,700 --> 01:11:07,720
de crédito y otras cosas, y honestamente,
la mayoría de esos ataques de phishing

1432
01:11:07,720 --> 01:11:12,850
se reducen a este ejemplo
de 10 líneas de HTML

1433
01:11:12,850 --> 01:11:18,610
porque nada me impide
decir algo como "Hola, mundo!

1434
01:11:18,610 --> 01:11:21,880
Confirma tu contraseña en... "

1435
01:11:21,880 --> 01:11:25,870
y luego poner algo
como paypal.com y después

1436
01:11:25,870 --> 01:11:31,940
puedo cambiar esto para que
quede algo como davidsphishingsite.com,

1437
01:11:31,940 --> 01:11:34,850
lo cual afortunadamente no existe.

1438
01:11:34,850 --> 01:11:38,120
Durante un año
fui a badplace.com y...

1439
01:11:38,120 --> 01:11:38,990
bueno, entonces...

1440
01:11:38,990 --> 01:11:40,230
[RISAS]

1441
01:11:40,230 --> 01:11:40,730


1442
01:11:40,730 --> 01:11:45,620
Y guardé el archivo, lo volví
a cargar, y el enlace es de color azul,

1443
01:11:45,620 --> 01:11:50,600
pero antes de hacer clic en él,
solo los usuarios más astutos

1444
01:11:50,600 --> 01:11:52,850
se molestarían en revisar
la esquina inferior izquierda

1445
01:11:52,850 --> 01:11:54,930
para ver a dónde están
a punto de ser llevados

1446
01:11:54,930 --> 01:11:57,180
e incluso la mayoría de los que
estamos en esta sala, incluido yo,

1447
01:11:57,180 --> 01:11:59,269
no estamos tan paranoicos
como para revisar constantemente

1448
01:11:59,269 --> 01:12:00,560
revisando ese tipo de cosas.

1449
01:12:00,560 --> 01:12:02,060
Las probabilidades son que,
si recibo un correo electrónico como este,

1450
01:12:02,060 --> 01:12:03,260
¡Oh, Dios mío!
Mis cuentas están comprometidas.

1451
01:12:03,260 --> 01:12:06,260
tengo que confirmar mi contraseña
de PayPal para proteger mi dinero.

1452
01:12:06,260 --> 01:12:08,150
Es muy posible
que sigan el enlace,

1453
01:12:08,150 --> 01:12:12,584
pero pueden ir a cualquier lugar que deseen
a través de este bloque de estructura básica,

1454
01:12:12,584 --> 01:12:14,750
pero esta es solo una forma
en la que pueden examinar

1455
01:12:14,750 --> 01:12:17,375
lo que sucede por debajo el agua,
pero por supuesto que Internet

1456
01:12:17,375 --> 01:12:19,490
es más interesante que solo texto.

1457
01:12:19,490 --> 01:12:21,980
A continuación abriré
un ejemplo que preparé

1458
01:12:21,980 --> 01:12:28,790
de antemano usando image.html
y veremos otra etiqueta aquí.

1459
01:12:28,790 --> 01:12:32,600
Entonces tenemos otra
oportunidad para usar un atributo

1460
01:12:32,600 --> 01:12:36,570
y otro que tampoco es
necesariamente visible para el usuario.

1461
01:12:36,570 --> 01:12:38,030
Entonces aquí hay
una etiqueta de imagen.

1462
01:12:38,030 --> 01:12:39,740
Los humanos decidieron
hace años que serían breves,

1463
01:12:39,740 --> 01:12:44,090
Usan img> para imagen,
al igual a> para ancla.

1464
01:12:44,090 --> 01:12:48,080
La fuente, src, va a ser
este archivo, dan.jpeg,

1465
01:12:48,080 --> 01:12:50,900
que descargué por adelantado
en la URL de arriba,

1466
01:12:50,900 --> 01:12:55,310
y esto es gris en el IDE de CS50
porque es la sintaxis que lo resalta

1467
01:12:55,310 --> 01:12:58,400
igual que en C.
Esto es un comentario en HTML.

1468
01:12:58,400 --> 01:13:00,860
Entonces, si quieren crear notas
para ustedes o para los espectadores,

1469
01:13:00,860 --> 01:13:03,710
alguna frase
o cita como esta,

1470
01:13:03,710 --> 01:13:10,795
pueden usar un comentario HTML
poniendo ! // // > y luego escriben

1471
01:13:10,795 --> 01:13:13,170
entre los símbolos lo que quieran,
en la mayoría de los casos.

1472
01:13:13,170 --> 01:13:15,380
Así que al igual que en C,
tenemos el símbolo //.

1473
01:13:15,380 --> 01:13:17,840
Entonces, aquí está
la fuente de esta imagen y esto

1474
01:13:17,840 --> 01:13:24,672
es como su explicación alternativa, alt.
¿Por qué podría ser convincente?

1475
01:13:24,672 --> 01:13:26,130
Quiero mostrar
la imagen a un usuario.

1476
01:13:26,130 --> 01:13:26,340
¿Sí?

1477
01:13:26,340 --> 01:13:27,954
PÚBLICO: ¿Es como si
pasaran el ratón sobre ella,

1478
01:13:27,954 --> 01:13:28,930
ellos pueden ver
lo que está sucediendo.

1479
01:13:28,930 --> 01:13:30,390
DAVID: Sí, es un par de razones.

1480
01:13:30,390 --> 01:13:33,360
Si pasan el mouse sobre la imagen,
podrán ver un texto descriptivo.

1481
01:13:33,360 --> 01:13:36,060
Es como el Guapo Dan,
como la mascota de Yale.

1482
01:13:36,060 --> 01:13:39,210
Si el usuario tiene
problemas para ver o está ciego,

1483
01:13:39,210 --> 01:13:41,386
es posible que necesite
un lector de pantalla que le diga

1484
01:13:41,386 --> 01:13:43,260
lo que hay en ella,
y no es obvio

1485
01:13:43,260 --> 01:13:45,599
de buenas a primeras
lo que dan.jpeg puede ser,

1486
01:13:45,599 --> 01:13:47,640
pero si se cuenta con este
texto alternativo, una computadora

1487
01:13:47,640 --> 01:13:50,445
puede recitar verbalmente
Handsome Dan, lo cual

1488
01:13:50,445 --> 01:13:53,320
estimularía la memoria de la persona
sobre lo que está en la pantalla.

1489
01:13:53,320 --> 01:13:55,050
O si tienen una conexión
a Internet verdaderamente lenta,

1490
01:13:55,050 --> 01:13:57,270
a veces verán un marcador
de posición para una imagen

1491
01:13:57,270 --> 01:14:00,032
que les dirá de qué trata la imagen
antes de que esta se descargue.

1492
01:14:00,032 --> 01:14:01,740
Entonces, si somos
conscientes de este tipo de cosas,

1493
01:14:01,740 --> 01:14:04,380
básicamente dará como resultado
que sus sitios web sean más accesibles,

1494
01:14:04,380 --> 01:14:07,860
y de hecho si ahora
voy a mi directorio src6

1495
01:14:07,860 --> 01:14:11,500
donde tenemos aún más ejemplos a
nuestra disposición y vamos a la Imagen 6,

1496
01:14:11,500 --> 01:14:16,840
aquí está la foto del año
pasado del adorable Guapo Dan.

1497
01:14:16,840 --> 01:14:18,150
Entonces aquí hay
una etiqueta de imagen.

1498
01:14:18,150 --> 01:14:20,970
Ahora, podemos hacer
maravillas con la anidación.

1499
01:14:20,970 --> 01:14:24,120
Esto no es tan interesante
porque no va a ninguna parte,

1500
01:14:24,120 --> 01:14:26,760
pero podría combinar estas ideas.

1501
01:14:26,760 --> 01:14:34,320
Podría poner href = http://www.yale.edu
o, si no quiero que el usuario

1502
01:14:34,320 --> 01:14:37,500
sufra molestias por ser redirigido,
podría, de manera preventiva,

1503
01:14:37,500 --> 01:14:40,630
volverlo seguro, porque sé
que Yale lo permite por adelantado,

1504
01:14:40,630 --> 01:14:42,540
y puedo anidar etiquetas como esta.

1505
01:14:42,540 --> 01:14:45,910
Ahora si voy aquí y vuelvo
a cargar, todavía se ve igual,

1506
01:14:45,910 --> 01:14:50,640
pero note que mi cursor cambia como un puntero, y si de verdad hago clic en eso,

1507
01:14:50,640 --> 01:14:55,290
ahora la imagen conduce al sitio
web de Yale, pero he descuidado algo,

1508
01:14:55,290 --> 01:14:56,910
Uno de estos no es como el otro.

1509
01:14:56,910 --> 01:15:00,090


1510
01:15:00,090 --> 01:15:04,512
¿Qué detalle
me faltó mencionar?

1511
01:15:04,512 --> 01:15:05,012
Sí

1512
01:15:05,012 --> 01:15:07,187
PÚBLICO: el archivo de imagen
se cierra dentro de sí mismo.

1513
01:15:07,187 --> 01:15:10,020
DAVID: Sí, la etiqueta de la
imagen se cierra en sí misma,

1514
01:15:10,020 --> 01:15:12,390
entonces hay algunas anomalías
de este tipo dentro de HTML,

1515
01:15:12,390 --> 01:15:15,332
donde realmente no hay
una noción de "empezar a hacer algo

1516
01:15:15,332 --> 01:15:17,040
y luego, después de un tiempo,
dejar de hacer algo.

1517
01:15:17,040 --> 01:15:18,831
Al igual, una imagen
está allí o no lo está.

1518
01:15:18,831 --> 01:15:22,041
Conceptualmente
no se puede poner algo en medio

1519
01:15:22,041 --> 01:15:24,540
y entonces algunas de estas etiquetas
en HTML son lo que se llama vacías.

1520
01:15:24,540 --> 01:15:27,750
Ya que no deben tener nada
después de la apertura de la etiqueta

1521
01:15:27,750 --> 01:15:29,140
o antes del cierre
de la etiqueta.

1522
01:15:29,140 --> 01:15:33,330
Entonces, si quisieran ser más
precisos podrían decir lo siguiente,

1523
01:15:33,330 --> 01:15:36,032
pero no deberían poner
nada donde está mi cursor ahora

1524
01:15:36,032 --> 01:15:39,240
porque no tendría sentido tratar
de poner algo dentro de una imagen,

1525
01:15:39,240 --> 01:15:43,170
pero es un poco aburrido
dar tantos detalles innecesarios.

1526
01:15:43,170 --> 01:15:46,380
Podemos simplemente poner
la diagonal ahí y, técnicamente, en HTML5

1527
01:15:46,380 --> 01:15:49,570
ni siquiera se necesita la diagonal
en este caso, pero al menos de este modo,

1528
01:15:49,570 --> 01:15:52,410
y creo que para fines pedagógicos, hacerlo, incluso para etiquetas vacías,

1529
01:15:52,410 --> 01:15:56,280
ya que asegura y lo hace más claro
visualmente, cuando las etiquetas

1530
01:15:56,280 --> 01:15:56,972
están equilibradas.

1531
01:15:56,972 --> 01:15:58,680
Esa es la única
anomalía allí y luego

1532
01:15:58,680 --> 01:16:01,690
hay muchos otras que podemos
mandar a volar rápidamente.

1533
01:16:01,690 --> 01:16:05,147
Entonces, si vuelvo a nuestros ejemplos,
aquí preparé los encabezados.html.

1534
01:16:05,147 --> 01:16:07,230
Entonces, si quieren
hacer algo como esto, si están

1535
01:16:07,230 --> 01:16:10,440
escribiendo un libro o un sitio
web que tiene capítulos, secciones,

1536
01:16:10,440 --> 01:16:13,980
subsecciones
y demás, HTML permite

1537
01:16:13,980 --> 01:16:16,890
formatear fácilmente cosas grandes y
en negritas, o más pequeñas y en negritas,

1538
01:16:16,890 --> 01:16:22,410
 o aún más pequeñas y en negritas
y así, mediante las etiquetas h1 a h6.

1539
01:16:22,410 --> 01:16:26,100
Entonces, si voy a los encabezados,
así es como hice esta página web.

1540
01:16:26,100 --> 01:16:30,420
Simplemente abro y cierro
h1, h2, h3, h4, y eso es todo.

1541
01:16:30,420 --> 01:16:33,480
Entonces, cada vez
que lean algún texto en línea,

1542
01:16:33,480 --> 01:16:37,140
lo más probable es que haya una o más
etiquetas de formato en la página.

1543
01:16:37,140 --> 01:16:42,090
Si vemos otro ejemplo,
aquí tenemos algo como list.html.

1544
01:16:42,090 --> 01:16:45,870
Las listas son frecuentes en Internet,
no van a creer la número tres,

1545
01:16:45,870 --> 01:16:50,010
así es como pueden hacer algo
en una lista con viñetas, marcando

1546
01:16:50,010 --> 01:16:52,170
tres palabras, foo, bar y baz

1547
01:16:52,170 --> 01:16:56,460
y el HTML para esto,
si abro list.html,

1548
01:16:56,460 --> 01:17:01,440
simplemente se ve un poco más detallado
ya que necesitamos un elemento padre,

1549
01:17:01,440 --> 01:17:04,080
por así decirlo, si tomamos prestada
nuestra terminología de árboles,

1550
01:17:04,080 --> 01:17:07,260
pero aquí tenemos una lista
desordenada, o ul, la cual

1551
01:17:07,260 --> 01:17:10,500
tiene uno o más elementos
en la lista, o li, cada uno de los cuales

1552
01:17:10,500 --> 01:17:12,600
abre y cierra foo, bar y baz.

1553
01:17:12,600 --> 01:17:14,920
Y si los quiero
numerados, también puedo

1554
01:17:14,920 --> 01:17:20,940
cambiar listas desordenadas a ordenadas,
ol, volver a cargar y el navegador

1555
01:17:20,940 --> 01:17:23,940
se dará cuenta de la numeración,
lo cual es bueno si tienen muchos datos

1556
01:17:23,940 --> 01:17:26,970
y no quieren lidiar con el hecho
de explicarlos ustedes mismos.

1557
01:17:26,970 --> 01:17:30,870
Mientras tanto, podemos
avanzar uno o dos pasos antes de

1558
01:17:30,870 --> 01:17:32,550
llegar a algo funcional.

1559
01:17:32,550 --> 01:17:36,220
Aquí tengo una
de los más complicadas,

1560
01:17:36,220 --> 01:17:39,510
pero también le dice
al navegador qué hacer.

1561
01:17:39,510 --> 01:17:43,080
Entonces, antes de ver el resultado dice:
hey navegador, aquí viene una tabla,

1562
01:17:43,080 --> 01:17:44,190
con datos en forma de tabla.

1563
01:17:44,190 --> 01:17:46,690
Filas y columnas como Excel
o Google Spreadsheets.

1564
01:17:46,690 --> 01:17:50,605
Hey navegador, aquí viene
una fila de la tabla, o tr.

1565
01:17:50,605 --> 01:17:54,060
Hola navegador, dentro de esa fila,
aquí viene una tabla de datos, también

1566
01:17:54,060 --> 01:17:55,680
conocida como
celda o columna.

1567
01:17:55,680 --> 01:17:56,910
Aquí viene otra celda.

1568
01:17:56,910 --> 01:17:58,060
Aquí viene otra celda.

1569
01:17:58,060 --> 01:18:01,050
Entonces son una,
dos, tres celdas seguidas.

1570
01:18:01,050 --> 01:18:03,370
Hola navegador,
aquí vienen tres celdas más.

1571
01:18:03,370 --> 01:18:05,150
Hola navegador,
aquí vienen tres celdas más.

1572
01:18:05,150 --> 01:18:08,280
Hola navegador,
aquí vienen tres celdas más y si

1573
01:18:08,280 --> 01:18:15,720
lo traducimos en el navegador,
veremos el diseño de un teclado

1574
01:18:15,720 --> 01:18:17,250
de teléfono
de la vieja escuela.

1575
01:18:17,250 --> 01:18:19,380
No es muy bonito,
no está muy bien formateado,

1576
01:18:19,380 --> 01:18:23,400
pero si nos acercamos, veremos
que está alineado en filas y columnas

1577
01:18:23,400 --> 01:18:27,780
como ya lo insinué antes,
pero todo es muy decepcionante.

1578
01:18:27,780 --> 01:18:29,790
Por ejemplo, Google
es genial porque puedes entrar

1579
01:18:29,790 --> 01:18:33,780
y buscar gatos y encontrar
muchos gatos en Internet,

1580
01:18:33,780 --> 01:18:36,610
pero, ¿cómo funciona realmente?

1581
01:18:36,610 --> 01:18:39,930
Entonces, aw,
hay malas noticias hoy.

1582
01:18:39,930 --> 01:18:44,220
OK, entonces,
vamos a acercarnos a este.

1583
01:18:44,220 --> 01:18:47,760
OK, tratemos de
enfocarnos en la pedagogía

1584
01:18:47,760 --> 01:18:49,750
de los gatos
de la siguiente manera.

1585
01:18:49,750 --> 01:18:54,450
Trataré de enfocarme en la URL,
que es algo larga y compleja,

1586
01:18:54,450 --> 01:18:57,660
pero me desharé de
cualquier cosa que parezca confusa

1587
01:18:57,660 --> 01:18:58,690
o que no entienda.

1588
01:18:58,690 --> 01:19:01,590
No tengo idea de lo que significa
source, así que me desharé de ello.

1589
01:19:01,590 --> 01:19:02,890
No tengo idea de lo que
el resto significa,

1590
01:19:02,890 --> 01:19:05,220
así que voy a deshacerme de ello
y trataré de depurar... dar por hecho,

1591
01:19:05,220 --> 01:19:08,190
con algo de previsión porque
ya sabía cómo funcionaba Google aquí,

1592
01:19:08,190 --> 01:19:10,860
cambié la URL a algo
mucho, mucho, mucho más simple.

1593
01:19:10,860 --> 01:19:19,740
Gatos, en
www.google.com/search?q=cats.

1594
01:19:19,740 --> 01:19:23,520
Parece que, de una forma o de otra,
el comportamiento de Google

1595
01:19:23,520 --> 01:19:26,359
está controlado por la información
que se transmite en la URL,

1596
01:19:26,359 --> 01:19:27,900
y no solo porque estoy buscando,

1597
01:19:27,900 --> 01:19:29,580
es porque estoy buscando gatos.

1598
01:19:29,580 --> 01:19:32,940
Entonces, por capricho,
voy a buscar perros, doy clic

1599
01:19:32,940 --> 01:19:35,700
en Enter y algunas cosas cambian.

1600
01:19:35,700 --> 01:19:39,180
Todas estas imágenes
de perros aparecen a la derecha.

1601
01:19:39,180 --> 01:19:41,760
Tenemos aquí el texto
previamente introducido y

1602
01:19:41,760 --> 01:19:43,470
podemos buscar
cualquier cantidad de cosas,

1603
01:19:43,470 --> 01:19:50,400
como la broma de
Harvard-Yale 2004, doy Enter,

1604
01:19:50,400 --> 01:19:53,590
y ahí tienen un artículo de Wikipedia
sobre el video que vimos antes.

1605
01:19:53,590 --> 01:19:56,670
Entonces parece que podemos
parametrizar el comportamiento de Google

1606
01:19:56,670 --> 01:19:58,570
solo con entender
cómo funciona esta URL.

1607
01:19:58,570 --> 01:20:01,090
Por lo tanto, aquí está
la ruta que solicitamos,

1608
01:20:01,090 --> 01:20:02,940
el archivo, carpeta o lo que sea eso.

1609
01:20:02,940 --> 01:20:05,340
Un signo de interrogación que dice,
hey navegador, o hey servidor,

1610
01:20:05,340 --> 01:20:08,830
más bien, aquí van
algunos parámetros HTTP.

1611
01:20:08,830 --> 01:20:12,550
Algunas entradas de un ser humano que
completó un formulario o que aparentemente

1612
01:20:12,550 --> 01:20:15,610
está hackeando la barra de la URL
y luego sigue el nombre del parámetro,

1613
01:20:15,610 --> 01:20:19,000
después de q, que significa "query" o
consulta. Eso lo decidieron Larry y Sergey

1614
01:20:19,000 --> 01:20:21,640
hace años para su
cuadro de búsqueda, un signo igual,

1615
01:20:21,640 --> 01:20:23,570
y luego cualquier cosa
que escriba el humano.

1616
01:20:23,570 --> 01:20:25,210
Ahora, rápidamente
se puso un poco raro aquí.

1617
01:20:25,210 --> 01:20:27,280
Ahora vemos un %20.

1618
01:20:27,280 --> 01:20:30,910
Esa es la forma en que
la web codifica un espacio

1619
01:20:30,910 --> 01:20:33,790
de modo que no sea un espacio
físico, sino una cadena contigua.

1620
01:20:33,790 --> 01:20:38,410
Entonces, es solo una cadena contigua
para que el servidor la mire o la lea,

1621
01:20:38,410 --> 01:20:40,370
¿y por qué esto es útil?

1622
01:20:40,370 --> 01:20:42,790
Bueno, puedo
aprovechar esta información

1623
01:20:42,790 --> 01:20:46,300
e implementar mi propio
Google con bastante facilidad.

1624
01:20:46,300 --> 01:20:52,120
A continuación entraré en search.html,
uno de los otros ejemplos que preparé,

1625
01:20:52,120 --> 01:20:54,520
y verán otra etiqueta junta.

1626
01:20:54,520 --> 01:20:58,840
Dentro del cuerpo de esta página
hay una etiqueta de formulario HTML,

1627
01:20:58,840 --> 01:21:01,770
y la etiqueta del formulario
toma un par de atributos que conozco.

1628
01:21:01,770 --> 01:21:05,140
Uno es la acción,
que es la URL a la que

1629
01:21:05,140 --> 01:21:07,570
deseo enviar la información
del formulario, y el otro

1630
01:21:07,570 --> 01:21:09,220
es el método que quiero usar

1631
01:21:09,220 --> 01:21:13,220
Ahora está en minúsculas
de modo inconsistente, solo porque sí,

1632
01:21:13,220 --> 01:21:14,576
pero ya vimos ese verbo antes.

1633
01:21:14,576 --> 01:21:15,075
¿En dónde?

1634
01:21:15,075 --> 01:21:18,260


1635
01:21:18,260 --> 01:21:19,650
¿Dónde vimos este verbo antes?

1636
01:21:19,650 --> 01:21:22,570


1637
01:21:22,570 --> 01:21:26,250
Sería como el mensaje un tanto
esotérico que iba, supuestamente,

1638
01:21:26,250 --> 01:21:32,220
dentro de uno de estos sobres cuando
dijimos GET en mayúsculas /http1.1

1639
01:21:32,220 --> 01:21:33,550
y así sucesivamente.

1640
01:21:33,550 --> 01:21:37,620
Entonces parece que si, como
desarrolladores web, quieren crear

1641
01:21:37,620 --> 01:21:42,150
un formulario HTML con cuadros
de texto, casillas de verificación y menús

1642
01:21:42,150 --> 01:21:45,660
desplegables, y que envíe su información
cuando el usuario haga clic en Enter

1643
01:21:45,660 --> 01:21:49,260
o en un botón a esta dirección,
y quieren que vaya dentro de un

1644
01:21:49,260 --> 01:21:52,800
sobre virtual usando el verbo GET,
solo decimos method=GET.

1645
01:21:52,800 --> 01:21:56,220
Y luego, aquí abajo, parece que tengo
dos entradas, donde uno de sus nombres

1646
01:21:56,220 --> 01:22:00,180
es q, cuyo tipo es
un cuadro de texto, y el otro

1647
01:22:00,180 --> 01:22:02,927
es un tipo de envío cualquiera,
cuyo valor sea la búsqueda.

1648
01:22:02,927 --> 01:22:05,760
Solo sabrían lo que significan estas
cosas si las ven en una demostración

1649
01:22:05,760 --> 01:22:09,250
o en alguna referencia en línea, pero
si hacemos esto para ver los resultados

1650
01:22:09,250 --> 01:22:10,680
tenemos una súper simple...

1651
01:22:10,680 --> 01:22:11,880
Le haré un acercamiento...

1652
01:22:11,880 --> 01:22:14,460
una versión muy,
muy simple de Google, ¿verdad?

1653
01:22:14,460 --> 01:22:19,290
Ni siquiera tiene el logotipo, pero
afirmo que tiene toda la funcionalidad

1654
01:22:19,290 --> 01:22:24,780
vean lo que sucede si escribo,
por ejemplo, gritos, pájaros y doy clic,

1655
01:22:24,780 --> 01:22:26,160
Buscar.

1656
01:22:26,160 --> 01:22:31,350
Dios mío, implementé Google
con solo 15 líneas de código,

1657
01:22:31,350 --> 01:22:32,340
pero no es así realmente, ¿verdad?

1658
01:22:32,340 --> 01:22:34,660
Parece que he implementado
la interfaz de Google,

1659
01:22:34,660 --> 01:22:37,020
en la cual tuve que buscar en Google
estas cosas por adelantado

1660
01:22:37,020 --> 01:22:38,780
OK, estas son historias muy tristes.

1661
01:22:38,780 --> 01:22:40,530
[RISAS]

1662
01:22:40,530 --> 01:22:49,080
DAVID: Bien, entonces el punto es,
el punto... vean acá, vean acá.

1663
01:22:49,080 --> 01:22:53,610
El punto es que la URL es lo que generé.

1664
01:22:53,610 --> 01:22:57,450
Entonces, usando esas etiquetas HTML
junto con la cooperación del ser humano

1665
01:22:57,450 --> 01:22:59,520
y haciendo clic en un botón, entonces

1666
01:22:59,520 --> 01:23:02,550
genero esta URL, alejo al usuario del IDE,

1667
01:23:02,550 --> 01:23:06,230
hacia google.com, donde
Google maneja la parte final,

1668
01:23:06,230 --> 01:23:08,730
hice todo el trabajo duro,
revisé su base de datos,

1669
01:23:08,730 --> 01:23:11,170
renderize el HTML, hice la interfaz,

1670
01:23:11,170 --> 01:23:15,900
la interfaz de usuario mediante la cual
se interactúa con la búsqueda del motor

1671
01:23:15,900 --> 01:23:16,710
de búsquedas de Google.

1672
01:23:16,710 --> 01:23:19,950
Y todo se reduce solamente
a estos heurísticos básicos,

1673
01:23:19,950 --> 01:23:22,340
pero claro, este es un motor
de búsqueda bastante horrible, ¿verdad?

1674
01:23:22,340 --> 01:23:25,530
Un cuadro de texto en blanco y negro,
un botón gris y eso es todo.

1675
01:23:25,530 --> 01:23:31,260
Incluso Google, aunque es sencillo,
tiene algo de color y estilo

1676
01:23:31,260 --> 01:23:34,180
y las cosas se enfocan
y se espacian de manera diferente.

1677
01:23:34,180 --> 01:23:36,140
Así que esto es
todo un arte, y de hecho

1678
01:23:36,140 --> 01:23:38,940
ser un diseñador web
es toda una profesión

1679
01:23:38,940 --> 01:23:42,180
es más, dentro de esta área
conocerán a algunas personas que son

1680
01:23:42,180 --> 01:23:43,860
muy buenas en diseño front-end,

1681
01:23:43,860 --> 01:23:45,030
hay otras muy malas en eso

1682
01:23:45,030 --> 01:23:46,170
y yo estoy entre las peores.

1683
01:23:46,170 --> 01:23:49,620
Mis páginas web también se ven como
el cuadro de búsqueda de hace un momento,

1684
01:23:49,620 --> 01:23:52,465
pero algunas personas prefieren las cosas
no gráficas, el back-end, lo relacionado

1685
01:23:52,465 --> 01:23:55,590
con las bases de datos, y uno de los
puntos de partida en las próximas semanas

1686
01:23:55,590 --> 01:23:58,423
será que decidan por sí mismos
si les gusta algo de esto

1687
01:23:58,423 --> 01:24:00,982
ciertamente, pero también
cuáles son sus preferencias.

1688
01:24:00,982 --> 01:24:02,940
Y es posible que escuchen
frecuentemente los términos del área,

1689
01:24:02,940 --> 01:24:05,370
como desarrollador front-end
y desarrollador back-end.

1690
01:24:05,370 --> 01:24:09,510
Eso significa que trabajan en lo que
el usuario ve en su navegador o aplicación

1691
01:24:09,510 --> 01:24:12,240
o que trabajan en el back-end,
es decir, en cosas de las bases de datos

1692
01:24:12,240 --> 01:24:15,030
que son realmente importantes
y en ocasiones bastante difíciles,

1693
01:24:15,030 --> 01:24:18,169
pero con las cuales el usuario
no interactúa directamente.

1694
01:24:18,169 --> 01:24:20,460
O también hay desarrolladores
full-stack, y eso significa que

1695
01:24:20,460 --> 01:24:22,500
hacen todo lo anterior, en lo cual
todos ustedes, los que están en CS50,

1696
01:24:22,500 --> 01:24:26,640
se convertirán después de recibir
uno o más semestres de formación.

1697
01:24:26,640 --> 01:24:29,550
Entonces, ¿cómo comenzamos
para hacer las cosas más bonitas?

1698
01:24:29,550 --> 01:24:34,470
Bueno, resulta que HTML, en su mayor
parte, es solo un lenguaje de marcado.

1699
01:24:34,470 --> 01:24:38,490
Sirve para estructurar una página web
y etiquetar cosas semánticamente,

1700
01:24:38,490 --> 01:24:40,200
y con etiquetar cosas
semánticamente, me refiero

1701
01:24:40,200 --> 01:24:42,270
a decir algo como, hey navegador,
aquí está el encabezado de mi página

1702
01:24:42,270 --> 01:24:43,840
y eso, semánticamente,
es un concepto.

1703
01:24:43,840 --> 01:24:46,048
Hey navegador, aquí está
el cuerpo de mi página, y eso también

1704
01:24:46,048 --> 01:24:47,760
es un concepto, semánticamente.

1705
01:24:47,760 --> 01:24:51,780
No dije nada sobre el diseño en negrita
o el tamaño de letra o los colores,

1706
01:24:51,780 --> 01:24:55,800
o todo eso que es importante para tener
una buena experiencia de usuario, o UX,

1707
01:24:55,800 --> 01:24:59,444
pero eso se puede
desacoplar de HTML, y de hecho,

1708
01:24:59,444 --> 01:25:01,860
uno de los desafíos, a medida
que se aprende HTML por primera vez,

1709
01:25:01,860 --> 01:25:05,760
es tratar de abrirse camino a través
de varios recursos en línea y referencias

1710
01:25:05,760 --> 01:25:07,230
que también combinarán
a veces estas ideas.

1711
01:25:07,230 --> 01:25:10,930
Hoy nos enfocaremos, no solo en corrección
o en hacer que las cosas funcionen,

1712
01:25:10,930 --> 01:25:12,880
sino también en el diseño.

1713
01:25:12,880 --> 01:25:15,000
Por ejemplo, aquí se tiene
una página web súper simple

1714
01:25:15,000 --> 01:25:17,280
para alguien llamado
John Harvard, la cual tiene

1715
01:25:17,280 --> 01:25:21,170
encabezado, parte principal, pie de página
y el encabezado es distinto de un titular.

1716
01:25:21,170 --> 01:25:22,650
Está pésimamente nombrado aquí.

1717
01:25:22,650 --> 01:25:25,839
El titular de una página web es la barra
de pestañas y otras cosas que hay arriba,

1718
01:25:25,839 --> 01:25:28,380
pero semánticamente podemos
tener una página con tres partes iguales.

1719
01:25:28,380 --> 01:25:31,890
El encabezado, que es en sí
como el título en el cuerpo de la página,

1720
01:25:31,890 --> 01:25:34,500
la parte principal
donde están los contenidos

1721
01:25:34,500 --> 01:25:37,534
y luego un pie de página como
un símbolo de copyright o algo así.

1722
01:25:37,534 --> 01:25:39,450
Entonces esta podría ser la
división general de una página,

1723
01:25:39,450 --> 01:25:42,070
pero fíjense que le he puesto
un estilo algo diferente.

1724
01:25:42,070 --> 01:25:46,870
Ahora abriré esto en un navegador,
tal como lo hice hace un momento

1725
01:25:46,870 --> 01:25:53,610
y voy a ir a, perdón, voy a revisar
todo mi historial de Internet.

1726
01:25:53,610 --> 01:25:58,560
Vamos a abrir esto tal como
lo hicimos antes en esta URL

1727
01:25:58,560 --> 01:26:01,630
para que después
podamos abrir CSS0.html.

1728
01:26:01,630 --> 01:26:04,910


1729
01:26:04,910 --> 01:26:07,980
Noten que, oh, esto ya es
ligeramente mejor que las páginas

1730
01:26:07,980 --> 01:26:11,430
que vimos antes porque está
centrado, lo cual ya es un avance

1731
01:26:11,430 --> 01:26:13,044
de todo lo anterior.

1732
01:26:13,044 --> 01:26:14,460
La primera línea es
un poco más grande.

1733
01:26:14,460 --> 01:26:17,980
La segunda línea es mediana
y la línea inferior es la más pequeña.

1734
01:26:17,980 --> 01:26:20,630
Aquí hay un poco
de estilo, pero no tanto.

1735
01:26:20,630 --> 01:26:22,240
Entonces, ¿cómo hice esto?

1736
01:26:22,240 --> 01:26:24,340
Bueno, echen un vistazo a este código.

1737
01:26:24,340 --> 01:26:28,510
Le agregué un atributo
de estilo a varias de mis etiquetas.

1738
01:26:28,510 --> 01:26:31,120
Así que el encabezado,
la principal y el pie de página

1739
01:26:31,120 --> 01:26:32,650
no tienen un estilo específico.

1740
01:26:32,650 --> 01:26:34,000
Son solo una manera
de decirle al navegador que

1741
01:26:34,000 --> 01:26:36,040
es lo importante para el título,

1742
01:26:36,040 --> 01:26:37,300
esto es lo importante
para la parte principal,

1743
01:26:37,300 --> 01:26:39,091
esto es lo importante
para el pie de página,

1744
01:26:39,091 --> 01:26:42,850
pero la estilización o la estética
provienen de este texto amarillo,

1745
01:26:42,850 --> 01:26:45,190
gracias a la sintaxis
IDE que lo resalta,

1746
01:26:45,190 --> 01:26:47,350
y observen que este texto
sigue un patrón diferente.

1747
01:26:47,350 --> 01:26:50,110
Hasta ahora, hemos utilizado
corchetes angulares, palabras,

1748
01:26:50,110 --> 01:26:51,830
signos de igual y citas.

1749
01:26:51,830 --> 01:26:56,680
Ahora dentro de esas citas
también tenemos otro patrón

1750
01:26:56,680 --> 01:26:59,800
cuando utilizamos
este segundo lenguaje, el CSS.

1751
01:26:59,800 --> 01:27:05,920
fontsize: large es la estilización para el
contenido de este elemento en particular.

1752
01:27:05,920 --> 01:27:08,180
La alineación del texto
debe estar centrada.

1753
01:27:08,180 --> 01:27:10,700
Estas son dos propiedades de CSS.

1754
01:27:10,700 --> 01:27:13,820
CSS, hojas de estilo en cascada,
en un momento veremos qué significa eso,

1755
01:27:13,820 --> 01:27:16,810
pero así es como se configura
el estilo de estos elementos,

1756
01:27:16,810 --> 01:27:20,380
y ciertamente, por eso uno es un poco
más grande y luego un poco más pequeño

1757
01:27:20,380 --> 01:27:25,125
y luego aún más pequeño porque, fíjense,
que puse fontsize:large, fontsize:medium,

1758
01:27:25,125 --> 01:27:25,750
fontsize:small.

1759
01:27:25,750 --> 01:27:29,680
Eso está bien, pero como ya lo hemos
hecho, vamos a mejorarlo iterativamente.

1760
01:27:29,680 --> 01:27:32,430
Incluso si nunca antes
han visto HTML o CSS,

1761
01:27:32,430 --> 01:27:36,860
hay un pobre intento
de diseño en este simple ejemplo.

1762
01:27:36,860 --> 01:27:42,600
¿Qué creen que está mal
o que parece algo de copiar y pegar?

1763
01:27:42,600 --> 01:27:44,444
Sí

1764
01:27:44,444 --> 01:27:46,981
PÚBLICO: Todos están
centrados [INAUDIBLE].

1765
01:27:46,981 --> 01:27:48,730
DAVID: Sí,
todos están centrados

1766
01:27:48,730 --> 01:27:52,720
y me gusta copiar y pegar
esa propiedad CSS, su valor par clave

1767
01:27:52,720 --> 01:27:54,850
su nombre
y su valor, una y otra

1768
01:27:54,850 --> 01:27:57,100
y otra vez, pero
recuerden la jerarquía de HTML

1769
01:27:57,100 --> 01:28:00,730
y el DOM, Document Object Model,
el árbol que dibujamos hace un momento.

1770
01:28:00,730 --> 01:28:02,980
Todos estos elementos,
encabezado, principal y pie de página,

1771
01:28:02,980 --> 01:28:05,454
tienen un elemento
padre llamado ¿cómo?

1772
01:28:05,454 --> 01:28:06,220
PÚBLICO: Cuerpo.

1773
01:28:06,220 --> 01:28:07,344
DAVID: Sí, cuerpo.

1774
01:28:07,344 --> 01:28:10,030
Entonces, un nivel más alto,
que tiene una sangría como esta,

1775
01:28:10,030 --> 01:28:14,020
o en el árbol está más arriba,
en ese dibujo de árbol familiar, todos

1776
01:28:14,020 --> 01:28:15,530
son hijos del cuerpo

1777
01:28:15,530 --> 01:28:18,776
¿Por qué no me limito a mover o factorizar
el centro de alineación del texto

1778
01:28:18,776 --> 01:28:19,900
en los elementos de arriba?

1779
01:28:19,900 --> 01:28:22,390
Y aquí se encuentra la cascada de CSS.

1780
01:28:22,390 --> 01:28:25,660
Las hojas de estilo en cascada significan
que si tienen una propiedad aquí,

1781
01:28:25,660 --> 01:28:29,537
caerá en cascada a todos los niños
y descendientes que estén debajo de ella,

1782
01:28:29,537 --> 01:28:30,870
y significa otra cosa también.

1783
01:28:30,870 --> 01:28:33,370
Que incluso pueden anular
estas propiedades de alguna manera,

1784
01:28:33,370 --> 01:28:34,900
pero veremos eso muy pronto.

1785
01:28:34,900 --> 01:28:38,650
Entonces, si a continuación
abro CSS1.html,

1786
01:28:38,650 --> 01:28:41,160
noten que hice
exactamente esa mejora.

1787
01:28:41,160 --> 01:28:43,150
El código ahora está
un poco más ajustado.

1788
01:28:43,150 --> 01:28:45,430
Tiene menos caracteres,
es más fácil de mantener

1789
01:28:45,430 --> 01:28:48,220
porque ahora si quiero cambiarlo
a izquierda o derecha o al centro,

1790
01:28:48,220 --> 01:28:49,840
Lo cambio en un lugar, no en tres.

1791
01:28:49,840 --> 01:28:53,170
Esto es consistente con algunos
de nuestros consejos de diseño en C

1792
01:28:53,170 --> 01:28:58,370
y, de hecho, si visito
la página de CSS1.html se ve igual,

1793
01:28:58,370 --> 01:29:01,030
pero tiene mejor diseño
por debajo del agua.

1794
01:29:01,030 --> 01:29:02,860
Pero podemos mejorarlo aún más.

1795
01:29:02,860 --> 01:29:08,290
Si abro CSS2.html,
observen que hice lo siguiente.

1796
01:29:08,290 --> 01:29:12,190
Me gusta mucho este diseño
porque es aún más breve.

1797
01:29:12,190 --> 01:29:14,680
Ya no estoy usando
el atributo de estilo.

1798
01:29:14,680 --> 01:29:17,740
Estoy usando un atributo
diferente llamado clase,

1799
01:29:17,740 --> 01:29:19,960
y la clase es una
especie de manera para definir,

1800
01:29:19,960 --> 01:29:24,310
al igual que una estructura en C permite
definir sus propios tipos de datos,

1801
01:29:24,310 --> 01:29:27,770
una clase en CSS permite definir un nombre
para un conjunto completo de propiedades,

1802
01:29:27,770 --> 01:29:31,622
entonces, acabo de decir vamos a llamar
a esta clase grande, mediano y pequeño,

1803
01:29:31,622 --> 01:29:33,580
y no sé lo que
eso significa, francamente

1804
01:29:33,580 --> 01:29:35,996
debería trabajar con un amigo
que sea mucho mejor en diseño

1805
01:29:35,996 --> 01:29:39,910
de lo que soy y dejar que
defina por mí estos significados.

1806
01:29:39,910 --> 01:29:42,910
Voy a etiquetar semánticamente
las cosas de la siguiente forma,

1807
01:29:42,910 --> 01:29:46,420
pero si nos desplazamos por el archivo,
verán que por ahora no tengo tal amigo,

1808
01:29:46,420 --> 01:29:50,064
así que lo implementé yo mismo,
y aquí está, por primera vez,

1809
01:29:50,064 --> 01:29:51,730
otra cosa en el titular de la página.

1810
01:29:51,730 --> 01:29:54,520
Por el momento obtuvimos
el título, pero resulta

1811
01:29:54,520 --> 01:29:56,770
que podemos tener
una etiqueta de estilo.

1812
01:29:56,770 --> 01:30:00,220
No solo un atributo, sino una
etiqueta de estilo dentro de la cual,

1813
01:30:00,220 --> 01:30:04,330
es un poco complejo a primera vista,
pero claramente aquí hay un patrón.

1814
01:30:04,330 --> 01:30:08,350
Tiene todas esas propiedades,
pero la nueva sintaxis aquí

1815
01:30:08,350 --> 01:30:11,110
es que si queremos definir
una palabra llamada centrado,

1816
01:30:11,110 --> 01:30:13,360
ponemos un punto
y luego la palabra "centered".

1817
01:30:13,360 --> 01:30:16,330
Si queremos la palabra
grande, ponemos .large.

1818
01:30:16,330 --> 01:30:19,800
Por lo tanto, es similar aunque
no es lo mismo que typedef en C,

1819
01:30:19,800 --> 01:30:22,750
pero ponemos .center,
.large, .medium, .small.

1820
01:30:22,750 --> 01:30:26,620
Usaremos nuestras viejas
llaves curvas, que solo veremos en CSS,

1821
01:30:26,620 --> 01:30:29,500
y esto solo define
una o más propiedades

1822
01:30:29,500 --> 01:30:31,690
que se asociarán
con esa nueva palabra clave.

1823
01:30:31,690 --> 01:30:35,180
Entonces, si nos desplazamos
hacia abajo hasta el final,

1824
01:30:35,180 --> 01:30:37,960
Verán que centré el cuerpo.

1825
01:30:37,960 --> 01:30:43,060
Hice grande el encabezado, mediana
la principal, y pequeño el pie de página,

1826
01:30:43,060 --> 01:30:45,220
y el resultado será exactamente el mismo.

1827
01:30:45,220 --> 01:30:47,620
Es muy decepcionante, pero una vez más,
es ligeramente un mejor diseño

1828
01:30:47,620 --> 01:30:51,660
porque ahora estamos a solo
un paso de mejorarlo realmente .

1829
01:30:51,660 --> 01:30:54,190
Si finalmente
consiguiera a ese amigo,

1830
01:30:54,190 --> 01:30:57,640
no sería muy fácil 
la colaboración, definitivamente.

1831
01:30:57,640 --> 01:31:00,910
si ambos trabajáramos
en el mismo archivo y, además,

1832
01:31:00,910 --> 01:31:03,340
pareciera innecesario
introducir estas semánticas.

1833
01:31:03,340 --> 01:31:07,600
¿Por qué debo tener etiquetas como
encabezado, principal y pie de página

1834
01:31:07,600 --> 01:31:11,560
y clases llamadas grandes,
medianas, pequeñas y centradas?

1835
01:31:11,560 --> 01:31:14,830
¿Por qué no aprovecho
los nombres de estas etiquetas?

1836
01:31:14,830 --> 01:31:17,830
Y aquí es donde HTML
puede ser bastante poderoso.

1837
01:31:17,830 --> 01:31:20,740
Noten que simplifiqué
arriba algunos de mis CSS.

1838
01:31:20,740 --> 01:31:22,974
Quité el punto
que equivalía a typedef,

1839
01:31:22,974 --> 01:31:25,890
como, dame algo que se llama grande,
dame algo que se llama mediano.

1840
01:31:25,890 --> 01:31:30,929
Ahora solo digo una palabra,
¿pero esas palabras son idénticas a qué?

1841
01:31:30,929 --> 01:31:31,720
AUDIENCIA: A las etiquetas.

1842
01:31:31,720 --> 01:31:33,220
DAVID: A las etiquetas en sí.

1843
01:31:33,220 --> 01:31:36,610
Etiquetas preexistentes, si las
menciono por su nombre sin un punto,

1844
01:31:36,610 --> 01:31:37,986
lo cual me da un nuevo nombre.

1845
01:31:37,986 --> 01:31:40,360
Solo menciono el cuerpo, el encabezado,
la principal y el pie de página,

1846
01:31:40,360 --> 01:31:42,818
y luego, dentro de las llaves,
defino mis propiedades,

1847
01:31:42,818 --> 01:31:47,650
ahora puedo estilizar las etiquetas
tal como existen en mi página,

1848
01:31:47,650 --> 01:31:51,790
y esto ahora parece un HTML
verdaderamente legible y actualizable.

1849
01:31:51,790 --> 01:31:56,080
Aquí no hay ninguna estética
asociada con el lenguaje de marcado,

1850
01:31:56,080 --> 01:31:59,619
más bien hay nombres de
etiquetas útiles que vienen con HTML,

1851
01:31:59,619 --> 01:32:01,160
no podemos simplemente
hacer nuestras propias etiquetas.

1852
01:32:01,160 --> 01:32:04,370
En cierto modo están en la documentación,
pero ahora son mucho más legibles

1853
01:32:04,370 --> 01:32:07,390
y esto puede verse diferente en nuestros
teléfonos o en la computadora portátil,

1854
01:32:07,390 --> 01:32:09,700
pero mi amigo, que es bueno
en estilización, puede descubrir

1855
01:32:09,700 --> 01:32:12,700
cómo dar estilo a todas estas cosas,
y lo que es mejor aún, ni siquiera

1856
01:32:12,700 --> 01:32:14,800
necesita mi archivo.

1857
01:32:14,800 --> 01:32:18,730
Fíjense que el quinto
ejemplo es para la página.

1858
01:32:18,730 --> 01:32:24,952
Nos deshicimos de la etiqueta de
estilo grande y la reemplazamos, ¿con qué?

1859
01:32:24,952 --> 01:32:26,730
PÚBLICO: Href,
¿con un enlace?

1860
01:32:26,730 --> 01:32:29,530
DAVID: Sí, con el enlace href,
que es un nombre horrible, horrible,

1861
01:32:29,530 --> 01:32:32,500
porque no es como un enlace
en la página y su hiperreferencia

1862
01:32:32,500 --> 01:32:36,310
ya se usó para un enlace en una página,
pero esto es con lo que estamos atrapados.

1863
01:32:36,310 --> 01:32:41,530
Esto solo dice, hola, navegador,
incluye este archivo CSS

1864
01:32:41,530 --> 01:32:43,090
que está en algún
otro lugar del servidor.

1865
01:32:43,090 --> 01:32:46,310
El nombre de este archivo,
arbitrariamente, es CSS4.css

1866
01:32:46,310 --> 01:32:50,840
porque es nuestro quinto
ejemplo aquí, en el índice cero.

1867
01:32:50,840 --> 01:32:54,800
La relación de
ese archivo con esta página

1868
01:32:54,800 --> 01:32:58,700
es que es una hoja de estilos,
solo una lista de estéticas o propiedades

1869
01:32:58,700 --> 01:33:03,980
que deberían caracterizar su diseño
y, de hecho, si abro CSS4.css,

1870
01:33:03,980 --> 01:33:06,450
acabo de copiar
y pegar todo allí,

1871
01:33:06,450 --> 01:33:08,900
pero en principio esto es
bueno, aunque solo estamos

1872
01:33:08,900 --> 01:33:11,057
creando trabajo para
nosotros hoy, porque ahora

1873
01:33:11,057 --> 01:33:12,640
puedo compartir
este archivo con otra persona

1874
01:33:12,640 --> 01:33:14,360
quién puede trabajar en ello
por su propia cuenta.

1875
01:33:14,360 --> 01:33:17,390
Entonces podemos fusionar nuestro trabajo,
porque el mío está en el archivo HTML

1876
01:33:17,390 --> 01:33:19,100
y su trabajo
está en el archivo CSS.

1877
01:33:19,100 --> 01:33:23,270
Mejor aún, si estamos haciendo un sitio
web completo que tiene 12 páginas o 100,

1878
01:33:23,270 --> 01:33:24,920
consideren lo siguiente.

1879
01:33:24,920 --> 01:33:28,790
Al igual que en un archivo de
encabezado en C, puedo incluir bitmap.h

1880
01:33:28,790 --> 01:33:30,590
en todo tipo de programas.

1881
01:33:30,590 --> 01:33:34,940
Del mismo modo, puedo incluir
CS4.css en todas mis páginas web.

1882
01:33:34,940 --> 01:33:37,220
Entonces, si quiero cambiar
el tamaño de la fuente o el diseño

1883
01:33:37,220 --> 01:33:41,910
o lo que sea en todo mi sitio web,
todo a la vez, lo cambio en un solo lugar

1884
01:33:41,910 --> 01:33:46,610
y no en cada maldita página web que
podría haber sido creada por mí o por

1885
01:33:46,610 --> 01:33:49,880
alguien más, así que solo
hay que mantener eso también,

1886
01:33:49,880 --> 01:33:53,360
pero podemos hacerlo aún mejor,
porque incluso el CSS que vemos aquí

1887
01:33:53,360 --> 01:33:56,510
es muy bueno, y lo que
es realmente agradable

1888
01:33:56,510 --> 01:33:59,750
es que si vamos a bootstrap,
dejen que Google me diga adónde ir,

1889
01:33:59,750 --> 01:34:00,480
estamos a salvo.

1890
01:34:00,480 --> 01:34:04,400
OK, entonces Bootstrap es una biblioteca,
anteriormente era de Twitter, ahora

1891
01:34:04,400 --> 01:34:08,030
es de una comunidad mucho más grande,
es un montón de bibliotecas de CSS.

1892
01:34:08,030 --> 01:34:12,170
Entonces, al igual que en C, tenemos
código y funciones que otros escribieron.

1893
01:34:12,170 --> 01:34:14,090
Así, en el mundo del
desarrollo web tenemos

1894
01:34:14,090 --> 01:34:17,048
código que otras personas escribieron
y lo usamos para JavaScript y Python,

1895
01:34:17,048 --> 01:34:20,000
pero incluso para la estética
hay sitios como Bootstrap

1896
01:34:20,000 --> 01:34:24,620
y otras cosas populares que nos permiten
hacer que nuestros sitios sean más bonitos

1897
01:34:24,620 --> 01:34:27,680
y construirlos más rápido
sin tener que reinventar la rueda.

1898
01:34:27,680 --> 01:34:34,550
Entonces, por ejemplo, si bajo
a Content y luego voy a Typography

1899
01:34:34,550 --> 01:34:39,410
y echo un vistazo aquí,
verán algo como h1, h2 y h3,

1900
01:34:39,410 --> 01:34:42,920
pero si quieren cosas aún más grandes
que eso, hay un encabezado de pantalla.

1901
01:34:42,920 --> 01:34:45,490
Tenemos esta versión elegante, que tiene
un encabezado de visualización elegante

1902
01:34:45,490 --> 01:34:47,000
con algo de texto
secundario difuminado.

1903
01:34:47,000 --> 01:34:50,780
Es bastante secundario, pero no tengo que
descubrir cómo hacerlo ahora mismo.

1904
01:34:50,780 --> 01:34:54,410
Si realmente quiero tener tablas,
puedo hacer tablas mucho más bonitas

1905
01:34:54,410 --> 01:34:56,910
de lo que hice con mi pequeño
teléfono de la vieja escuela hace un rato.

1906
01:34:56,910 --> 01:34:58,670
Como si pudiera hacer
cosas de diferentes colores.

1907
01:34:58,670 --> 01:35:02,480
Puedo sombrear las columnas así
y puedo hacer cosas aún más elegantes.

1908
01:35:02,480 --> 01:35:04,940
Si a continuación
abro una página web y voy

1909
01:35:04,940 --> 01:35:09,410
a nuestro gran tablero
para obtener speller.cs50.net,

1910
01:35:09,410 --> 01:35:11,990
verán que esta
es una tabla bastante buena.

1911
01:35:11,990 --> 01:35:14,198
Ciertamente mucho
mejor que la anterior, pero eso

1912
01:35:14,198 --> 01:35:16,490
se debe a que estamos
usando la biblioteca de Bootstrap,

1913
01:35:16,490 --> 01:35:19,820
y aún más
convincente que la estética,

1914
01:35:19,820 --> 01:35:22,955
supongamos que visitan
speller.cs50.net en su teléfono,

1915
01:35:22,955 --> 01:35:26,360
comienza a ponerse bastante feo una vez
que la ventana se hace más pequeña,

1916
01:35:26,360 --> 01:35:28,740
pero noten que las cosas simplemente
pueden desaparecer como por arte de magia

1917
01:35:28,740 --> 01:35:30,740
cuando estamos en un
dispositivo móvil o, en este caso,

1918
01:35:30,740 --> 01:35:33,180
cuando simulamos que utilizamos
una ventana de navegador más pequeña.

1919
01:35:33,180 --> 01:35:35,810
Entonces, si usamos CSS
y el poder estético que brinda,

1920
01:35:35,810 --> 01:35:40,820
también podemos cambiar dinámicamente
nuestros archivos para que se procesen

1921
01:35:40,820 --> 01:35:44,330
de forma diferente en diferentes
dispositivos, y finalmente abriré, por ejemplo,

1922
01:35:44,330 --> 01:35:45,260
esto en Componentes.

1923
01:35:45,260 --> 01:35:46,926
Aquí es donde se pone
realmente jugoso el asunto.

1924
01:35:46,926 --> 01:35:50,690
Si desean alertas sofisticadas para gritar
al usuario o decir que todo está bien,

1925
01:35:50,690 --> 01:35:53,240
se obtienen lindas
cajas de colores como esta.

1926
01:35:53,240 --> 01:35:55,190
Los formularios
son mucho más bonitos.

1927
01:35:55,190 --> 01:35:58,040
Es decir, ya se parece mucho más
a la web que ustedes y yo usamos

1928
01:35:58,040 --> 01:36:01,030
y no al desorden
que creé hace un momento

1929
01:36:01,030 --> 01:36:03,590
y para no hacer más larga
la historia, al igual que en C, es muy

1930
01:36:03,590 --> 01:36:07,740
fácil incluir estas cosas en nuestro
propio sitio, así que podemos hacerlo.

1931
01:36:07,740 --> 01:36:12,350
A continuación
abriré form0.html, y esto es

1932
01:36:12,350 --> 01:36:15,860
una aproximación de la
primera aplicación web que hice

1933
01:36:15,860 --> 01:36:20,320
en 1997, mucho antes de que
aplicación web fuera una frase.

1934
01:36:20,320 --> 01:36:21,980
Yo había tomado CS50 y CS51.

1935
01:36:21,980 --> 01:36:23,780
No había aprendido nada
sobre la web en ese momento.

1936
01:36:23,780 --> 01:36:25,280
Podría decir que me lo enseñe
a mí mismo y aprendí

1937
01:36:25,280 --> 01:36:27,080
de algunos amigos
y lo primero que hice fue

1938
01:36:27,080 --> 01:36:30,590
construir un sitio web interactivo en el
cual los primeros años podrían registrarse

1939
01:36:30,590 --> 01:36:34,819
para los deportes intramuros
pues ese año, en 1996, se hacía en papel.

1940
01:36:34,819 --> 01:36:37,610
Cruzaban el patio hacia Wigglesworth,
uno de los dormitorios,

1941
01:36:37,610 --> 01:36:39,776
deslizaban una hoja de papel,
al estilo antiguo, por debajo de la puerta

1942
01:36:39,776 --> 01:36:41,810
y ya estaban registrados
para un deporte.

1943
01:36:41,810 --> 01:36:45,290
Podíamos hacerlo mejor,
incluso en 1997, y lo hicimos con la web,

1944
01:36:45,290 --> 01:36:50,000
y así, este formulario0 de esos tiempos
se veía un poco feo como este,

1945
01:36:50,000 --> 01:36:53,025
pero tenía un cuadro de texto
donde podían escribir su nombre

1946
01:36:53,025 --> 01:36:55,400
y luego estaba el dormitorio
donde podían seleccionar a Matthew.

1947
01:36:55,400 --> 01:36:58,647
Entonces podía poner David Malan,
Matthews y luego hacer clic en Registrar,

1948
01:36:58,647 --> 01:37:00,980
pero aún no tenemos
la capacidad de hacer backbends.

1949
01:37:00,980 --> 01:37:03,710
Así que este formulario no irá
hoy a ninguna parte, pero al menos

1950
01:37:03,710 --> 01:37:08,450
obtuvieron este tipo de estética,
una especie de estética de 1997.

1951
01:37:08,450 --> 01:37:11,390
Pero si vemos este
otro ejemplo, form1.html,

1952
01:37:11,390 --> 01:37:14,870
se ve muy bonito,
bastante mejor ahora.

1953
01:37:14,870 --> 01:37:17,960
Tal vez un poco grande en retrospectiva,
si vemos la fuente en la pantalla,

1954
01:37:17,960 --> 01:37:21,530
pero todo lo que he hecho ahora
es usar esta biblioteca de Bootstrap.

1955
01:37:21,530 --> 01:37:23,840
Observen que es un poco
difícil de ver en el proyector,

1956
01:37:23,840 --> 01:37:25,874
pero todo está
muy bien delineado.

1957
01:37:25,874 --> 01:37:28,040
Tiene un texto de ejemplo
de Mark Zuckerberg que

1958
01:37:28,040 --> 01:37:33,265
podemos ignorar si escribimos nuestra
propia dirección de correo electrónico.

1959
01:37:33,265 --> 01:37:36,140
Tenemos una caja de aspecto más bonito, un botón de aspecto más bonito, y eso es

1960
01:37:36,140 --> 01:37:42,500
porque si abrimos,
como lo hago aquí abajo,

1961
01:37:42,500 --> 01:37:46,920
form1.html, observen que,
además de mi HTML,

1962
01:37:46,920 --> 01:37:49,620
y además de un par
de otras cosas que agregué

1963
01:37:49,620 --> 01:37:52,590
a fin de que sea más amigable para
dispositivos móviles en particular,

1964
01:37:52,590 --> 01:37:54,057
también añadí esto.

1965
01:37:54,057 --> 01:37:55,890
Leí la documentación
en getbootstrap.com

1966
01:37:55,890 --> 01:38:00,300
y agregué la biblioteca
de Bootstrap a mi propio código

1967
01:38:00,300 --> 01:38:04,500
para tener acceso
a sus características reales,

1968
01:38:04,500 --> 01:38:08,010
y luego... esto luce un poco
abrumador a primera vista,

1969
01:38:08,010 --> 01:38:09,610
pero simplemente
seguí las instrucciones.

1970
01:38:09,610 --> 01:38:12,276
Hay algo llamado div en HTML
que hace una división de la página.

1971
01:38:12,276 --> 01:38:14,640
Significa que me da
esta región rectangular invisible.

1972
01:38:14,640 --> 01:38:16,936
La clase I asociada con ello
se llama grupo de formulario.

1973
01:38:16,936 --> 01:38:18,060
Y yo no inventé esta palabra,

1974
01:38:18,060 --> 01:38:19,143
viene desde Bootstrap.

1975
01:38:19,143 --> 01:38:20,740
Yo solo hice lo que
me dijeron que hiciera.

1976
01:38:20,740 --> 01:38:22,860
Luego tengo una etiqueta
que vuelve las cosas más accesibles

1977
01:38:22,860 --> 01:38:24,450
y podemos hacer clic
en diferentes lugares.

1978
01:38:24,450 --> 01:38:26,408
Tengo otra clase aquí,
pero para no hacer más larga la historia,

1979
01:38:26,408 --> 01:38:29,130
solo leo la documentación
porque sé cuáles etiquetas son,

1980
01:38:29,130 --> 01:38:31,980
Sé cuáles son los atributos.

1981
01:38:31,980 --> 01:38:35,280
Ahora sé un poco de CSS,
sé cómo funciona HTTP,

1982
01:38:35,280 --> 01:38:40,740
y tengo suficientes elementos básicos
para trabajar en esto yo mismo.

1983
01:38:40,740 --> 01:38:44,745
Entonces esto es CSS y hay un último
detalle que pensé que nos mostraría.

1984
01:38:44,745 --> 01:38:48,930
En todos estos ejemplos de John Harvard
que vimos hace un momento,

1985
01:38:48,930 --> 01:38:53,100
teníamos algo así
en la parte inferior.

1986
01:38:53,100 --> 01:38:57,090
Este signo &#169;

1987
01:38:57,090 --> 01:39:00,424
¿Cuál era esa representación,
si la distinguen, en la página web?

1988
01:39:00,424 --> 01:39:01,380
PÚBLICO: Copyright.

1989
01:39:01,380 --> 01:39:02,310
DAVID: Sí, el símbolo de copyright.

1990
01:39:02,310 --> 01:39:05,030
En mi teclado de los Estados Unidos
no hay ningún símbolo de copyright.

1991
01:39:05,030 --> 01:39:07,860
Entonces necesitamos una
especie de patrón de caracteres

1992
01:39:07,860 --> 01:39:10,290
con los cuales podamos
representar a los de HTML.

1993
01:39:10,290 --> 01:39:14,010
Así como tenemos / n y otros
caracteres especiales de escape en C,

1994
01:39:14,010 --> 01:39:17,250
también tenemos los que se llaman
entidades HTML en HTML, lo cual sabrían

1995
01:39:17,250 --> 01:39:20,010
si leen la documentación,
pero ese es el símbolo de copyright,

1996
01:39:20,010 --> 01:39:24,210
y pensé que era bastante
oportuno destacarlo porque ayer

1997
01:39:24,210 --> 01:39:27,660
o esta mañana, Apple anunció
que en la nueva versión de iOS que

1998
01:39:27,660 --> 01:39:32,100
pronto podrán descargar, agregaron
aún más tontos emojis al conjunto de

1999
01:39:32,100 --> 01:39:32,920
caracteres
para los Emojis.

2000
01:39:32,920 --> 01:39:35,070
Ciertamente están
de moda en estos días

2001
01:39:35,070 --> 01:39:39,030
y no solo vemos ahora una manera
de representar caracteres especiales

2002
01:39:39,030 --> 01:39:43,470
que de otra manera no podríamos
escribir usando HTML, pues resulta

2003
01:39:43,470 --> 01:39:47,250
que los emojis son
solo chars, caracteres,

2004
01:39:47,250 --> 01:39:48,480
pero no son de 8 bits.

2005
01:39:48,480 --> 01:39:50,640
Recuerden que C,
tal como hemos estado usando,

2006
01:39:50,640 --> 01:39:54,780
utiliza ASCII, que solo utiliza 7 u 8
bits en total y los emojis, Dios mío.

2007
01:39:54,780 --> 01:39:57,747
Hay muchos ahora
y necesitamos más que 8 bits

2008
01:39:57,747 --> 01:40:00,330
para representarlos,
así nació algo llamado Unicode.

2009
01:40:00,330 --> 01:40:02,940
Bueno, esa no es la razón
por la que Unicode fue inventado,

2010
01:40:02,940 --> 01:40:07,050
pero es para lo que se utiliza,
porque estos emojis simplemente son

2011
01:40:07,050 --> 01:40:10,890
caracteres ASCII pero con múltiples
bytes, generalmente dos bytes,

2012
01:40:10,890 --> 01:40:14,070
tal vez tres bytes, y de hecho,
si visitan unicode.org,

2013
01:40:14,070 --> 01:40:21,611
verán que el número en hex 1F600
representa a la carita sonriente,

2014
01:40:21,611 --> 01:40:24,360
lo cual se implementa de diferente
manera por distintas empresas

2015
01:40:24,360 --> 01:40:27,450
en diferentes dispositivos,
pero si lo cierro aquí,

2016
01:40:27,450 --> 01:40:37,470
abro este mismo archivo y lo cambio a
1F600 en hexadecimal, 1-F-6-0-0, guardar,

2017
01:40:37,470 --> 01:40:41,530
y vuelvo a mi navegador
y luego vuelvo a CSS0,

2018
01:40:41,530 --> 01:40:44,292
ahora tenemos una página web muy feliz.

2019
01:40:44,292 --> 01:40:45,250
Y eso es todo por hoy.

2020
01:40:45,250 --> 01:40:48,530
Me quedaré para responder preguntas,
nos vemos la próxima vez.