1
00:00:00,000 --> 00:00:03,339
[MÚSICA DE FONDO]

2
00:00:03,339 --> 00:00:10,510


3
00:00:10,510 --> 00:00:14,050
DAVID: Muy bien, esto es
CS50, y esta es la lección 9.

4
00:00:14,050 --> 00:00:16,600
Recientemente, nos
sumergimos en varios

5
00:00:16,600 --> 00:00:23,587
lenguajes, entre ellos, HTML,
CSS, y últimamente Python.

6
00:00:23,587 --> 00:00:25,420
Y dentro de poco
veremos JavaScript,

7
00:00:25,420 --> 00:00:26,780
veremos
SQL y más.

8
00:00:26,780 --> 00:00:29,680
En un momento, veremos
si podemos entender lo que

9
00:00:29,680 --> 00:00:31,263
pasa con varios de esos lenguajes.

10
00:00:31,263 --> 00:00:35,450
¿Para qué se usa HTML?, el lenguaje
que estudiamos hace un par de semanas.

11
00:00:35,450 --> 00:00:36,250
PÚBLICO: Para sitios web.

12
00:00:36,250 --> 00:00:36,950
DAVID: Para sitios web.

13
00:00:36,950 --> 00:00:37,991
OK, pero seamos más específicos.

14
00:00:37,991 --> 00:00:38,990
¿Qué acerca de los sitios web?

15
00:00:38,990 --> 00:00:39,850
PÚBLICO: Para el marcado.

16
00:00:39,850 --> 00:00:40,460
DAVID: Para el marcado.

17
00:00:40,460 --> 00:00:41,834
OK, seamos más
específicos que el marcado.

18
00:00:41,834 --> 00:00:43,186
¿A qué me refiero con eso?

19
00:00:43,186 --> 00:00:44,410
PÚBLICO: La manera en que lucen.

20
00:00:44,410 --> 00:00:45,701
DAVID: La manera en que lucen.

21
00:00:45,701 --> 00:00:48,430
El marcado de un sitio web,
la estructura del sitio web,

22
00:00:48,430 --> 00:00:52,430
y los contenidos del sitio web, son lo
que queremos marcar al usar HTML,

23
00:00:52,430 --> 00:00:53,624
Lenguaje de marcado de hipertexto.

24
00:00:53,624 --> 00:00:55,540
No es un lenguaje de
programación, porque no

25
00:00:55,540 --> 00:00:57,290
tiene funciones,
bucles, condiciones,

26
00:00:57,290 --> 00:01:00,010
y el sentido del control lógico
que usamos desde hace tiempo.

27
00:01:00,010 --> 00:01:02,440
De hecho, se trata de como
se presenta la información.

28
00:01:02,440 --> 00:01:03,310
Hacer algo en negritas,

29
00:01:03,310 --> 00:01:04,390
hacer letra cursiva.

30
00:01:04,390 --> 00:01:06,530
poner algo centrado y así sucesivamente.

31
00:01:06,530 --> 00:01:10,930
CSS nos permite llevar las cosas
hasta las últimas consecuencias

32
00:01:10,930 --> 00:01:13,240
y obtener la
estética correcta.

33
00:01:13,240 --> 00:01:17,890
Así, lo que acabo de describir,
en negrita, cursiva y centrado,

34
00:01:17,890 --> 00:01:21,110
lo hicimos como en la
primera versión de HTML.

35
00:01:21,110 --> 00:01:22,450
No existía CSS.

36
00:01:22,450 --> 00:01:26,380
Actualmente, el mejor enfoque es el
factor fuera de ese tipo de estética

37
00:01:26,380 --> 00:01:30,760
de HTML, y en su lugar
ponerlos en el lenguaje CSS

38
00:01:30,760 --> 00:01:31,390
con hojas de estilos en cascada,

39
00:01:31,390 --> 00:01:35,020
HTML se convirtió en un lenguaje
para colocar texto en una columna,

40
00:01:35,020 --> 00:01:37,840
poner este otro texto en otra columna,

41
00:01:37,840 --> 00:01:39,610
estructurar nuestros
datos de cierta manera,

42
00:01:39,610 --> 00:01:43,990
y al emplear CSS, se estiliza
con colores, fuentes y ubicación.

43
00:01:43,990 --> 00:01:46,630
Hace poco, presentamos Python.

44
00:01:46,630 --> 00:01:50,374
¿Y qué cosas sobresalientes
se pueden decir sobre Python?

45
00:01:50,374 --> 00:01:51,040
¿Qué fue lo que obtuvimos?

46
00:01:51,040 --> 00:01:53,740


47
00:01:53,740 --> 00:01:56,680
¿Alguien?, ¿allá atrás?

48
00:01:56,680 --> 00:01:57,700
Python...

49
00:01:57,700 --> 00:01:59,770
PÚBLICO: Una sintaxis más directa.

50
00:01:59,770 --> 00:02:02,440
DAVID: Una sintaxis más
directa, sí, de alguna manera,

51
00:02:02,440 --> 00:02:05,230
y veremos alguna sintaxis
donde, retiro lo dicho, creo.

52
00:02:05,230 --> 00:02:07,570
En general,
ese es el tipo de caso,

53
00:02:07,570 --> 00:02:10,850
porque se usan paréntesis
si son estrictamente necesarios,

54
00:02:10,850 --> 00:02:13,180
no necesitamos
llaves, solo porque sí.

55
00:02:13,180 --> 00:02:16,420
Por otra parte, cosas como la
sangría se vuelven más importantes,

56
00:02:16,420 --> 00:02:18,380
es un poco molesto,
pero por otro lado,

57
00:02:18,380 --> 00:02:19,990
se refuerzan los buenos hábitos,

58
00:02:19,990 --> 00:02:21,730
probablemente
eso es algo bueno.

59
00:02:21,730 --> 00:02:23,634
Al final de
la última lección,

60
00:02:23,634 --> 00:02:26,050
hicimos algo, que con suerte,
fue maravillosamente inspirador,

61
00:02:26,050 --> 00:02:28,830
qué fue implementar, ¿qué en Python?

62
00:02:28,830 --> 00:02:29,770
PÚBLICO: ¿El diccionario?

63
00:02:29,770 --> 00:02:30,936
DAVID: El diccionario.

64
00:02:30,936 --> 00:02:33,100
Prácticamente reimplementamos

65
00:02:33,100 --> 00:02:39,640
todo el problema speller de la serie 5,
al usar 15, 20, 25 líneas de código,

66
00:02:39,640 --> 00:02:43,270
sin mencionar que se
pudo escribir en 30 segundos.

67
00:02:43,270 --> 00:02:45,940
Eso no es solo porque
sabía lo que quería escribir,

68
00:02:45,940 --> 00:02:48,670
es porque se debe escribir
en pocas líneas de código.

69
00:02:48,670 --> 00:02:52,720
Con Python, dentro de poco con
JavaScript, e incluso otros lenguajes,

70
00:02:52,720 --> 00:02:54,780
obtenemos mucha más
funcionalidad gratuitamente.

71
00:02:54,780 --> 00:02:57,530
Si deseamos conocer la longitud de
una cadena, llamamos a una función,

72
00:02:57,530 --> 00:03:01,120
si queremos una lista vinculada, crearemos
una estructura de datos llamada Lista,

73
00:03:01,120 --> 00:03:04,450
igualmente si deseamos una tabla hash,
utilizaremos la estructura Dictionary,

74
00:03:04,450 --> 00:03:06,490
no la implementamos nosotros mismos.

75
00:03:06,490 --> 00:03:09,129
Por debajo del agua,
alguien más ahí afuera

76
00:03:09,129 --> 00:03:11,170
implementó toda esa
funcionalidad para nosotros,

77
00:03:11,170 --> 00:03:13,660
y ahora nos apoyamos
en sus hombros.

78
00:03:13,660 --> 00:03:16,990
El día de hoy, que
iniciamos la transición

79
00:03:16,990 --> 00:03:21,340
a la última parte del curso, donde
no solo dominamos una línea de comando

80
00:03:21,340 --> 00:03:24,850
ni un punto diagonal algo, en la
programación web las ideas son más bien

81
00:03:24,850 --> 00:03:28,070
iguales, siempre y cuando
las comprendamos, con suerte

82
00:03:28,070 --> 00:03:32,320
comenzaremos con lo que es
HTTP, y cómo la web y el internet

83
00:03:32,320 --> 00:03:33,400
funcionan por sí mismas.

84
00:03:33,400 --> 00:03:36,980
Recordemos que hace un momento
buscamos una URL como esta,

85
00:03:36,980 --> 00:03:41,950
visitamos
https://www.facebook.com y presionamos

86
00:03:41,950 --> 00:03:45,040
Enter en nuestro navegador,
para enviar algún tipo de mensaje

87
00:03:45,040 --> 00:03:48,230
en un sobre, que en nuestro
mundo físico podría lucir así.

88
00:03:48,230 --> 00:03:49,960
desde luego, en su lugar, es digital.

89
00:03:49,960 --> 00:03:52,660
¿Qué hay dentro de ese
sobre, si en pocas palabras,

90
00:03:52,660 --> 00:03:56,634
escribimos esa URL antes de
que trate de llegar a Facebook?

91
00:03:56,634 --> 00:03:58,582
PÚBLICO: Un mensaje
de error que lo redirige a

92
00:03:58,582 --> 00:04:00,280
me imagino que [INAUDIBLE] ese.

93
00:04:00,280 --> 00:04:03,071
DAVID: Sí, es posible que no exista
un mensaje de error, porque esa URL

94
00:04:03,071 --> 00:04:04,030
tenía el HTTPS.

95
00:04:04,030 --> 00:04:05,863
No sería como
un mensaje de error,

96
00:04:05,863 --> 00:04:08,220
sería una preferencia para
ir a una ubicación diferente.

97
00:04:08,220 --> 00:04:08,943
PÚBLICO: ¿Se movió?

98
00:04:08,943 --> 00:04:09,734
DAVID: ¿Perdón?

99
00:04:09,734 --> 00:04:10,722
PÚBLICO: Se movió,

100
00:04:10,722 --> 00:04:12,774
parecido a un traslado permanente.

101
00:04:12,774 --> 00:04:13,690
DAVID: ¡Oh, se movió!

102
00:04:13,690 --> 00:04:16,250
No se movió,
la URL solo se acortó.

103
00:04:16,250 --> 00:04:18,880
Recordemos todos esos
301 redireccionamientos

104
00:04:18,880 --> 00:04:22,000
que fueron el resultado de, por
ejemplo, duplicar, duplicar, duplicar

105
00:04:22,000 --> 00:04:24,156
o quitar la S. Así que,
en realidad esto es lo bueno.

106
00:04:24,156 --> 00:04:27,280
Este fue el final de la historia,
donde todo funcionó y regresamos

107
00:04:27,280 --> 00:04:28,930
a 200 OK.

108
00:04:28,930 --> 00:04:33,040
Si presiono Enter en mi
laptop e intento visitar esa URL,

109
00:04:33,040 --> 00:04:35,890
¿Qué puse, o qué puso
mi laptop dentro de ese sobre?

110
00:04:35,890 --> 00:04:37,150
PÚBLICO: Una solicitud.

111
00:04:37,150 --> 00:04:40,150
DAVID: La solicitud para obtener una
ubicación, era como el verbo obtener,

112
00:04:40,150 --> 00:04:45,040
como consígueme, diagonal, porque la
última cosa en esta URL es la diagonal,

113
00:04:45,040 --> 00:04:47,070
que probablemente tiene
un encabezado del servidor.

114
00:04:47,070 --> 00:04:50,912
Recordemos que vimos servidor, dos puntos,
el nombre del dominio del sitio web,

115
00:04:50,912 --> 00:04:53,120
y hubo muchos otros
encabezados, por así decirlo,

116
00:04:53,120 --> 00:04:54,703
de los que hicimos caso omiso.

117
00:04:54,703 --> 00:04:57,910
En esencia, sobre un pedazo
de papel, que virtualmente

118
00:04:57,910 --> 00:05:01,600
está dentro de este sobre, o al menos
en estas dos líneas, como un recordatorio

119
00:05:01,600 --> 00:05:04,870
de un protocolo, o una
convención de un acuse de recibo

120
00:05:04,870 --> 00:05:07,150
que tratamos de usar con el servidor.

121
00:05:07,150 --> 00:05:11,350
Ahora, cuando el servidor
responde con su propio sobre,

122
00:05:11,350 --> 00:05:12,820
¿Cómo cambian estos encabezados?

123
00:05:12,820 --> 00:05:16,940
¿Qué hay dentro de los sobres que regresan
con los encabezados HTTP de Facebook?

124
00:05:16,940 --> 00:05:21,007


125
00:05:21,007 --> 00:05:22,340
Lo estropeé hace un momento.

126
00:05:22,340 --> 00:05:22,840
¿Qué?

127
00:05:22,840 --> 00:05:24,120
PÚBLICO: ¿La dirección IP?

128
00:05:24,120 --> 00:05:25,920
DAVID: En algún sitio..., sin embargo,

129
00:05:25,920 --> 00:05:27,360
consideraremos el exterior del sobre,

130
00:05:27,360 --> 00:05:28,401
así es como me llega.

131
00:05:28,401 --> 00:05:29,465
¿Qué hay en su interior?

132
00:05:29,465 --> 00:05:32,340
¿Cuál será el código de estado cuando
visite la página de inicio de Facebook?

133
00:05:32,340 --> 00:05:33,030
PÚBLICO: 200 OK

134
00:05:33,030 --> 00:05:37,102
DAVID: 200 OK, y vimos
200, OK solo cuando

135
00:05:37,102 --> 00:05:39,060
buscamos por debajo del
agua, por así decirlo, para ver

136
00:05:39,060 --> 00:05:43,200
que había dentro de estos sobres al usar
la barra de herramientas del Inspector de

137
00:05:43,200 --> 00:05:46,599
Chrome, las herramientas de desarrollador,
o cURL, que usa líneas de comandos.

138
00:05:46,599 --> 00:05:48,390
Las probabilidades son,
que hay otros encabezados ahí,

139
00:05:48,390 --> 00:05:50,910
como: Content-Type: text/html.

140
00:05:50,910 --> 00:05:53,100
Creo que ese es el único que vimos

141
00:05:53,100 --> 00:05:55,920
que avanza, mientras creamos nuestras
propias aplicaciones basadas en la web,

142
00:05:55,920 --> 00:05:58,740
vimos a Chrome y
muchas otras herramientas

143
00:05:58,740 --> 00:05:59,940
de diferentes tipos de contenido.

144
00:05:59,940 --> 00:06:03,242
Veremos imágenes
como /png o /jpg,

145
00:06:03,242 --> 00:06:04,950
es más, cada vez que
descarguemos una imagen

146
00:06:04,950 --> 00:06:07,320
de un gato o de algo
del Internet, se incluyen

147
00:06:07,320 --> 00:06:10,350
los encabezados de ese
sobre en dos líneas como esta.

148
00:06:10,350 --> 00:06:12,000
Pero un gato no es una página web,

149
00:06:12,000 --> 00:06:13,260
tampoco es HTML.

150
00:06:13,260 --> 00:06:17,370
Así que, sería como imagen /jpg,
si es una fotografía de un gato.

151
00:06:17,370 --> 00:06:19,560
Debajo de esos tres puntos

152
00:06:19,560 --> 00:06:22,620
es donde las cosas se pusieron
interesantes en la última mitad

153
00:06:22,620 --> 00:06:27,427
de nuestra lección sobre HTTP, ¿qué
vino debajo de todos los encabezados HTTP

154
00:06:27,427 --> 00:06:29,010
dentro de este sobre de Facebook?

155
00:06:29,010 --> 00:06:34,180


156
00:06:34,180 --> 00:06:36,115
¿Qué hay dentro del sobre?

157
00:06:36,115 --> 00:06:40,480


158
00:06:40,480 --> 00:06:41,450
PÚBLICO: ¿Nada?

159
00:06:41,450 --> 00:06:43,240
DAVID: Nada..., sí,
técnicamente es una respuesta.

160
00:06:43,240 --> 00:06:43,739
Pero...

161
00:06:43,739 --> 00:06:45,531
PÚBLICO: ¿No son
como piezas del archivo?

162
00:06:45,531 --> 00:06:47,488
DAVID: Sí, son
las piezas del archivo.

163
00:06:47,488 --> 00:06:49,070
Me refiero a que, es el archivo en sí.

164
00:06:49,070 --> 00:06:52,270
Cuando escribimos una
carta en el mundo humano,

165
00:06:52,270 --> 00:06:53,650
en general, ponemos la fecha,

166
00:06:53,650 --> 00:06:55,450
y la dirección de la persona,

167
00:06:55,450 --> 00:06:57,196
además de escribirle, estimado fulano de tal.

168
00:06:57,196 --> 00:06:59,320
Podemos pensar en
todo eso como metadatos,

169
00:06:59,320 --> 00:07:02,069
las cosas que no son el meollo
de nuestro mensaje para el humano,

170
00:07:02,069 --> 00:07:03,520
se consideran los encabezados HTTP.

171
00:07:03,520 --> 00:07:06,040
Una vez que comenzamos a
redactar nuestro primer párrafo

172
00:07:06,040 --> 00:07:10,600
y la parte sustancial de
nuestra carta, estará aquí abajo,

173
00:07:10,600 --> 00:07:11,630
por así decirlo.

174
00:07:11,630 --> 00:07:14,170
Ese será el HTML
dentro de este sobre.

175
00:07:14,170 --> 00:07:17,920
Si descargo la página de inicio
de Facebook a mi computadora,

176
00:07:17,920 --> 00:07:21,860
y veo la página de inicio de Facebook
o sus noticias, o si me conecto,

177
00:07:21,860 --> 00:07:24,460
todo ese HTML está
adentro de este sobre.

178
00:07:24,460 --> 00:07:27,130
A fin de cuentas, son
todos esos ceros y unos,

179
00:07:27,130 --> 00:07:29,650
ahora que ya no
estamos en la semana cero,

180
00:07:29,650 --> 00:07:33,070
y que pensamos en términos de
lenguaje, hay una gran cantidad de HTML.

181
00:07:33,070 --> 00:07:34,749
¿Cómo se veía ese HTML?

182
00:07:34,749 --> 00:07:37,165
En el caso más
sencillo, pudo lucir así.

183
00:07:37,165 --> 00:07:40,300
Esta es una página web más
simple que la que posee Facebook,

184
00:07:40,300 --> 00:07:43,070
pero sería un ejemplo
del primer párrafo, parecida

185
00:07:43,070 --> 00:07:47,620
a la página de inicio de Facebook
que va del servidor al navegador.

186
00:07:47,620 --> 00:07:53,410
Esa es la relación
entre HTTP, HTML y

187
00:07:53,410 --> 00:07:55,420
CSS, aunque no se describió aquí.

188
00:07:55,420 --> 00:07:58,530
HTTP es ese protocolo,
ese conjunto de convenciones,

189
00:07:58,530 --> 00:08:01,990
como el apretón de manos, que
asegura que los datos están formateados

190
00:08:01,990 --> 00:08:04,690
de cierta manera y que
me llegan desde el servidor

191
00:08:04,690 --> 00:08:06,700
al navegador, o del navegador al servidor.

192
00:08:06,700 --> 00:08:09,210
Más abajo existe un
lenguaje muy específico llamado

193
00:08:09,210 --> 00:08:11,320
HTML, el cual es el contenido real.

194
00:08:11,320 --> 00:08:13,670
¿Qué hace mi navegador tras recibir esto?

195
00:08:13,670 --> 00:08:16,650
Al igual que los humanos,
lee el primer párrafo de la carta,

196
00:08:16,650 --> 00:08:19,360
un navegador leerá esto de arriba
hacia abajo, de izquierda a derecha,

197
00:08:19,360 --> 00:08:20,560
y dice lo siguiente:

198
00:08:20,560 --> 00:08:22,210
Hola navegador, aquí hay una página web,

199
00:08:22,210 --> 00:08:23,700
aquí está el titular de la página,

200
00:08:23,700 --> 00:08:25,033
aquí está el título.

201
00:08:25,033 --> 00:08:26,140
Colócalo en la barra de pestañas.

202
00:08:26,140 --> 00:08:27,490
Hola navegador, aquí está el cuerpo.

203
00:08:27,490 --> 00:08:30,150
Ponlo en la gran región
rectangular de la ventana.

204
00:08:30,150 --> 00:08:32,690
Eso es todo para la página web.

205
00:08:32,690 --> 00:08:36,325
Podemos pensar en abrir y cerrar
etiquetas, o iniciar y terminar

206
00:08:36,325 --> 00:08:37,960
etiquetas, que son las directrices

207
00:08:37,960 --> 00:08:39,820
para realizar algo o detener algo.

208
00:08:39,820 --> 00:08:43,090
Eso es lo que hace el
navegador por debajo del agua.

209
00:08:43,090 --> 00:08:47,290
La última vez presentamos
Python, y no se relacionó

210
00:08:47,290 --> 00:08:48,100
con todo esto.

211
00:08:48,100 --> 00:08:50,249
Es solo otro lenguaje de programación.

212
00:08:50,249 --> 00:08:53,290
Pudimos presentar Python en la semana 1,

213
00:08:53,290 --> 00:08:55,960
justo después de echar un vistazo
a Scratch, en vez de estudiar a C.

214
00:08:55,960 --> 00:08:58,820
En vez de eso, iniciamos
con el programa gráfico Scratch,

215
00:08:58,820 --> 00:09:00,730
posteriormente pasamos
a un nivel muy bajo con C,

216
00:09:00,730 --> 00:09:02,800
construimos, construimos,
y construimos por encima de él,

217
00:09:02,800 --> 00:09:07,150
hasta que echamos un vistazo a Python,
y resolvimos todos esos mismos problemas

218
00:09:07,150 --> 00:09:07,665
con Python.

219
00:09:07,665 --> 00:09:09,540
De hecho, uno de
los retos de la serie

220
00:09:09,540 --> 00:09:14,560
de problemas 6 es retroceder algunas
semanas y volver a implementar Mario,

221
00:09:14,560 --> 00:09:18,729
Cash or Credit, Caesar,
o Vigenere en Python,

222
00:09:18,729 --> 00:09:21,520
para que tengan sus propias
soluciones a mano, o las soluciones

223
00:09:21,520 --> 00:09:24,280
del equipo en C. Y será
una especie ejercicio de

