1
00:00:01,160 --> 00:00:02,570
‫Instructor: En la

2
00:00:02,570 --> 00:00:05,280
‫lección anterior, mientras hablaba sobre el

3
00:00:05,280 --> 00:00:08,710
‫front-end y el back-end, mencioné sitios web o aplicaciones

4
00:00:08,710 --> 00:00:11,370
‫simples, estáticos y dinámicos, un par

5
00:00:11,370 --> 00:00:14,600
‫de veces pero sin definir realmente qué son.

6
00:00:14,600 --> 00:00:17,870
‫Entonces, en este video, quería aclarar estas cosas y

7
00:00:17,870 --> 00:00:20,620
‫también hablar sobre las API para llevar

8
00:00:20,620 --> 00:00:23,620
‫todos estos conceptos al panorama general del

9
00:00:23,620 --> 00:00:26,013
‫desarrollo web back-end en general.

10
00:00:27,460 --> 00:00:30,120
‫Entonces, comencemos hablando de sitios

11
00:00:30,120 --> 00:00:32,410
‫web estáticos versus dinámicos.

12
00:00:32,410 --> 00:00:34,920
‫Entonces, un sitio web estático, o un sitio

13
00:00:34,920 --> 00:00:36,630
‫web simple como lo llamé

14
00:00:36,630 --> 00:00:39,070
‫en el último video, es cuando un desarrollador

15
00:00:39,070 --> 00:00:43,640
‫carga los archivos finales listos para ser servidos de un sitio web en el servidor web.

16
00:00:43,640 --> 00:00:46,580
‫Estos archivos generalmente contienen HTML, CSS,

17
00:00:46,580 --> 00:00:50,320
‫JavaScript, imágenes y más, y como dije, estos son

18
00:00:50,320 --> 00:00:53,970
‫los archivos exactos que el servidor enviará más tarde

19
00:00:53,970 --> 00:00:57,090
‫al navegador cuando se solicite el sitio web.

20
00:00:57,090 --> 00:00:59,040
‫El navegador tomará estos

21
00:00:59,040 --> 00:01:01,320
‫archivos y los mostrará como están.

22
00:01:01,320 --> 00:01:04,320
‫Esto significa que no se realiza ningún trabajo en el

23
00:01:04,320 --> 00:01:07,510
‫servidor, no hay código de back-end y tampoco hay ninguna

24
00:01:07,510 --> 00:01:08,730
‫aplicación en ejecución.

25
00:01:08,730 --> 00:01:09,563
‫¿Okey?

26
00:01:09,563 --> 00:01:12,900
‫Entonces, es solo un servidor web estático que sirve archivos

27
00:01:12,900 --> 00:01:15,670
‫estáticos, exactamente como mencioné en el último video.

28
00:01:15,670 --> 00:01:17,460
‫Ahora, podría pensar, espere, cuando

29
00:01:17,460 --> 00:01:19,233
‫hay JavaScript en

30
00:01:19,233 --> 00:01:21,290
‫la página, generalmente hay efectos dinámicos,

31
00:01:21,290 --> 00:01:23,610
‫como animaciones y esas cosas, ¿verdad?

32
00:01:23,610 --> 00:01:26,480
‫Bueno, esa dinámica a la que te refieres

33
00:01:26,480 --> 00:01:28,050
‫es una dinámica diferente.

34
00:01:28,050 --> 00:01:31,580
‫Es solo en el contexto del desarrollo de front-end.

35
00:01:31,580 --> 00:01:34,370
‫En el contexto del navegador, la dinámica no tiene nada que

36
00:01:34,370 --> 00:01:37,200
‫ver con los efectos en una página o las cosas que se

37
00:01:37,200 --> 00:01:40,570
‫mueven, sino con la forma en que se generan los sitios web en los servidores.

38
00:01:40,570 --> 00:01:41,870
‫¿Okey?

39
00:01:41,870 --> 00:01:45,210
‫Por lo tanto, los sitios web dinámicos son diferentes de los sitios

40
00:01:45,210 --> 00:01:47,440
‫web estáticos porque generalmente se crean en

