Content de te revoir.
Nous avons donc appris les bases de Flask, nous comprenons ce que font les serveurs et nous savons aussi ce que font les
navigateurs.
Mais soyons honnêtes ici.
C'est un peu ennuyeux.
Je veux dire, ce n'est pas impressionnant.
Si vous montrez cela à un employeur potentiel, il vous considérera comme un fou.
Alors construisons en fait un joli portfolio basé sur ce que nous avons appris jusqu'à présent.
Maintenant, j'ai un petit cadeau pour vous.
C'est le fait que vous n'aurez pas à écrire votre propre code HTML et JavaScript car, encore une fois, ce n'est pas un cours
de développement Web.
Et heureusement pour nous, si vous Google et que vous êtes en ligne pour quelque chose comme des modèles gratuits ou
des modèles HTML gratuits, vous pouvez trouver de très beaux sites Web que vous pouvez simplement utiliser gratuitement.
Par exemple, regardons l'univers ici et je créerai un lien vers cette ressource afin que vous puissiez également jeter un
coup d'œil par vous-même si je le prévisualise.
Vérifiez que vous avez un joli petit site Web ou une page de portfolio que vous pouvez simplement utiliser.
Comme c'est cool, et c'est en fait déjà compatible avec les tablettes et les mobiles, donc tout est déjà pré-construit pour
vous.
C'est plutôt cool, non ?
Alors, comment pouvons-nous utiliser cela?
Eh bien, téléchargeons-le et en passant, au fur et à mesure que vous suivez, vous pouvez réellement utiliser celui
que vous voulez.
Mais pour l'instant, utilisons juste celui de l'univers, juste parce qu'il y a un petit astronaute ici, ça a l'air
plutôt cool.
Téléchargeons simplement ceci et voyons ce qui se passe.
Très bien.
Je reçois une petite question disant, comment voulons-nous télécharger le modèle ?
Dans notre cas, nous voulons choisir HTML.
Et voilà, nous obtenons un joli petit dossier Zeph et maintenant nous l'avons téléchargé, alors ouvrons-le.
Et oh, mon garçon, ça fait beaucoup de fichiers et de dossiers.
Alors, que devrions-nous prendre d'ici ?
Eh bien, il y a quelques choses.
Tout d'abord, il s'agit de la page d'exemple, nous n'en avons pas besoin, alors déplaçons-la simplement dans la corbeille.
Ensuite, nous avons des actifs.
Ce sont, eh bien, différents atouts pour que notre page fonctionne, comme la page astronaute.
Donc, nous allons garder cela autour.
Et puis nous avons nos pages HTML.
Dont nous avons absolument besoin.
Et puis il semble que nous ayons des fichiers JavaScript et des fichiers CSS.
Maintenant, il y a un point gov ici, qui est ce que nous appelons un fichier compressé, un fichier compressé compressé G.
C'est donc juste un moyen pour le serveur d'envoyer un fichier ou le fichier JavaScript, dont vous voyez qu'il
fait cent trente-huit kilo-octets, mais sous une forme compressée, donc quarante-quatre kilo-octets.
De cette façon, nous envoyons moins de données au frontal.
Et puis nous avons aussi quelque chose comme une carte qui nous aide réellement pendant le débogage.
Mais dans notre cas, nous n'avons pas à nous en préoccuper pour l'instant.
Alors supprimons simplement tous les fichiers gipped et map.
Nous allons donc les déplacer dans la corbeille afin que nous n'ayons qu'un seul fichier et un seul fichier JavaScript et que tous
les autres soient des fichiers HTML pour nos différentes pages.
Maintenant, ce que nous allons faire, c'est copier ceci et le déplacer dans notre dossier de projet.
Vous vous souvenez de ce dossier ici ?
Donc idéalement, nous déplaçons les fichiers ASML dans les modèles et les fichiers statiques.
Ce sont les fichiers CSIS et JavaScript et peut-être les actifs ici.
Voilà donc les images ici.
Alors faisons-le.
J'ai mon serveur Web ici.
Je vais d'abord simplement copier et coller ce que nous venons de copier.
Et déplaçons tous nos fichiers HTML.
Dans nos modèles.
Et vous savez quoi, supprimons également nos modèles existants, car nous n'en avons plus besoin, nous
avons le joli HTML Fana.
Et puis, avec tout cela, nous avons un nouvel index HMO qui sera beaucoup plus joli que notre ancien
site Web, nous voulons donc l'utiliser.
Déplaçons donc tout cela dans des modèles.
Et puis faisons les travaux et réussissons ainsi que le dossier des actifs dans la statique.
Impressionnant.
Alors maintenant que nous avons cette configuration, revenons à notre projet et regardons cela.
Nous avons beaucoup plus d'e-mails que nous n'avons pas été, mais heureusement, ils ont déjà été créés pour nous.
Maintenant, la dernière étape de la configuration est que, parce que nous avons déplacé nos fichiers, nous devons ajuster les liens entre
le HTML, le CSS, le JavaScript et tous les fichiers d'actifs.
Donc si on fait défiler, on passe au HTML indexé.
Nous voyons que nous recherchons le Vatican dans les actifs Vatican, mais comme il s'agit d'un dossier statique, nous
devons ajouter static ici.
Voyons donc où nous utilisons les actifs ici.
D'accord, donc on dirait qu'on va faire ça un peu plus gros.
Cela ressemble donc à ici pour notre image de fond.
Nous recherchons à nouveau l'image spatiale, mais c'est comme nous le savons dans le dossier statique
et voyons où nous avons d'autre ici ainsi que statique.
Restons statiques D'accord.
Tout est tout bon.
Nous avons maintenant le dossier statique et nous devons nous assurer d'ajouter une barre oblique devant le point.
Le point signifie simplement le répertoire actuel, puis regardez dans le dossier statique.
Alors revenons en arrière, assurez-vous de le faire pour tout.
On y va.
Et voilà.
Maintenant, gardons ceci, et je ne pense pas que nous ayons encore complètement terminé, mais pour l'instant, entrons
dans notre serveur, DCPI.
Et pour notre route à domicile, supprimons ce que nous avons eu avant.
Et appelons-la simplement ma fonction home qui ne prend aucun paramètre et à la place, elle va simplement revenir pour nous.
Notre e-mail d'indexation sans paramètres Pastan.
Alors économisons revenir à notre page.
Ou mon site Web et voyez ce que nous obtenons lorsque nous actualisons.
D'accord, c'est un joli site assez moche, mais on dirait qu'au moins nous affichons quelque chose, mais tout de suite nous
remarquons que, hmm, on dirait qu'il n'y a pas de succès appliqué.
Il semble que nous ayons des e-mails, mais les liens ne fonctionnent pas non plus.
Donc encore une fois, c'est parce que nous devons mettre à jour les liens entre les fichiers.
Donc ce que nous allons faire est de revenir à l'étude d'index et dans la balise head, nous voyons que nous avons notre feuille de style
notre fichier d'accès.
Mais encore une fois, nous devons mettre à jour cela pour l'avoir dans la statique.
Dossier.
Ainsi que le fichier JavaScript, qui si nous faisons défiler jusqu'en bas, nous avons le fichier ici, qui
sera à nouveau dans le dossier statique.
Très bien, économisons.
Et revenez en arrière et voyez si cela améliore les choses.
Et regardez ça, c'est plutôt cool.
Remarquez, cela a l'air un peu gros car j'augmente la taille de mon site Web en faisant des commandes plus et moins
juste pour que nous puissions mieux voir.
Mais c'est assez génial.
Maintenant, si je clique sur disons que ça marche, hmm, j'obtiens du travail étude HTML n'existe pas.
Alors, comment pouvons-nous résoudre cela?
Nous savons déjà comment faire, n'est-ce pas ?
Tout ce que nous avons à faire est de mettre à jour ces différentes routes afin qu'elles pointent vers le modèle approprié.
Maintenant, dans la prochaine vidéo, je vais vous montrer comment faire cela.
Mais je veux que vous essayiez de le faire vous-même, parce que nous l'avons appris maintenant.
Essayez donc de faire en sorte que le site Web fonctionne exactement comme nous l'avions fait.
Par ici sur nos modèles de mash up, et je vous verrai dans la prochaine vidéo.