224
00:09:24,280 --> 00:09:27,130
calentamiento y un ejercicio reconfortante
simplemente para traducir algo que 

225
00:09:27,130 --> 00:09:29,980
saben que funciona, o que debería
funcionar para un nuevo lenguaje,

226
00:09:29,980 --> 00:09:33,220
y ver el mapeo de uno a otro,
tal como lo hicimos con Speller,

227
00:09:33,220 --> 00:09:34,510
pero más poderoso.

228
00:09:34,510 --> 00:09:37,630
También vamos a empezar
a construir aplicaciones usando Python

229
00:09:37,630 --> 00:09:38,870
que no hemos construido antes.

230
00:09:38,870 --> 00:09:41,470
Hoy, por ejemplo, haremos

231
00:09:41,470 --> 00:09:44,890
un puñado ejemplos que usan Python

232
00:09:44,890 --> 00:09:47,860
para generar HTML de un servidor para mí.

233
00:09:47,860 --> 00:09:50,260
Porque podríamos escribir
esto en nuestra Mac o PC,

234
00:09:50,260 --> 00:09:51,010
podríamos guardarlo,

235
00:09:51,010 --> 00:09:53,330
o subirlo a un servidor en la nube,

236
00:09:53,330 --> 00:09:54,400
y la gente podría visitarlo.

237
00:09:54,400 --> 00:09:57,776
Si visitamos esta página hoy,
mañana o al siguiente día

238
00:09:57,776 --> 00:09:59,150
siempre será lo mismo.

239
00:09:59,150 --> 00:10:01,630
Dirá, hola título,
hola cuerpo todos los días.

240
00:10:01,630 --> 00:10:05,110
Facebook, Gmail, y cualquier sitio
web en estos días es mucho más dinámico.

241
00:10:05,110 --> 00:10:07,390
El contenido cambia según lo
que nosotros u otros humanos,

242
00:10:07,390 --> 00:10:10,510
en general, o incluso en
el mismo día, es un sitio nuevo.

243
00:10:10,510 --> 00:10:13,630
Hoy exploraremos
como se utiliza la programación

244
00:10:13,630 --> 00:10:17,260
en particular en Python, para
generar contenido dinámico,

245
00:10:17,260 --> 00:10:19,780
con base en datos en las
interacciones de su base de datos

246
00:10:19,780 --> 00:10:22,760
del usuario o cualquier
cantidad de otras cosas.

247
00:10:22,760 --> 00:10:24,282
¿Cómo lograremos hacer esto?

248
00:10:24,282 --> 00:10:26,740
Abriré el IDE por solo un momento

249
00:10:26,740 --> 00:10:31,240
con un ejemplo del código
fuente de hoy, llamado serve.py.

250
00:10:31,240 --> 00:10:34,330
Este es un ejemplo, algunas de sus
características parecerían familiares,

251
00:10:34,330 --> 00:10:35,240
pero no todas ellas.

252
00:10:35,240 --> 00:10:37,270
Primero me desplazaré a la parte inferior.

253
00:10:37,270 --> 00:10:43,630
Este es un programa escrito en
Python que implementa un servidor web.

254
00:10:43,630 --> 00:10:44,589
Recordemos, un servidor,

255
00:10:44,589 --> 00:10:47,379
aunque la mayoría
crecimos pensando en ella

256
00:10:47,379 --> 00:10:48,490
como una máquina física,

257
00:10:48,490 --> 00:10:51,790
es una pieza de software que
se ejecuta en una máquina física.

258
00:10:51,790 --> 00:10:56,110
Para ser claros, ¿qué
hace un servidor web?

259
00:10:56,110 --> 00:10:58,160
¿Cuál es su propósito en la vida?

260
00:10:58,160 --> 00:11:00,510
PÚBLICO: Conectarse a Internet.

261
00:11:00,510 --> 00:11:02,820
DAVID: Conectarse,
es un poco más grande,

262
00:11:02,820 --> 00:11:05,850
su funcionalidad está
mucho más definida.

263
00:11:05,850 --> 00:11:06,947
¿Qué es un servidor web?

264
00:11:06,947 --> 00:11:09,030
Es como un enrutador
interconecta cosas.

265
00:11:09,030 --> 00:11:09,690
PÚBLICO: ¿Una puerta?

266
00:11:09,690 --> 00:11:10,000
DAVID: ¿Qué es eso?

267
00:11:10,000 --> 00:11:11,522
PÚBLICO: Nuestra puerta al Internet.

268
00:11:11,522 --> 00:11:13,230
DAVID: Una puerta a...
es una descripción

269
00:11:13,230 --> 00:11:16,961
demasiado elegante, en realidad se
establecerá lo que hace la funcionalidad.

270
00:11:16,961 --> 00:11:19,460
PÚBLICO: ¿Escucha las
solicitudes y luego las responde?

271
00:11:19,460 --> 00:11:21,710
DAVID: Correcto, es una
respuesta mucho menos interesante,

272
00:11:21,710 --> 00:11:25,020
más concreta y objetiva en
cuanto a lo que hace el servidor.

273
00:11:25,020 --> 00:11:30,060
Es una pieza de software
que solo escucha solicitudes HTTP

274
00:11:30,060 --> 00:11:33,960
en Internet que entran por
conexiones por cable o inalámbricas.

275
00:11:33,960 --> 00:11:37,470
Tan pronto como se escucha una
solicitud HTTP, se obtiene una diagonal,

276
00:11:37,470 --> 00:11:39,750
que responde a esas solicitudes,

277
00:11:39,750 --> 00:11:41,250
eso es lo que hace un servidor web.

278
00:11:41,250 --> 00:11:44,220
Facebook.com y Google.com,
y todas estas compañías

279
00:11:44,220 --> 00:11:47,339
tienen el software en servidores web
que se ejecutan en máquinas físicas que

280
00:11:47,339 --> 00:11:49,380
escuchan de manera
constante esas solicitudes.

281
00:11:49,380 --> 00:11:53,970
La foto que mostré, la última vez, de
ese viejo estante en la sede de Google

282
00:11:53,970 --> 00:11:55,680
es un ejemplo de
muchos servidores

283
00:11:55,680 --> 00:11:58,290
que ejecutan el mismo
software, del mismo modo todos

284
00:11:58,290 --> 00:12:01,725
tenían conexiones de internet que
solo escuchaban conexiones HTTP,

285
00:12:01,725 --> 00:12:04,350
si queremos ser precisos,
desde algunas semanas atrás,

286
00:12:04,350 --> 00:12:07,797
en el puerto TCP 80,
en una cierta dirección IP.

287
00:12:07,797 --> 00:12:09,880
De nueva cuenta, nos
podemos abstraer en eso,

288
00:12:09,880 --> 00:12:12,970
al escuchar conexiones en Internet.

289
00:12:12,970 --> 00:12:15,780
¿Cómo funciona esta pieza de software?

290
00:12:15,780 --> 00:12:17,760
Para demostrar lo
relativamente fácil que es

291
00:12:17,760 --> 00:12:23,914
escribir en un servidor web, sin importar
el contenido que sirve, en la línea 24.

292
00:12:23,914 --> 00:12:25,830
Si pudieran traducir
eso al inglés por mí,

293
00:12:25,830 --> 00:12:31,860
con base en el material de la
semana pasada, ¿qué hace la línea 24?

294
00:12:31,860 --> 00:12:34,840
No es configurar el servidor.

295
00:12:34,840 --> 00:12:38,407
¿Qué hace la línea 24 en Python?

296
00:12:38,407 --> 00:12:41,820
PÚBLICO: Asigna el
puerto al número 8080.

297
00:12:41,820 --> 00:12:43,080
DAVID: ¿Para?

298
00:12:43,080 --> 00:12:44,240
Oh, sí, OK, a port.

299
00:12:44,240 --> 00:12:46,317
¿Qué es exactamente port?

300
00:12:46,317 --> 00:12:47,400
PÚBLICO: Es únicamente una variable.

301
00:12:47,400 --> 00:12:48,900
DAVID: Solo una variable,
¿Cuál es este tipo de datos?

302
00:12:48,900 --> 00:12:49,817
PÚBLICO: Es un entero.

303
00:12:49,817 --> 00:12:51,233
DAVID: ¿Cómo lo sabes?

304
00:12:51,233 --> 00:12:52,122
No veo entero.

305
00:12:52,122 --> 00:12:55,074
PÚBLICO: O la entrada
se da como un entero.

306
00:12:55,074 --> 00:12:57,540
Python lo calculó de modo
dinámico de alguna manera.

307
00:12:57,540 --> 00:13:00,960
DAVID: Exactamente, a diferencia
de C, ya no se especifican los tipos,

308
00:13:00,960 --> 00:13:01,850
pero existen.

309
00:13:01,850 --> 00:13:04,920
Enteros, cadenas,
flotantes y así sucesivamente.

310
00:13:04,920 --> 00:13:07,890
Sinceramente, ¿por qué
necesitamos especificar enteros

311
00:13:07,890 --> 00:13:11,017
si es obvio para el humano, sin mencionar
que debería serlo para la computadora,

312
00:13:11,017 --> 00:13:12,600
que lo que está a la derecha es un entero.

313
00:13:12,600 --> 00:13:13,870
Simplemente, la cosa de
la izquierda se hace entero.

314
00:13:13,870 --> 00:13:16,828
Esta es una de las funciones que
obtuvimos de Python, en general en

315
00:13:16,828 --> 00:13:17,670
los lenguajes modernos.

316
00:13:17,670 --> 00:13:20,010
La línea 25 es similar.

317
00:13:20,010 --> 00:13:22,410
Dame una variable
llamada server_adress.

318
00:13:22,410 --> 00:13:25,350
De esto no hablamos
mucho la última vez,

319
00:13:25,350 --> 00:13:27,030
mencioné la palabra solo de pasada,

320
00:13:27,030 --> 00:13:28,170
esto es un poco raro.

321
00:13:28,170 --> 00:13:32,250
Nunca vimos esta sintaxis
en C en este contexto,

322
00:13:32,250 --> 00:13:35,670
paréntesis, algo, coma, algo,
se cierra paréntesis: ("0.0.0.0", port).

323
00:13:35,670 --> 00:13:40,030
Vimos esa sintaxis cuando
llamamos funciones y demás,

324
00:13:40,030 --> 00:13:43,980
o cuando tuvimos las condiciones
if o similares, bucles, bucles while,

325
00:13:43,980 --> 00:13:44,760
y bucles for.

326
00:13:44,760 --> 00:13:48,090
Nunca vimos, que yo
recuerde, un par de paréntesis

327
00:13:48,090 --> 00:13:50,490
que abren y cierran, y que
no tienen nada junto a ellos

328
00:13:50,490 --> 00:13:52,600
aparte del, en
este caso, signo igual.

329
00:13:52,600 --> 00:13:56,460
¿Qué hace que esto sea diferente
de las otras clases que usamos?

330
00:13:56,460 --> 00:13:59,715


331
00:13:59,715 --> 00:14:01,580
[VOCES QUE SE INTERRUMPEN]

332
00:14:01,580 --> 00:14:04,200
DAVID: Sí, lo siento,
¿lo podrías decir otra vez?

333
00:14:04,200 --> 00:14:05,585
¿Quieres ir en orden con tu compañero?

334
00:14:05,585 --> 00:14:08,580
Si pensamos en cualquier clase
de matemáticas o clase de gráficos,

335
00:14:08,580 --> 00:14:12,180
en cualquier momento que tratamos
con x y y, son comunes ciertas palabras

336
00:14:12,180 --> 00:14:16,390
para tener pares de
números, triples, o cuádruples.

337
00:14:16,390 --> 00:14:18,480
Python soporta esa idea.

338
00:14:18,480 --> 00:14:22,200
Si tenemos dos valores relacionados,
y queremos grupos unidos de cierto modo

339
00:14:22,200 --> 00:14:26,130
en nuestra mente, podemos
abrir paréntesis, un valor, coma,

340
00:14:26,130 --> 00:14:26,730
y otro.

341
00:14:26,730 --> 00:14:28,680
El término general
para esto es tuple.

342
00:14:28,680 --> 00:14:33,120
T-U-P-L-E. Es como
un doble o un triple,

343
00:14:33,120 --> 00:14:36,990
Pero un tuple es cualquier cantidad de
cosas, una o más cosas entre paréntesis.

344
00:14:36,990 --> 00:14:38,700
¿Por qué están relacionados?

345
00:14:38,700 --> 00:14:43,300
En TCP/IP, el protocolo
estipulado en Internet,

346
00:14:43,300 --> 00:14:45,910
la primer cosa es la dirección IP.

347
00:14:45,910 --> 00:14:47,670
La segunda cosa es el puerto TCP.

348
00:14:47,670 --> 00:14:51,810
Así que, tenemos IP y
TCP, por lo tanto TCP/IP,

349
00:14:51,810 --> 00:14:54,810
y almacenamos
ambas variables en este,

350
00:14:54,810 --> 00:14:57,360
los dos valores en esta ubicación
llamada dirección del servidor.

351
00:14:57,360 --> 00:15:00,540
En este tipo de código con el que
aún no estaríamos familiarizados,

352
00:15:00,540 --> 00:15:03,450
se declara otra variable a
la izquierda denominada httpd,

353
00:15:03,450 --> 00:15:09,000
d significa demonio, que es un sinónimo
de servidor HTTP, alias servidor web.

354
00:15:09,000 --> 00:15:11,810
Dame algún tipo
de objeto de servidor HTTP.

355
00:15:11,810 --> 00:15:14,040
Esta es una estructura especial,
como la estructura Student,

356
00:15:14,040 --> 00:15:16,380
pero esta estructura
implementa un servidor web,

357
00:15:16,380 --> 00:15:19,307
pasando la dirección del servidor
y lo que sea que esté aquí.

358
00:15:19,307 --> 00:15:21,390
Le diré adiós
por el momento.

359
00:15:21,390 --> 00:15:25,380
En la línea 29, la última del
código, dice: dentro de esa variable

360
00:15:25,380 --> 00:15:27,420
está una función,
conocida como método,

361
00:15:27,420 --> 00:15:29,940
que siempre llama al
servidor, que siempre hace eso.

362
00:15:29,940 --> 00:15:33,090
Cuando ejecutamos este
programa, y ​​llega a la línea 29,

363
00:15:33,090 --> 00:15:35,110
el programa nunca, nunca se termina.

364
00:15:35,110 --> 00:15:36,000
Pero eso no existe,

365
00:15:36,000 --> 00:15:37,380
solamente se mantiene ahí.

366
00:15:37,380 --> 00:15:39,300
Nunca más veremos una línea,

367
00:15:39,300 --> 00:15:44,160
esto sirve para escuchar
siempre solicitudes HTTP.

368
00:15:44,160 --> 00:15:47,070
A continuación,
les mostraré lo que hace,

369
00:15:47,070 --> 00:15:49,590
iré a mi ventana de terminal,

370
00:15:49,590 --> 00:15:51,720
y ejecutaré un programa de Python.

371
00:15:51,720 --> 00:15:54,600


372
00:15:54,600 --> 00:15:55,920
PÚBLICO: Python [INAUDIBLE].

373
00:15:55,920 --> 00:15:57,420
DAVID: Exacto, es esto.

374
00:15:57,420 --> 00:15:59,700
A diferencia de C, literalmente
decimos Python, que no solo es

375
00:15:59,700 --> 00:16:01,450
el nombre del lenguaje,
también es el nombre

376
00:16:01,450 --> 00:16:04,910
del programa, el intérprete
que puede entender este archivo.

377
00:16:04,910 --> 00:16:08,790
Y si lo ejecuto, no puedo
abrir el archivo serve.py.

378
00:16:08,790 --> 00:16:11,170
No hay tal archivo en el directorio.

379
00:16:11,170 --> 00:16:12,950
Técnicamente,
no quise hacer eso,

380
00:16:12,950 --> 00:16:14,742
fue un momento de
aprendizaje, ¿qué salió mal?

381
00:16:14,742 --> 00:16:16,450
PÚBLICO: No estás
en la carpeta correcta.

382
00:16:16,450 --> 00:16:17,650
DAVID: Sí, no estoy
en la carpeta correcta.

383
00:16:17,650 --> 00:16:20,770
Lo mencioné antes, este es el
código fuente de hoy, source 9,

384
00:16:20,770 --> 00:16:24,100
solo haré cd en el directorio
correcto. Lo haré de nuevo,

385
00:16:24,100 --> 00:16:27,430
Ahora nada parece
suceder, para siempre.

386
00:16:27,430 --> 00:16:29,774
Al parecer, el servidor
se está ejecutando.

387
00:16:29,774 --> 00:16:31,690
Para continuar,

388
00:16:31,690 --> 00:16:36,700
iré a Web Server,
hacia el menú de aquí.

389
00:16:36,700 --> 00:16:38,500
Tengo una pequeña
advertencia de Cloud9.

390
00:16:38,500 --> 00:16:40,060
Haré clic en App.

391
00:16:40,060 --> 00:16:42,550
Ahora vean lo que sucede.

392
00:16:42,550 --> 00:16:45,340
Mi nueva URL podría
lucir diferente a la de ustedes,

393
00:16:45,340 --> 00:16:51,160
pero en mi caso, simplemente fui a,

394
00:16:51,160 --> 00:16:53,112
porque ese es mi nombre
de usuario en Cloud9,

395
00:16:53,112 --> 00:16:56,320
 ide50-malan-harvard.edu.cs50.io:8080

396
00:16:56,320 --> 00:17:00,490
Debido a que este programa, este
servidor, escucha las conexiones TCP

397
00:17:00,490 --> 00:17:03,837
en el puerto 8080, no es el
predeterminado, pero es 8080.

398
00:17:03,837 --> 00:17:05,920
Tan pronto escucha una conexión,

399
00:17:05,920 --> 00:17:08,589
genera un código que
aparentemente dice: "hello, world".

400
00:17:08,589 --> 00:17:09,910
¿De dónde viene eso?

401
00:17:09,910 --> 00:17:14,599
Bueno, si hago un alejamiento y de regreso
en mi programa voy a la parte superior,

402
00:17:14,599 --> 00:17:16,510
veremos lo que
esto es en realidad.

403
00:17:16,510 --> 00:17:19,359
Y no entraremos en los
detalles de por qué funciona,

404
00:17:19,359 --> 00:17:23,180
sino de cómo funciona,
a fin de cuentas, un servidor web.

405
00:17:23,180 --> 00:17:27,460
Cuando un servidor web recibe un sobre
desde el navegador de un usuario, como este

406
00:17:27,460 --> 00:17:31,210
de aquí, mira dentro de él
y nota: ¡oh, esta es una solicitud GET!

407
00:17:31,210 --> 00:17:34,120
porque el verbo GET
está dentro del sobre.

408
00:17:34,120 --> 00:17:37,420
De modo que hay una función
llamada doget, solo por eso.

409
00:17:37,420 --> 00:17:38,620
¿y entonces qué hacemos?

410
00:17:38,620 --> 00:17:45,130
Esta línea de aquí, la 13, le dice
al servidor que envíe 200, OK,

411
00:17:45,130 --> 00:17:48,970
le dice que envíe este encabezado:
("Content-type", "text/HTML")

412
00:17:48,970 --> 00:17:52,960
y también le dice que escriba
la siguiente cadena: "hello, world",

413
00:17:52,960 --> 00:17:57,140
en lo que en Internet
se llama Unicode o "utf8"

414
00:17:57,140 --> 00:17:58,190
y eso es todo,

415
00:17:58,190 --> 00:18:00,190
por lo que este
es un ejemplo muy específico.

416
00:18:00,190 --> 00:18:04,510
Este servidor web no es tan útil, porque
no importa quién o con qué frecuencia

417
00:18:04,510 --> 00:18:07,540
nos conectemos a este servidor web
en el puerto 8080, con nuestro nombre

418
00:18:07,540 --> 00:18:09,732
de dominio, ¿qué es lo
que va a mostrar?

419
00:18:09,732 --> 00:18:10,690
PÚBLICO: Hello, world.

420
00:18:10,690 --> 00:18:11,690
DAVID: Hello, world,

421
00:18:11,690 --> 00:18:13,481
así que no es tan interesante,
bien podríamos tener que

422
00:18:13,481 --> 00:18:16,870
guardar toda la maldita cosa, como
index.html y terminaríamos con eso,

423
00:18:16,870 --> 00:18:18,470
pero no usaríamos
Python en absoluto.

424
00:18:18,470 --> 00:18:25,420
Pero, ¿y si, y si en vez de hacer esto,
tenemos un código en nuestro servidor web,

425
00:18:25,420 --> 00:18:28,090
que dice algo como esto?

426
00:18:28,090 --> 00:18:32,992
figure out what file was
requested from HTTP headers

427
00:18:32,992 --> 00:18:34,450
porque recordemos
que podría ser una diagonal,

428
00:18:34,450 --> 00:18:36,880
esto podría ser diagonal zuck, para
la página principal de Mark Zuckerberg,

429
00:18:36,880 --> 00:18:38,620
o para alguna otra solicitud.

430
00:18:38,620 --> 00:18:42,550
check if that file exists

431
00:18:42,550 --> 00:18:46,300
If so, send it back to browser

432
00:18:46,300 --> 00:18:49,690
es decir, supongamos que eliminamos
las cosas codificadas sobre "hello, world"

433
00:18:49,690 --> 00:18:51,940
y comenzamos a escribir algún
código, o al menos por ahora

434
00:18:51,940 --> 00:18:54,610
un pseudocódigo, el cual haga
que el servidor web sea dinámico,

435
00:18:54,610 --> 00:18:58,780
Cuando recibe una solicitud
en el puerto 8080, comprueba para qué es

436
00:18:58,780 --> 00:19:00,400
con la primera línea 12.

437
00:19:00,400 --> 00:19:02,770
Si la encuentra de manera
local en el disco duro,

438
00:19:02,770 --> 00:19:05,470
la enviará de vuelta al usuario.

439
00:19:05,470 --> 00:19:07,960
Y por último, eso es
lo que hace un servidor web.

440
00:19:07,960 --> 00:19:10,150
Codifiqué uno sencillo
para siempre diga,

441
00:19:10,150 --> 00:19:12,640
"hello, world" pero eso es lo
que hace un servidor web,

442
00:19:12,640 --> 00:19:16,060
de modo que no implementaremos
el servidor web como tal,