41
00:01:47,440 --> 00:01:50,090
‫el servidor cada vez que ingresa una nueva solicitud.

42
00:01:50,090 --> 00:01:51,740
‫Entonces, como vimos en

43
00:01:51,740 --> 00:01:55,040
‫el último video, los sitios web dinámicos generalmente contienen una

44
00:01:55,040 --> 00:01:57,410
‫base de datos, luego también hay una

45
00:01:57,410 --> 00:02:01,400
‫aplicación en ejecución, como un Node. js, que obtiene datos de la

46
00:02:01,400 --> 00:02:04,340
‫base de datos y luego, junto con una plantilla predefinida,

47
00:02:04,340 --> 00:02:07,730
‫crea cada página que el usuario solicita de forma dinámica en función

48
00:02:07,730 --> 00:02:10,670
‫de los datos que provienen de la base de datos.

49
00:02:10,670 --> 00:02:13,360
‫Por lo tanto, cada vez que

50
00:02:13,360 --> 00:02:18,360
‫un navegador solicita una página, esa página se crea como archivos HTML, CSS y

51
00:02:18,560 --> 00:02:21,640
‫JavaScript, que luego se enviarán de vuelta al navegador.

52
00:02:21,640 --> 00:02:23,790
‫Todo este proceso a veces se denomina

53
00:02:23,790 --> 00:02:25,860
‫renderización del lado del servidor.

54
00:02:25,860 --> 00:02:28,540
‫Entonces, nuevamente, es por eso que se llama dinámico, porque

55
00:02:28,540 --> 00:02:31,560
‫el sitio web puede cambiar todo el tiempo de acuerdo con

56
00:02:31,560 --> 00:02:33,700
‫el contenido que está en la base

57
00:02:33,700 --> 00:02:36,520
‫de datos o las acciones del usuario en el sitio.

58
00:02:36,520 --> 00:02:38,870
‫Por ejemplo, si inició sesión en Twitter, se

59
00:02:38,870 --> 00:02:41,140
‫le mostrará una página completamente diferente

60
00:02:41,140 --> 00:02:43,510
‫a la que tenía cuando se desconectó, ¿verdad?

61
00:02:43,510 --> 00:02:45,920
‫Y también le mostrará una página diferente mañana de

62
00:02:45,920 --> 00:02:48,600
‫la que tenía hoy porque hay nuevos tweets, por lo que

63
00:02:48,600 --> 00:02:50,938
‫hay nuevos datos en la base de datos.

64
00:02:50,938 --> 00:02:54,330
‫Y de eso se tratan los sitios web dinámicos.

65
00:02:54,330 --> 00:02:56,860
‫Ahora, si tú, por ejemplo, vas a Jonas. io, y

66
00:02:56,860 --> 00:02:58,223
‫debería, por cierto, siempre

67
00:02:59,150 --> 00:03:01,130
‫verá el mismo contenido, el mismo

68
00:03:01,130 --> 00:03:03,680
‫sitio web, sin importar cuándo lo visite

69
00:03:03,680 --> 00:03:05,060
‫o qué haga allí.

70
00:03:05,060 --> 00:03:08,870
‫Entonces, eso significa que es una página estática, ¿de acuerdo?

71
00:03:08,870 --> 00:03:10,950
‫¿Tiene sentido esta diferencia?

72
00:03:10,950 --> 00:03:14,200
‫Ahora, a veces usamos el término sitios web dinámicos

73
00:03:14,200 --> 00:03:16,450
‫y, a veces, el término

74
00:03:16,450 --> 00:03:18,790
‫aplicación web, pero son casi lo mismo.

75
00:03:18,790 --> 00:03:21,320
‫Por lo general, cuando las personas se

76
00:03:21,320 --> 00:03:24,450
‫refieren a aplicaciones web, se refieren a un sitio

77
00:03:24,450 --> 00:03:27,180
‫web dinámico con alguna funcionalidad como iniciar sesión,

78
00:03:27,180 --> 00:03:30,540
‫crear perfiles de usuario, buscar cosas y cosas así en general.

