Bem vindo de volta.
Então, aprendemos o básico do flask, entendemos o que os servidores fazem e também sabemos o que os navegadores
fazem.
Mas vamos ser honestos aqui.
Isso é meio chato.
Quer dizer, isso não é impressionante.
Se você mostrar isso a um possível empregador, eles vão olhar para você como uma pessoa maluca.
Então, vamos construir um portfólio de boa aparência apenas com base no que aprendemos até agora.
Agora tenho um presentinho para você.
É o fato de que você não terá que escrever seu próprio HTML e JavaScript porque, novamente, este não é um curso
de desenvolvimento web.
E, felizmente para nós, se você procura no Google e está online por algo como modelos gratuitos ou
modelos gratuitos de HTML, você pode encontrar alguns sites realmente bonitos que você pode usar gratuitamente.
Por exemplo, vamos dar uma olhada no universo aqui e vou criar um link para este recurso para que você possa dar
uma olhada por si mesmo se eu o visualizar.
Veja só, você tem um pequeno site ou página de portfólio que pode usar.
Como isso é legal, e na verdade já é compatível com tablets e dispositivos móveis, então tudo já vem pré-montado para
você.
Isso é muito legal, certo?
Então, como podemos usar isso?
Bem, vamos apenas baixá-lo e, por falar nisso, conforme você segue, você pode realmente usar qualquer um
destes que desejar.
Mas, por enquanto, vamos usar o universo um, só porque há um pequeno astronauta aqui, parece muito
legal.
Vamos apenas fazer o download e ver o que acontece.
Tudo bem.
Eu recebo uma pequena pergunta dizendo, como queremos fazer o download do modelo?
Em nosso caso, queremos escolher HTML.
E aí está, nós pegamos uma pequena pasta Zeph legal e agora temos isso baixado, então vamos
abri-lo.
E oh, cara, isso é um monte de arquivos e pastas.
Então, o que devemos pegar daqui?
Bem, há algumas coisas.
Primeiro, esta é a página de amostra, na verdade não precisamos dela, então vamos apenas movê-la para a lixeira.
Em seguida, temos ativos.
Esses são, bem, diferentes ativos para a nossa página funcionar, como a página do astronauta.
Então, vamos manter isso por perto.
E então temos nossas páginas HTML.
O que definitivamente precisamos.
E então parece que temos alguns arquivos JavaScript e arquivos CSS.
Agora há um ponto gov aqui, que é o que chamamos de arquivo compactado, um arquivo compactado G compactado.
Portanto, esta é apenas uma forma de o servidor enviar um arquivo ou o arquivo JavaScript, que você pode ver que tem cento
e trinta e oito kilobytes, mas em uma forma compactada, portanto, quarenta e quatro kilobytes.
Então, dessa forma, estamos enviando menos dados para o front end.
E também temos algo como o mapa, que realmente nos ajuda durante a depuração.
Mas, em nosso caso, não precisamos nos preocupar com isso por enquanto.
Então, vamos apenas remover todos os arquivos gipped e map.
Portanto, vamos movê-los para a lixeira de modo que tenhamos apenas um arquivo e um arquivo JavaScript e, em seguida, todos
os outros serão arquivos HTML para nossas diferentes páginas.
Agora, o que vamos fazer é copiar e mover para a pasta do nosso projeto.
Lembra desta pasta aqui?
Portanto, idealmente, movemos os arquivos ASML para os modelos e os arquivos estáticos.
Esses são os arquivos CSIS e JavaScript e talvez os ativos aqui.
Então essas são as imagens aqui.
Então vamos fazer isso.
Tenho meu servidor da Web aqui.
Vou primeiro apenas copiar e colar o que acabamos de copiar.
E vamos mover todos os nossos arquivos HTML.
Em nossos modelos.
E sabe de uma coisa, vamos remover nossos modelos existentes também, porque não precisamos mais deles,
temos o lindo HTML Fana.
E depois de ter tudo isso, temos um novo índice HMO que vai ser muito mais bonito do que
nosso antigo site, então queremos usá-lo.
Então, vamos mover tudo isso para os modelos.
E então vamos fazer os trabalhos e bem-sucedidos, bem como a pasta de ativos para o estático.
Incrível.
Agora que configuramos isso, vamos voltar ao nosso projeto e dar uma olhada nele.
Temos muito mais e-mail que não recebemos, mas felizmente já foi criado para nós.
Agora, a última parte da configuração é que, como movemos nossos arquivos, precisamos ajustar os links entre HTML,
CSS, JavaScript e todos os arquivos de ativos.
Então, se rolarmos, vamos para o HTML indexado.
Vemos que estamos procurando o Vaticano nos ativos do Vaticano, mas como isso está em uma pasta estática, temos
que adicionar estática aqui.
Então, vamos descobrir onde mais estamos usando os ativos aqui.
Tudo bem, então parece que vamos aumentar um pouco mais.
Portanto, parece aqui para a nossa imagem de fundo.
Estamos mais uma vez procurando a imagem do espaço, mas é como sabemos na pasta estática
e vamos ver onde mais temos aqui, além de estática.
Vamos continuar estáticos. Tudo bem.
Está tudo bem.
Agora temos a pasta estática e temos que nos certificar de que adicionamos uma barra na frente do ponto.
Ponto significa apenas o diretório atual e, em seguida, procure na pasta estática.
Então, vamos voltar e fazer isso para tudo.
Aqui vamos nós.
E lá vamos nós.
Agora, vamos salvar isso, e não acho que terminamos completamente ainda, mas por enquanto, vamos entrar
em nosso servidor, DCPI.
E para nossa rota de casa, vamos remover o que tínhamos antes.
E vamos chamá-la de minha função inicial que não leva parâmetros e, em vez disso, ela apenas retornará para nós.
Nosso e-mail de índice sem parâmetros de Pastan.
Então, vamos salvar, voltar para nossa página.
Ou meu site e veja o que recebemos quando atualizamos.
Tudo bem, esse é um site muito, muito feio, mas parece que pelo menos estamos exibindo algo, mas
imediatamente percebemos que, hmm, parece que não houve sucesso sendo aplicado.
Parece que temos algum e-mail, mas os links também não estão funcionando.
Então, mais uma vez, é porque temos que atualizar os links entre os arquivos.
Então o que faremos é voltar ao estudo do índice e na tag head, vemos que temos nossa folha de estilo, nosso arquivo
de acesso.
Mas, novamente, temos que atualizar isso para mantê-lo no estático.
Pasta.
Assim como o arquivo JavaScript, que se rolarmos até o final, temos o arquivo aqui, que
mais uma vez estará na pasta estática.
Tudo bem, vamos salvar.
E volte e veja se isso melhora as coisas.
E veja isso, isso é muito legal.
Veja bem, isso parece um pouco grande porque eu aumento o tamanho do meu site executando os comandos mais e
menos para que possamos ver melhor.
Mas isso é incrível.
Agora, se eu clicar em vamos dizer que funciona, hmm, obtenho trabalho, estudo HTML não existe.
Então, como podemos consertar isso?
Já sabemos fazer isso, certo?
Tudo o que precisamos fazer é atualizar essas rotas diferentes para que apontem para o modelo apropriado.
Agora, no próximo vídeo, vou mostrar como fazer isso.
Mas quero que você tente fazer isso sozinho, porque já aprendemos isso agora.
Portanto, tente fazer o site funcionar exatamente como o fizemos.
Aqui em nossos modelos de mash up, e vejo vocês no próximo vídeo.