443
00:19:16,060 --> 00:19:16,960
en Python.

444
00:19:16,960 --> 00:19:20,230
En lugar de eso, usaremos
una herramienta muy popular llamada flask.

445
00:19:20,230 --> 00:19:22,870
Existen muchísimos software
diferentes para servidores web

446
00:19:22,870 --> 00:19:23,830
en el mundo,

447
00:19:23,830 --> 00:19:25,530
y sucede que Flask es uno de ellos.

448
00:19:25,530 --> 00:19:27,280
Estrictamente hablando,
se le llama un micro marco,

449
00:19:27,280 --> 00:19:30,400
porque es como una pequeña parte
del código, que otras personas escribieron

450
00:19:30,400 --> 00:19:32,860
para mejorar
el servicio de los sitios web.

451
00:19:32,860 --> 00:19:36,190
Y en lugar de que escribamos
nosotros mismos el servidor web,

452
00:19:36,190 --> 00:19:40,060
usaremos un servidor web
que alguien más escribió, Flask

453
00:19:40,060 --> 00:19:44,860
y escribiremos nuestras propias
aplicaciones en la web, con él.

454
00:19:44,860 --> 00:19:46,690
Pero, ¿qué significa esto?

455
00:19:46,690 --> 00:19:50,690
De regreso en el IDE, haré lo siguiente,

456
00:19:50,690 --> 00:19:55,310
Para ello desapareceré este
servidor y cerraré el archivo de aquí,

457
00:19:55,310 --> 00:19:58,540
luego, le diremos
que haga lo que sigue,

458
00:19:58,540 --> 00:20:02,240
crearé un nuevo archivo

459
00:20:02,240 --> 00:20:04,750
y si busco en google, Python,

460
00:20:04,750 --> 00:20:08,080
Python Flask, la única forma
en la que puedo saber lo que haré

461
00:20:08,080 --> 00:20:10,930
es si consulté
la documentación de Flask

462
00:20:10,930 --> 00:20:14,140
y seguí las instrucciones,
literalmente leí toda la documentación

463
00:20:14,140 --> 00:20:16,840
y en algún punto, también
he leído la guía del usuario aquí,

464
00:20:16,840 --> 00:20:18,100
revisé algunos ejemplos,

465
00:20:18,100 --> 00:20:21,400
jugué con un poco con mi IDE,
guardé algunas cosas y las probé,

466
00:20:21,400 --> 00:20:23,620
y así fue como nació este ejemplo.

467
00:20:23,620 --> 00:20:28,910
Si quieren usar Flask, parece que
básicamente tienen que hacer esto,

468
00:20:28,910 --> 00:20:31,420
primero definan
una aplicación: app =

469
00:20:31,420 --> 00:20:34,360
y luego dicen flask name:
app = Flask (__name__)

470
00:20:34,360 --> 00:20:35,390
¿Por qué?

471
00:20:35,390 --> 00:20:35,890
¿Por qué?

472
00:20:35,890 --> 00:20:38,950
Por ahora no sería útil
entrar aquí en tantos detalles.

473
00:20:38,950 --> 00:20:41,470
pero esto solo dice,
hey, Flask, dame una aplicación web,

474
00:20:41,470 --> 00:20:43,210
No me importa
cómo se implemente,

475
00:20:43,210 --> 00:20:45,460
tú te ocupas de eso,
así no tengo que escribir el código

476
00:20:45,460 --> 00:20:47,740
como en el archivo
serve.py anterior.

477
00:20:47,740 --> 00:20:52,730
Y después de eso necesito
decirle a Flask qué hacer y cuándo.

478
00:20:52,730 --> 00:20:55,770
Y la forma en que esto se hace
en muchos softwares web modernos

479
00:20:55,770 --> 00:20:57,810
es definiendo
lo que llamamos rutas.

480
00:20:57,810 --> 00:21:00,680
Se le dice a Flask, o más
comúnmente a su servidor web,

481
00:21:00,680 --> 00:21:04,380
hey, servidor, si recibes una
solicitud para una diagonal, haz esto.

482
00:21:04,380 --> 00:21:06,780
Si recibes una solicitud
para una diagonal zuck, haz aquello.

483
00:21:06,780 --> 00:21:10,290
Si recibes una diagonal para una
diagonal inicio de sesión, haz esto otro.

484
00:21:10,290 --> 00:21:13,680
Y el pseudocódigo en un
servidor podría ser algo como esto,

485
00:21:13,680 --> 00:21:20,370
if request is for /,
then send back home page.

486
00:21:20,370 --> 00:21:25,290
Else if request is for /zuck,
lo cual fue uno de los ejemplos de URL

487
00:21:25,290 --> 00:21:30,070
dos veces antes,
then send Mark's Home page

488
00:21:30,070 --> 00:21:37,360
Else if the request is for login,
then prompt user to log in, etcétera.

489
00:21:37,360 --> 00:21:41,040
Así que esta es una aplicación
basada en web, aunque en pseudocódigo.

490
00:21:41,040 --> 00:21:44,432
En sí, no tiene nada
que ver con los TCP/IP.

491
00:21:44,432 --> 00:21:46,890
Será el trabajo del
servidor web lidiar con ello.

492
00:21:46,890 --> 00:21:50,010
Ni siquiera deseo saber
si hay sobres en Internet.

493
00:21:50,010 --> 00:21:52,170
Solo quiero comenzar a
escribir código en mi lógica.

494
00:21:52,170 --> 00:21:55,860
Igual que en C, quiero escribir mi función
principal y mis funciones auxiliares.

495
00:21:55,860 --> 00:21:58,920
Esto es lo que va
a hacer mi aplicación web.

496
00:21:58,920 --> 00:22:00,310
¿Cómo se logra esto?

497
00:22:00,310 --> 00:22:02,710
Bueno, supongamos
que quieren hacer lo siguiente.

498
00:22:02,710 --> 00:22:05,310
Dejen voy a...

499
00:22:05,310 --> 00:22:10,530
guardaré esto como application.py,
lo cual es una convención, application.py.

500
00:22:10,530 --> 00:22:17,820
Y voy a crear momentáneamente
otro archivo llamado index.html.

501
00:22:17,820 --> 00:22:19,620
Necesito crear
rápidamente una página web,

502
00:22:19,620 --> 00:22:21,828
y esto se logra con
la práctica, entonces

503
00:22:21,828 --> 00:22:25,050
crearé aquí un pequeño
titular de una página web,

504
00:22:25,050 --> 00:22:31,350
title, hello, title, y luego
aquí abajo, body y hello body.

505
00:22:31,350 --> 00:22:34,950
Ok, es una página web muy simple,
igual que la de hace unas semanas.

506
00:22:34,950 --> 00:22:35,550
Eso es todo.

507
00:22:35,550 --> 00:22:38,160
Está en un archivo
llamado index.html.

508
00:22:38,160 --> 00:22:40,500
¿Cómo conecto
estos dos archivos?

509
00:22:40,500 --> 00:22:44,760
Si tengo un programa escrito en Python,
o técnicamente, un pseudocódigo,

510
00:22:44,760 --> 00:22:49,350
y quiero que este programa
haga este pseudocódigo aquí,

511
00:22:49,350 --> 00:22:53,680
if request is for slash,
then send back the home page.

512
00:22:53,680 --> 00:22:56,790
Bifurcamos aquí... creo que
expliqué brevemente un par de veces

513
00:22:56,790 --> 00:23:00,750
que la página de inicio
predeterminada de un sitio web

514
00:23:00,750 --> 00:23:03,540
por convención humana,
se llama index.html.

515
00:23:03,540 --> 00:23:05,520
Este pseudocódigo es algo así.

516
00:23:05,520 --> 00:23:09,870
"If the request is for slash",
lo devuelve específicamente a index.html.

517
00:23:09,870 --> 00:23:14,080
Pero si la solicitud es para /zuck,
nos envía a la página de inicio de Mark.

518
00:23:14,080 --> 00:23:15,780
Entonces,
¿qué aspecto tendría?

519
00:23:15,780 --> 00:23:19,410
Voy a copiar esto y
crearé un nuevo archivo.

520
00:23:19,410 --> 00:23:27,540
Y solo por diversión, voy a guardarlo
como zuck.html y luego hello, world,

521
00:23:27,540 --> 00:23:28,860
I am Mark.

522
00:23:28,860 --> 00:23:31,380
Supongamos que
esta es la página de Mark.

523
00:23:31,380 --> 00:23:32,200
Es súper simple.

524
00:23:32,200 --> 00:23:34,170
Obviamente, no es
así como se ve Facebook.

525
00:23:34,170 --> 00:23:35,950
Pero es una
página HTML válida.

526
00:23:35,950 --> 00:23:39,660
Y ahora tengo dos archivos
y una aplicación web.

527
00:23:39,660 --> 00:23:43,980
Así que, técnicamente,
debería devolver zuck.html.

528
00:23:43,980 --> 00:23:48,390
Y si sigo con este ejemplo imaginario,
le pido al usuario que inicie sesión,

529
00:23:48,390 --> 00:23:52,860
eso probablemente significa
mostrar al usuario login.html,

530
00:23:52,860 --> 00:23:55,980
la cual es otra página
que tiene un formulario.

531
00:23:55,980 --> 00:23:58,570
Como el formulario que hicimos
para nuestro ejemplo simple de Google.

532
00:23:58,570 --> 00:24:00,840
En resumen,
una aplicación web es

533
00:24:00,840 --> 00:24:03,270
un programa escrito
en algún lenguaje, que responde

534
00:24:03,270 --> 00:24:05,880
a las solicitudes
que se basan en cierta lógica.

535
00:24:05,880 --> 00:24:09,060
Y esta es la lógica que
no teníamos solo en HTML.

536
00:24:09,060 --> 00:24:12,870
Por ese motivo necesitamos
a Python, Java, Ruby, PHP

537
00:24:12,870 --> 00:24:15,210
o cualquier número de otros
lenguajes que puedan hacer lo mismo.

538
00:24:15,210 --> 00:24:19,620
C también puede hacerlo,
pero sería una verdadera pesadilla

539
00:24:19,620 --> 00:24:23,280
implementarlo en C porque,
solo piensen en lo molesto

540
00:24:23,280 --> 00:24:27,090
que es comparar subcadenas
o extraer los encabezados HTTP

541
00:24:27,090 --> 00:24:28,920
de algo más largo,
sería demasiado trabajo.

542
00:24:28,920 --> 00:24:32,010
Hace dos años teníamos un conjunto de
problemas, donde hicimos exactamente

543
00:24:32,010 --> 00:24:34,350
eso, pero ahora es un poco diferente.

544
00:24:34,350 --> 00:24:39,180
Así es cómo hacemos la transición para
convertir esto en una aplicación web real.

545
00:24:39,180 --> 00:24:42,600
Voy a traducir esto a código real.

546
00:24:42,600 --> 00:24:43,980
Dejen borro esto.

547
00:24:43,980 --> 00:24:48,702
Y resulta que, en Flask, si desean
encontrar una ruta, por así decirlo,

548
00:24:48,702 --> 00:24:50,640
para la diagonal inclinada, haces esto.

549
00:24:50,640 --> 00:24:54,075
Mi aplicación tendrá una ruta 
para la diagonal, @app.route("/")

550
00:24:54,075 --> 00:24:57,090
Y cuando esa ruta
sea visitada por un usuario,

551
00:24:57,090 --> 00:24:59,340
haciendo una solicitud
en uno de estos sobres,

552
00:24:59,340 --> 00:25:03,120
sigue y llama a una función
en Python llamada index,

553
00:25:03,120 --> 00:25:04,920
aunque podría
llamarla como quisiera,

554
00:25:04,920 --> 00:25:10,890
que simplemente devuelve el resultado de
renderizar una plantilla llamada index.html.

555
00:25:10,890 --> 00:25:13,950
que simplemente devuelve el resultado de
renderizar una plantilla llamada index.html.

556
00:25:13,950 --> 00:25:17,700
Pero sé que Flask me da
esta función especial llamada

557
00:25:17,700 --> 00:25:20,025
render_template,
que generará un archivo.

558
00:25:20,025 --> 00:25:22,650
Pero hace más que eso y por ello
tiene un nombre más elegante.

559
00:25:22,650 --> 00:25:25,540
El archivo que quiero
generar es index.html.

560
00:25:25,540 --> 00:25:29,310
Y si quiero que sea compatible con
la página de inicio de Mark Zuckerberg,

561
00:25:29,310 --> 00:25:32,646
¿Pueden inferir
lo que voy a hacer?

562
00:25:32,646 --> 00:25:33,870
PÚBLICO: Def zuck.

563
00:25:33,870 --> 00:25:36,553
DAVID: Ok, def zuck().

564
00:25:36,553 --> 00:25:38,960
PÚBLICO: Y luego devuelve
la plantilla renderizada.

565
00:25:38,960 --> 00:25:41,790
DAVID: Sí, entonces devuelve la
plantilla renderizada de zuck.html.

566
00:25:41,790 --> 00:25:42,950
Y una cosa más...

567
00:25:42,950 --> 00:25:46,317


568
00:25:46,317 --> 00:25:48,722
PÚBLICO: [INAUDIBLE]
diagonal inversa zuck.

569
00:25:48,722 --> 00:25:51,070
DAVID: diagonal inversa...
diagonal inversa ¿dónde?

570
00:25:51,070 --> 00:25:53,630


571
00:25:53,630 --> 00:25:55,700
No se necesitan diagonal
inversa o caracteres de escape,

572
00:25:55,700 --> 00:25:59,778
pero hay una de estas cosas que
en este momento no es como la otra.

573
00:25:59,778 --> 00:26:01,690
PÚBLICO: [INAUDIBLE].

574
00:26:01,690 --> 00:26:05,120
DAVID: Sí, necesitamos
definir esta función como,

575
00:26:05,120 --> 00:26:09,050
simplemente, la función que Flask
debe llamar cuando el usuario

576
00:26:09,050 --> 00:26:09,980
visita /zuck.

577
00:26:09,980 --> 00:26:12,770
Ahora, parece un poco
tonto que hayamos escrito zuck

578
00:26:12,770 --> 00:26:15,119
en tres lugares e
index en dos lugares.

579
00:26:15,119 --> 00:26:16,910
Así es como se hace en Flask.

580
00:26:16,910 --> 00:26:18,320
Así podría ser también foo.

581
00:26:18,320 --> 00:26:19,070
Esto podría ser una barra.

582
00:26:19,070 --> 00:26:20,450
Los nombres de las
funciones no importan.

583
00:26:20,450 --> 00:26:23,480
Pero también podemos mantenernos
cuerdos y usar los mismos nombres

584
00:26:23,480 --> 00:26:25,950
según su relación
con las mismas rutas.

585
00:26:25,950 --> 00:26:29,420
Entonces hemos reemplazado dos
de mis condiciones en mi pseudocódigo

586
00:26:29,420 --> 00:26:30,500
con el código actual.

587
00:26:30,500 --> 00:26:34,730
Y si damos un paso más allá para
hacer la pantalla de inicio de sesión,

588
00:26:34,730 --> 00:26:39,740
apuesto a que solo necesito
algo como @app.route("/login")

589
00:26:39,740 --> 00:26:45,726
y luego algo como def login():
return render_template("login.html")

590
00:26:45,726 --> 00:26:47,600
lo cual no me molesté en hacer,
pero que sin duda podría

591
00:26:47,600 --> 00:26:49,370
con un poco de copiar
y pegar y algunas ediciones.

592
00:26:49,370 --> 00:26:54,200
Así que ahora tenemos una
aplicación web que admite tres rutas.

593
00:26:54,200 --> 00:26:57,270
Cuando recibe una solicitud
en un sobre de alguien en Internet,

594
00:26:57,270 --> 00:27:00,560
mirará dentro de ese sobre y
revisará lo que se está solicitando.

595
00:27:00,560 --> 00:27:03,102
Si se pide ("/"),
me voy a esta función,

596
00:27:03,102 --> 00:27:05,809
si se solicita una ("/zuck"),
voy a llamar a esta función

597
00:27:05,809 --> 00:27:07,910
o si es ("/login"),
voy a llamar a esa función.

598
00:27:07,910 --> 00:27:09,050
Y eso es todo.

599
00:27:09,050 --> 00:27:11,600
La aplicación web no está
completa porque observen que

600
00:27:11,600 --> 00:27:15,500
al parecer no hay un código que revise
los nombres de usuario y las contraseñas,

601
00:27:15,500 --> 00:27:19,050
ni algunas características sofisticadas
que esperarían que existieran.

602
00:27:19,050 --> 00:27:20,660
Pero hay más
código por venir.

603
00:27:20,660 --> 00:27:24,650
Por ahora, lo que hacemos es generar,
condicionalmente, diferentes archivos.

604
00:27:24,650 --> 00:27:26,600
¿Cómo hago
que esto funcione?

605
00:27:26,600 --> 00:27:30,200
Resulta que necesito hacer un
directorio llamado templates,

606
00:27:30,200 --> 00:27:34,340
sería mkdir templates, o podría hacerlo
con el buscador de archivos, con la GUI,

607
00:27:34,340 --> 00:27:35,060
Enter.

608
00:27:35,060 --> 00:27:38,810
Voy a mover ambos
index.html ahí, con mv

609
00:27:38,810 --> 00:27:42,560
Y voy a mover
la marca con mv.

610
00:27:42,560 --> 00:27:45,020
Y ahora necesito
hacer otra cosa.

611
00:27:45,020 --> 00:27:49,390
Aquí en mi programa,
deliberadamente... ¡ups!

612
00:27:49,390 --> 00:27:53,280
Oh, cerremos las pestañas
porque moví los archivos.

613
00:27:53,280 --> 00:27:53,780
Muy bien.

614
00:27:53,780 --> 00:27:56,530
Es porque moví los
archivos a un subdirectorio.

615
00:27:56,530 --> 00:27:58,610
Voy a abrir
de nuevo esos archivos.

616
00:27:58,610 --> 00:28:02,520
Así es que deje espacio
deliberadamente por un par de razones.

617
00:28:02,520 --> 00:28:05,300
Primero, Flask...
más bien, Python

618
00:28:05,300 --> 00:28:06,650
no tiene idea de lo que es Flask.

619
00:28:06,650 --> 00:28:09,590
Cuando se inventó Python
hace años, Flask no existía.

620
00:28:09,590 --> 00:28:11,464
Fue escrito más
recientemente por una comunidad

621
00:28:11,464 --> 00:28:14,630
de personas que ha creado un mejor
software de servidor web desde entonces.

622
00:28:14,630 --> 00:28:19,700
Si quiero usar un paquete que alguien
más escribió, alias una biblioteca,

623
00:28:19,700 --> 00:28:24,170
recuerden que puedo hacer algo
como esto, from flask import Flask,

624
00:28:24,170 --> 00:28:25,550
lo cual se ve
un poco estúpido,

625
00:28:25,550 --> 00:28:27,680
pero solo significa
que en alguna parte del IDE

626
00:28:27,680 --> 00:28:30,200
hemos preinstalado
un paquete llamado Flask

627
00:28:30,200 --> 00:28:33,844
dentro del cual hay una función
llamada FLASK, con letras mayúsculas,

628
00:28:33,844 --> 00:28:35,510
que es lo que estoy usando aquí.

629
00:28:35,510 --> 00:28:38,310
Y para los fines de hoy,
podemos verlo como una estructura.

630
00:28:38,310 --> 00:28:41,480
No es una estructura student,
que es nuestro ejemplo hasta ahora,

631
00:28:41,480 --> 00:28:44,480
pero es una estructura especial de
aplicación web que utilizo de algún modo.

632
00:28:44,480 --> 00:28:48,020
Pero pueden confiar por el
momento en que eso es lo que hace.

633
00:28:48,020 --> 00:28:51,320
Pero render_template tampoco
es una función que implementé.

634
00:28:51,320 --> 00:28:55,190
Y, de hecho, en ningún lugar del archivo
está realmente definida o implementada.

635
00:28:55,190 --> 00:28:59,210
Resulta que viene con Flask, así que
puedo importar una segunda función.

636
00:28:59,210 --> 00:29:02,330
De la misma manera en que importé
get_int, get_string o get_float,

637
00:29:02,330 --> 00:29:05,600
puedo importar esta función
llamada render_template

638
00:29:05,600 --> 00:29:08,610
y eso es todo
lo que necesito aquí.

639
00:29:08,610 --> 00:29:12,050
Ahora voy a continuar
y si no cometí algún error,

640
00:29:12,050 --> 00:29:14,120
escribiré lo siguiente,

641
00:29:14,120 --> 00:29:16,430
flask run.

642
00:29:16,430 --> 00:29:20,450
Pues flask, además de ser algo
como un marco, una forma de escribir

643
00:29:20,450 --> 00:29:22,842
aplicaciones web, también
es un pequeño programa

644
00:29:22,842 --> 00:29:25,550
llamado Flask que toma algunos argumentos
de línea de comandos, uno de los cuales

645
00:29:25,550 --> 00:29:29,570
es run, el cual ejecuta la aplicación
web en mi directorio actual.

646
00:29:29,570 --> 00:29:33,050
Y ese archivo, por convención,
debe llamarse application.py.

647
00:29:33,050 --> 00:29:37,270
Entonces, cuando presiono Enter, veo
un montón de resultados de depuración.

648
00:29:37,270 --> 00:29:38,210
El depurador está activo.

649
00:29:38,210 --> 00:29:39,740
Veremos lo qué significa
eso en algún momento.

650
00:29:39,740 --> 00:29:40,970
Y ahora está aquí la URL.

651
00:29:40,970 --> 00:29:44,303
Se ve horrible porque tengo un nombre
de usuario bastante largo aquí, en Cloud9,

652
00:29:44,303 --> 00:29:47,550
pero tengan en cuenta que está
el puerto 8080 y eso es importante.

653
00:29:47,550 --> 00:29:49,320
Ahora lo abrimos

654
00:29:49,320 --> 00:29:51,170
y ahora vemos "hello, body".

655
00:29:51,170 --> 00:29:54,860
Pero aquí arriba... y recuerden
que la diagonal está inferida,

656
00:29:54,860 --> 00:29:57,020
Chrome solo se usa
amigablemente y lo oculta.

657
00:29:57,020 --> 00:29:59,030
Si cambio esto a zuck

658
00:29:59,030 --> 00:30:01,310
y doy Enter...
aparece "I am Mark".