79
00:03:30,540 --> 00:03:34,220
‫Los sitios web son, por ejemplo, algo así como un blog de WordPress.

80
00:03:34,220 --> 00:03:36,380
‫Todavía se generan dinámicamente, pero

81
00:03:36,380 --> 00:03:39,793
‫realmente no podemos hacer nada más que leerlos, ¿verdad?

82
00:03:40,790 --> 00:03:44,510
‫Y tradicionalmente, los sitios web estáticos y dinámicos eran los únicos dos

83
00:03:44,510 --> 00:03:47,300
‫tipos de sitios web, pero en los últimos años,

84
00:03:47,300 --> 00:03:49,840
‫gracias a lo poderosos que se han

85
00:03:49,840 --> 00:03:53,070
‫vuelto los navegadores del lado del cliente, vemos cada vez

86
00:03:53,070 --> 00:03:55,930
‫más sitios web que están, básicamente, basados en API.

87
00:03:55,930 --> 00:03:57,580
‫Entonces, aprendamos cómo funcionan y cómo

88
00:03:57,580 --> 00:04:00,193
‫podemos usar Node. js para alimentarlos.

89
00:04:02,060 --> 00:04:04,430
‫Mantengamos los sitios web dinámicos aquí en

90
00:04:04,430 --> 00:04:07,380
‫la diapositiva para que podamos comparar mejor los dos.

91
00:04:07,380 --> 00:04:10,610
‫Entonces, al igual que con los sitios web dinámicos, tenemos

92
00:04:10,610 --> 00:04:13,880
‫una base de datos aquí y tenemos una aplicación que obtiene

93
00:04:13,880 --> 00:04:16,020
‫datos de la base de datos cada

94
00:04:16,020 --> 00:04:20,090
‫vez que un cliente realiza una solicitud, por lo que, en ese sentido, un

95
00:04:20,090 --> 00:04:23,210
‫sitio web impulsado por API es bastante similar a un

96
00:04:23,210 --> 00:04:25,150
‫sitio web dinámico. sitio web.

97
00:04:25,150 --> 00:04:27,820
‫Entonces, ambos funcionan dinámicamente.

98
00:04:27,820 --> 00:04:31,130
‫Ahora, la gran diferencia aquí es que con una

99
00:04:31,130 --> 00:04:33,890
‫API, solo enviamos los datos al navegador, generalmente

100
00:04:33,890 --> 00:04:36,340
‫en formato de datos JSON,

101
00:04:36,340 --> 00:04:38,990
‫y no a todo el sitio web.

102
00:04:38,990 --> 00:04:42,090
‫Entonces, nuevamente, solo los datos se envían al cliente y

103
00:04:42,090 --> 00:04:44,670
‫no el sitio web listo para ser mostrado.

104
00:04:44,670 --> 00:04:49,670
‫Entonces, sin HTML, sin CSS, solo los datos JSON, ¿de acuerdo?

105
00:04:49,860 --> 00:04:52,370
‫Entonces, al construir sitios web con

106
00:04:52,370 --> 00:04:54,670
‫API, siempre existen estos dos

107
00:04:54,670 --> 00:04:58,100
‫pasos, construir una API y luego consumir la API

108
00:04:58,100 --> 00:05:01,110
‫en el lado del cliente, y por cierto,

109
00:05:01,110 --> 00:05:04,850
‫API significa interfaz de programación de aplicaciones, y en un

110
00:05:04,850 --> 00:05:07,800
‫nivel muy alto, es básicamente una pieza de

111
00:05:07,800 --> 00:05:11,260
‫software que puede ser utilizada por otra pieza de

112
00:05:11,260 --> 00:05:15,340
‫software para, básicamente, permitir que las aplicaciones se comuniquen entre sí.

113
00:05:15,340 --> 00:05:17,220
‫Y hablaremos un poco más profundamente

114
00:05:17,220 --> 00:05:21,160
‫sobre lo que es realmente una API una vez que comencemos a construir una.

115
00:05:21,160 --> 00:05:24,750
‫De todos modos, ahora sobre el lado del cliente que acabo de mencionar.

