1 00:00:01,130 --> 00:00:03,650 ‫Instrutor: Vamos agora preencher cada um dos elementos 2 00:00:03,650 --> 00:00:06,583 ‫do cartão com os dados corretos para cada um dos passeios. 3 00:00:08,210 --> 00:00:09,870 ‫Então, apenas como uma rápida recapitulação. 4 00:00:09,870 --> 00:00:13,690 ‫Em um último vídeo, começamos criando este elemento principal e 5 00:00:13,690 --> 00:00:17,220 ‫um elemento dentro de um contêiner div. Em seguida, 6 00:00:17,220 --> 00:00:19,070 ‫dentro desse contêiner, queremos 7 00:00:19,070 --> 00:00:21,670 ‫um desses elementos de cartão para 8 00:00:21,670 --> 00:00:24,740 ‫cada um dos passeios que vem na matriz 9 00:00:24,740 --> 00:00:26,850 ‫que passamos para este modelo. 10 00:00:26,850 --> 00:00:29,720 ‫E para isso usamos um array Pug que 11 00:00:29,720 --> 00:00:30,930 ‫funciona exatamente assim. 12 00:00:30,930 --> 00:00:33,270 ‫Então, qual é cada palavra-chave 13 00:00:33,270 --> 00:00:37,580 ‫aqui e o resultado de fazer isso parecia com isso, certo. 14 00:00:37,580 --> 00:00:40,010 ‫E então o que vamos fazer agora 15 00:00:40,010 --> 00:00:43,773 ‫é basicamente preencher cada um desses cartões aqui com os dados reais. 16 00:00:45,610 --> 00:00:48,223 ‫E vamos começar aqui com o nome do tour. 17 00:00:49,940 --> 00:00:52,760 ‫Portanto, lembre-se de como colocamos o valor de uma variável 18 00:00:52,760 --> 00:00:53,983 ‫dentro de um elemento. 19 00:00:55,200 --> 00:00:58,970 ‫Bem, usamos igual e, em seguida, neste caso, tour. 20 00:00:58,970 --> 00:01:00,310 ‫Então, o nome 21 00:01:00,310 --> 00:01:03,370 ‫da variável na iteração do loop atual, certo. 22 00:01:03,370 --> 00:01:08,270 ‫E isso é um documento de passeio e depois o nome do ponto, lembre-se. 23 00:01:08,270 --> 00:01:11,300 ‫Então, vamos verificar isso na bússola muito rápido. 24 00:01:11,300 --> 00:01:12,900 ‫Então, aqui temos quatro 25 00:01:12,900 --> 00:01:14,283 ‫tours e esses 26 00:01:14,283 --> 00:01:17,680 ‫são todos os dados que vamos precisar agora, ok. 27 00:01:17,680 --> 00:01:21,080 ‫E começando com o nome aqui, ok. 28 00:01:21,080 --> 00:01:23,930 ‫E então, se recarregarmos nossa página, isso deve 29 00:01:23,930 --> 00:01:25,203 ‫ser refletido aqui. 30 00:01:26,670 --> 00:01:30,350 ‫E então é aqui que a mágica começa e funcionou. 31 00:01:30,350 --> 00:01:32,740 ‫E esta é a primeira vez que 32 00:01:32,740 --> 00:01:35,470 ‫realmente vemos os dados do banco de dados 33 00:01:35,470 --> 00:01:37,240 ‫sendo realmente renderizados no site. 34 00:01:37,240 --> 00:01:41,490 ‫Então, aqui temos o nome do passeio para cada um 35 00:01:41,490 --> 00:01:46,170 ‫dos passeios e, novamente, isso agora está saindo de nosso banco de dados. 36 00:01:46,170 --> 00:01:49,270 ‫Então, fantástico, isso é muito 37 00:01:49,270 --> 00:01:53,240 ‫legal e vamos continuar a construir este cartão. 38 00:01:53,240 --> 00:01:55,460 ‫Então, aqui sobre a imagem agora. 39 00:01:55,460 --> 00:01:59,600 ‫Vamos também colocar o texto alternativo no nome do passeio. 40 00:01:59,600 --> 00:02:02,530 ‫Agora, não podemos simplesmente colocar um nome de ponto de passeio 41 00:02:03,490 --> 00:02:05,190 ‫aqui porque estamos dentro de uma 42 00:02:05,190 --> 00:02:06,770 ‫string e isso não funciona. 43 00:02:06,770 --> 00:02:07,730 ‫Agora, 44 00:02:07,730 --> 00:02:09,570 ‫ao mesmo tempo, se 45 00:02:09,570 --> 00:02:13,270 ‫fizermos assim, também não vai funcionar porque aqui 46 00:02:13,270 --> 00:02:16,220 ‫este Alt realmente espera uma string, ok. 47 00:02:16,220 --> 00:02:19,350 ‫Portanto, precisamos de algumas citações aqui em torno desta variável. 48 00:02:19,350 --> 00:02:21,230 ‫E então a maneira mais fácil 49 00:02:21,230 --> 00:02:24,093 ‫de fazer isso é usar strings de template ES6, ok. 50 00:02:27,700 --> 00:02:30,840 ‫Então, assim e de novo, isso é 51 00:02:30,840 --> 00:02:34,620 ‫porque na verdade aqui espera que uma string seja apresentada 52 00:02:34,620 --> 00:02:38,320 ‫e, com isso, é claro que estamos criando uma string. 53 00:02:38,320 --> 00:02:42,450 ‫Em seguida, vamos especificar a imagem aqui, ok. 54 00:02:42,450 --> 00:02:45,720 ‫Então, vamos dar uma olhada na bússola 55 00:02:45,720 --> 00:02:49,827 ‫novamente para verificar como a imagem da capa está correta. 56 00:02:49,827 --> 00:02:52,550 ‫E então temos uma propriedade chamada capa 57 00:02:52,550 --> 00:02:55,960 ‫da imagem e aqui temos apenas o nome da própria imagem. 58 00:02:55,960 --> 00:02:57,760 ‫Portanto, não o caminho para a imagem. = 59 00:02:57,760 --> 00:03:01,200 ‫e então teremos que especificar manualmente, ok. 60 00:03:01,200 --> 00:03:03,300 ‫Então, mas o que importa aqui é que se 61 00:03:03,300 --> 00:03:04,603 ‫chama capa de imagem. 62 00:03:05,700 --> 00:03:07,500 ‫E então vamos nos livrar de tudo isso. 63 00:03:08,740 --> 00:03:11,730 ‫Comece criando uma string de modelo e, 64 00:03:11,730 --> 00:03:16,170 ‫em seguida, faça um tour pela cobertura da imagem de ponto 65 00:03:17,160 --> 00:03:18,480 ‫e agora precisamos 66 00:03:18,480 --> 00:03:21,700 ‫descobrir todo o caminho para essa imagem, ok. 67 00:03:21,700 --> 00:03:24,480 ‫E como já sabemos os dados da imagem 68 00:03:24,480 --> 00:03:26,430 ‫estão dentro da pasta pública. 69 00:03:26,430 --> 00:03:28,820 ‫Então, a pasta a partir da qual 70 00:03:28,820 --> 00:03:30,400 ‫todos os ativos estáticos 71 00:03:30,400 --> 00:03:32,790 ‫serão servidos e aqui temos as imagens. 72 00:03:32,790 --> 00:03:34,130 ‫E então temos uma pasta. 73 00:03:34,130 --> 00:03:37,833 ‫Um para tours e outro para usuários, ok. 74 00:03:39,197 --> 00:03:41,700 ‫E assim, dentro de cada um 75 00:03:41,700 --> 00:03:45,423 ‫desses passeios, temos as três fotos e uma foto de capa. 76 00:03:46,330 --> 00:03:49,120 ‫Então, isso vai se parecer com isso. 77 00:03:49,120 --> 00:03:54,120 ‫E então o caminho aqui é passeios de ponto de imagem ou passeios de 78 00:03:56,230 --> 00:03:59,863 ‫barra e, em seguida, barra o nome da imagem, ótimo. 79 00:04:00,750 --> 00:04:04,270 ‫Então isso deve fazer 80 00:04:04,270 --> 00:04:08,560 ‫sites inteiros parecerem ainda melhores agora sim. 81 00:04:08,560 --> 00:04:11,770 ‫Agora está realmente começando a ganhar vida. 82 00:04:11,770 --> 00:04:13,730 ‫Então, isso é fantástico. 83 00:04:13,730 --> 00:04:15,460 ‫Isso me faz sentir muito bem 84 00:04:15,460 --> 00:04:16,993 ‫cada vez que funciona. 85 00:04:18,090 --> 00:04:21,260 ‫De qualquer forma, vamos cuidar do resto dos 86 00:04:21,260 --> 00:04:23,010 ‫dados que, claro, 87 00:04:23,010 --> 00:04:26,680 ‫ainda parecem os mesmos em todos esses cartões, ok. 88 00:04:26,680 --> 00:04:29,550 ‫E agora vamos usar os dados em nossa coleção 89 00:04:29,550 --> 00:04:31,600 ‫para construir esta string aqui. 90 00:04:31,600 --> 00:04:33,550 ‫Então, você vê que isso realmente é 91 00:04:33,550 --> 00:04:35,010 ‫uma combinação de dados diferentes. 92 00:04:35,010 --> 00:04:38,630 ‫Então, nós temos a dificuldade e a duração do passeio, então 93 00:04:38,630 --> 00:04:41,710 ‫vamos aqui agora criar uma string de modelo. 94 00:04:41,710 --> 00:04:46,093 ‫Então, basicamente atribua esta string de template a este elemento. 95 00:04:48,100 --> 00:04:53,083 ‫E então começamos aqui com a dificuldade ponto do 96 00:04:54,410 --> 00:04:59,410 ‫passeio, lembre-se, depois o espaço e a duração do passeio, 97 00:05:01,090 --> 00:05:05,763 ‫ponto do passeio, duração do dia, tudo bem. 98 00:05:10,400 --> 00:05:14,030 ‫Então, essa é a tradução desse conteúdo. 99 00:05:14,030 --> 00:05:18,413 ‫Em seguida, o que temos aqui é o resumo do tour, ok. 100 00:05:19,700 --> 00:05:24,700 ‫Então, resumo de pontos de passeio iguais, tudo bem. 101 00:05:26,520 --> 00:05:29,870 ‫Em seguida, temos o local de início e este passeio, 102 00:05:29,870 --> 00:05:31,720 ‫por exemplo, começa em Banff 103 00:05:31,720 --> 00:05:34,470 ‫Canadá e, novamente, vamos dar uma olhada na bússola 104 00:05:34,470 --> 00:05:36,520 ‫aqui apenas para ver como os 105 00:05:36,520 --> 00:05:38,520 ‫dados se parecem ou, na verdade, 106 00:05:38,520 --> 00:05:40,740 ‫não precisamos estar sempre alternando para frente 107 00:05:40,740 --> 00:05:42,520 ‫e para trás bússola. 108 00:05:42,520 --> 00:05:46,340 ‫Também podemos abrir ou importar dados aqui. 109 00:05:49,170 --> 00:05:52,850 ‫Então, nos passeios, podemos simplesmente usar esses dados aqui, em 110 00:05:52,850 --> 00:05:55,980 ‫vez de sempre irmos para a bússola. 111 00:05:55,980 --> 00:05:57,810 ‫Portanto, antes de usarmos o resumo, 112 00:05:57,810 --> 00:06:00,400 ‫vamos usar o local de início que está 113 00:06:01,600 --> 00:06:03,040 ‫aqui em cima. 114 00:06:03,040 --> 00:06:07,083 ‫Então, agora queremos começar a descrição do ponto do local, ok. 115 00:06:09,570 --> 00:06:14,570 ‫Portanto, a descrição do ponto do local de início do ponto do tour. 116 00:06:17,630 --> 00:06:19,090 ‫E agora você 117 00:06:19,090 --> 00:06:21,480 ‫começa a ver por que faz sentido 118 00:06:21,480 --> 00:06:24,450 ‫realmente criar todos esses dados diferentes que criamos aqui. 119 00:06:24,450 --> 00:06:28,010 ‫Certo, a seguir vamos usar as datas de início 120 00:06:28,010 --> 00:06:29,520 ‫e, portanto, lembre-se. 121 00:06:29,520 --> 00:06:32,010 ‫Que esta é uma matriz, ok. 122 00:06:32,010 --> 00:06:34,900 ‫Porque agora o que queremos em nossa visão 123 00:06:34,900 --> 00:06:38,680 ‫geral é basicamente a data em que a próxima turnê começa. 124 00:06:38,680 --> 00:06:41,710 ‫Então, é isso que significa ícone com calendário 125 00:06:41,710 --> 00:06:42,923 ‫neste caso. 126 00:06:44,260 --> 00:06:46,470 ‫Então, esse é basicamente 127 00:06:46,470 --> 00:06:50,710 ‫o primeiro elemento dessa matriz de datas de início. 128 00:06:50,710 --> 00:06:55,680 ‫Portanto, inicie as datas na posição 0. 129 00:06:55,680 --> 00:06:59,960 ‫Em seguida, temos este dado que diz quantas 130 00:06:59,960 --> 00:07:02,320 ‫paradas existem nesses passeios. 131 00:07:02,320 --> 00:07:03,670 ‫Basicamente, isso 132 00:07:03,670 --> 00:07:06,000 ‫significa quantos locais temos e, 133 00:07:06,000 --> 00:07:09,210 ‫novamente, usaremos os locais e, desta vez, 134 00:07:09,210 --> 00:07:11,120 ‫não o local 135 00:07:11,120 --> 00:07:13,770 ‫de início, mas realmente esses locais 136 00:07:13,770 --> 00:07:17,350 ‫e se você quiser especificar quantos locais temos. 137 00:07:17,350 --> 00:07:21,493 ‫Bem, então precisamos contar o comprimento desta matriz, ok. 138 00:07:22,910 --> 00:07:24,560 ‫E tão simples também. 139 00:07:24,560 --> 00:07:27,370 ‫Então, iguale e, em seguida, defina-o com 140 00:07:27,370 --> 00:07:29,830 ‫esta string de modelo porque também 141 00:07:31,840 --> 00:07:36,807 ‫queremos adicionar essa parada e, portanto, o comprimento do ponto dos locais dos 142 00:07:42,850 --> 00:07:45,740 ‫pontos de tour e, finalmente, a quantidade de 143 00:07:45,740 --> 00:07:49,070 ‫pessoas que fazem parte de cada um dos grupos. 144 00:07:49,070 --> 00:07:52,990 ‫Então, as pessoas que podem participar de um passeio e 145 00:07:52,990 --> 00:07:55,110 ‫isso é armazenado no 146 00:07:56,750 --> 00:08:00,053 ‫passeio, mas o tamanho máximo do grupo, lembre-se. 147 00:08:02,440 --> 00:08:03,953 ‫E então gente. 148 00:08:05,950 --> 00:08:08,990 ‫Ótimo, então essa parte está feita 149 00:08:08,990 --> 00:08:12,550 ‫agora e vamos voltar ao nosso site e 150 00:08:12,550 --> 00:08:13,743 ‫testar isso. 151 00:08:15,270 --> 00:08:20,150 ‫E sim lindo, pelo menos quase lindo porque esse 152 00:08:20,150 --> 00:08:23,030 ‫encontro parece meio estranho aqui. 153 00:08:23,030 --> 00:08:28,030 ‫Então, nós realmente queremos apenas vinte e vinte e um de junho, então 154 00:08:28,500 --> 00:08:30,550 ‫não precisamos ser tão 155 00:08:30,550 --> 00:08:32,630 ‫específicos aqui nesta visão geral, ok. 156 00:08:32,630 --> 00:08:37,630 ‫E o que queremos é que seja novamente junho de 2021 157 00:08:38,200 --> 00:08:41,620 ‫e agora é toda essa bagunça e vamos 158 00:08:41,620 --> 00:08:43,560 ‫consertar isso e, 159 00:08:43,560 --> 00:08:45,910 ‫felizmente, isso é realmente muito 160 00:08:45,910 --> 00:08:48,640 ‫fácil com JavaScript, que inclui algumas 161 00:08:48,640 --> 00:08:51,640 ‫funções muito boas para trabalhar com datas. 162 00:08:51,640 --> 00:08:55,100 ‫E tenha em mente que cada uma dessas datas 163 00:08:55,100 --> 00:08:57,920 ‫de início aqui é realmente um 164 00:08:57,920 --> 00:09:01,120 ‫objeto de data em ou banco de 165 00:09:01,120 --> 00:09:06,120 ‫dados e agora podemos usar uma função como esta para string local, ok. 166 00:09:06,510 --> 00:09:09,260 ‫Então, basicamente, ele irá converter essa 167 00:09:09,260 --> 00:09:11,440 ‫data em uma string 168 00:09:11,440 --> 00:09:15,580 ‫legível e aqui podemos passar uma opção para o idioma. 169 00:09:15,580 --> 00:09:18,080 ‫E isso é o inglês para 170 00:09:19,570 --> 00:09:22,580 ‫os EUA e também um objeto com algumas 171 00:09:22,580 --> 00:09:25,481 ‫opções e aqui podemos especificar que queremos 172 00:09:25,481 --> 00:09:27,093 ‫um mês longo. 173 00:09:29,330 --> 00:09:31,870 ‫Então, em vez de apenas uma abreviatura como a 174 00:09:31,870 --> 00:09:32,940 ‫que tínhamos aqui. 175 00:09:32,940 --> 00:09:34,910 ‫então, um de abril, um 176 00:09:34,910 --> 00:09:36,970 ‫de agosto, ele irá imprimi-lo assim. 177 00:09:36,970 --> 00:09:41,560 ‫Então, realmente o nome do mês inteiro e ok e também 178 00:09:41,560 --> 00:09:46,557 ‫dizendo que o ano deve ser numérico e se você quiser 179 00:09:48,380 --> 00:09:50,757 ‫aprender mais sobre essa 180 00:09:50,757 --> 00:09:55,180 ‫função aqui, vá em frente e pesquise no Google, ok. 181 00:09:55,180 --> 00:09:57,810 ‫Então, vamos tentar de 182 00:09:59,550 --> 00:10:02,930 ‫novo e agora parece muito bom, incrível. 183 00:10:02,930 --> 00:10:06,980 ‫Então, vamos continuar e terminar esta última parte aqui com o 184 00:10:06,980 --> 00:10:09,723 ‫preço e os detalhes da avaliação. 185 00:10:11,640 --> 00:10:14,700 ‫E isso está aqui no rodapé do cartão 186 00:10:14,700 --> 00:10:17,150 ‫e aqui está apenas o preço. 187 00:10:17,150 --> 00:10:21,240 ‫Então, igual a vamos realmente deixar lá porque agora ainda precisamos 188 00:10:21,240 --> 00:10:23,810 ‫de uma string de modelo porque o 189 00:10:23,810 --> 00:10:27,910 ‫preço não é apenas esse número, mas na verdade precisamos de 190 00:10:31,370 --> 00:10:34,120 ‫um cifrão extra aqui para o preço 191 00:10:34,120 --> 00:10:35,250 ‫em dólar. 192 00:10:35,250 --> 00:10:36,433 ‫Então, esse aqui, certo. 193 00:10:39,620 --> 00:10:42,410 ‫Em seguida, temos a classificação média aqui. 194 00:10:42,410 --> 00:10:45,300 ‫Então, é isso e já 195 00:10:45,300 --> 00:10:50,300 ‫sabemos que isso se chama classificação média dos pontos do tour. 196 00:10:51,020 --> 00:10:54,560 ‫Então, nós usamos isso tantas vezes, pelo menos eu acredito. 197 00:10:54,560 --> 00:10:59,240 ‫Vamos apenas confirmar que é a média das avaliações e também 198 00:10:59,240 --> 00:11:01,490 ‫a quantidade das avaliações. 199 00:11:01,490 --> 00:11:03,488 ‫Então, vamos apenas copiar isso. 200 00:11:03,488 --> 00:11:05,890 ‫Então, média de avaliações 201 00:11:05,890 --> 00:11:10,073 ‫e agora queremos a quantidade de avaliações. 202 00:11:16,320 --> 00:11:19,270 ‫Tudo bem, mas é claro que isso precisa 203 00:11:23,390 --> 00:11:25,560 ‫ser uma string de modelo 204 00:11:25,560 --> 00:11:30,450 ‫e, em seguida, defina-o como igual e, em seguida, é claro interpolar o nome 205 00:11:30,450 --> 00:11:33,490 ‫da variável aqui e agora, finalmente, precisamos construir a 206 00:11:33,490 --> 00:11:36,220 ‫URL para a página de detalhes, ok. 207 00:11:36,220 --> 00:11:39,180 ‫Portanto, lembre-se disso quando clicarmos em um dos cartões. 208 00:11:39,180 --> 00:11:41,280 ‫Em seguida, ele nos leva 209 00:11:41,280 --> 00:11:44,550 ‫à página de detalhes e, claro, agora precisamos 210 00:11:45,410 --> 00:11:48,800 ‫especificar esse link, pois isso dependerá de cada tour. 211 00:11:48,800 --> 00:11:52,380 ‫Portanto, queremos criar um link para passeios de barra e, 212 00:11:52,380 --> 00:11:54,760 ‫em seguida, lembrar como mencionei antes 213 00:11:54,760 --> 00:11:57,530 ‫que, para renderizar essas páginas, na verdade, queremos 214 00:11:57,530 --> 00:12:00,050 ‫consultar os passeios por seu slug e 215 00:12:00,050 --> 00:12:01,870 ‫não por seu ID. 216 00:12:01,870 --> 00:12:04,620 ‫Como fizemos na API, certo, porque 217 00:12:04,620 --> 00:12:09,620 ‫isso realmente faz com que a URL pareça muito mais agradável, ok. 218 00:12:09,920 --> 00:12:11,973 ‫E então vamos usar isso aqui agora. 219 00:12:13,430 --> 00:12:18,130 ‫Faça um tour dot slug e apenas para explicar 220 00:12:18,130 --> 00:12:20,200 ‫por que começamos 221 00:12:20,200 --> 00:12:23,110 ‫este URL aqui com uma barra. 222 00:12:23,110 --> 00:12:26,230 ‫É porque construir uma URL como esta, começando 223 00:12:26,230 --> 00:12:30,140 ‫apenas com a barra, é chamada de URL relativa e 224 00:12:30,140 --> 00:12:31,620 ‫o que isso 225 00:12:31,620 --> 00:12:35,020 ‫fará é adicionar a esta parte da URL após 226 00:12:35,020 --> 00:12:36,640 ‫o nome do host. 227 00:12:36,640 --> 00:12:41,540 ‫Então, esse host é agora um a sete vírgula zero zero um, mas isso 228 00:12:41,540 --> 00:12:44,170 ‫não é necessário especificar aqui porque, 229 00:12:44,170 --> 00:12:47,710 ‫novamente, ao escrever uma URL relativa como esta, ele 230 00:12:47,710 --> 00:12:51,663 ‫adicionará o que temos aqui a esse nome de host, ok. 231 00:12:53,135 --> 00:12:56,490 ‫Então, vamos recarregar novamente e estamos quase 232 00:12:56,490 --> 00:12:58,930 ‫terminando aqui, mas não 233 00:12:58,930 --> 00:13:00,250 ‫totalmente prontos. 234 00:13:00,250 --> 00:13:01,750 ‫Então, aqui você vê 235 00:13:01,750 --> 00:13:03,820 ‫indefinido e provavelmente fizemos algo errado ali. 236 00:13:03,820 --> 00:13:06,490 ‫E também você vê que aqui não há 237 00:13:06,490 --> 00:13:08,650 ‫espaço entre o preço e 238 00:13:08,650 --> 00:13:11,440 ‫o por pessoa e também aqui o mesmo agora. 239 00:13:11,440 --> 00:13:13,360 ‫Se você passar este botão 240 00:13:13,360 --> 00:13:15,550 ‫aqui, então embaixo no canto esquerdo. 241 00:13:15,550 --> 00:13:18,400 ‫Então, aqui embaixo você verá a URL que 242 00:13:18,400 --> 00:13:19,780 ‫acabamos de construir. 243 00:13:19,780 --> 00:13:21,040 ‫Pode realmente clicar 244 00:13:21,040 --> 00:13:23,010 ‫nele e ele nos dará este 245 00:13:23,010 --> 00:13:25,470 ‫erro porque é claro que não definimos esta 246 00:13:25,470 --> 00:13:27,390 ‫rota ainda, mas você vê 247 00:13:27,390 --> 00:13:30,660 ‫que parece muito bom aqui com os passeios cortando o 248 00:13:30,660 --> 00:13:35,660 ‫caminhante da floresta em vez de ter aquela identificação feia lá em cima, ok . 249 00:13:35,950 --> 00:13:38,270 ‫Mas de qualquer maneira, vamos agora consertar esse 250 00:13:38,270 --> 00:13:39,563 ‫indefinido neste espaço ausente. 251 00:13:40,610 --> 00:13:44,550 ‫Então, vamos dar uma olhada neste. 252 00:13:44,550 --> 00:13:49,270 ‫Bem, parece correto, na verdade, classificações e quantidade, mas é 253 00:13:50,290 --> 00:13:54,690 ‫claro que estamos perdendo esse ponto turístico, certo. 254 00:13:54,690 --> 00:13:57,770 ‫Você provavelmente já estava vendo aquele. 255 00:13:57,770 --> 00:13:59,360 ‫Agora, sobre aquele espaço que falta. 256 00:13:59,360 --> 00:14:02,950 ‫Há algo novo que preciso mostrar a vocês sobre o 257 00:14:02,950 --> 00:14:06,050 ‫pug, que é a chamada via canalizada vazia 258 00:14:07,090 --> 00:14:08,950 ‫ou linha, na verdade. 259 00:14:08,950 --> 00:14:11,080 ‫Então, sempre que precisarmos de 260 00:14:11,080 --> 00:14:13,220 ‫um espaço real entre dois elementos 261 00:14:13,220 --> 00:14:15,610 ‫de bloco inline que são essas 262 00:14:15,610 --> 00:14:17,210 ‫bandas, precisamos criar 263 00:14:17,210 --> 00:14:20,840 ‫manualmente esse espaço usando essa linha canalizada aqui, ok. 264 00:14:20,840 --> 00:14:23,180 ‫E a mesma coisa aqui 265 00:14:23,180 --> 00:14:25,260 ‫embaixo, porque do 266 00:14:25,260 --> 00:14:27,660 ‫contrário, como acabamos de ver, 267 00:14:27,660 --> 00:14:31,120 ‫simplesmente colará todos esses elementos juntos, tudo bem. 268 00:14:31,120 --> 00:14:33,880 ‫Então, agora tudo isso deve 269 00:14:33,880 --> 00:14:37,260 ‫ser consertado e aquele espaço ainda não está 270 00:14:37,260 --> 00:14:40,070 ‫lá e isso é porque esquecemos algo. 271 00:14:40,070 --> 00:14:41,750 ‫Então, vamos 272 00:14:41,750 --> 00:14:44,080 ‫voltar e realmente precisamos adicionar 273 00:14:44,080 --> 00:14:47,600 ‫manualmente esse espaço vazio aqui e aqui. 274 00:14:47,600 --> 00:14:50,290 ‫Então, essa linha vazia aqui basicamente cria um 275 00:14:50,290 --> 00:14:53,390 ‫espaço para nós onde podemos criar conteúdo fora de 276 00:14:53,390 --> 00:14:55,020 ‫um elemento e isso 277 00:14:55,020 --> 00:14:57,690 ‫é basicamente o que esse espaço é. 278 00:14:57,690 --> 00:14:59,930 ‫Então, esse espaço aqui que acabamos de colocar aqui. 279 00:14:59,930 --> 00:15:03,180 ‫Então, esse espaço vazio é o conteúdo que não 280 00:15:03,180 --> 00:15:05,830 ‫está dentro de nenhum desses dois elementos. 281 00:15:05,830 --> 00:15:08,690 ‫E, novamente, para sermos capazes de fazer isso, é 282 00:15:08,690 --> 00:15:10,880 ‫para isso que precisamos deste pipeline. 283 00:15:10,880 --> 00:15:13,423 ‫Então, esses dois pipelines. 284 00:15:14,960 --> 00:15:17,020 ‫Então, tente de novo e 285 00:15:17,020 --> 00:15:18,870 ‫agora realmente aqui vai 286 00:15:18,870 --> 00:15:21,670 ‫o espaço que acabamos de criar, perfeito. 287 00:15:21,670 --> 00:15:25,010 ‫E com isso nós realmente encerramos esta palestra 288 00:15:25,010 --> 00:15:28,140 ‫e este primeiro website de aparência impressionante 289 00:15:28,140 --> 00:15:32,110 ‫ou parte do website que acabamos de construir aqui juntos. 290 00:15:32,110 --> 00:15:35,651 ‫Então, um momento para apreciar o quão legal 291 00:15:35,651 --> 00:15:38,280 ‫isso realmente é e também 292 00:15:38,280 --> 00:15:42,340 ‫como todo esse código que escrevemos juntos realmente funciona, ok. 293 00:15:42,340 --> 00:15:44,560 ‫E depois disso, volte para que 294 00:15:44,560 --> 00:15:47,693 ‫possamos construir juntos a página de visão geral do tour.