659
00:30:01,310 --> 00:30:05,129
Y si lo cambio por login,
¿qué va a pasar?

660
00:30:05,129 --> 00:30:06,420
PÚBLICO: Nada, porque...

661
00:30:06,420 --> 00:30:08,900
DAVID: No se encuentra, así que algo
en este momento, deliberadamente,

662
00:30:08,900 --> 00:30:10,310
va a salir mal
porque no hice...

663
00:30:10,310 --> 00:30:14,150
¡Huy! OK, entonces no me molesté
en hacer esa plantilla aún.

664
00:30:14,150 --> 00:30:16,890
Y entonces pronto dejarán de estar
familiarizados con segfaults,

665
00:30:16,890 --> 00:30:18,890
sino probablemente
con algo llamado excepción.

666
00:30:18,890 --> 00:30:20,473
Y veremos más de ellos
a lo largo del tiempo.

667
00:30:20,473 --> 00:30:23,690
Pero Python, a diferencia de C,
admite algo llamado excepciones,

668
00:30:23,690 --> 00:30:25,620
lo cual es un tipo de error
que puede suceder.

669
00:30:25,620 --> 00:30:29,510
Y esencialmente, una de las características
de Flask, aunque un poco compleja,

670
00:30:29,510 --> 00:30:32,990
es que cada vez que sale algo mal,
como un segfault, en este caso

671
00:30:32,990 --> 00:30:36,530
llamado excepción, aparecerá
una página web bastante bonita

672
00:30:36,530 --> 00:30:37,490
que yo no escribí.

673
00:30:37,490 --> 00:30:39,480
No hice nada de este código HTML,

674
00:30:39,480 --> 00:30:41,480
Flask lo genera para mí
solo para mostrarme

675
00:30:41,480 --> 00:30:43,880
todos los malditos errores
que de alguna manera sucedieron,

676
00:30:43,880 --> 00:30:46,590
para que así pueda tratar
de entender lo que está pasando.

677
00:30:46,590 --> 00:30:49,020
Afortunadamente, el más importante
suele estar en la parte superior.

678
00:30:49,020 --> 00:30:51,990
Y dice lo que necesito saber:
"No se encontró la plantilla",

679
00:30:51,990 --> 00:30:55,140
aunque todavía no estoy seguro
de lo que significa, "login.html".

680
00:30:55,140 --> 00:30:58,140
Y así, puedo inferir a partir
de esto qué fue lo que salió mal.

681
00:30:58,140 --> 00:31:01,080
Entonces este podría ser
mi primer ejemplo.

682
00:31:01,080 --> 00:31:06,030
Y los puntos clave aquí son que
escribí el código de Python lógicamente

683
00:31:06,030 --> 00:31:09,120
para decidir, si la solicitud
entra para esto, hace esto otro.

684
00:31:09,120 --> 00:31:11,600
Si la solicitud entra por
alguna otra razón, hace aquello,

685
00:31:11,600 --> 00:31:15,180
de lo contrario, hace otra cosa,
es una especie de bifurcación de tres vías

686
00:31:15,180 --> 00:31:17,870
a pesar de que los resultados son
solo algunos archivos de texto.

687
00:31:17,870 --> 00:31:24,030
OK, ¿tienen alguna duda o
pregunta hasta este punto?

688
00:31:24,030 --> 00:31:28,520
OK, entonces, ahora que tenemos
un lenguaje de programación,

689
00:31:28,520 --> 00:31:31,090
podemos hacer cosas
mucho más poderosas,

690
00:31:31,090 --> 00:31:33,910
es algo como que trataba
de hacer en mis tiempos

691
00:31:33,910 --> 00:31:39,250
cuando aprendí por primera
vez a escribir aplicaciones web.

692
00:31:39,250 --> 00:31:41,230
Y una de las
primeras cosas que hice,

693
00:31:41,230 --> 00:31:43,690
dejen cierro todo esto,

694
00:31:43,690 --> 00:31:48,610
una de las primeras cosas que hice fue
un sitio web para el programa de deportes

695
00:31:48,610 --> 00:31:50,480
intramuros de los
estudiantes de primer año.

696
00:31:50,480 --> 00:31:53,950
Voy a ir a froshims0/,
abriré algunas plantillas

697
00:31:53,950 --> 00:31:55,570
y lo que estamos
a punto de ver es esto.

698
00:31:55,570 --> 00:31:58,480
Aquí hay una pequeña aplicación
web que preparé por adelantado,

699
00:31:58,480 --> 00:32:02,394
Está en una carpeta llamada froshims0/
que tiene un subdirectorio de plantillas

700
00:32:02,394 --> 00:32:04,060
en el que hay
un montón de páginas web

701
00:32:04,060 --> 00:32:06,390
y probablemente puedan
inferir para qué se usan.

702
00:32:06,390 --> 00:32:09,160
El índice probablemente es
predeterminado. El éxito tiene algo

703
00:32:09,160 --> 00:32:10,660
que ver con que
las cosas salgan bien.

704
00:32:10,660 --> 00:32:12,430
El fracaso probablemente
es lo opuesto.

705
00:32:12,430 --> 00:32:16,330
Y aún no sabemos qué son
layout.html y application.py.

706
00:32:16,330 --> 00:32:17,120
Eso es.

707
00:32:17,120 --> 00:32:21,420
Entonces, veamos
cómo luce index.html

708
00:32:21,420 --> 00:32:22,790
y es como sigue.

709
00:32:22,790 --> 00:32:28,487
En index.html, tenemos
un montón de HTML

710
00:32:28,487 --> 00:32:30,820
y corté deliberadamente
las primeras dos líneas,

711
00:32:30,820 --> 00:32:32,542
pero, ¿qué es
una etiqueta H1?

712
00:32:32,542 --> 00:32:33,250
PÚBLICO: Un encabezado.

713
00:32:33,250 --> 00:32:35,708
DAVID: Un encabezado, entonces es como
un gran fragmento de texto en negritas.

714
00:32:35,708 --> 00:32:40,180
Register for Frosh IMs es el texto principal
en la parte superior de esta página.

715
00:32:40,180 --> 00:32:44,680
Formulario, acción, registro,
método, publicación, lo vimos cuando

716
00:32:44,680 --> 00:32:46,340
reimplementamos
Google hace unas semanas.

717
00:32:46,340 --> 00:32:49,240
Aquí, "acción" significa
que cuando hagan clic en Enviar,

718
00:32:49,240 --> 00:32:53,290
eso será enviado al
dominio "/register" actual.

719
00:32:53,290 --> 00:32:55,300
Y usará un método
llamado "post".

720
00:32:55,300 --> 00:32:57,730
No hablamos de esto con más
detalle la última vez, pero resulta

721
00:32:57,730 --> 00:32:59,950
que debemos conocer al menos
dos verbos en el mundo de la web,

722
00:32:59,950 --> 00:33:06,010
get, que pone todo lo que
escriban en la URL, y post, que

723
00:33:06,010 --> 00:33:07,390
en resumen, no lo hace.

724
00:33:07,390 --> 00:33:10,090
Lo esconde de una manera
más profunda en el sobre.

725
00:33:10,090 --> 00:33:15,070
Con base en esa definición,
recuerden que Google usa get.

726
00:33:15,070 --> 00:33:19,390
Si escribo
Google.com/search?q=cats

727
00:33:19,390 --> 00:33:23,040
y con suerte nos saldrá
mejor que la vez pasada.

728
00:33:23,040 --> 00:33:27,269
OK, entonces
observen esta URL.

729
00:33:27,269 --> 00:33:28,810
debo dejar de
buscar tantas noticias.

730
00:33:28,810 --> 00:33:34,210
Observen que la URL
tiene mi búsqueda.

731
00:33:34,210 --> 00:33:37,090
¿Por qué no siempre
es bueno poner

732
00:33:37,090 --> 00:33:39,040
en la URL, lo que
escribió el usuario?

733
00:33:39,040 --> 00:33:41,339


734
00:33:41,339 --> 00:33:42,880
PÚBLICO: Porque es
como una contraseña.

735
00:33:42,880 --> 00:33:43,960
DAVID: Sí, y si es
como una contraseña,

736
00:33:43,960 --> 00:33:46,190
es posible que no quieran
que aparezca en la URL.

737
00:33:46,190 --> 00:33:48,610
Porque tal vez puede
pasar alguien entrometido

738
00:33:48,610 --> 00:33:50,380
y leer nuestra
contraseña en la URL.

739
00:33:50,380 --> 00:33:54,020
Pero lo peor es que muchos navegadores
tienen la función de autocompletar

740
00:33:54,020 --> 00:33:55,630
y recuerdan nuestro historial.

741
00:33:55,630 --> 00:33:57,730
Sería lamentable que nuestro
hermanito menor, por ejemplo,

742
00:33:57,730 --> 00:34:00,310
hiciera clic en la pequeña flecha
que está al final de esta ventana

743
00:34:00,310 --> 00:34:03,430
y vea todas las contraseñas
que hemos escrito en los sitios web.

744
00:34:03,430 --> 00:34:06,490
Ya se imaginarán que esto no es
bueno para subir contenidos como fotos.

745
00:34:06,490 --> 00:34:08,074
¿Cómo suben una foto a una URL?

746
00:34:08,074 --> 00:34:10,864
No parece que eso realmente
funcione, aunque técnicamente

747
00:34:10,864 --> 00:34:11,980
la pueden codificar como texto.

748
00:34:11,980 --> 00:34:13,960
La información de su tarjeta de
crédito o cualquier otra cosa,

749
00:34:13,960 --> 00:34:17,440
me refiero a algo de ustedes
que sea privado o que deba ser seguro,

750
00:34:17,440 --> 00:34:19,300
probablemente no quieran
saturar la barra de URL

751
00:34:19,300 --> 00:34:22,076
porque de una u otra
forma se va a guardar.

752
00:34:22,076 --> 00:34:24,909
Cuando usan el modo incógnito,
por ejemplo, y ese tipo de cosas

753
00:34:24,909 --> 00:34:25,810
todo eso se desecha,

754
00:34:25,810 --> 00:34:30,219
pero es solo una mala práctica para
obligar a sus usuarios a usar ese modo.

755
00:34:30,219 --> 00:34:32,500
Entonces post no lo pone allí.

756
00:34:32,500 --> 00:34:37,090
Si Google usó post, lo cual no
usa para su página de búsqueda,

757
00:34:37,090 --> 00:34:41,170
parecería que estamos en esta URL,
sin diagonal de búsqueda, sin signo de

758
00:34:41,170 --> 00:34:45,159
interrogación, sin q y sin gatos,
pero aún puede pasar la búsqueda,

759
00:34:45,159 --> 00:34:48,370
solo que es una especie de
sitio más profundo dentro del sobre.

760
00:34:48,370 --> 00:34:51,485
En resumen,
elegí hacer exactamente

761
00:34:51,485 --> 00:34:53,860
eso porque con
Frosh IMs no tenemos

762
00:34:53,860 --> 00:34:57,160
necesidad de guardar los nombres de
los estudiantes ni las direcciones de email

763
00:34:57,160 --> 00:35:00,010
ni los dormitorios en las barras URL
de las personas innecesariamente.

764
00:35:00,010 --> 00:35:03,610
Entonces, input name="name",
y type="text".

765
00:35:03,610 --> 00:35:07,000
Esto me dará un cuadro de texto,
similar a q para Google, con el fin de que

766
00:35:07,000 --> 00:35:07,950
alguien escriba su nombre.

767
00:35:07,950 --> 00:35:12,970
Select es un nombre algo extraño, pero,
¿qué nos da visualmente en la pantalla

768
00:35:12,970 --> 00:35:14,810
un elemento seleccionado?
¿lo recuerdan?

769
00:35:14,810 --> 00:35:15,310
¿Sí?

770
00:35:15,310 --> 00:35:17,020
PÚBLICO: Es como
una barra desplegable.

771
00:35:17,020 --> 00:35:17,980
DAVID: Sí, es un
menú desplegable.

772
00:35:17,980 --> 00:35:21,021
Todos los elementos de ese menú
se extraerán de los dormitorios

773
00:35:21,021 --> 00:35:22,750
de primer año de Harvard.

774
00:35:22,750 --> 00:35:25,540
Y luego hacia abajo, en la parte inferior
de este archivo, si sigo desplazándome,

775
00:35:25,540 --> 00:35:28,510
observen que hay otra
entrada cuyo tipo es Enviar.

776
00:35:28,510 --> 00:35:31,140
¿Y cómo se ve en
la pantalla una entrada

777
00:35:31,140 --> 00:35:33,191
cuyo tipo es Enviar,
¿lo recuerdan?

778
00:35:33,191 --> 00:35:34,190
PÚBLICO: Es un botón.

779
00:35:34,190 --> 00:35:35,230
DAVID: Sí, es solo un botón.

780
00:35:35,230 --> 00:35:35,580
Así es.

781
00:35:35,580 --> 00:35:37,288
Y pueden darle otro estilo
para que luzca diferente,

782
00:35:37,288 --> 00:35:41,290
pero es solo un botón predeterminado.
En resumen, esta aplicación web

783
00:35:41,290 --> 00:35:46,060
me da un formulario en el cual Frosh
puede registrar deportes intramuros.

784
00:35:46,060 --> 00:35:49,360
Y puedo verlo de la siguiente
manera... si entro en froshims0,

785
00:35:49,360 --> 00:35:53,740
y ejecuto Flask, veré
mi misma URL como antes,

786
00:35:53,740 --> 00:35:56,737
pero ahora ejecutará una
aplicación diferente en el mismo puerto.

787
00:35:56,737 --> 00:35:57,820
Y así es como se verá.

788
00:35:57,820 --> 00:36:01,750
Es súper simple, es súper fea,
pero tiene un cuadro de texto,

789
00:36:01,750 --> 00:36:03,130
tiene un menú desplegable

790
00:36:03,130 --> 00:36:04,870
y un botón
para registrarse.

791
00:36:04,870 --> 00:36:08,440
Y ahora el mundo
se volvió más interesante

792
00:36:08,440 --> 00:36:12,730
porque ya no tengo solamente
contenido estático, como "hello, world"

793
00:36:12,730 --> 00:36:13,960
o "I am Mark".

794
00:36:13,960 --> 00:36:16,430
De hecho, ya tengo algo
interactivo para el usuario

795
00:36:16,430 --> 00:36:20,125
y si dicho usuario completa este
formulario y hace clic en Enviar,

796
00:36:20,125 --> 00:36:22,330
dos o tres semanas antes
lo impulsamos por completo,

797
00:36:22,330 --> 00:36:25,200
y dejamos que Google
maneje el envío del usuario.

798
00:36:25,200 --> 00:36:28,860
Pero ahora tenemos Python en un
lenguaje de programación que puede

799
00:36:28,860 --> 00:36:32,520
recibir, dentro del mismo sobre,
la consulta de gatos del usuario

800
00:36:32,520 --> 00:36:34,500
o el nombre del
usuario y el dormitorio.

801
00:36:34,500 --> 00:36:37,120
Y, de hecho, podemos
hacer algo con eso.

802
00:36:37,120 --> 00:36:39,630
Este programa aún
no hace muchas cosas.

803
00:36:39,630 --> 00:36:44,340
Si entro aquí y hago zoom, y
registro a David de Matthews y hago clic

804
00:36:44,340 --> 00:36:46,980
en Registrar,
observen lo que sucede.

805
00:36:46,980 --> 00:36:50,094
Termino, tal como 
lo prometí, en /register,

806
00:36:50,094 --> 00:36:52,260
y me dice "¡Ya estás registrado!
(Bueno, no realmente).

807
00:36:52,260 --> 00:36:53,801
Y eso ocurre porque
esta es la versión 0

808
00:36:53,801 --> 00:36:55,560
y la verdad
no hace gran cosa.

809
00:36:55,560 --> 00:36:57,040
¿Qué hace?

810
00:36:57,040 --> 00:36:59,910
Bueno, regresemos y tratemos
de ser menos cooperativos.

811
00:36:59,910 --> 00:37:01,680
Entonces, acabo
de recargar la página

812
00:37:01,680 --> 00:37:03,830
y sigue preguntando
por mi nombre y mi dormitorio.

813
00:37:03,830 --> 00:37:05,590
No necesitan
conocer esa información,

814
00:37:05,590 --> 00:37:06,300
quiero mantenerla privada.

815
00:37:06,300 --> 00:37:09,510
Solo quiero registrarme anónimamente a
un deporte, lo que sea que eso signifique.

816
00:37:09,510 --> 00:37:12,550
Register,
Ok, ¡me pillaron!

817
00:37:12,550 --> 00:37:15,480
Tengan en cuenta que
la URL sigue siendo /register.

818
00:37:15,480 --> 00:37:18,111
Pero me están exigiendo
que dé mi nombre y mi dormitorio.

819
00:37:18,111 --> 00:37:19,860
De acuerdo, bien,
les daré mi nombre.

820
00:37:19,860 --> 00:37:23,850
Pero no quiero que sepan dónde vivo,
así que solo voy a poner David...

821
00:37:23,850 --> 00:37:25,170
Register.

822
00:37:25,170 --> 00:37:27,060
Y me sigue pillando,
de alguna manera.

823
00:37:27,060 --> 00:37:31,650
Solo cuando le doy un dormitorio
y un nombre, como David de Matthews,

824
00:37:31,650 --> 00:37:35,670
y hago clic en Register,
es cuando intenta registrarme.

825
00:37:35,670 --> 00:37:37,204
¿Cómo se ve la lógica?

826
00:37:37,204 --> 00:37:39,870
En pseudocódigo en inglés,
incluso si nunca han escrito en Python,

827
00:37:39,870 --> 00:37:44,334
¿Qué tipo de pseudocódigo habría
en application.py para esta aplicación?

828
00:37:44,334 --> 00:37:47,085
PÚBLICO: Si no hay texto,
proporciona un mensaje de error.

829
00:37:47,085 --> 00:37:49,210
DAVID: Perfecto, si no
se le proporciona un texto,

830
00:37:49,210 --> 00:37:50,865
nos proporciona
este mensaje de error.

831
00:37:50,865 --> 00:37:52,990
Entonces, demos un vistazo
a cómo se implementó.

832
00:37:52,990 --> 00:37:55,810
En froshims0,
además de mi plantilla,

833
00:37:55,810 --> 00:37:58,494
tengo de nuevo application.py.

834
00:37:58,494 --> 00:38:00,410
Veamos qué hay de nuevo
y qué es diferente.

835
00:38:00,410 --> 00:38:04,030
En primer lugar, esto es
más o menos lo mismo que antes.

836
00:38:04,030 --> 00:38:06,064
Acabo de agregar otra
cosa aquí llamada request,

837
00:38:06,064 --> 00:38:07,480
por razones que veremos
en un momento.

838
00:38:07,480 --> 00:38:09,480
Aquí está la línea de código
que dice, hey, Python,

839
00:38:09,480 --> 00:38:11,770
dame una aplicación
web llamada app.

840
00:38:11,770 --> 00:38:18,100
Hey, Python, cuando el usuario visite ("/"),
renderiza la plantilla index.html.

841
00:38:18,100 --> 00:38:19,420
Así es como
obtuve el formulario.

842
00:38:19,420 --> 00:38:20,830
Pero esta es
la parte interesante.

843
00:38:20,830 --> 00:38:22,660
Dejen me alejo un poco.

844
00:38:22,660 --> 00:38:25,390
Estas líneas de código son
un poco más complicadas,

845
00:38:25,390 --> 00:38:26,860
pero veamos una a la vez.

846
00:38:26,860 --> 00:38:30,490
Esta primera línea, la nueve,
está diciendo, hey, Python...

847
00:38:30,490 --> 00:38:33,610
o específicamente Flask,
cuando el usuario visite

848
00:38:33,610 --> 00:38:38,727
/register usando el método post,
¿qué quiero llamar?

849
00:38:38,727 --> 00:38:40,060
Para ser más claros,
¿a cuál función?

850
00:38:40,060 --> 00:38:43,399


851
00:38:43,399 --> 00:38:44,360
AUDIENCE: ¿Register?

852
00:38:44,360 --> 00:38:46,880
DAVID: Register, entonces
de nuevo, la única relación aquí,

853
00:38:46,880 --> 00:38:50,120
a pesar de que la sintaxis
parezca un poco compleja, si dice,

854
00:38:50,120 --> 00:38:54,320
hey, servidor, cuando
el usuario visite /register,

855
00:38:54,320 --> 00:38:57,860
llama a la función que
está justo abajo llamada register.

856
00:38:57,860 --> 00:38:59,550
Y entonces,
¿qué hace esa función?

857
00:38:59,550 --> 00:39:03,260
Bueno, aquí está la lógica que
propusieron hace un momento.

858
00:39:03,260 --> 00:39:07,345
Si no, usa request.form.get("name")
or not request.form.get("dorm"):

859
00:39:07,345 --> 00:39:12,260
name y dorm, entonces,
return ("failure.html"),

860
00:39:12,260 --> 00:39:14,990
else, implícitamente, 
return ("success.html").

861
00:39:14,990 --> 00:39:18,170
La única parte que es algo
nueva y diferente aquí es la línea 11,

862
00:39:18,170 --> 00:39:20,674
porque en C, tendríamos
que usar los signos de admiración.

863
00:39:20,674 --> 00:39:23,090
Tendríamos que usar barras
verticales o algo de esa

864
00:39:23,090 --> 00:39:24,470
sintaxis que es
un poco diferente.

865
00:39:24,470 --> 00:39:26,310
Pero esto funciona
de la siguiente manera,

866
00:39:26,310 --> 00:39:31,940
existe una función llamada get que está
dentro de una variable especial llamada

867
00:39:31,940 --> 00:39:38,670
form, que está dentro de una variable
especial llamada request a la que tengo

868
00:39:38,670 --> 00:39:42,290
acceso, porque la importé aquí.

869
00:39:42,290 --> 00:39:46,940
Y esa función get
busca, dentro del sobre virtual,

870
00:39:46,940 --> 00:39:51,120
un campo llamado name, el cual
puede ser introducido en el sobre

871
00:39:51,120 --> 00:39:53,090
si un usuario
escribió su nombre.

872
00:39:53,090 --> 00:39:56,420
Y si existe,
devuelve "David",

873
00:39:56,420 --> 00:40:00,260
"María", o quien sea que se registra,
pero si no, lo invierte.