116
00:05:24,750 --> 00:05:28,300
‫Entonces, aquí es donde el sitio web se ensambla

117
00:05:28,300 --> 00:05:31,470
‫realmente conectando los datos que recibimos en algún

118
00:05:31,470 --> 00:05:35,500
‫tipo de plantillas, generalmente usando algún marco de interfaz de

119
00:05:35,500 --> 00:05:38,600
‫usuario elegante como React, Angular o Vue.

120
00:05:38,600 --> 00:05:40,540
‫No voy a entrar en

121
00:05:40,540 --> 00:05:43,170
‫detalles aquí porque eso sería para un curso de

122
00:05:43,170 --> 00:05:46,080
‫front-end, pero en términos muy generales, así es como funciona.

123
00:05:46,080 --> 00:05:49,200
‫Entonces, ves que al construir un sitio web con API,

124
00:05:49,200 --> 00:05:52,080
‫la fase de construcción del sitio web

125
00:05:52,080 --> 00:05:54,970
‫se movió desde el back-end hasta el front-end, ¿verdad?

126
00:05:54,970 --> 00:05:59,410
‫O también podemos decir que se movió del servidor al cliente.

127
00:05:59,410 --> 00:06:01,120
‫Es por eso que muchas

128
00:06:01,120 --> 00:06:04,560
‫veces verá sitios web dinámicos que se denominan renderizados del lado

129
00:06:04,560 --> 00:06:07,730
‫del servidor porque en realidad están construidos en el servidor.

130
00:06:07,730 --> 00:06:10,980
‫Por otro lado, los sitios web basados en API

131
00:06:10,980 --> 00:06:15,360
‫a menudo se denominan renderizados del lado del cliente, lo que tiene sentido, ¿verdad?

132
00:06:15,360 --> 00:06:17,200
‫Entonces, para nosotros, los desarrolladores

133
00:06:17,200 --> 00:06:20,750
‫de back-end, en realidad es mucho más fácil simplemente crear una

134
00:06:20,750 --> 00:06:24,460
‫API y dejar que la gente del front-end cree un sitio, ¿verdad?

135
00:06:24,460 --> 00:06:27,760
‫Y, de hecho, Node es una herramienta absolutamente perfecta para

136
00:06:27,760 --> 00:06:31,510
‫construir API, y se usa muy comúnmente para eso, pero por

137
00:06:31,510 --> 00:06:33,610
‫supuesto, también es perfectamente adecuado

138
00:06:33,610 --> 00:06:37,210
‫para construir un sitio web renderizado dinámico del lado del servidor.

139
00:06:37,210 --> 00:06:40,730
‫Entonces, en este curso, haremos ambas versiones, comenzando con

140
00:06:40,730 --> 00:06:43,960
‫la API, y al final del curso, también

141
00:06:43,960 --> 00:06:47,870
‫construiremos un sitio web renderizado usando exactamente los mismos datos.

142
00:06:47,870 --> 00:06:51,670
‫Elegí hacer ambas cosas porque creo que es extremadamente importante que sepas

143
00:06:51,670 --> 00:06:54,960
‫cómo construir tanto una API como un sitio web renderizado

144
00:06:54,960 --> 00:06:56,710
‫del lado del servidor.

145
00:06:58,150 --> 00:06:59,840
‫Y ahora, solo para terminar

146
00:06:59,840 --> 00:07:02,020
‫este video, quería mencionar rápidamente que las

147
00:07:02,020 --> 00:07:05,630
‫API que creamos con Node, o en realidad, cualquier otro lenguaje, pueden,

148
00:07:05,630 --> 00:07:07,150
‫por supuesto, ser consumidas

149
00:07:07,150 --> 00:07:09,930
‫por otros clientes además del navegador, lo cual es

150
00:07:09,930 --> 00:07:12,920
‫una gran ventaja de construir una API en lugar de

151
00:07:12,920 --> 00:07:15,350
‫un sitio web renderizado del lado del servidor.

152
00:07:15,350 --> 00:07:17,320
‫Entonces, digamos que construimos

