1 00:00:01,130 --> 00:00:03,650 ‫Instructor: Ahora llenemos cada uno de los elementos de 2 00:00:03,650 --> 00:00:06,583 ‫la tarjeta con los datos correctos para cada uno de los recorridos. 3 00:00:08,210 --> 00:00:09,870 ‫Entonces, solo como un resumen rápido. 4 00:00:09,870 --> 00:00:13,690 ‫En un último video, comenzamos creando este elemento principal y dentro 5 00:00:13,690 --> 00:00:17,220 ‫de un elemento de contenedor div, luego dentro de ese 6 00:00:17,220 --> 00:00:19,070 ‫contenedor queremos uno de 7 00:00:19,070 --> 00:00:21,670 ‫estos elementos de tarjeta para cada uno 8 00:00:21,670 --> 00:00:24,740 ‫de los recorridos que vienen en la matriz 9 00:00:24,740 --> 00:00:26,850 ‫que pasamos a esta plantilla. 10 00:00:26,850 --> 00:00:29,720 ‫Y para eso usamos una matriz Pug que 11 00:00:29,720 --> 00:00:30,930 ‫funciona así. 12 00:00:30,930 --> 00:00:33,270 ‫Entonces, ¿cuál es cada palabra 13 00:00:33,270 --> 00:00:37,580 ‫clave aquí y el resultado de hacer eso se veía así, bien? 14 00:00:37,580 --> 00:00:40,010 ‫Entonces, lo que vamos a hacer ahora 15 00:00:40,010 --> 00:00:43,773 ‫es, básicamente, llenar cada una de estas tarjetas aquí con los datos reales. 16 00:00:45,610 --> 00:00:48,223 ‫Y comencemos aquí con el nombre de la gira. 17 00:00:49,940 --> 00:00:52,760 ‫Entonces, recuerde cómo colocamos el valor de una variable dentro 18 00:00:52,760 --> 00:00:53,983 ‫de un elemento. 19 00:00:55,200 --> 00:00:58,970 ‫Bueno, usamos Igual y luego en este caso Tour. 20 00:00:58,970 --> 00:01:00,310 ‫Entonces, el nombre de 21 00:01:00,310 --> 00:01:03,370 ‫la variable en la iteración del ciclo actual, a la derecha. 22 00:01:03,370 --> 00:01:08,270 ‫Y ese es un documento de viaje y luego el nombre del punto, recuerda. 23 00:01:08,270 --> 00:01:11,300 ‫Entonces, veamos eso en la brújula muy rápido. 24 00:01:11,300 --> 00:01:12,900 ‫Entonces, aquí tenemos cuatro recorridos 25 00:01:12,900 --> 00:01:14,283 ‫y estos son 26 00:01:14,283 --> 00:01:17,680 ‫todos los datos que vamos a necesitar ahora, está bien. 27 00:01:17,680 --> 00:01:21,080 ‫Y comenzando con el nombre aquí, está bien. 28 00:01:21,080 --> 00:01:23,930 ‫Entonces, si ahora recargamos nuestra página, eso 29 00:01:23,930 --> 00:01:25,203 ‫debería reflejarse aquí. 30 00:01:26,670 --> 00:01:30,350 ‫Y aquí es donde comienza la magia y funcionó. 31 00:01:30,350 --> 00:01:32,740 ‫Y esta es la primera vez que realmente vemos 32 00:01:32,740 --> 00:01:35,470 ‫que los datos de la base de datos se muestran 33 00:01:35,470 --> 00:01:37,240 ‫realmente en el sitio web. 34 00:01:37,240 --> 00:01:41,490 ‫Entonces, aquí tenemos el nombre del recorrido para cada uno de 35 00:01:41,490 --> 00:01:46,170 ‫los recorridos y nuevamente, eso ahora está saliendo directamente de nuestra base de datos. 36 00:01:46,170 --> 00:01:49,270 ‫Entonces, fantástico, eso es realmente 37 00:01:49,270 --> 00:01:53,240 ‫genial, así que ahora sigamos construyendo esta tarjeta. 38 00:01:53,240 --> 00:01:55,460 ‫Entonces, aquí sobre la imagen ahora. 39 00:01:55,460 --> 00:01:59,600 ‫Pongamos también el texto alternativo al nombre del tour. 40 00:01:59,600 --> 00:02:02,530 ‫Ahora no podemos simplemente poner un nombre de punto de recorrido 41 00:02:03,490 --> 00:02:05,190 ‫aquí porque estamos dentro de una 42 00:02:05,190 --> 00:02:06,770 ‫cadena y eso no funciona. 43 00:02:06,770 --> 00:02:07,730 ‫Ahora, al 44 00:02:07,730 --> 00:02:09,570 ‫mismo tiempo, si lo 45 00:02:09,570 --> 00:02:13,270 ‫hacemos así, tampoco va a funcionar porque aquí este 46 00:02:13,270 --> 00:02:16,220 ‫Alt realmente espera una cadena, está bien. 47 00:02:16,220 --> 00:02:19,350 ‫Entonces necesitamos algunas citas aquí sobre esta variable. 48 00:02:19,350 --> 00:02:21,230 ‫Entonces, la forma más fácil 49 00:02:21,230 --> 00:02:24,093 ‫de hacerlo es usar cadenas de plantilla ES6, de acuerdo. 50 00:02:27,700 --> 00:02:30,840 ‫Entonces, así y nuevamente, eso es porque esto 51 00:02:30,840 --> 00:02:34,620 ‫en realidad aquí espera que ingrese una cadena y, por 52 00:02:34,620 --> 00:02:38,320 ‫lo tanto, con esto, por supuesto, estamos creando una cadena. 53 00:02:38,320 --> 00:02:42,450 ‫A continuación, especifiquemos la imagen aquí, está bien. 54 00:02:42,450 --> 00:02:45,720 ‫Entonces, echemos un vistazo a la brújula 55 00:02:45,720 --> 00:02:49,827 ‫nuevamente para ver cómo se ve bien esa imagen de portada. 56 00:02:49,827 --> 00:02:52,550 ‫Y entonces tenemos una propiedad llamada imagen cubierta 57 00:02:52,550 --> 00:02:55,960 ‫y luego aquí solo tenemos el nombre de la imagen en sí. 58 00:02:55,960 --> 00:02:57,760 ‫Entonces, no el camino a la imagen. = y 59 00:02:57,760 --> 00:03:01,200 ‫de modo que realmente tendremos que especificar manualmente, está bien. 60 00:03:01,200 --> 00:03:03,300 ‫Entonces, pero lo que importa aquí es que se 61 00:03:03,300 --> 00:03:04,603 ‫llama portada de imagen. 62 00:03:05,700 --> 00:03:07,500 ‫Así que deshagámonos de todo esto. 63 00:03:08,740 --> 00:03:11,730 ‫Comience creando una cadena de plantilla y 64 00:03:11,730 --> 00:03:16,170 ‫luego recorra la cubierta de la imagen del punto y ahora 65 00:03:17,160 --> 00:03:18,480 ‫tenemos que averiguar 66 00:03:18,480 --> 00:03:21,700 ‫la ruta completa a esa imagen, está bien. 67 00:03:21,700 --> 00:03:24,480 ‫Y como ya sabemos, los datos de la imagen 68 00:03:24,480 --> 00:03:26,430 ‫están dentro de la carpeta pública. 69 00:03:26,430 --> 00:03:28,820 ‫Entonces, la carpeta desde la que se 70 00:03:28,820 --> 00:03:30,400 ‫servirán todos los 71 00:03:30,400 --> 00:03:32,790 ‫activos estáticos y aquí tenemos imágenes. 72 00:03:32,790 --> 00:03:34,130 ‫Y luego tenemos una carpeta. 73 00:03:34,130 --> 00:03:37,833 ‫Uno para recorridos y otro para usuarios, está bien. 74 00:03:39,197 --> 00:03:41,700 ‫Y así, dentro de cada uno de 75 00:03:41,700 --> 00:03:45,423 ‫estos recorridos, tenemos las tres fotos y una foto de portada. 76 00:03:46,330 --> 00:03:49,120 ‫Entonces, se verá algo así. 77 00:03:49,120 --> 00:03:54,120 ‫Entonces, el camino aquí es recorridos de puntos de imagen o recorridos de barra 78 00:03:56,230 --> 00:03:59,863 ‫y luego barra el nombre de la imagen, genial. 79 00:04:00,750 --> 00:04:04,270 ‫Así que eso debería hacer que los 80 00:04:04,270 --> 00:04:08,560 ‫sitios web completos se vean aún mejor ahora, sí. 81 00:04:08,560 --> 00:04:11,770 ‫Ahora realmente está comenzando a cobrar vida. 82 00:04:11,770 --> 00:04:13,730 ‫Entonces, eso es fantástico. 83 00:04:13,730 --> 00:04:15,460 ‫Esto me hace sentir muy bien 84 00:04:15,460 --> 00:04:16,993 ‫cada vez que funciona. 85 00:04:18,090 --> 00:04:21,260 ‫De todos modos, ahora ocupémonos del resto de los 86 00:04:21,260 --> 00:04:23,010 ‫datos que, por supuesto, 87 00:04:23,010 --> 00:04:26,680 ‫todavía se ven iguales en todas estas tarjetas, de acuerdo. 88 00:04:26,680 --> 00:04:29,550 ‫Y ahora usemos los datos de nuestra colección 89 00:04:29,550 --> 00:04:31,600 ‫para construir esta cadena aquí. 90 00:04:31,600 --> 00:04:33,550 ‫Entonces, ve que esto en realidad es 91 00:04:33,550 --> 00:04:35,010 ‫una combinación de datos diferentes. 92 00:04:35,010 --> 00:04:38,630 ‫Entonces, tenemos la dificultad y la duración del recorrido, por 93 00:04:38,630 --> 00:04:41,710 ‫lo que ahora creemos una cadena de plantilla. 94 00:04:41,710 --> 00:04:46,093 ‫Entonces, básicamente asigne esta cadena de plantilla a este elemento. 95 00:04:48,100 --> 00:04:53,083 ‫Y entonces comenzamos aquí con la dificultad del punto del recorrido, 96 00:04:54,410 --> 00:04:59,410 ‫recuerde, luego el espacio y luego la duración del recorrido, el recorrido 97 00:05:01,090 --> 00:05:05,763 ‫del día de duración del punto del recorrido, está bien. 98 00:05:10,400 --> 00:05:14,030 ‫Entonces, esa es la traducción de este contenido. 99 00:05:14,030 --> 00:05:18,413 ‫Luego, lo que tenemos aquí es el resumen de la gira, está bien. 100 00:05:19,700 --> 00:05:24,700 ‫Entonces, resumen de puntos de recorrido igual, de acuerdo. 101 00:05:26,520 --> 00:05:29,870 ‫Luego, a continuación, tenemos la ubicación de inicio, por lo que este 102 00:05:29,870 --> 00:05:31,720 ‫recorrido, por ejemplo, comienza en Banff, 103 00:05:31,720 --> 00:05:34,470 ‫Canadá, por lo que nuevamente echemos un vistazo a la 104 00:05:34,470 --> 00:05:36,520 ‫brújula aquí solo para ver cómo se 105 00:05:36,520 --> 00:05:38,520 ‫ven los datos o, en realidad, no 106 00:05:38,520 --> 00:05:40,740 ‫necesitamos estar siempre cambiando de un lado a 107 00:05:40,740 --> 00:05:42,520 ‫otro. a la brújula. 108 00:05:42,520 --> 00:05:46,340 ‫También podemos abrir o importar datos aquí. 109 00:05:49,170 --> 00:05:52,850 ‫Entonces, en los recorridos, simplemente podemos usar estos datos aquí 110 00:05:52,850 --> 00:05:55,980 ‫en lugar de ir siempre a la brújula. 111 00:05:55,980 --> 00:05:57,810 ‫Entonces, antes de usar el resumen, 112 00:05:57,810 --> 00:06:00,400 ‫sigamos adelante y usemos la ubicación de inicio que 113 00:06:01,600 --> 00:06:03,040 ‫en realidad está aquí. 114 00:06:03,040 --> 00:06:07,083 ‫Entonces, ahora queremos comenzar la descripción del punto de ubicación, está bien. 115 00:06:09,570 --> 00:06:14,570 ‫Por lo tanto, descripción del punto de la ubicación de inicio del punto de recorrido. 116 00:06:17,630 --> 00:06:19,090 ‫Y ahora comienza 117 00:06:19,090 --> 00:06:21,480 ‫a ver por qué tenía sentido 118 00:06:21,480 --> 00:06:24,450 ‫crear todos estos datos diferentes que creamos aquí. 119 00:06:24,450 --> 00:06:28,010 ‫Bien, lo siguiente que usaremos para comenzar las fechas, así 120 00:06:28,010 --> 00:06:29,520 ‫que tenlo en cuenta. 121 00:06:29,520 --> 00:06:32,010 ‫Que esto es una matriz, está bien. 122 00:06:32,010 --> 00:06:34,900 ‫Porque ahora lo que queremos en nuestro resumen 123 00:06:34,900 --> 00:06:38,680 ‫es básicamente la fecha en la que comienza la próxima gira. 124 00:06:38,680 --> 00:06:41,710 ‫Entonces, eso es lo que significa aquí el ícono con un 125 00:06:41,710 --> 00:06:42,923 ‫calendario en este caso. 126 00:06:44,260 --> 00:06:46,470 ‫Entonces, ese es básicamente 127 00:06:46,470 --> 00:06:50,710 ‫el primer elemento de esa matriz de fechas de inicio. 128 00:06:50,710 --> 00:06:55,680 ‫Entonces, comience las fechas en la posición 0. 129 00:06:55,680 --> 00:06:59,960 ‫A continuación, tenemos este dato que dice cuántas paradas 130 00:06:59,960 --> 00:07:02,320 ‫hay en estos recorridos. 131 00:07:02,320 --> 00:07:03,670 ‫Básicamente, eso 132 00:07:03,670 --> 00:07:06,000 ‫significa cuántas ubicaciones tenemos y, 133 00:07:06,000 --> 00:07:09,210 ‫de nuevo, usaremos las ubicaciones y esta vez 134 00:07:09,210 --> 00:07:11,120 ‫no la ubicación de 135 00:07:11,120 --> 00:07:13,770 ‫inicio, sino realmente estas ubicaciones y, 136 00:07:13,770 --> 00:07:17,350 ‫por lo tanto, si desea especificar cuántas ubicaciones tenemos. 137 00:07:17,350 --> 00:07:21,493 ‫Bueno, entonces tenemos que contar la longitud de esta matriz, está bien. 138 00:07:22,910 --> 00:07:24,560 ‫Y así de simple también. 139 00:07:24,560 --> 00:07:27,370 ‫Entonces, igual y luego configúrelo en esta 140 00:07:27,370 --> 00:07:29,830 ‫cadena de plantilla porque también queremos 141 00:07:31,840 --> 00:07:36,807 ‫agregar esta parada y recorrer las ubicaciones de los puntos, la longitud de 142 00:07:42,850 --> 00:07:45,740 ‫los puntos y finalmente la cantidad de personas 143 00:07:45,740 --> 00:07:49,070 ‫que forman parte de cada uno de los grupos. 144 00:07:49,070 --> 00:07:52,990 ‫Por lo tanto, las personas que pueden participar en un recorrido y 145 00:07:52,990 --> 00:07:55,110 ‫por lo que se almacena 146 00:07:56,750 --> 00:08:00,053 ‫en el recorrido pero el tamaño máximo del grupo, recuerde. 147 00:08:02,440 --> 00:08:03,953 ‫Y luego la gente. 148 00:08:05,950 --> 00:08:08,990 ‫Genial, esa parte ya está lista, 149 00:08:08,990 --> 00:08:12,550 ‫así que regresemos a nuestro sitio web 150 00:08:12,550 --> 00:08:13,743 ‫y probémoslo. 151 00:08:15,270 --> 00:08:20,150 ‫Y sí, hermosa, al menos casi hermosa, porque esta cita se 152 00:08:20,150 --> 00:08:23,030 ‫ve un poco rara aquí. 153 00:08:23,030 --> 00:08:28,030 ‫Entonces, realmente solo queremos el veintiuno de junio, así que no necesitamos ser 154 00:08:28,500 --> 00:08:30,550 ‫tan específicos aquí en 155 00:08:30,550 --> 00:08:32,630 ‫esta descripción general, de acuerdo. 156 00:08:32,630 --> 00:08:37,630 ‫Entonces, lo que queremos es que se vea nuevamente en junio de 2021 157 00:08:38,200 --> 00:08:41,620 ‫y ahora mismo es todo este lío, así que 158 00:08:41,620 --> 00:08:43,560 ‫arreglemos eso y, afortunadamente, 159 00:08:43,560 --> 00:08:45,910 ‫eso es realmente muy fácil 160 00:08:45,910 --> 00:08:48,640 ‫con JavaScript, que incluye un par de 161 00:08:48,640 --> 00:08:51,640 ‫funciones muy agradables para trabajar con fechas. 162 00:08:51,640 --> 00:08:55,100 ‫Y tenga en cuenta que cada una de estas fechas 163 00:08:55,100 --> 00:08:57,920 ‫de inicio aquí realmente es un objeto 164 00:08:57,920 --> 00:09:01,120 ‫de fecha en o una base de datos, por 165 00:09:01,120 --> 00:09:06,120 ‫lo que ahora podemos usar una función como esta para la cadena local, de acuerdo. 166 00:09:06,510 --> 00:09:09,260 ‫Entonces, básicamente convertirá esta fecha en 167 00:09:09,260 --> 00:09:11,440 ‫una cadena legible agradable 168 00:09:11,440 --> 00:09:15,580 ‫y aquí ahora podemos pasar una opción para el idioma. 169 00:09:15,580 --> 00:09:18,080 ‫Y eso es inglés para EE. UU. 170 00:09:19,570 --> 00:09:22,580 ‫Y luego también un objeto con algunas opciones, por 171 00:09:22,580 --> 00:09:25,481 ‫lo que aquí ahora podemos especificar que queremos que 172 00:09:25,481 --> 00:09:27,093 ‫un mes sea largo. 173 00:09:29,330 --> 00:09:31,870 ‫Entonces, en lugar de solo una abreviatura como la 174 00:09:31,870 --> 00:09:32,940 ‫que teníamos aquí. 175 00:09:32,940 --> 00:09:34,910 ‫entonces, un abril, un 176 00:09:34,910 --> 00:09:36,970 ‫agosto, ahora lo imprimirá así. 177 00:09:36,970 --> 00:09:41,560 ‫Entonces, realmente el nombre del mes completo y está bien y 178 00:09:41,560 --> 00:09:46,557 ‫luego también decir que el año debe ser numérico y si desea 179 00:09:48,380 --> 00:09:50,757 ‫obtener más información sobre esta 180 00:09:50,757 --> 00:09:55,180 ‫función aquí, simplemente continúe y busque en Google, está bien. 181 00:09:55,180 --> 00:09:57,810 ‫Entonces, intentémoslo de nuevo 182 00:09:59,550 --> 00:10:02,930 ‫y ahora se ve realmente bien, increíble. 183 00:10:02,930 --> 00:10:06,980 ‫Entonces, sigamos avanzando y terminemos esta última parte aquí con el 184 00:10:06,980 --> 00:10:09,723 ‫precio y los detalles de la calificación. 185 00:10:11,640 --> 00:10:14,700 ‫Y eso es aquí en el pie de página de 186 00:10:14,700 --> 00:10:17,150 ‫la tarjeta y aquí es solo el precio. 187 00:10:17,150 --> 00:10:21,240 ‫Entonces, es igual a dejémoslo allí porque ahora todavía necesitamos una 188 00:10:21,240 --> 00:10:23,810 ‫cadena de plantilla porque el precio no 189 00:10:23,810 --> 00:10:27,910 ‫es solo este número, sino que en realidad necesitamos un signo 190 00:10:31,370 --> 00:10:34,120 ‫de dólar adicional aquí para el precio 191 00:10:34,120 --> 00:10:35,250 ‫en dólares. 192 00:10:35,250 --> 00:10:36,433 ‫Entonces, este, correcto. 193 00:10:39,620 --> 00:10:42,410 ‫A continuación, tenemos la calificación promedio aquí. 194 00:10:42,410 --> 00:10:45,300 ‫Entonces, eso es esto y, por lo 195 00:10:45,300 --> 00:10:50,300 ‫tanto, ya sabemos que esto se llama calificación promedio de puntos de recorrido. 196 00:10:51,020 --> 00:10:54,560 ‫Entonces, lo usamos tantas veces al menos, creo. 197 00:10:54,560 --> 00:10:59,240 ‫Confirmémoslo para que en realidad sea el promedio de calificaciones y luego 198 00:10:59,240 --> 00:11:01,490 ‫también la cantidad de calificaciones. 199 00:11:01,490 --> 00:11:03,488 ‫Entonces, copiemos esto. 200 00:11:03,488 --> 00:11:05,890 ‫Entonces, calificaciones promedio 201 00:11:05,890 --> 00:11:10,073 ‫y ahora aquí queremos cantidad de calificaciones. 202 00:11:16,320 --> 00:11:19,270 ‫Está bien, pero, por supuesto, esto debe ser 203 00:11:23,390 --> 00:11:25,560 ‫una cadena de plantilla y 204 00:11:25,560 --> 00:11:30,450 ‫luego establecerlo en igual y luego, por supuesto, interpolar el nombre de la variable 205 00:11:30,450 --> 00:11:33,490 ‫aquí y ahora finalmente tenemos que construir la URL 206 00:11:33,490 --> 00:11:36,220 ‫a la página de detalles, está bien. 207 00:11:36,220 --> 00:11:39,180 ‫Entonces, recuerda eso cuando hacemos clic en una de las tarjetas. 208 00:11:39,180 --> 00:11:41,280 ‫Luego nos lleva a la 209 00:11:41,280 --> 00:11:44,550 ‫página de detalles y, por supuesto, aquí ahora debemos especificar 210 00:11:45,410 --> 00:11:48,800 ‫ese enlace porque, por supuesto, eso dependerá de cada recorrido. 211 00:11:48,800 --> 00:11:52,380 ‫Por lo tanto, queremos enlazar para que sean recorridos de 212 00:11:52,380 --> 00:11:54,760 ‫barra y luego recordar cómo mencioné 213 00:11:54,760 --> 00:11:57,530 ‫antes que para renderizar estas páginas en realidad 214 00:11:57,530 --> 00:12:00,050 ‫querremos consultar recorridos por su slug y 215 00:12:00,050 --> 00:12:01,870 ‫no por su ID. 216 00:12:01,870 --> 00:12:04,620 ‫Cómo lo hicimos en la API, está 217 00:12:04,620 --> 00:12:09,620 ‫bien, porque eso hace que la URL se vea mucho mejor, está bien. 218 00:12:09,920 --> 00:12:11,973 ‫Y entonces usemos eso aquí ahora. 219 00:12:13,430 --> 00:12:18,130 ‫Entonces, recorra punto slug y tan solo para explicarle 220 00:12:18,130 --> 00:12:20,200 ‫por qué comenzamos 221 00:12:20,200 --> 00:12:23,110 ‫esta URL aquí con una barra. 222 00:12:23,110 --> 00:12:26,230 ‫Esto se debe a que la creación de una URL como 223 00:12:26,230 --> 00:12:30,140 ‫esta, por lo que comenzar solo con la barra se llama una URL relativa 224 00:12:30,140 --> 00:12:31,620 ‫y lo que hará 225 00:12:31,620 --> 00:12:35,020 ‫es que luego se agregará en esta parte de la URL 226 00:12:35,020 --> 00:12:36,640 ‫después del nombre de host. 227 00:12:36,640 --> 00:12:41,540 ‫Entonces, ese host ahora es de uno a siete punto cero cero uno, pero 228 00:12:41,540 --> 00:12:44,170 ‫no es necesario especificarlo aquí porque 229 00:12:44,170 --> 00:12:47,710 ‫nuevamente al escribir una URL relativa como esta, agregará 230 00:12:47,710 --> 00:12:51,663 ‫lo que tenemos aquí a ese nombre de host, está bien. 231 00:12:53,135 --> 00:12:56,490 ‫Entonces, recarguemos eso de nuevo y ya 232 00:12:56,490 --> 00:12:58,930 ‫casi terminamos aquí, no del 233 00:12:58,930 --> 00:13:00,250 ‫todo listos. 234 00:13:00,250 --> 00:13:01,750 ‫Entonces, aquí se ve 235 00:13:01,750 --> 00:13:03,820 ‫indefinido y probablemente hicimos algo mal allí. 236 00:13:03,820 --> 00:13:06,490 ‫Y también ves que aquí no hay espacio 237 00:13:06,490 --> 00:13:08,650 ‫entre el precio y el 238 00:13:08,650 --> 00:13:11,440 ‫por persona y también aquí lo mismo ahora. 239 00:13:11,440 --> 00:13:13,360 ‫Si coloca el mouse sobre este botón 240 00:13:13,360 --> 00:13:15,550 ‫aquí y luego hacia abajo, en la esquina izquierda. 241 00:13:15,550 --> 00:13:18,400 ‫Entonces, aquí abajo verá la URL que 242 00:13:18,400 --> 00:13:19,780 ‫acabamos de construir. 243 00:13:19,780 --> 00:13:21,040 ‫De hecho, puede 244 00:13:21,040 --> 00:13:23,010 ‫hacer clic en él y luego 245 00:13:23,010 --> 00:13:25,470 ‫nos dará este error porque, por supuesto, aún 246 00:13:25,470 --> 00:13:27,390 ‫no definimos esta ruta, pero verá 247 00:13:27,390 --> 00:13:30,660 ‫que se ve muy bien aquí con los recorridos que cortan 248 00:13:30,660 --> 00:13:35,660 ‫al excursionista del bosque en lugar de tener esa identificación fea allá arriba, de acuerdo. . 249 00:13:35,950 --> 00:13:38,270 ‫Pero de todos modos, ahora arreglemos esto indefinido 250 00:13:38,270 --> 00:13:39,563 ‫en este espacio faltante. 251 00:13:40,610 --> 00:13:44,550 ‫Entonces, echemos un vistazo a este. 252 00:13:44,550 --> 00:13:49,270 ‫Bueno, en realidad parece correcto las calificaciones, la cantidad pero, por 253 00:13:50,290 --> 00:13:54,690 ‫supuesto, nos falta este punto de la gira, está bien. 254 00:13:54,690 --> 00:13:57,770 ‫Probablemente ya lo estabas viendo. 255 00:13:57,770 --> 00:13:59,360 ‫Ahora sobre ese espacio que falta. 256 00:13:59,360 --> 00:14:02,950 ‫Hay algo nuevo que necesito mostrarte sobre el barro amasado, 257 00:14:02,950 --> 00:14:06,050 ‫que es el llamado carril de tubería vacío o 258 00:14:07,090 --> 00:14:08,950 ‫una línea, en realidad. 259 00:14:08,950 --> 00:14:11,080 ‫Entonces, siempre que necesitemos un espacio 260 00:14:11,080 --> 00:14:13,220 ‫real entre dos elementos de bloque 261 00:14:13,220 --> 00:14:15,610 ‫en línea que son estas bandas, entonces 262 00:14:15,610 --> 00:14:17,210 ‫necesitamos crear manualmente 263 00:14:17,210 --> 00:14:20,840 ‫ese espacio usando esta línea entubada aquí como esta, de acuerdo. 264 00:14:20,840 --> 00:14:23,180 ‫Y lo mismo aquí abajo 265 00:14:23,180 --> 00:14:25,260 ‫porque de lo 266 00:14:25,260 --> 00:14:27,660 ‫contrario, como acabamos de ver, 267 00:14:27,660 --> 00:14:31,120 ‫simplemente pegará todos estos elementos, de acuerdo. 268 00:14:31,120 --> 00:14:33,880 ‫Entonces, ahora todo eso debería arreglarse 269 00:14:33,880 --> 00:14:37,260 ‫y ese espacio todavía no está allí y 270 00:14:37,260 --> 00:14:40,070 ‫eso es en realidad porque olvidamos algo. 271 00:14:40,070 --> 00:14:41,750 ‫Entonces, volvamos 272 00:14:41,750 --> 00:14:44,080 ‫atrás y realmente necesitamos agregar 273 00:14:44,080 --> 00:14:47,600 ‫manualmente ese espacio vacío aquí y aquí. 274 00:14:47,600 --> 00:14:50,290 ‫Entonces, esta tubería vacía aquí básicamente crea un 275 00:14:50,290 --> 00:14:53,390 ‫espacio para nosotros donde luego podemos crear contenido fuera 276 00:14:53,390 --> 00:14:55,020 ‫de un elemento y 277 00:14:55,020 --> 00:14:57,690 ‫eso es básicamente lo que es este espacio. 278 00:14:57,690 --> 00:14:59,930 ‫Entonces, este espacio aquí que acabamos de poner aquí. 279 00:14:59,930 --> 00:15:03,180 ‫Entonces, este espacio vacío es contenido que no está 280 00:15:03,180 --> 00:15:05,830 ‫dentro de ninguno de estos dos elementos. 281 00:15:05,830 --> 00:15:08,690 ‫Y, de nuevo, para poder hacer eso, 282 00:15:08,690 --> 00:15:10,880 ‫para eso necesitamos esta tubería. 283 00:15:10,880 --> 00:15:13,423 ‫Entonces, estas dos tuberías. 284 00:15:14,960 --> 00:15:17,020 ‫Entonces, inténtelo de nuevo y 285 00:15:17,020 --> 00:15:18,870 ‫ahora, de hecho, aquí 286 00:15:18,870 --> 00:15:21,670 ‫va el espacio que acabamos de crear, perfecto. 287 00:15:21,670 --> 00:15:25,010 ‫Y con eso terminamos esta conferencia y este 288 00:15:25,010 --> 00:15:28,140 ‫primer sitio web de aspecto asombroso o 289 00:15:28,140 --> 00:15:32,110 ‫parte del sitio web que acabamos de construir aquí juntos. 290 00:15:32,110 --> 00:15:35,651 ‫Entonces, un momento para apreciar lo genial que 291 00:15:35,651 --> 00:15:38,280 ‫es esto realmente y también 292 00:15:38,280 --> 00:15:42,340 ‫cómo funciona todo este código que escribimos juntos, de acuerdo. 293 00:15:42,340 --> 00:15:44,560 ‫Y luego, regrese para que podamos 294 00:15:44,560 --> 00:15:47,693 ‫construir juntos la página de descripción general del recorrido.