874
00:40:00,260 --> 00:40:07,430
Si no es un nombre, o si no es
un dormitorio, genera failure.html.

875
00:40:07,430 --> 00:40:10,550
¿Cómo se ve failure.html?

876
00:40:10,550 --> 00:40:14,450
Bueno, failure.html solo tiene
este mensaje hardcoded,

877
00:40:14,450 --> 00:40:16,760
"Debes proporcionar
tu nombre y tu dormitorio".

878
00:40:16,760 --> 00:40:21,550
Y ahora, a riesgo de introducir
aquí demasiados lenguajes a la vez,

879
00:40:21,550 --> 00:40:23,150
tenemos otro.

880
00:40:23,150 --> 00:40:26,840
Estas llaves y estos
signos de porcentaje

881
00:40:26,840 --> 00:40:28,760
son lo que se llama
un lenguaje de plantillas.

882
00:40:28,760 --> 00:40:32,870
Pero antes de explicar qué es eso, vean
que en la parte superior de este archivo

883
00:40:32,870 --> 00:40:34,580
se menciona otro
archivo, "layout.html".

884
00:40:34,580 --> 00:40:35,300
Ese

885
00:40:35,300 --> 00:40:36,770
no lo hemos visto antes.

886
00:40:36,770 --> 00:40:41,930
Antes teníamos archivos 
index.html completos

887
00:40:41,930 --> 00:40:45,140
o archivos
zuck.html completos.

888
00:40:45,140 --> 00:40:51,590
¿Pero qué era cierto hace un momento
acerca del index.html y el zuck.html

889
00:40:51,590 --> 00:40:52,710
de nuestro último ejemplo?

890
00:40:52,710 --> 00:40:55,220
Voy a abrirlos
de nuevo rápidamente.

891
00:40:55,220 --> 00:40:57,980
Recuerden que
Index.html se veía así

892
00:40:57,980 --> 00:41:01,610
y zuck.html se veía así.

893
00:41:01,610 --> 00:41:06,592
En pocas palabras,
¿qué notan en ambos?

894
00:41:06,592 --> 00:41:08,300
PÚBLICO: [INAUDIBLE]
es casi lo mismo.

895
00:41:08,300 --> 00:41:09,730
DAVID: Sí, son
casi idénticos, ¿verdad?

896
00:41:09,730 --> 00:41:11,570
Parecen diferir
solo en sus títulos,

897
00:41:11,570 --> 00:41:14,340
obviamente,
y en el contenido del cuerpo.

898
00:41:14,340 --> 00:41:16,905
Pero todo el resto de la
estructura es idéntico.

899
00:41:16,905 --> 00:41:19,030
Y para ser justos,
no hay mucho en rojo allí,

900
00:41:19,030 --> 00:41:20,210
tampoco hay
demasiadas etiquetas.

901
00:41:20,210 --> 00:41:23,060
Pero quiero decir, copié
y pegué esto frente a ustedes

902
00:41:23,060 --> 00:41:26,190
y, generalmente, eso ya es dar
un paso en la dirección equivocada.

903
00:41:26,190 --> 00:41:28,070
Entonces, tenemos
una oportunidad aquí.

904
00:41:28,070 --> 00:41:29,535
Hay un problema por resolver

905
00:41:29,535 --> 00:41:31,160
y ya lo hemos
hecho antes, ¿verdad?

906
00:41:31,160 --> 00:41:33,649
En C, si solo copiaban
y pegaban ciegamente el código

907
00:41:33,649 --> 00:41:35,690
necesitaban hacerlo en varios
sitios, lo cual es un poco tonto,

908
00:41:35,690 --> 00:41:36,481
es algo desordenado,

909
00:41:36,481 --> 00:41:37,520
es difícil de mantener.

910
00:41:37,520 --> 00:41:39,853
Por el contrario, probablemente
deberían definirlo como una función

911
00:41:39,853 --> 00:41:41,497
que se llama
en varios lugares.

912
00:41:41,497 --> 00:41:43,580
Ahora, este no es un lenguaje
de programación, entonces no hay

913
00:41:43,580 --> 00:41:45,890
una noción comparable
de una función.

914
00:41:45,890 --> 00:41:50,300
Ya que es un lenguaje de marcado
que solo tiene valores hardcode,

915
00:41:50,300 --> 00:41:53,990
pueden pensar que esto
es una plantilla o un molde

916
00:41:53,990 --> 00:42:01,457
donde ponen algo aquí
y luego acá y luego más allá.

917
00:42:01,457 --> 00:42:03,290
Entonces, si piensan
en el mundo físico

918
00:42:03,290 --> 00:42:07,580
como plantillas que se tienen,
o como un molde en el que

919
00:42:07,580 --> 00:42:11,390
vaciamos valores específicos,
eso es de lo que estamos hablando.

920
00:42:11,390 --> 00:42:15,390
Y eso es layout.html
en este ejemplo de froshims.

921
00:42:15,390 --> 00:42:19,880
No lo he abierto hasta ahora,
pero aquí está, en cierto modo complejo,

922
00:42:19,880 --> 00:42:23,930
un ejemplo de layout.html.

923
00:42:23,930 --> 00:42:25,460
Observen que tiene
el tipo de documento.

924
00:42:25,460 --> 00:42:29,000
Tiene encabezado HTML, título,
algunas otras cosas acá y cuerpo.

925
00:42:29,000 --> 00:42:30,620
Pero luego, tiene
este marcador de posición.

926
00:42:30,620 --> 00:42:33,770
Y lo admito, la sintaxis
es algo compleja e irritante,

927
00:42:33,770 --> 00:42:36,590
pero solo está
diciendo, pon algo aquí.

928
00:42:36,590 --> 00:42:37,580
Y eso es todo.

929
00:42:37,580 --> 00:42:39,350
¿Qué estamos poniendo allí?

930
00:42:39,350 --> 00:42:44,150
Si volvemos a failure.html, observen
que funciona de la siguiente manera.

931
00:42:44,150 --> 00:42:47,690
Failure.html extiende
conceptualmente esta plantilla.

932
00:42:47,690 --> 00:42:51,440
Toma prestado ese molde,
llamado layout.html.

933
00:42:51,440 --> 00:42:54,800
Y observen que tiene aquí las mismas
palabras clave, block body y block.

934
00:42:54,800 --> 00:42:58,880
Esto solo significa,
conecta esto en ese archivo.

935
00:42:58,880 --> 00:43:01,972
Y esto me permitió romper
rápidamente mi hábito

936
00:43:01,972 --> 00:43:05,180
de copiar y pegar todo, aun cuando
el formato de estos archivos

937
00:43:05,180 --> 00:43:06,840
es casi idéntico.

938
00:43:06,840 --> 00:43:10,010
Si vuelvo a
application.py, observen

939
00:43:10,010 --> 00:43:15,650
que este programa generó,
ya sea index.html o failure.html,

940
00:43:15,650 --> 00:43:16,800
o success.html.

941
00:43:16,800 --> 00:43:20,340
Habría sido bastante tonto
copiar y pegar mi código tres veces.

942
00:43:20,340 --> 00:43:24,110
Es por eso que me dediqué un tiempo
para crear un cuarto archivo, layout.html,

943
00:43:24,110 --> 00:43:25,940
solo para factorizar
todo lo que resulta común.

944
00:43:25,940 --> 00:43:28,550
Y el lado positivo es que también,
significa que todas estas páginas

945
00:43:28,550 --> 00:43:29,970
tienen el mismo
aspecto estructural.

946
00:43:29,970 --> 00:43:31,960
Y si tuviera un logotipo
elegante en mi sitio web

947
00:43:31,960 --> 00:43:34,520
y una buena marca para mi sitio
web, todas mis páginas

948
00:43:34,520 --> 00:43:38,540
se verían igual, a excepción de
un mensaje que cambia en el medio

949
00:43:38,540 --> 00:43:40,200
de la página.

950
00:43:40,200 --> 00:43:43,330
Y entonces, esto es Frosh IM0.

951
00:43:43,330 --> 00:43:47,390
¿Alguna pregunta
sobre cómo se ve?

952
00:43:47,390 --> 00:43:50,340
Bien, tenemos aquí
un par de oportunidades.

953
00:43:50,340 --> 00:43:53,735
Creo que sería
interesante recordar

954
00:43:53,735 --> 00:43:55,610
que el usuario se registró,
en vez de simplemente

955
00:43:55,610 --> 00:43:58,680
tratar de generar un valor
hardcoded, como "Está registrado".

956
00:43:58,680 --> 00:44:01,884
Bueno no realmente, porque no hago
nada con su nombre o dormitorio.

957
00:44:01,884 --> 00:44:03,800
Entonces tal vez podríamos
guardarlo en la memoria

958
00:44:03,800 --> 00:44:05,800
y ver quién
se registró en el sitio.

959
00:44:05,800 --> 00:44:09,740
Sería incluso más genial si,
como antes cuando implementé

960
00:44:09,740 --> 00:44:14,102
el sitio web froshims, se pudiera enviar
un correo electrónico a quien se registra

961
00:44:14,102 --> 00:44:15,560
para confirmar
que ya están registrados.

962
00:44:15,560 --> 00:44:18,890
O mejor, ¿por qué no lo guardamos
en una mini base de datos?

963
00:44:18,890 --> 00:44:22,034
como un archivo CSV, que yo,
como la persona que ejecuta froshims,

964
00:44:22,034 --> 00:44:25,200
puedo abrir en Excel, en Numbers.
en Hojas de cálculo de Google, o similares.

965
00:44:25,200 --> 00:44:27,310
Pero antes de llegar a ese tema, tomemos
nuestros cinco minutos de descanso

966
00:44:27,310 --> 00:44:29,810
y volvamos para
resolver estos problemas.

967
00:44:29,810 --> 00:44:30,800
Ya estamos de vuelta

968
00:44:30,800 --> 00:44:32,720
y pensé que
hoy sería oportuno,

969
00:44:32,720 --> 00:44:34,678
ya que es posible que
se pregunten quién es ese Stelios

970
00:44:34,678 --> 00:44:37,670
que estuvo en bastantes
de nuestros ejemplos de memoria.

971
00:44:37,670 --> 00:44:41,865
Hoy nos visita, de la Universidad de Yale,
uno de nuestros asesores, Stelios.

972
00:44:41,865 --> 00:44:43,134
STELIOS: Hola a todos.

973
00:44:43,134 --> 00:44:44,610
PÚBLICO: ¡Te amamos!

974
00:44:44,610 --> 00:44:48,546
[APLAUSOS]

975
00:44:48,546 --> 00:44:54,610
STELIOS: Yale está de vacaciones,
así que dije, ¿por qué no visitarlos?

976
00:44:54,610 --> 00:44:57,060
Sí, estoy feliz de verlos.

977
00:44:57,060 --> 00:44:59,680
He estado aquí muchas veces.

978
00:44:59,680 --> 00:45:01,950
Es un espacio hermoso.

979
00:45:01,950 --> 00:45:04,055
y sí, dije, ve y saluda
después de la conferencia.

980
00:45:04,055 --> 00:45:05,430
DAVID: Estamos
muy contentos de tenerte.

981
00:45:05,430 --> 00:45:07,140
Gracias, Stelios.

982
00:45:07,140 --> 00:45:09,480
Algo que llamó mi atención
fue que no me enfoqué

983
00:45:09,480 --> 00:45:12,240
mucho en mis registros en la ventana
de terminal, los cuales registran

984
00:45:12,240 --> 00:45:17,087
todas las solicitudes HTTP que se reciben
durante el funcionamiento de un servidor.

985
00:45:17,087 --> 00:45:20,170
Y esta es una captura de pantalla de mi
ventana de terminal desde hace un momento.

986
00:45:20,170 --> 00:45:22,980
Recordarán que visité la diagonal
y que luego traté de registrarme,

987
00:45:22,980 --> 00:45:24,930
pero en el inter,
aparentemente alguien del público,

988
00:45:24,930 --> 00:45:28,800
o en Internet,
trató de visitar la diagonal

989
00:45:28,800 --> 00:45:31,200
utilizando get en su navegador.

990
00:45:31,200 --> 00:45:34,050
Me deslice por algunas
otras entradas de Internet,

991
00:45:34,050 --> 00:45:36,990
pero las que más se podían
compartir fueron estas...

992
00:45:36,990 --> 00:45:39,830
bro, /David y /nice.

993
00:45:39,830 --> 00:45:42,490
Así que eso fue lo último
antes de que matara al servidor.

994
00:45:42,490 --> 00:45:46,710
Y eso es porque, aunque aún escucho
en un puerto no estándar, el 8080, a ese

995
00:45:46,710 --> 00:45:49,920
nombre de dominio, compartí mi espacio
de trabajo para que cualquiera pudiera

996
00:45:49,920 --> 00:45:51,726
tener acceso mientras
el servidor se ejecuta.

997
00:45:51,726 --> 00:45:53,850
Y si están aquí físicamente
o sintonizándonos

998
00:45:53,850 --> 00:45:56,040
en una transmisión en vivo,
es obvio que estoy

999
00:45:56,040 --> 00:46:00,570
anunciando públicamente que el puerto
8080 es donde pasamos nuestro tiempo.

1000
00:46:00,570 --> 00:46:06,170
Pero si volvemos a Flask
y minimizamos nuestros registros,

1001
00:46:06,170 --> 00:46:09,910
pensemos en cómo podemos recordar
que los usuarios han iniciado sesión.

1002
00:46:09,910 --> 00:46:13,710
A continuación demostraré,
entre los ejemplos de hoy,

1003
00:46:13,710 --> 00:46:17,430
froshims1,
ejecutando flask run.

1004
00:46:17,430 --> 00:46:21,300
Luego voy aquí arriba,
a la misma URL de antes.

1005
00:46:21,300 --> 00:46:23,280
Y esta vez veremos
que si prosigo

1006
00:46:23,280 --> 00:46:25,950
y me registro como
David de Matthews...

1007
00:46:25,950 --> 00:46:30,270
Register, observen que
en lugar de ir a /register,

1008
00:46:30,270 --> 00:46:31,680
cambié un poco las cosas

1009
00:46:31,680 --> 00:46:34,860
e iré a /registrants, porque ahí,

1010
00:46:34,860 --> 00:46:38,280
al parecer, tengo algo de HTML
que genera una lista con viñetas

1011
00:46:38,280 --> 00:46:39,430
de quién se ha registrado.

1012
00:46:39,430 --> 00:46:44,400
Y ahora tal vez registraré

1013
00:46:44,400 --> 00:46:47,220
a María de Apley Court...

1014
00:46:47,220 --> 00:46:48,360
Register.

1015
00:46:48,360 --> 00:46:49,650
Y ahora tenemos dos.

1016
00:46:49,650 --> 00:46:55,140
Además, si vuelvo a cargar la página,
observen que la información persiste.

1017
00:46:55,140 --> 00:46:57,180
¿Cómo funciona esto?

1018
00:46:57,180 --> 00:47:04,800
Bueno, echemos un vistazo
dentro de application.py para froshims1/

1019
00:47:04,800 --> 00:47:06,480
punto...

1020
00:47:06,480 --> 00:47:07,810
para froshims1/.

1021
00:47:07,810 --> 00:47:09,390
¿Qué tenemos aquí dentro?

1022
00:47:09,390 --> 00:47:12,750
Igual que antes, estoy configurando
mi aplicación con una línea como ésta,

1023
00:47:12,750 --> 00:47:14,610
es como decir, hey,
Flask, dame una aplicación.

1024
00:47:14,610 --> 00:47:18,150
Y luego, reclamo a mis registrants.

1025
00:47:18,150 --> 00:47:21,510
Esto es solo un comentario
en Python, # Registrants.

1026
00:47:21,510 --> 00:47:25,260
¿Y qué representa students = []?

1027
00:47:25,260 --> 00:47:26,040
PÚBLICO: Una lista.

1028
00:47:26,040 --> 00:47:27,630
DAVID: Una lista, sí,
es una lista vacía.

1029
00:47:27,630 --> 00:47:28,671
Es como un arreglo vacío.

1030
00:47:28,671 --> 00:47:31,860
Pero a diferencia de C, donde
los arreglos no pueden crecer o encogerse,

1031
00:47:31,860 --> 00:47:35,460
en Python las listas,
que son similares a un arreglo,

1032
00:47:35,460 --> 00:47:37,260
pueden crecer y reducirse
de manera dinámica.

1033
00:47:37,260 --> 00:47:38,790
Si quieren una
vacía, simplemente

1034
00:47:38,790 --> 00:47:39,873
dicen, dame una vacía.

1035
00:47:39,873 --> 00:47:42,330
Y descubriremos
después la longitud final.

1036
00:47:42,330 --> 00:47:45,030
Y lo que resulta atractivo
de esto, en la línea 7,

1037
00:47:45,030 --> 00:47:47,640
es que ahora tengo una
variable llamada students

1038
00:47:47,640 --> 00:47:50,670
que se inicializa
en una lista vacía,

1039
00:47:50,670 --> 00:47:55,230
pero que ahora está en la
memoria de la aplicación web.

1040
00:47:55,230 --> 00:47:57,884
Recuerden que
cuando ejecuto flask, no vuelvo

1041
00:47:57,884 --> 00:47:58,800
de inmediato a mi prompt.

1042
00:47:58,800 --> 00:48:00,450
El programa no solo se
ejecuta y luego se detiene,

1043
00:48:00,450 --> 00:48:02,533
sino que sigue escuchando,
escuchando y escuchando,

1044
00:48:02,533 --> 00:48:04,740
esperando a que
entren más de estos sobres.

1045
00:48:04,740 --> 00:48:09,150
Dado que llamamos
a estas diversas funciones

1046
00:48:09,150 --> 00:48:12,000
index o registrants,
o de otro modo, como ya veremos

1047
00:48:12,000 --> 00:48:15,480
todas tienen acceso a esa variable
global, que en este ejemplo es students,

1048
00:48:15,480 --> 00:48:18,750
y cualquiera de ellas puede
agregar más y más y más datos

1049
00:48:18,750 --> 00:48:20,340
dentro de students.

1050
00:48:20,340 --> 00:48:23,190
Ahora, para continuar,

1051
00:48:23,190 --> 00:48:27,180
mostraré que en las
visitas del usuario ("/"),

1052
00:48:27,180 --> 00:48:29,830
solo devolvemos index.html.

1053
00:48:29,830 --> 00:48:33,090
De lo contrario,
si visitan "/register", observen

1054
00:48:33,090 --> 00:48:36,100
que esta vez obtenemos
una lógica interesante.

1055
00:48:36,100 --> 00:48:39,962
Si el usuario visita "/register"
por medio de ["POST"]

1056
00:48:39,962 --> 00:48:42,420
y la única manera en que hemos visto
que esto podría pasar, hasta el momento,

1057
00:48:42,420 --> 00:48:44,210
¿es si el usuario hace qué?

1058
00:48:44,210 --> 00:48:46,826
¿Cómo se hace algo
por medio de ["POST"]?

1059
00:48:46,826 --> 00:48:47,700
PÚBLICO: Se envía.

1060
00:48:47,700 --> 00:48:48,991
DAVID: Se envía un formulario.

1061
00:48:48,991 --> 00:48:51,337
Entonces, los humanos podemos
simular get muy fácilmente

1062
00:48:51,337 --> 00:48:53,670
simplemente con ir a una URL
y escribirla en el navegador,

1063
00:48:53,670 --> 00:48:55,470
ya estamos usando get
de manera predeterminada.

1064
00:48:55,470 --> 00:48:58,800
No podemos hacer lo mismo
tan fácilmente para POST.

1065
00:48:58,800 --> 00:49:00,300
Solo tenemos
acceso a la barra de URL.

1066
00:49:00,300 --> 00:49:03,390
Pero si tenemos un formulario
web, como el de index.html

1067
00:49:03,390 --> 00:49:05,700
con el menú desplegable dorm
y el cuadro de texto name,

1068
00:49:05,700 --> 00:49:08,400
podemos enviarlo por medio de Post,
que es como se puede aplicar esta ruta

1069
00:49:08,400 --> 00:49:10,740
a aquella ruta en particular.

1070
00:49:10,740 --> 00:49:14,490
Entonces, lo que digo aquí en la línea 21
es, hey, dame una variable llamada name

1071
00:49:14,490 --> 00:49:17,580
y pon en ella lo que el usuario
haya escrito en el campo name.

1072
00:49:17,580 --> 00:49:18,930
Dame lo mismo para dorm.

1073
00:49:18,930 --> 00:49:21,690
Y observen, incluso si se trata de
un gran menú desplegable de elementos,

1074
00:49:21,690 --> 00:49:23,980
el usuario solo
seleccionará uno de ellos

1075
00:49:23,980 --> 00:49:26,160
y entonces
recuperaremos este valor.

1076
00:49:26,160 --> 00:49:30,060
Y luego tenemos un poco
de lógica estilo Phyton.

1077
00:49:30,060 --> 00:49:32,019
if not name or if not dorm,
lo cual se ve bien,

1078
00:49:32,019 --> 00:49:34,934
es un poco conciso, y hubiera
resultado extraño hace unas semanas,

1079
00:49:34,934 --> 00:49:37,620
pero ahora se ve mejor, quizás, de lo que
hubiera sido en la primera semana en C.

1080
00:49:37,620 --> 00:49:40,620
Luego continúa
con return ("failure.html"),

1081
00:49:40,620 --> 00:49:42,690
si nos falta el nombre
o el dormitorio.

1082
00:49:42,690 --> 00:49:46,870
Si no es el caso, y
no nos ha devuelto un error,

1083
00:49:46,870 --> 00:49:50,670
entonces va a students.append
y luego a la cadena f.

1084
00:49:50,670 --> 00:49:53,530
Entonces .append,
por si no lo recuerdan,

1085
00:49:53,530 --> 00:49:56,450
y es posible que no lo
recuerden, porque no sé si lo vimos,

1086
00:49:56,450 --> 00:49:59,360
es un método o función
integrada a una lista que

1087
00:49:59,360 --> 00:50:02,910
permite agregar un valor
a una lista llamada students.

1088
00:50:02,910 --> 00:50:05,540
Así es como crece
un arreglo en Python.

1089
00:50:05,540 --> 00:50:08,090
Simplemente se agrega
y el programa descubrirá

1090
00:50:08,090 --> 00:50:09,350
la longitud de esta lista.

1091
00:50:09,350 --> 00:50:12,530
Esta cadena f significa que ahí
va una cadena formateada, similar