153
00:07:17,320 --> 00:07:22,320
‫una API de ejemplo en jonas. io / api / myCourseData.

154
00:07:22,380 --> 00:07:27,350
‫Entonces, cada vez que ingresemos a esa URL, el servidor enviará datos sobre

155
00:07:27,350 --> 00:07:28,980
‫los cursos de

156
00:07:28,980 --> 00:07:31,130
‫desarrollo web que estoy impartiendo actualmente.

157
00:07:31,130 --> 00:07:33,970
‫Ahora, hasta ahora solo hablamos de solicitudes

158
00:07:33,970 --> 00:07:38,060
‫provenientes de navegadores web, pero también podríamos solicitar y luego

159
00:07:38,060 --> 00:07:41,060
‫consumir exactamente los mismos datos JSON en

160
00:07:41,060 --> 00:07:44,860
‫una aplicación nativa de iOS o una aplicación de Android,

161
00:07:44,860 --> 00:07:47,890
‫o incluso en aplicaciones de escritorio para Mac

162
00:07:47,890 --> 00:07:50,440
‫o para computadoras con Windows.

163
00:07:50,440 --> 00:07:54,130
‫Las posibilidades son realmente infinitas cuando creamos una API porque simplemente

164
00:07:54,130 --> 00:07:56,640
‫tenemos una fuente de datos, que luego

165
00:07:56,640 --> 00:07:59,380
‫se puede solicitar y usar en cualquier lugar, no

166
00:07:59,380 --> 00:08:00,880
‫solo en los navegadores.

167
00:08:00,880 --> 00:08:03,210
‫Ese es el problema cuando creamos un sitio

168
00:08:03,210 --> 00:08:04,520
‫web dinámico normal.

169
00:08:04,520 --> 00:08:07,700
‫Devolvemos archivos HTML, CSS y JavaScript,

170
00:08:07,700 --> 00:08:10,960
‫y solo los navegadores pueden entenderlos realmente, por

171
00:08:10,960 --> 00:08:14,470
‫lo que estamos atrapados en esa única plataforma.

172
00:08:14,470 --> 00:08:16,840
‫Y eso puede no ser un

173
00:08:16,840 --> 00:08:19,860
‫problema en muchos casos, pero para productos complejos que

174
00:08:19,860 --> 00:08:22,350
‫requieren muchas aplicaciones y luego sitios web y

175
00:08:22,350 --> 00:08:25,450
‫aplicaciones web, por lo general, siempre se necesita una API.

176
00:08:25,450 --> 00:08:29,530
‫Entonces, en este ejemplo sobre Jonas. io, podría crear esta API

177
00:08:29,530 --> 00:08:32,820
‫y luego crear un sitio web con API y algunas

178
00:08:32,820 --> 00:08:35,020
‫aplicaciones y obtener mis datos sobre todos

179
00:08:35,020 --> 00:08:37,830
‫estos clientes de una sola fuente, ¿de acuerdo?

180
00:08:37,830 --> 00:08:41,100
‫Y algunas personas o equipos ni siquiera tienen ningún

181
00:08:41,100 --> 00:08:44,240
‫cliente propio y simplemente venden el acceso a

182
00:08:44,240 --> 00:08:46,120
‫su API a terceros

183
00:08:46,120 --> 00:08:49,560
‫que luego consumirán estas API y no las suyas.

184
00:08:49,560 --> 00:08:51,680
‫Por lo tanto, hay empresas enteras construidas

185
00:08:51,680 --> 00:08:54,830
‫en torno a esta filosofía de simplemente vender una API

186
00:08:54,830 --> 00:08:56,563
‫a otros desarrolladores o empresas.

187
00:08:57,520 --> 00:09:00,670
‫De todos modos, espero que con esta diapositiva final, el concepto,

188
00:09:00,670 --> 00:09:03,740
‫la razón y, en cierto modo, la filosofía detrás

189
00:09:03,740 --> 00:09:07,380
‫de la creación de API se hayan vuelto muy claros para ustedes.

190
00:09:07,380 --> 00:09:09,313
‫Entonces, sigamos adelante.