1092
00:50:12,530 --> 00:50:14,600
a printf, pero la sintaxis
es un poco diferente.

1093
00:50:14,600 --> 00:50:18,740
Y la cadena que estoy formando aquí
es tal y tal de esta y esta,

1094
00:50:18,740 --> 00:50:20,320
así que, {name} from {dorm}

1095
00:50:20,320 --> 00:50:23,690
con las llaves dentro de una
cadena de formato, o de una cadena f,

1096
00:50:23,690 --> 00:50:27,390
significan que debemos conectar
estas variables en dicha cadena f.

1097
00:50:27,390 --> 00:50:29,910
Y esta es una
nueva característica.

1098
00:50:29,910 --> 00:50:32,210
Podemos devolver, no solo
la plantilla de renderizado,

1099
00:50:32,210 --> 00:50:35,206
sino que también podemos
devolver la redirección y la ruta

1100
00:50:35,206 --> 00:50:36,830
a la cual deseamos
redirigir al usuario.

1101
00:50:36,830 --> 00:50:37,670
Y adivinen qué.

1102
00:50:37,670 --> 00:50:40,220
Si llaman a
redirect("/registrants"),

1103
00:50:40,220 --> 00:50:43,850
¿qué hace flask?, porque flask
nos dio esta función de redirección

1104
00:50:43,850 --> 00:50:45,897
dentro del sobre para nosotros.

1105
00:50:45,897 --> 00:50:46,954
PÚBLICO: Una nueva dirección.

1106
00:50:46,954 --> 00:50:49,370
DAVID: Una nueva dirección,
¿y qué tipo de código de estado?

1107
00:50:49,370 --> 00:50:50,099
PÚBLICO: 301.

1108
00:50:50,099 --> 00:50:51,140
DAVID: Como 301.

1109
00:50:51,140 --> 00:50:52,770
Ya lo vimos
un par de veces.

1110
00:50:52,770 --> 00:50:55,040
301 significa redirigir al usuario.

1111
00:50:55,040 --> 00:50:57,110
Entonces esta función
maneja todo eso por nosotros.

1112
00:50:57,110 --> 00:51:01,460
No tenemos que saber o
preocuparnos por cómo se generan esos

1113
00:51:01,460 --> 00:51:02,420
códigos de estado.

1114
00:51:02,420 --> 00:51:06,200
Mientras tanto, /registrants
es súper simple, pero cuenta con

1115
00:51:06,200 --> 00:51:07,760
una nueva y agradable
característica.

1116
00:51:07,760 --> 00:51:12,350
Así que /register, al que se envía
el formulario, hace todas estas cosas

1117
00:51:12,350 --> 00:51:16,160
y luego redirige al usuario
a /registrants, solo porque sí.

1118
00:51:16,160 --> 00:51:18,980
Y queda mejor
diseñado si esta ruta

1119
00:51:18,980 --> 00:51:20,930
solo se usa para guardar
información, y esta ruta

1120
00:51:20,930 --> 00:51:23,660
solo se usa para ver información,
porque de esta manera

1121
00:51:23,660 --> 00:51:25,830
también pueden
visitarla a través de get.

1122
00:51:25,830 --> 00:51:27,860
Noten que estoy
devolviendo "registrants.html",

1123
00:51:27,860 --> 00:51:30,680
Pero estoy haciendo algo
un poco diferente esta vez.

1124
00:51:30,680 --> 00:51:33,780
¿Qué es diferente en la línea 16, con
respecto a lo que nuestras otras plantillas

1125
00:51:33,780 --> 00:51:34,807
renderizadas
llamaban antes?

1126
00:51:34,807 --> 00:51:35,890
PÚBLICO: Students igual a...

1127
00:51:35,890 --> 00:51:38,990
DAVID: Sí, students = students,
lo cual es un poco extraño.

1128
00:51:38,990 --> 00:51:44,190
Pero sabemos que uno de esos
valores se refiere a esta lista de aquí.

1129
00:51:44,190 --> 00:51:48,320
Y es un ejemplo de Python cuando
admite parámetros con nombre.

1130
00:51:48,320 --> 00:51:52,160
Resulta que si quieren
pasar datos a una plantilla,

1131
00:51:52,160 --> 00:51:55,790
pueden poner una coma y los
nombres de los valores que quieran pasar.

1132
00:51:55,790 --> 00:51:56,810
Index no necesita esto.

1133
00:51:56,810 --> 00:51:57,620
Failure no necesita esto.

1134
00:51:57,620 --> 00:51:59,960
success no necesita esto.
porque todo está hardcoded,

1135
00:51:59,960 --> 00:52:01,707
pero registrants sí.

1136
00:52:01,707 --> 00:52:04,790
Con base en lo que vimos, va a
generar una lista con viñetas que diga,

1137
00:52:04,790 --> 00:52:06,660
David de Matthews y
María de Apley Court,

1138
00:52:06,660 --> 00:52:08,990
de modo que necesitamos saber
quiénes son esos estudiantes.

1139
00:52:08,990 --> 00:52:14,090
OK, entonces, en "registrants.html", los
estudiantes serán el parámetro nombrado.

1140
00:52:14,090 --> 00:52:17,780
Y el valor de ello
será esta lista de arriba.

1141
00:52:17,780 --> 00:52:20,330
Entonces, el lado derecho
es una variable, o un valor

1142
00:52:20,330 --> 00:52:22,520
que debe existir
en el programa actual,

1143
00:52:22,520 --> 00:52:25,070
y el lado izquierdo
es una variable que,

1144
00:52:25,070 --> 00:52:29,900
ya lo veremos, va a estar
dentro de "registrants.html".

1145
00:52:29,900 --> 00:52:33,581
Vamos a abrir registrants.html,
porque las otras plantillas, sinceramente,

1146
00:52:33,581 --> 00:52:34,580
no son tan interesantes.

1147
00:52:34,580 --> 00:52:38,540
Index.html es como el formulario web que
tiene los campos de dormitorios y nombres.

1148
00:52:38,540 --> 00:52:42,470
Failure solo dice, lo siento, debe
proporcionar el nombre y el dormitorio.

1149
00:52:42,470 --> 00:52:45,180
Layout es simplemente una
estructura web similar a la anterior.

1150
00:52:45,180 --> 00:52:48,930
Entonces, el único archivo nuevo,
además de los cambios en application.py,

1151
00:52:48,930 --> 00:52:51,170
está en registrants.html.

1152
00:52:51,170 --> 00:52:53,540
Este archivo, igual que antes,
amplía un diseño.

1153
00:52:53,540 --> 00:52:55,760
Entonces es el molde
que está en uso

1154
00:52:55,760 --> 00:52:59,370
y va a llenar el siguiente
bloque para el cuerpo.

1155
00:52:59,370 --> 00:53:02,360
Esto es solo específico
de la técnica de plantillas,

1156
00:53:02,360 --> 00:53:03,500
solo limpia el código.

1157
00:53:03,500 --> 00:53:05,660
Pero lo que realmente
interesa está aquí.

1158
00:53:05,660 --> 00:53:09,950
Es como una especie de HTML,
pero a la vez no lo parece,

1159
00:53:09,950 --> 00:53:13,234
¿qué aspecto tiene entonces?

1160
00:53:13,234 --> 00:53:14,150
PÚBLICO: Un código de Python.

1161
00:53:14,150 --> 00:53:16,358
DAVID: Sí, parece
un código de Python

1162
00:53:16,358 --> 00:53:18,080
y técnicamente no lo es.

1163
00:53:18,080 --> 00:53:20,810
Y me doy cuenta de que esta
es una parte difícil del semestre,

1164
00:53:20,810 --> 00:53:23,180
tal vez es la parte del
semestre donde presentamos

1165
00:53:23,180 --> 00:53:24,950
todas estas malditas cosas
al mismo tiempo.

1166
00:53:24,950 --> 00:53:27,140
Pero este es
un lenguaje llamado Jinja,

1167
00:53:27,140 --> 00:53:30,860
J-I-N-J-A, el cual es
un lenguaje de plantillas.

1168
00:53:30,860 --> 00:53:33,210
Y verán esa palabra
en la documentación y demás.

1169
00:53:33,210 --> 00:53:37,670
Es un lenguaje muy ligero
que sirve para mostrar información.

1170
00:53:37,670 --> 00:53:39,012
Nos da algunos bucles.

1171
00:53:39,012 --> 00:53:40,220
Nos da algunas condiciones.

1172
00:53:40,220 --> 00:53:41,910
Y tiene mucho
del código de Python.

1173
00:53:41,910 --> 00:53:46,800
Pueden pensarlo de esa manera,
pero no es necesariamente idéntico.

1174
00:53:46,800 --> 00:53:49,500
Así que ahora veremos con ejemplos
lo que podemos hacer con eso.

1175
00:53:49,500 --> 00:53:53,510
Aquí, tenemos una plantilla de Jinja
que dice: "for student in students".

1176
00:53:53,510 --> 00:53:55,070
Eso es muy similar a Python.

1177
00:53:55,070 --> 00:53:57,860
"For student in students"
significa iterar sobre los estudiantes

1178
00:53:57,860 --> 00:54:01,780
y llama a cada student
que esté en el camino de student.

1179
00:54:01,780 --> 00:54:05,660
Es decir, necesito llamar a students
porque lo pasa a mi formulario.

1180
00:54:05,660 --> 00:54:07,685
Esto podría ser foo,
o bar, o S, o lo que sea.

1181
00:54:07,685 --> 00:54:09,025
Es solo un bucle.

1182
00:54:09,025 --> 00:54:11,150
Y entonces, quizás, puedan
adivinar qué hace esta línea,

1183
00:54:11,150 --> 00:54:12,566
a pesar de que
es un poco compleja.

1184
00:54:12,566 --> 00:54:15,860
En la línea 7 tengo algún
tipo de HTML familiar,

1185
00:54:15,860 --> 00:54:18,860
y es familiar en el sentido de que
por unos segundos, hace un par de semanas,

1186
00:54:18,860 --> 00:54:23,360
les mostré una lista con viñetas en HTML
que tenía muchos elementos de la lista Li.

1187
00:54:23,360 --> 00:54:24,170
Pero traten de adivinar.

1188
00:54:24,170 --> 00:54:26,840
¿Qué está haciendo la línea 7,
probablemente, si tuvieran que

1189
00:54:26,840 --> 00:54:31,678
adivinar según el resultado
de este programa?

1190
00:54:31,678 --> 00:54:33,770
PÚBLICO: Imprimir [INAUDIBLE].

1191
00:54:33,770 --> 00:54:34,894
DAVID: ¿Imprimir qué?

1192
00:54:34,894 --> 00:54:36,402
PÚBLICO: Imprimir
a los estudiantes.

1193
00:54:36,402 --> 00:54:38,110
DAVID: A los estudiantes
individuales, entonces,

1194
00:54:38,110 --> 00:54:41,860
recuerden que la lista students
es solo una lista de cadenas tal y tal

1195
00:54:41,860 --> 00:54:45,080
de esta y esta, tal y tal
de este y este lugares.

1196
00:54:45,080 --> 00:54:49,570
De modo que, si inducimos
este bucle, iteramos sobre esa variable

1197
00:54:49,570 --> 00:54:53,540
y con cada iteración generaremos
un elemento, un nuevo elemento en la lista,

1198
00:54:53,540 --> 00:54:56,740
en otras palabras, una nueva viñeta,
una nueva viñeta, una nueva viñeta, cada vez

1199
00:54:56,740 --> 00:54:59,500
que imprimimos <li>{{ student }}</li>
con el nombre de ese valor,

1200
00:54:59,500 --> 00:55:01,660
obtendremos una lista
de estudiantes con viñetas.

1201
00:55:01,660 --> 00:55:04,900
Desde luego,
el HTML podría no ser bonito

1202
00:55:04,900 --> 00:55:07,270
porque esta vez
se generó por un humano,

1203
00:55:07,270 --> 00:55:08,680
pero este es el HTML.

1204
00:55:08,680 --> 00:55:12,370
Si veo Chrome Source para
esta página, observen que

1205
00:55:12,370 --> 00:55:15,100
obtuve todas estas
cosas de mi diseño,

1206
00:55:15,100 --> 00:55:17,170
mientras tanto, aquí
abajo tengo <ul> y <ul>

1207
00:55:17,170 --> 00:55:19,630
los cuales codifiqué en ese archivo.

1208
00:55:19,630 --> 00:55:21,820
Pero no están
codificados en ninguna parte,

1209
00:55:21,820 --> 00:55:23,720
se generaron dinámicamente.

1210
00:55:23,720 --> 00:55:26,180
Esta es la primera
evidencia, no solo de

1211
00:55:26,180 --> 00:55:28,930
la lógica dentro de nuestra
aplicación web basada en Python,

1212
00:55:28,930 --> 00:55:32,740
sino también de la capacidad de
generar el contenido para el usuario.

1213
00:55:32,740 --> 00:55:34,600
Y si continúo ejecutando
el servidor y también

1214
00:55:34,600 --> 00:55:37,000
tengo personas lo envíen
y se registren continuamente

1215
00:55:37,000 --> 00:55:38,830
esa lista se haría
cada vez más larga

1216
00:55:38,830 --> 00:55:40,788
y el supervisor
o la persona que gestione

1217
00:55:40,788 --> 00:55:43,570
los deportes de interior,
puede mirar en esa lista

1218
00:55:43,570 --> 00:55:45,487
al ir a \registrants
y así saber a quién

1219
00:55:45,487 --> 00:55:48,070
contactar, en caso de que
solicitemos más información personal

1220
00:55:48,070 --> 00:55:50,830
como los correos
electrónicos y demás.

1221
00:55:50,830 --> 00:55:55,125
¿Hay alguna pregunta
sobre este ejemplo?

1222
00:55:55,125 --> 00:56:02,020
Muy bien, en el ejemplo 2,
donde creamos de nuevo el sitio web

1223
00:56:02,020 --> 00:56:06,370
que más o menos
implementé en 1997 o en 1998

1224
00:56:06,370 --> 00:56:09,850
y aunque fue en un lenguaje diferente,
le permitió a los estudiantes de primer año

1225
00:56:09,850 --> 00:56:11,410
registrarse en los deportes en interior

1226
00:56:11,410 --> 00:56:12,800
y lo haremos de la siguiente manera,

1227
00:56:12,800 --> 00:56:18,050
Si entro en froshims2
y escribo flask run,

1228
00:56:18,050 --> 00:56:19,780
ahora volveré
a cargar esa aplicación

1229
00:56:19,780 --> 00:56:21,850
y después solicitaré otra cosa,

1230
00:56:21,850 --> 00:56:25,840
hice el formulario un poco más grande al
pedir una dirección de correo electrónico

1231
00:56:25,840 --> 00:56:29,530
porque esta vez, intentaré
enviar un correo electrónico.

1232
00:56:29,530 --> 00:56:32,650
Permítanme regresar aquí, al archivo

1233
00:56:32,650 --> 00:56:40,780
y reduciré esto para hacerle
espacio a froshims2/ application.py

1234
00:56:40,780 --> 00:56:42,470
el cual hará lo siguiente.

1235
00:56:42,470 --> 00:56:45,590
Tengo algunas indicaciones de contraseña,
pero veremos más sobre eso en un momento,

1236
00:56:45,590 --> 00:56:51,160
noten que aquí arriba tengo otro import,
sin mencionar el del sistema operativo.

1237
00:56:51,160 --> 00:56:55,110
Y aquí arriba observen, veamos,

1238
00:56:55,110 --> 00:57:00,910
arriba está import smtplib, el protocolo
para transferencia simple de correo o SMTP,

1239
00:57:00,910 --> 00:57:02,530
el cual tiene relación
con el correo electrónico

1240
00:57:02,530 --> 00:57:04,900
y eso es, porque este
ejemplo funciona como sigue.

1241
00:57:04,900 --> 00:57:09,130
En la diagonal ("/")
devolvemos ese formato, index.html.

1242
00:57:09,130 --> 00:57:14,350
Si en cambio, vamos a ("/register 
observemos lo que sucede ahora

1243
00:57:14,350 --> 00:57:17,320
y quiero mover esto aquí arriba,

1244
00:57:17,320 --> 00:57:18,160
aquí vamos.

1245
00:57:18,160 --> 00:57:22,300
Ahora tenemos este
archivo aquí.. este método aquí

1246
00:57:22,300 --> 00:57:23,930
que funciona de la siguiente manera.

1247
00:57:23,930 --> 00:57:27,555
Si el usuario intenta registrarse con
"POST" llama esta función def register ( ):

1248
00:57:27,555 --> 00:57:28,180
obtenemos name,

1249
00:57:28,180 --> 00:57:28,750
obtenemos email,

1250
00:57:28,750 --> 00:57:31,249
obtenemos dorm, y luego
un poco de revisión de salud,

1251
00:57:31,249 --> 00:57:33,940
que por ahora no está completa,
porque, al igual que antes, solo

1252
00:57:33,940 --> 00:57:37,060
pregunto, if not name or not dorm:

1253
00:57:37,060 --> 00:57:41,254
Pero, ¿cómo me aseguro de que el usuario
me dio su dirección de correo electrónico?

1254
00:57:41,254 --> 00:57:43,489
PÚBLICO: [INAUDIBLE].

1255
00:57:43,489 --> 00:57:46,750
DAVID: Sí, de modo
que si no es name, email,

1256
00:57:46,750 --> 00:57:50,230
o dorm, he mejorado este
ejemplo si lo comparamos con el último

1257
00:57:50,230 --> 00:57:52,310
al verificar también
su dirección de correo electrónico

1258
00:57:52,310 --> 00:57:55,240
pero si no nos proporcionan
una, diremos que hay un error,

1259
00:57:55,240 --> 00:57:58,446
por otro lado, ¿qué hace la línea 23?

1260
00:57:58,446 --> 00:57:59,829
PÚBLICO: ¿Envía un mensaje?

1261
00:57:59,829 --> 00:58:01,870
DAVID: Establece un mensaje,
una variable que se llama

1262
00:58:01,870 --> 00:58:03,920
message = "You are registered!"

1263
00:58:03,920 --> 00:58:06,170
La siguiente línea es un
poco críptica y solo sabrían

1264
00:58:06,170 --> 00:58:08,060
lo que significa al leer
la documentación,

1265
00:58:08,060 --> 00:58:10,340
como lo hice al escribir este ejemplo.

1266
00:58:10,340 --> 00:58:12,710
En el lado izquierdo tengo
una variable llamada server,

1267
00:58:12,710 --> 00:58:15,170
que esta vez no será un servidor web,
sino un servidor de correo electrónico

1268
00:58:15,170 --> 00:58:16,550
con el cual quiero conectarme.

1269
00:58:16,550 --> 00:58:20,450
En particular, quiero usar
esta biblioteca llamada smtplib,

1270
00:58:20,450 --> 00:58:23,840
que es una función SMTP o Protocolo
para Transferencia Simple de Correo,

1271
00:58:23,840 --> 00:58:26,960
para conectarme a una dirección que
podría no haber visto antes con claridad,

1272
00:58:26,960 --> 00:58:31,550
pero probablemente adivinen el servidor
al que me conecto en el puerto TCP 587.

1273
00:58:31,550 --> 00:58:34,700
En resumen, aun cuando la mayoría
de nosotros, si usamos Gmail,

1274
00:58:34,700 --> 00:58:36,680
solo vamos a Gmail.com
y comenzamos a usarlo,

1275
00:58:36,680 --> 00:58:38,390
y al parecer es un puerto 80,

1276
00:58:38,390 --> 00:58:40,700
en el fondo, cada vez
que redactemos un mensaje

1277
00:58:40,700 --> 00:58:44,150
y hagamos clic en Send o enviemos
un archivo, lo que se genera

1278
00:58:44,150 --> 00:58:46,280
es un código como este en Google

1279
00:58:46,280 --> 00:58:49,100
después ellos se conectan
a su propio servidor de salida de correo

1280
00:58:49,100 --> 00:58:51,890
llamado servidor SMTP,
el cual será esta dirección.

1281
00:58:51,890 --> 00:58:55,970
Se conectan a él por medio del puerto
TCP 587, porque no es una página web,

1282
00:58:55,970 --> 00:58:57,980
es un correo y por lo tanto
tiene un número único propio,

1283
00:58:57,980 --> 00:58:59,930
los humanos decidieron hace años.

1284
00:58:59,930 --> 00:59:03,680
En esta línea de aquí, la 25,
starttls, se inicia la codificación

1285
00:59:03,680 --> 00:59:06,050
para que de esta manera,
en teoría, nadie entre nosotros

1286
00:59:06,050 --> 00:59:09,620
y Google pueda ver el correo
electrónico que enviamos a su servidor.

1287
00:59:09,620 --> 00:59:11,544
Después aquí codifiqué
algunos valores, lo cual

1288
00:59:11,544 --> 00:59:13,460
tal vez no sea
lo mejor, pero lo hice

1289
00:59:13,460 --> 00:59:16,640
para que me permitiera registrarme
los primeros años a froshims.

1290
00:59:16,640 --> 00:59:18,110
pero, ¿qué ocurre después?

1291
00:59:18,110 --> 00:59:22,010
En la línea 26, esta es la línea

1292
00:59:22,010 --> 00:59:24,770
de acuerdo con la
documentación de esta biblioteca,

1293
00:59:24,770 --> 00:59:29,330
por la cual puedo iniciar sesión con el
nombre de usuario jharvard@cs50.net

1294
00:59:29,330 --> 00:59:30,770
después de pasar su "PASSWORD"

1295
00:59:30,770 --> 00:59:32,614
Hace un par de lecciones, recuerden que

1296
00:59:32,614 --> 00:59:35,030
mencioné que existen estas
variables de entorno, cuando

1297
00:59:35,030 --> 00:59:36,950
hablamos sobre el espacio
de la memoria en los programas,

1298
00:59:36,950 --> 00:59:41,340
las variables de entorno son valores
globales que no están en el código

1299
00:59:41,340 --> 00:59:42,800
pero a las que también tenemos acceso,

1300
00:59:42,800 --> 00:59:45,270
de modo que esto
dice "consigue del entorno",

1301
00:59:45,270 --> 00:59:47,660
la contraseña de JHarvard,
desde algún lugar en el IDE.

1302
00:59:47,660 --> 00:59:50,450
Por lo que no tengo que
codificarlo y transmitirlo en Internet.

1303
00:59:50,450 --> 00:59:54,890
Mientras tanto, la línea 27
hace lo que dice la función,

1304
00:59:54,890 --> 01:00:01,880
esto dice: al utilizar este servidor, Gmail,
envía un correo desde jharvard@cs50.net

1305
01:00:01,880 --> 01:00:05,730
a esta dirección de correo
electrónico, con este mensaje

1306
01:00:05,730 --> 01:00:10,100
y este mensaje, como lo habrán
notado, es "You are registered!"

1307
01:00:10,100 --> 01:00:13,400
Y solo para ser claro, ¿de dónde
viene esta variable de correo electrónico?

1308
01:00:13,400 --> 01:00:15,770
¿A quién va dirigido
este correo electrónico?

1309
01:00:15,770 --> 01:00:16,714
PÚBLICO: Al usuario.

1310
01:00:16,714 --> 01:00:17,630
PÚBLICO: Al estudiante.

1311
01:00:17,630 --> 01:00:19,430
DAVID: Al estudiante que se
registró por medio del formulario,

1312
01:00:19,430 --> 01:00:21,590
porque tenemos su nombre,
correo electrónico y dormitorio,

1313
01:00:21,590 --> 01:00:24,500
Suponiendo que escribió una
dirección de correo electrónico verdadera,

1314
01:00:24,500 --> 01:00:28,310
esto pasa al segundo argumento para
enviar un correo y entonces lo envía.

1315
01:00:28,310 --> 01:00:32,570
Por último,
render_template ("success.html") y voilà.

1316
01:00:32,570 --> 01:00:35,660
Ahora estamos por experimentar
una de las demostraciones más geniales

1317
01:00:35,660 --> 01:00:40,100
que hayamos hecho en el curso,
o uno de los fracasos más vergonzosos,

1318
01:00:40,100 --> 01:00:46,250
Si desean reproducirlo en casa,
vayan a tinyurl.com/fridaycs50

1319
01:00:46,250 --> 01:00:48,800
que es bastante
fácil de recordar.

1320
01:00:48,800 --> 01:00:56,200
Tinyurl.com/fridaycs50, Enter, eso debe
redirigirnos con nuestro viejo amigo

1321
01:00:56,200 --> 01:01:00,110
el HTTP 301, que debería
pasarnos a este formulario

1322
01:01:00,110 --> 01:01:01,990
y luego también
lo reproduciré en mi casa.

1323
01:01:01,990 --> 01:01:08,210
David from Malan y diré
que mi dirección es la de John Harvard,

1324
01:01:08,210 --> 01:01:13,820
él será de, digamos, Pennypacker,

1325
01:01:13,820 --> 01:01:19,100
Register y en verdad estoy registrado,
lo que espero también podrán ver pronto.

1326
01:01:19,100 --> 01:01:22,010


1327
01:01:22,010 --> 01:01:26,414
Y mientras hacíamos eso, recibí una alerta
de seguridad en mis cuentas de Google,

1328
01:01:26,414 --> 01:01:27,580
porque todos las están usando.

1329
01:01:27,580 --> 01:01:28,300
Pero está bien.

1330
01:01:28,300 --> 01:01:33,050


1331
01:01:33,050 --> 01:01:34,520
Estoy registrado como JHarvard.

1332
01:01:34,520 --> 01:01:37,460
Y, ¡oh, mi dios!,
todos esos ejemplos,

1333
01:01:37,460 --> 01:01:40,430
OK, y los errores que veremos pronto

1334
01:01:40,430 --> 01:01:42,470
que explicaré pronto,
¿y qué es lo que obtuve?

1335
01:01:42,470 --> 01:01:46,250
Si ustedes, como yo, revisan su correo
en algunos segundos, a partir de ahora,

1336
01:01:46,250 --> 01:01:50,090
deberían ver un correo electrónico
de jharvard@cs50.net, con el mensaje

1337
01:01:50,090 --> 01:01:54,310
"You are registered!" que me fue enviado
directamente, o con suerte, para ustedes.

1338
01:01:54,310 --> 01:01:56,810
Al menos dos de ustedes
no recibirán este mensaje,

1339
01:01:56,810 --> 01:01:58,934
porque según mi recuperación
de correo, tres de ustedes

1340
01:01:58,934 --> 01:02:01,100
escribieron mal sus direcciones
de correo electrónico en el ejemplo

1341
01:02:01,100 --> 01:02:03,150
de modo que me los regresa nuevamente.

1342
01:02:03,150 --> 01:02:05,690
así que, si no lo tienen
simplemente inténtenlo de nuevo.

1343
01:02:05,690 --> 01:02:07,280
Pero, ¿qué ocurrió aquí?

1344
01:02:07,280 --> 01:02:13,760
En este caso, escribí un código claramente
y por medio de application.py tenía

1345
01:02:13,760 --> 01:02:16,801
este route("/register"
que esta vez, no solo guardó cosas

1346
01:02:16,801 --> 01:02:17,300
en una variable,

1347
01:02:17,300 --> 01:02:22,070
sino que las metió en
un tipo especial de biblioteca

1348
01:02:22,070 --> 01:02:23,630
que sabe cómo enviar los correos.

1349
01:02:23,630 --> 01:02:25,880
Literalmente, esto es lo que
hice en los viejos tiempos,

1350
01:02:25,880 --> 01:02:27,006
no me sucedió eso...

1351
01:02:27,006 --> 01:02:28,880
podría haberme sucedido,

1352
01:02:28,880 --> 01:02:31,910
pero en 1997, no sabía lo que era
una base de datos o dónde podíamos

1353
01:02:31,910 --> 01:02:33,180
almacenar la información.

1354
01:02:33,180 --> 01:02:35,690
Así que estoy bastante seguro,
de que la primera versión de los registros

1355
01:02:35,690 --> 01:02:38,570
en línea de Harvard,
para froshims, solo se enviaron

1356
01:02:38,570 --> 01:02:41,842
al supervisor de un correo electrónico
y responsable de ese deporte intramuros,

1357
01:02:41,842 --> 01:02:42,800
y esto era bastante bueno,

1358
01:02:42,800 --> 01:02:45,170
pues usaban su bandeja
de entrada como una base de datos

1359
01:02:45,170 --> 01:02:46,490
y así sabían
quién estaba registrado.

1360
01:02:46,490 --> 01:02:50,060
Sin embargo, esto
lo mejoramos con el tiempo

1361
01:02:50,060 --> 01:02:52,490
y en la actualidad guardamos
las cosas en una base de datos muy ligera.

1362
01:02:52,490 --> 01:02:55,850
Todavía no sabía SQL o cómo hacer
las cosas de un modo más elegante

1363
01:02:55,850 --> 01:02:58,310
y mucho menos sabía
lo que era un archivo CSV.

1364
01:02:58,310 --> 01:03:01,940
En mi computadora tenía Microsoft
Excel y en fechas más recientes Numbers,

1365
01:03:01,940 --> 01:03:03,650
de modo que puedo
abrir hojas de cálculo.

1366
01:03:03,650 --> 01:03:07,100
Pero si en vez de
buscarlo acá arriba

1367
01:03:07,100 --> 01:03:11,540
decimos froshims3, la cual es nuestra
última versión de la serie de ejemplos

1368
01:03:11,540 --> 01:03:15,350
de froshims, por cierto, 
me adelanté e hice esto.

1369
01:03:15,350 --> 01:03:16,830
En esta versión del programa,

1370
01:03:16,830 --> 01:03:18,890
esto es un poco críptico,
pero lo descifré al leer

1371
01:03:18,890 --> 01:03:23,390
la documentación de Python
sobre cómo usar los CSV

1372
01:03:23,390 --> 01:03:24,800
y se me ocurrió lo siguiente.

1373
01:03:24,800 --> 01:03:28,945
Al igual que antes en la línea 12,
if not "name" or not "dorm"

1374
01:03:28,945 --> 01:03:31,070
y regresé a la sintaxis anterior,
porque en este momento no estoy

1375
01:03:31,070 --> 01:03:32,960
usando la dirección de correo
electrónico para este ejemplo

1376
01:03:32,960 --> 01:03:35,450
y si vamos más adelante,
tenemos a return "failure.html"

1377
01:03:35,450 --> 01:03:40,970
Pero este nuevo código, en vez de un
correo electrónico, es esta funcionalidad.

1378
01:03:40,970 --> 01:03:46,220
Así que aquí tengo file, la cual es
una variable, que se almacena ¡ah!

1379
01:03:46,220 --> 01:03:47,810
obtiene el valor de retorno open.

1380
01:03:47,810 --> 01:03:51,860
De modo que esta es una función
en Python, que es similar al fopen en C.

1381
01:03:51,860 --> 01:03:53,450
Solo que ellos
arreglan el nombre aquí

1382
01:03:53,450 --> 01:03:55,790
y esto abre un archivo
llamado "registrants.csv".

1383
01:03:55,790 --> 01:03:58,190
¿Y qué significan
las comillas en "a"?

1384
01:03:58,190 --> 01:03:59,930
Probablemente no utilizamos "a",

1385
01:03:59,930 --> 01:04:02,510
usamos una letra
diferente en p-set 4.

1386
01:04:02,510 --> 01:04:04,135
PÚBLICO: [INAUDIBLE].

1387
01:04:04,135 --> 01:04:05,176
DAVID: ¿Qué es eso?

1388
01:04:05,176 --> 01:04:06,684
PÚBLICO: ¿La r o la w?

1389
01:04:06,684 --> 01:04:08,600
DAVID: Usamos r o w para read o write.

1390
01:04:08,600 --> 01:04:11,450
Parece que la "a" es un poco diferente,
lo cual, en este caso, tiene sentido.

1391
01:04:11,450 --> 01:04:12,890
PÚBLICO: Añadir.

1392
01:04:12,890 --> 01:04:15,710
DAVID: OK, gracias.

1393
01:04:15,710 --> 01:04:17,600
OK, significa "añadir".

1394
01:04:17,600 --> 01:04:20,780
Y "añadir" tiene sentido aquí, porque
se escribe de manera predeterminada,

1395
01:04:20,780 --> 01:04:21,960
prácticamente sobrescribe el archivo

1396
01:04:21,960 --> 01:04:22,910
y esto crea un nuevo archivo.

1397
01:04:22,910 --> 01:04:24,409
Aunque "añadir" literalmente hace eso,

1398
01:04:24,409 --> 01:04:26,832
también le agrega una línea al archivo,
una nueva línea al archivo, lo cual

1399
01:04:26,832 --> 01:04:29,540
es bueno si queremos
tener a más de una persona

1400
01:04:29,540 --> 01:04:30,039
en él.

1401
01:04:30,039 --> 01:04:32,240
Si queremos recordar a todos
los demás añadiendo líneas,

1402
01:04:32,240 --> 01:04:35,480
esto dice, oye, Python, abre
el archivo en el modo "añadir",

1403
01:04:35,480 --> 01:04:37,520
y almacénalo
en una variable llamada file.

1404
01:04:37,520 --> 01:04:42,590
Esta es una línea de código que usa algo
de la sintaxis que no vimos muy bien en C,

1405
01:04:42,590 --> 01:04:46,730
pero declara a una variable llamada
writer, que usa la biblioteca CSV, la cual

1406
01:04:46,730 --> 01:04:50,000
importé en la parte superior del archivo,
parecido a la importación de la biblioteca

1407
01:04:50,000 --> 01:04:51,470
mail en el otro,

1408
01:04:51,470 --> 01:04:55,860
y tiene una función llamada writer,
que puedo pasar a un archivo abierto,

1409
01:04:55,860 --> 01:04:57,980
también hay una biblioteca
especial, que sabe cómo

1410
01:04:57,980 --> 01:05:00,770
poner comas entre
los valores, cómo guardar

1411
01:05:00,770 --> 01:05:04,640
y salir en caso de que haya
comas en nuestro archivo,

1412
01:05:04,640 --> 01:05:05,790
entre otras cosas.

1413
01:05:05,790 --> 01:05:07,670
Y luego esta línea
es un poco rara,

1414
01:05:07,670 --> 01:05:10,310
pero usa algunos
de los componentes básicos anteriores,

1415
01:05:10,310 --> 01:05:13,414
writer.writerow,
writer.writerow,

1416
01:05:13,414 --> 01:05:14,830
por lo tanto, esto hace lo que dice

1417
01:05:14,830 --> 01:05:19,140
y dice: usa la biblioteca para
escribir una fila, en el archivo abierto.

1418
01:05:19,140 --> 01:05:20,480
¿Qué queremos escribir?

1419
01:05:20,480 --> 01:05:23,750
Aquí tenemos, a propósito,
unos paréntesis adicionales,

1420
01:05:23,750 --> 01:05:26,060
por lo que se supone que
esta función tome un tuple.

1421
01:05:26,060 --> 01:05:30,380
Un tuple son cero o más
valores separados por comas,

1422
01:05:30,380 --> 01:05:33,230
lo cual es bueno,
porque es algo parecido

1423
01:05:33,230 --> 01:05:34,790
a una serie de columnas.

1424
01:05:34,790 --> 01:05:37,460
Un tuple es algo coma, algo coma, algo

1425
01:05:37,460 --> 01:05:40,670
que es exactamente lo que queremos
poner en un CSV, algo coma, algo coma

1426
01:05:40,670 --> 01:05:41,270
algo,

1427
01:05:41,270 --> 01:05:44,630
porque, por si no lo sabemos, un CSV
es un archivo donde todos los valores

1428
01:05:44,630 --> 01:05:46,070
están separados por comas.

1429
01:05:46,070 --> 01:05:49,160
Y si los abrimos en Excel, Numbers
o las hojas de cálculo de Google,

1430
01:05:49,160 --> 01:05:53,750
cada una de esas comas delimita
una barrera entre varias columnas,

1431
01:05:53,750 --> 01:05:56,990
esto dice: continúa
y escribe una fila en el CSV,

1432
01:05:56,990 --> 01:06:00,350
que contenga el nombre
y el dormitorio de los estudiantes,

1433
01:06:00,350 --> 01:06:04,310
después cierra el archivo
y regresa a "success.html"

1434
01:06:04,310 --> 01:06:06,050
Aún con el riesgo que implica,

1435
01:06:06,050 --> 01:06:08,060
hay un retraso en el Internet
como de 30 segundos, lo que

1436
01:06:08,060 --> 01:06:10,290
significa que lo podemos mantener
limpio durante unos 30 segundos.

1437
01:06:10,290 --> 01:06:18,740
Ahora ejecutaré este ejemplo
en froshims3 y escribo flask run,

1438
01:06:18,740 --> 01:06:20,690
Enter.

1439
01:06:20,690 --> 01:06:27,020
En caso de que deseemos ir a la
misma URL, tinyurl.com/fridaycs50,

1440
01:06:27,020 --> 01:06:29,780
esta nos llevará a una versión
algo más antigua del formulario,

1441
01:06:29,780 --> 01:06:32,240
sin dirección de correo electrónico,
así que, asegurémonos de presionar Reload,

1442
01:06:32,240 --> 01:06:35,520
lo que deberíamos ver
es esta versión con name y dorm.

1443
01:06:35,520 --> 01:06:39,890
Y si escribí el código
correctamente, deberían

1444
01:06:39,890 --> 01:06:45,920
poder registrarse en un archivo
llamado registrants.csv en mi IDE.

1445
01:06:45,920 --> 01:06:48,170
No recibirán un correo
electrónico esta vez, porque

1446
01:06:48,170 --> 01:06:50,120
le quitamos esa funcionalidad.

1447
01:06:50,120 --> 01:06:53,820
Pero esta página de registro
dice que está funcionando.

1448
01:06:53,820 --> 01:06:57,750
Si lo desean, dediquen
un momento para hacerlo,

1449
01:06:57,750 --> 01:06:59,039
mientras yo regreso al IDE.

1450
01:06:59,039 --> 01:07:01,830
Parece que están entrando
muchos registros, así que es genial.

1451
01:07:01,830 --> 01:07:03,290
Estos son los registros,

1452
01:07:03,290 --> 01:07:06,620
así pueden ver a los que
visitan el sitio y dan clic en Registro.

1453
01:07:06,620 --> 01:07:09,920
De hecho se está
registrando mucha gente.

1454
01:07:09,920 --> 01:07:11,160
Eso es genial.

1455
01:07:11,160 --> 01:07:13,350
Voy a apagar
brevemente la pantalla

1456
01:07:13,350 --> 01:07:20,990
y ver quién se ha registrado
si voy a este directorio.

1457
01:07:20,990 --> 01:07:26,810
Esto es... OK, voy a entrar
a froshims3, lo cual estoy haciendo.

1458
01:07:26,810 --> 01:07:30,895
Veo registrants.csv.

1459
01:07:30,895 --> 01:07:34,094
OK, vamos a limpiar esto.

1460
01:07:34,094 --> 01:07:37,540
[RISAS]

1461
01:07:37,540 --> 01:07:41,189
OK, DAVID 2.0
está registrado, genial.

1462
01:07:41,189 --> 01:07:42,980
De acuerdo, voy a
descargar este archivo.

1463
01:07:42,980 --> 01:07:46,370
Creo que se ve
bastante limpio.

1464
01:07:46,370 --> 01:07:49,030
Voy a descargar esto.

1465
01:07:49,030 --> 01:07:52,890
Y les mostraré lo que estoy
haciendo en solo un segundo.

1466
01:07:52,890 --> 01:07:56,420
Pero esta es la mejor demo
que he visto, por lo que puedo ver.

1467
01:07:56,420 --> 01:07:58,978
De acuerdo, y asegurémonos de
no me pierda esto aquí.

1468
01:07:58,978 --> 01:08:03,070
Ajá, OK, algunos de ustedes
solo están pulsando...

1469
01:08:03,070 --> 01:08:07,320
Brandon estaba pulsando Enviar
bastantes veces, aparentemente.

1470
01:08:07,320 --> 01:08:11,950
De acuerdo, no creo que
haya algo que lamentar en esto.

1471
01:08:11,950 --> 01:08:12,990
OK, vamos bien.

1472
01:08:12,990 --> 01:08:15,260
Muy bien,
¿qué acabo de hacer?

1473
01:08:15,260 --> 01:08:16,529
Estamos de vuelta.

1474
01:08:16,529 --> 01:08:20,600
Ahora que hemos pasado todo
por los censores, lo que noté

1475
01:08:20,600 --> 01:08:23,880
es que, oh, tengo un archivo
registrants.csv en el mismo directorio.

1476
01:08:23,880 --> 01:08:26,550
Y eso era lo que
se agregaba cada vez.

1477
01:08:26,550 --> 01:08:28,700
Por otra parte, si continúo
y descargo este archivo

1478
01:08:28,700 --> 01:08:32,270
poniendo registrants.csv
y luego Descargar,

1479
01:08:32,270 --> 01:08:35,510
o podría abrirlo en el IDE para
ver las filas y columnas reales.

1480
01:08:35,510 --> 01:08:37,080
Creo que haré
esto rápidamente,

1481
01:08:37,080 --> 01:08:38,430
así verán este archivo,

1482
01:08:38,430 --> 01:08:39,680
aunque resulta
un poco difícil verlo.

1483
01:08:39,680 --> 01:08:42,920
Así que lo cerraré a propósito,
porque lo descargué mucho antes,

1484
01:08:42,920 --> 01:08:45,229
y de hecho puedo abrirlo en Excel.

1485
01:08:45,229 --> 01:08:48,590
Y si en Excel amplío mis columnas,
cada una de estas columnas

1486
01:08:48,590 --> 01:08:51,979
representa la brecha entre una coma.

1487
01:08:51,979 --> 01:08:55,399
Brandon aparentemente trataba de
que su nombre fuera muy grande y audaz,

1488
01:08:55,399 --> 01:08:58,060
pero eso no funciona
en los archivos CSV.

1489
01:08:58,060 --> 01:09:02,390
Al parecer Montreal es el mejor,

1490
01:09:02,390 --> 01:09:03,729
muchos nombres de pila,

1491
01:09:03,729 --> 01:09:08,750
más Brandon...
desconocido... OK,

1492
01:09:08,750 --> 01:09:11,090
hay uno que mencioné,
el padre de alguien.

1493
01:09:11,090 --> 01:09:14,126
Tal vez el padre de
alguien está aquí hoy, OK.

1494
01:09:14,126 --> 01:09:24,741
Tenemos, Wheeee, ¡¡MTL ES LO MEJOR!!,
John Harvard, John, Olivia, Batman, Kyle...

1495
01:09:24,741 --> 01:09:27,627
[RISAS]

1496
01:09:27,627 --> 01:09:29,551


1497
01:09:29,551 --> 01:09:31,790
DAVID: OK, hay un
Digno de Wiggles,

1498
01:09:31,790 --> 01:09:33,359
ahora se está volviendo
un poco extraño,

1499
01:09:33,359 --> 01:09:37,724
caritas, Cara de...,
OK, ese logró colarse,

1500
01:09:37,724 --> 01:09:38,390
no me di cuenta.

1501
01:09:38,390 --> 01:09:40,321
David, tengo miedo, Ok.

1502
01:09:40,321 --> 01:09:42,170
[RISAS]

1503
01:09:42,170 --> 01:09:46,529
Así que, gracias a la
programación por fin tenemos

1504
01:09:46,529 --> 01:09:49,430
la capacidad para mantener
cerca algunos de estos datos.

1505
01:09:49,430 --> 01:09:51,770
Básicamente, esto
nos permitirá comenzar

1506
01:09:51,770 --> 01:09:54,920
a crear aplicaciones
verdaderamente interactivas,

1507
01:09:54,920 --> 01:09:58,220
nos permitirán almacenar
la información y finalmente

1508
01:09:58,220 --> 01:09:59,607
recuperarla.

1509
01:09:59,607 --> 01:10:01,815
Y todo se reduce a algunos
de estos simples paradigmas.

1510
01:10:01,815 --> 01:10:05,300
Ahora está implicada una gran
cantidad de sintaxis compleja.

1511
01:10:05,300 --> 01:10:08,390
Y hay algunas ideas nuevas
en el camino, cosas como tuples

1512
01:10:08,390 --> 01:10:09,349
y cosas como rutas.

1513
01:10:09,349 --> 01:10:12,098
Y no usé esa palabra antes,
pero técnicamente este signo denota

1514
01:10:12,098 --> 01:10:13,400
algo llamado decorador.

1515
01:10:13,400 --> 01:10:16,280
Pero al igual que con C en aquellos
primeros días, tengan en cuenta

1516
01:10:16,280 --> 01:10:18,170
que una vez que empiecen
a notar estos patrones,

1517
01:10:18,170 --> 01:10:20,836
incluso si no lo aprecian
todo o si no entienden nada

1518
01:10:20,836 --> 01:10:23,295
al principio,
podrán de forma iterativa

1519
01:10:23,295 --> 01:10:24,920
sentirse más
cómodos con el material.

1520
01:10:24,920 --> 01:10:26,920
Si tienen fe en que
realmente no recuerdan

1521
01:10:26,920 --> 01:10:30,050
cómo funciona esto, pero saben
que tienen que hacerlo ya, está bien.

1522
01:10:30,050 --> 01:10:32,210
Porque si entienden estas
cosas con mayor profundidad,

1523
01:10:32,210 --> 01:10:34,543
resolverán el problema
y lograrán hacer su trabajo.

1524
01:10:34,543 --> 01:10:37,760
Y a medida que se sientan más cómodos,
pueden comenzar, con las secciones

1525
01:10:37,760 --> 01:10:39,920
y las horas de oficina,
y en la serie de problemas 7

1526
01:10:39,920 --> 01:10:42,050
comenzar a entender
realmente algunos de los matices

1527
01:10:42,050 --> 01:10:46,820
y la manera en que se relacionan o no
con cosas que vimos antes en C.

1528
01:10:46,820 --> 01:10:48,300
¿A dónde vamos con esto?

1529
01:10:48,300 --> 01:10:52,860
Bueno, en la serie de problemas 6
vamos a unir varios mundos de la web,

1530
01:10:52,860 --> 01:10:56,210
de Python y también
de distancia de edición,

1531
01:10:56,210 --> 01:10:59,570
y la programación dinámica en nuestra
conferencia de Yale de hace unas semanas.

1532
01:10:59,570 --> 01:11:01,820
Y si están un poco retrasados
en algunos de esos temas,

1533
01:11:01,820 --> 01:11:06,470
o si no dominaban bien algo
del material que vimos hoy, está bien.

1534
01:11:06,470 --> 01:11:07,280
Sin embargo, retrocedan,

1535
01:11:07,280 --> 01:11:11,000
porque las últimas tres conferencias
culminan en la serie de problemas 6.

1536
01:11:11,000 --> 01:11:13,480
Esto los desafiará a regresar
y volver a implementar Mario,

1537
01:11:13,480 --> 01:11:17,067
ya sea la versión más o la menos
cómoda, pero no en C sino en Python.

1538
01:11:17,067 --> 01:11:19,400
Lo más probable es que los
sorprendan al menos dos razones.

1539
01:11:19,400 --> 01:11:22,619
Primero, lo más probable es que si
lo solucionaron con éxito la primera vez,

1540
01:11:22,619 --> 01:11:24,410
incluso si están un poco
oxidados, lo más probable es que

1541
01:11:24,410 --> 01:11:26,617
lo resolverán más
rápidamente la segunda,

1542
01:11:26,617 --> 01:11:27,950
a pesar de que
es un lenguaje nuevo.

1543
01:11:27,950 --> 01:11:31,490
Y verán que algunas ideas de C
se aplican a alguna que otra idea

1544
01:11:31,490 --> 01:11:35,840
en Python, tal como hicimos con Scratch
para ver ese mismo tipo de transición,

1545
01:11:35,840 --> 01:11:39,200
y lo mismo ocurre con
Cash or Credit o con Visionaire,

1546
01:11:39,200 --> 01:11:41,840
o en Caesar y Crack también.

1547
01:11:41,840 --> 01:11:45,710
Pero la cereza del pastel será,
no solo escribir código en Python,

1548
01:11:45,710 --> 01:11:49,340
sino escribir el código en Python
para una aplicación web que haga

1549
01:11:49,340 --> 01:11:53,120
algo gráfico con un sitio web.

1550
01:11:53,120 --> 01:11:58,880
Por ejemplo, aquí tenemos la
versión más cómoda de las soluciones

1551
01:11:58,880 --> 01:12:02,540
del equipo para Similitudes,
una sección de la serie de problemas 6.

1552
01:12:02,540 --> 01:12:04,370
Y lo notarán en este
formulario basado en la web,

1553
01:12:04,370 --> 01:12:07,551
ahora que estoy en
similarities.cs50.net/more.

1554
01:12:07,551 --> 01:12:09,800
Su URL, por supuesto, será
diferente, ya sea que la hagan

1555
01:12:09,800 --> 01:12:11,700
de la forma más cómoda
o de la menos cómoda también.

1556
01:12:11,700 --> 01:12:16,460
Pero aquí tenemos un formulario web
con dos cadenas que vamos a introducir,

1557
01:12:16,460 --> 01:12:17,690
dos cuadros de texto.

1558
01:12:17,690 --> 01:12:20,974
Y este formulario podría parecer
mucho más bonito que los que

1559
01:12:20,974 --> 01:12:21,890
he estado haciendo hoy.

1560
01:12:21,890 --> 01:12:24,514
¿Qué es lo que no tenían
los que estuve haciendo hoy?

1561
01:12:24,514 --> 01:12:25,292
PÚBLICO: CSS.

1562
01:12:25,292 --> 01:12:27,000
DAVID: No tenían
CSS en absoluto,

1563
01:12:27,000 --> 01:12:29,000
Así que obtenía
cosas bastante viejas y feas

1564
01:12:29,000 --> 01:12:33,870
al estilo predeterminado
de los 90 que Chrome, IE, Edge, Firefox

1565
01:12:33,870 --> 01:12:36,140
y Safari me dan de manera
predeterminada. Pero ustedes

1566
01:12:36,140 --> 01:12:38,210
pueden usar bibliotecas
que les permitan

1567
01:12:38,210 --> 01:12:40,204
crear sitios web 
mucho más bonitos.

1568
01:12:40,204 --> 01:12:42,620
Así que, siempre y cuando
sepan cómo generar el marcado,

1569
01:12:42,620 --> 01:12:45,950
pueden dejar que otra persona lo
modele y de ese último paso por ustedes.

1570
01:12:45,950 --> 01:12:49,340
Así que la mayor parte de la estética
que ven aquí, la linda barra de

1571
01:12:49,340 --> 01:12:52,545
navegación en la parte superior, los tamaños
de fuentes, el resaltado bonito y gris aquí,

1572
01:12:52,545 --> 01:12:54,920
el hecho de que esto
llegue hasta el borde o que

1573
01:12:54,920 --> 01:12:58,430
esto tenga el mismo
margen aquí y acá, o el hecho

1574
01:12:58,430 --> 01:13:02,480
de que este botón ya no se vea
tan feo como antes, todo eso es CSS.

1575
01:13:02,480 --> 01:13:04,820
Y sucede que estamos usando
una biblioteca llamada Bootstrap,

1576
01:13:04,820 --> 01:13:07,850
la cual es una biblioteca muy
popular y que tiene muchas funciones,

1577
01:13:07,850 --> 01:13:10,460
como formularios que les
ayudarán a diseñar estas cosas.

1578
01:13:10,460 --> 01:13:15,230
Y si yo, en esta aplicación, escribo
una cadena como Harvard y luego escribo

1579
01:13:15,230 --> 01:13:18,800
en una cadena como Yale y hago
clic en Score, lo que verán aquí es, 

1580
01:13:18,800 --> 01:13:22,310
de forma algo compleja, o muy compleja
si no están completamente atrapados

1581
01:13:22,310 --> 01:13:23,780
por nuestra conferencia de Yale,

1582
01:13:23,780 --> 01:13:25,760
¿ven una matriz
en la parte superior?

1583
01:13:25,760 --> 01:13:27,860
Esto es solo una
cuadrícula con filas y columnas.

1584
01:13:27,860 --> 01:13:31,940
La fila superior de esta
matriz dice H-A-R-V-A-R-D,

1585
01:13:31,940 --> 01:13:33,950
así que obviamente es
la primera palabra que escribí.

1586
01:13:33,950 --> 01:13:39,110
Y en el eje Y, dice Yale, Y-A-L-E,
y lo que cada uno de estos números

1587
01:13:39,110 --> 01:13:45,830
representan es el costo, paso a paso,
de convertir una cadena en otra.

1588
01:13:45,830 --> 01:13:48,620
Aunque en sí, es una
especie de ejercicio inútil,

1589
01:13:48,620 --> 01:13:51,800
pero el número de pasos
para convertir una cadena en otra

1590
01:13:51,800 --> 01:13:56,480
da una estimación de qué tan
similares o diferentes son las cadenas.

1591
01:13:56,480 --> 01:13:59,227
Si hay un costo muy bajo
para cambiar una cadena a otra,

1592
01:13:59,227 --> 01:14:00,560
lo más probable
es que sean muy similares.

1593
01:14:00,560 --> 01:14:03,020
Si se necesita un paso para
convertir una palabra en otra,

1594
01:14:03,020 --> 01:14:06,630
lo probable es que sean
idénticas, excepto por un carácter.

1595
01:14:06,630 --> 01:14:11,300
O si el costo es realmente alto, como
seis, entonces se requieren seis pasos

1596
01:14:11,300 --> 01:14:12,860
para convertir
a Harvard en Yale.

1597
01:14:12,860 --> 01:14:15,776
Y eso tiene algo de sentido, porque
son palabras realmente diferentes,

1598
01:14:15,776 --> 01:14:18,860
excepto por el hecho
de que tienen una A en común

1599
01:14:18,860 --> 01:14:21,950
que tal vez podamos reutilizar
sin tener que cambiarla por completo.

1600
01:14:21,950 --> 01:14:27,610
Así que la edición de distancia es una
técnica que se resuelve de modo muy lento

1601
01:14:27,610 --> 01:14:30,826
y costoso a la manera ingenua,
usando esencialmente un par de bucles for,

1602
01:14:30,826 --> 01:14:33,700
donde se itera sobre una cadena,
se itera sobre la otra cadena

1603
01:14:33,700 --> 01:14:37,270
y solo iterativamente, o más bien
con un poco de recursión,

1604
01:14:37,270 --> 01:14:39,734
se intenta cada cambio
posible en la cadena.

1605
01:14:39,734 --> 01:14:41,650
Bueno, ¿y qué pasa si
borro esto y luego agrego esto?

1606
01:14:41,650 --> 01:14:42,730
¿Y qué sucede si
agrego esto y elimino esto?

1607
01:14:42,730 --> 01:14:45,050
¿Qué pasa si cambio esto y
agrego esto y luego borro esto?

1608
01:14:45,050 --> 01:14:47,680
Hay tantas permutaciones
que se pueden agregar y eliminar,

1609
01:14:47,680 --> 01:14:51,580
y caracteres que se pueden editar,
que se vuelve un problema demasiado lento,

1610
01:14:51,580 --> 01:14:53,560
especialmente cuando
las cadenas son más largas que estas.

1611
01:14:53,560 --> 01:14:55,900
Y entonces, 
lo qué harían si eligen

1612
01:14:55,900 --> 01:14:57,790
la versión más cómoda
de la serie de problemas,

1613
01:14:57,790 --> 01:14:59,920
es implementarlo mediante
una programación dinámica.

1614
01:14:59,920 --> 01:15:02,020
Y esta matriz
de aquí solo recuerda,

1615
01:15:02,020 --> 01:15:06,890
solo almacena todos los valores temporales
que hemos memorizado en el camino,

1616
01:15:06,890 --> 01:15:08,980
si recuerdan la
conferencia de Benedict,

1617
01:15:08,980 --> 01:15:12,220
simplemente trabajen de la parte
superior izquierda a la inferior derecha

1618
01:15:12,220 --> 01:15:13,370
para obtener
su respuesta final.

1619
01:15:13,370 --> 01:15:15,370
Y el hecho de que ese número
sea relativamente grande, 6,

1620
01:15:15,370 --> 01:15:18,880
significa que Harvard no es muy
similar a Yale, al menos en términos

1621
01:15:18,880 --> 01:15:20,410
de comparación de cadenas.

1622
01:15:20,410 --> 01:15:23,200
No me di cuenta de la semántica
de eso hasta que dije esa oración.

1623
01:15:23,200 --> 01:15:28,030
Mientras tanto... oh, y como nota
aparte, por si no se han dado cuenta,

1624
01:15:28,030 --> 01:15:29,770
aquí en la parte inferior
hay una especie de registro.

1625
01:15:29,770 --> 01:15:33,220
Este muestra, una vez que
hayan implementado la parte superior,

1626
01:15:33,220 --> 01:15:36,550
lo que le tiene que pasar
a Harvard para convertirse en Yale.

1627
01:15:36,550 --> 01:15:40,330
Tenemos que eliminar una h,
borrar esta a, quitar esta r.

1628
01:15:40,330 --> 01:15:44,260
Luego tenemos que cambiar
una letra a "y", cambiar otra letra a "l"

1629
01:15:44,260 --> 01:15:47,020
y una letra más a "e",
y voilà, Yale.

1630
01:15:47,020 --> 01:15:59,900
Pero observen si hacemos
algo más similar, como... digamos...

1631
01:15:59,900 --> 01:16:05,440
supongan que usamos a Mario, de la
serie uno, y a María la jefe del equipo.

1632
01:16:05,440 --> 01:16:08,710
Esta es una cadena mucho
más similar porque solo se necesita

1633
01:16:08,710 --> 01:16:10,810
un paso para
convertir una en la otra

1634
01:16:10,810 --> 01:16:12,680
y entonces el registro
también es mucho más pequeño.

1635
01:16:12,680 --> 01:16:14,560
Y entonces se obtiene
una estimación de la similitud,

1636
01:16:14,560 --> 01:16:17,650
pero podemos avanzar un paso
con el uso de diferentes algoritmos

1637
01:16:17,650 --> 01:16:19,430
que pueden funcionar o no también.

1638
01:16:19,430 --> 01:16:22,990
Entonces aquí está la versión menos cómoda
del mismo problema, por lo cual ahora

1639
01:16:22,990 --> 01:16:25,136
nos piden dos archivos
y no solo dos cadenas.

1640
01:16:25,136 --> 01:16:27,010
Podemos hacer archivos aún
más grandes de la siguiente manera,

1641
01:16:27,010 --> 01:16:29,200
porque no es tan
costoso y es mucho más sencillo

1642
01:16:29,200 --> 01:16:30,310
mostrarlos en la pantalla.

1643
01:16:30,310 --> 01:16:33,970
Así que descargué o inventé
un par de ejemplos por adelantado.

1644
01:16:33,970 --> 01:16:38,530
Tengo un archivo
llamado hello.c, que se ve así...

1645
01:16:38,530 --> 01:16:40,490
es una pequeña
retrospectiva de la semana 1.

1646
01:16:40,490 --> 01:16:43,460
Y luego tengo otro
archivo llamado hey.c,

1647
01:16:43,460 --> 01:16:47,689
el cual es idéntico, excepto
por una palabra, a hey, world.

1648
01:16:47,689 --> 01:16:49,230
Ahora haré lo siguiente.

1649
01:16:49,230 --> 01:16:52,985
Voy a subir hello.c y hey.c.

1650
01:16:52,985 --> 01:16:56,186
O podría hacer clic aquí
y navegar por mi disco duro

1651
01:16:56,186 --> 01:16:57,560
como ustedes
lo harían en su Mac o PC.

1652
01:16:57,560 --> 01:16:59,357
Pero solo voy a
arrastrarlos y soltarlos.

1653
01:16:59,357 --> 01:17:01,190
Y luego tengo tres
opciones de algoritmos.

1654
01:17:01,190 --> 01:17:03,560
Porque si pensamos en
lo que es un archivo de texto,

1655
01:17:03,560 --> 01:17:07,040
realmente no sé
muy bien cómo compararlos.

1656
01:17:07,040 --> 01:17:09,080
Probablemente pueda
decirles si son idénticos.

1657
01:17:09,080 --> 01:17:11,570
Puedo usar un bucle
while o un bucle for en C,

1658
01:17:11,570 --> 01:17:14,750
iterar cada carácter en el
archivo y decir True o False,

1659
01:17:14,750 --> 01:17:16,130
estos archivos son idénticos.

1660
01:17:16,130 --> 01:17:20,380
Pero si hay una pequeña diferencia,
como hey y hello, o tal vez algún espacio,

1661
01:17:20,380 --> 01:17:21,630
entonces tengo
diferentes opciones.

1662
01:17:21,630 --> 01:17:24,980
¿Y qué pasa si comparamos
estos archivos línea por línea?

1663
01:17:24,980 --> 01:17:27,477
¿Creen que la mayoría
de las líneas en hello.c y hey.c

1664
01:17:27,477 --> 01:17:29,060
serán similares o diferentes?

1665
01:17:29,060 --> 01:17:29,870
PÚBLICO: Similares

1666
01:17:29,870 --> 01:17:31,800
DAVID: Similares, excepto
por esa línea de printf.

1667
01:17:31,800 --> 01:17:32,883
Veamos lo que sucede.

1668
01:17:32,883 --> 01:17:36,440
Si elijo comparar las líneas de
mi algoritmo y hago clic en Comparar,

1669
01:17:36,440 --> 01:17:40,040
veo resaltados en amarillo, en la interfaz
de usuario, los dos programas restantes

1670
01:17:40,040 --> 01:17:43,800
y a la derecha, hello y hey, con todas
las líneas idénticas resaltadas.

1671
01:17:43,800 --> 01:17:47,340
El hecho de que se vea tanto amarillo
significa que son bastante similares.

1672
01:17:47,340 --> 01:17:50,160
No le estoy dando un valor
en este caso particular.

1673
01:17:50,160 --> 01:17:53,510
Pero podría decir que todas
las líneas, excepto una, son comunes

1674
01:17:53,510 --> 01:17:55,220
y se les atribuye
ese tipo de puntaje.

1675
01:17:55,220 --> 01:17:57,999
Por otra parte, las frases no
necesariamente tienen sentido,

1676
01:17:57,999 --> 01:18:01,040
pero si esto fuera un ensayo, o si están
familiarizados con sitios como Turnitin

1677
01:18:01,040 --> 01:18:04,340
y cosas así, como un ensayo en inglés,
podría subir dos ensayos diferentes

1678
01:18:04,340 --> 01:18:06,570
y ver cuántas
frases tienen en común.

1679
01:18:06,570 --> 01:18:09,050
Incluso ver si una frase
está arriba y otra está aquí abajo

1680
01:18:09,050 --> 01:18:11,258
porque los estudiantes utilizaron
las mismas citas o lo que sea,

1681
01:18:11,258 --> 01:18:13,910
al menos puedo
encontrarlos al dividir el texto

1682
01:18:13,910 --> 01:18:16,340
según la puntuación de
una frase en inglés, la cual no

1683
01:18:16,340 --> 01:18:18,300
existe de la misma
manera en código.

1684
01:18:18,300 --> 01:18:19,700
Pero, ¿qué pasa
con las subcadenas?

1685
01:18:19,700 --> 01:18:21,830
La subcadena es un término
más sofisticado que solo se refiere

1686
01:18:21,830 --> 01:18:25,100
a una porción de una cadena
de longitud uno, dos, tres o cuatro.

1687
01:18:25,100 --> 01:18:27,840
Y aquí tengo un cuadro
de texto donde puedo configurarlo.

1688
01:18:27,840 --> 01:18:31,760
Entonces, si quiero buscar
subcadenas comunes de longitud 10,

1689
01:18:31,760 --> 01:18:34,760
sería una cadena de texto
bastante larga que está en ambos

1690
01:18:34,760 --> 01:18:37,340
Compare, y de hecho hay
una gran cantidad de tramos de 10

1691
01:18:37,340 --> 01:18:39,410
porque todos son muy similares.

1692
01:18:39,410 --> 01:18:44,120
Pero si lo cambio a uno, para
buscar todos los caracteres comunes,

1693
01:18:44,120 --> 01:18:49,050
verán que casi todo está en común,
¿excepto por cuál letra faltante?

1694
01:18:49,050 --> 01:18:49,550
PÚBLICO: Y.

1695
01:18:49,550 --> 01:18:52,460
DAVID: Y... entonces habrá
un par de formas diferentes

1696
01:18:52,460 --> 01:18:54,440
para implementarlo, de hecho,
hay muchas maneras diferentes

1697
01:18:54,440 --> 01:18:55,910
en las que se pueden
implementar todos estos algoritmos.

1698
01:18:55,910 --> 01:18:57,870
Pero el punto clave
es que, al usar Python,

1699
01:18:57,870 --> 01:18:59,870
van a tener muchas más
herramientas a su disposición.

1700
01:18:59,870 --> 01:19:02,360
Tendrán diferentes tipos
de datos, como listas, conjuntos,

1701
01:19:02,360 --> 01:19:03,980
y diccionarios,
si quieren utilizarlos.

1702
01:19:03,980 --> 01:19:06,140
Y lo que no tendrán que hacer,
como podría ocurrir en C,

1703
01:19:06,140 --> 01:19:08,360
es analizar estos
caracteres individualmente.

1704
01:19:08,360 --> 01:19:11,000
Por el contrario, si desean dividir
un archivo de acuerdo con sus líneas,

1705
01:19:11,000 --> 01:19:12,380
solo llamen
a una función para eso.

1706
01:19:12,380 --> 01:19:13,940
Si desean capturar
todos los espacios en blanco,

1707
01:19:13,940 --> 01:19:15,080
solo llamen
a una función para eso.

1708
01:19:15,080 --> 01:19:17,300
Si quieren tomar una
subcadena de cierta longitud,

1709
01:19:17,300 --> 01:19:20,240
solo usen la sintaxis
correcta de Python para eso.

1710
01:19:20,240 --> 01:19:22,760
Y una vez que hayan utilizado
esta especie de enfoque de andamiaje

1711
01:19:22,760 --> 01:19:25,250
para importar algunos
de sus problemas de C a Python,

1712
01:19:25,250 --> 01:19:27,929
terminarán por implementar
cualquiera de ellos.

1713
01:19:27,929 --> 01:19:29,220
Hoy terminaremos
un poco más temprano.

1714
01:19:29,220 --> 01:19:30,553
Me quedaré un rato
para responder preguntas.

1715
01:19:30,553 --> 01:19:33,670
Les deseo la mejor de las suertes,
y nos vemos a la próxima.