Welkom terug.
Dus we hebben de basis van Flask geleerd, we begrijpen wat servers doen en we weten ook wat browsers
doen.
Maar laten we hier eerlijk zijn.
Dit is een beetje saai.
Ik bedoel, dit is niet indrukwekkend.
Als je dit aan een mogelijke werkgever laat zien, gaan ze je als een gek aankijken.
Laten we dus een mooi ogend portfolio samenstellen op basis van wat we tot nu toe hebben geleerd.
Nu heb ik een klein cadeautje voor je.
Dat is het feit dat u uw eigen HTML en JavaScript niet hoeft te schrijven, want nogmaals, dit is geen
cursus voor webontwikkeling.
En gelukkig voor ons, als je Google en je bent online voor zoiets als gratis sjablonen of HTML-vrije
sjablonen, kun je een aantal echt mooi ogende websites vinden die je gewoon gratis kunt gebruiken.
Laten we bijvoorbeeld eens kijken naar universum hier en ik zal naar deze bron linken, zodat je zelf ook een kijkje
kunt nemen als ik er een voorbeeld van bekijk.
Kijk dat eens, je hebt een leuke kleine website of portfoliopagina die je gewoon kunt gebruiken.
Hoe gaaf is dat, en het is eigenlijk al tablet- en mobielvriendelijk, dus alles is al voor je
gebouwd.
Dat is best cool, toch?
Dus hoe kunnen we dit gebruiken?
Nou, laten we het gewoon downloaden en trouwens, terwijl je verder gaat, kun je eigenlijk elke van deze gebruiken
die je wilt.
Maar laten we voor nu gewoon het universum gebruiken, alleen omdat er hier een kleine astronaut is, ziet het er best
cool uit.
Laten we dit gewoon downloaden en kijken wat er gebeurt.
Oke.
Ik krijg een kleine vraag die zegt: hoe willen we de sjabloon downloaden?
In ons geval willen we HTML kiezen.
En daar ga je, we krijgen een leuke kleine Zeph-map en nu hebben we dit gedownload, dus laten we dit
openen.
En oh, jongen, dat zijn een heleboel bestanden en mappen.
Dus wat moeten we hier vandaan halen?
Nou, er zijn een paar dingen.
Ten eerste, dit is de voorbeeldpagina, we hebben deze eigenlijk niet nodig, dus laten we hem naar de prullenbak verplaatsen.
Vervolgens hebben we activa.
Dit zijn, nou ja, verschillende troeven voor onze pagina om te werken, zoals de astronautenpagina.
Dus dat houden we bij.
En dan hebben we onze HTML-pagina's.
Wat we zeker nodig hebben.
En dan lijkt het erop dat we enkele JavaScript-bestanden en CSS-bestanden hebben.
Er is hier een puntregering, wat we een gecomprimeerd bestand noemen, een G-gecomprimeerd, gecomprimeerd bestand.
Dit is dus gewoon een manier voor de server om een bestand of het JavaScript-bestand te verzenden, waarvan je kunt zien
dat het honderdachtendertig kilobytes is, maar in een gecomprimeerde vorm, dus vierenveertig kilobytes.
Dus op deze manier sturen we minder data naar de front-end.
En dan hebben we ook nog zoiets als een kaart die ons echt helpt tijdens het debuggen.
Maar in ons geval hoeven we ons hier voorlopig geen zorgen over te maken.
Laten we dus gewoon alle gipped- en kaartbestanden verwijderen.
Dus we zullen die naar de prullenbak verplaatsen, zodat we maar één bestand en één JavaScript-bestand hebben en dan
zijn alle andere HTML-bestanden voor onze verschillende pagina's.
Wat we nu gaan doen, is dit kopiëren en naar onze projectmap verplaatsen.
Herinner je je deze map hier nog?
Dus idealiter verplaatsen we de ASML-bestanden naar de sjablonen en de statische bestanden.
Dat zijn de CSIS- en JavaScript-bestanden en misschien de activa hier.
Dus dat zijn de afbeeldingen hier.
Dus laten we dat doen.
Ik heb hier mijn webserver.
Ik ga eerst gewoon kopiëren en plakken wat we zojuist hebben gekopieerd.
En laten we al onze HTML-bestanden verplaatsen.
In onze sjablonen.
En weet je wat, laten we ook onze bestaande sjablonen verwijderen, omdat we ze niet meer nodig hebben,
we hebben de mooie HTML Fana.
En dan hebben we dit allemaal. We hebben een nieuwe index HMO die een stuk mooier zal zijn dan onze
oude website, dus die willen we gebruiken.
Dus laten we dat allemaal naar sjablonen verplaatsen.
En laten we dan de taken en succesvol doen, evenals de map met activa in de statische map.
Geweldig.
Dus nu we dat hebben opgezet, laten we teruggaan naar ons project en dat bekijken.
We hebben veel meer e-mail dan we niet zijn geweest, maar die is gelukkig al voor ons aangemaakt.
Het laatste stukje setup is dat omdat we onze bestanden hebben verplaatst, we de koppelingen tussen de
HTML, CSS, JavaScript en alle activabestanden moeten aanpassen.
Dus als we scrollen, gaan we naar geïndexeerde HTML.
We zien dat we het Vaticaan zoeken in activa Vaticaan, maar omdat dit in een statische map staat, moeten
we hier static toevoegen.
Dus laten we eens kijken waar we de middelen hier nog meer gebruiken.
Oké, dus het lijkt erop dat we dit een beetje groter maken.
Dus het ziet er hier uit voor onze achtergrondafbeelding.
We zijn opnieuw op zoek naar de ruimteafbeelding, maar dat is zoals we weten in de statische map
en laten we eens kijken waar we nog meer hebben, evenals statisch.
Laten we statisch doorgaan. Oké.
Alles is goed.
Nu hebben we de statische map en we moeten ervoor zorgen dat we een schuine streep voor de punt plaatsen.
Punt betekent gewoon huidige map en kijk dan in de statische map.
Dus laten we teruggaan, zorg ervoor dat we dat voor alles doen.
Daar gaan we.
En daar gaan we.
Laten we dit opslaan, en ik denk dat we nog niet helemaal klaar zijn, maar laten we nu naar
onze server gaan, DCPI.
En laten we voor onze thuisroute verwijderen wat we eerder hebben gehad.
En laten we het gewoon mijn thuisfunctie noemen die geen parameters nodig heeft en in plaats daarvan gewoon voor ons terugkeert.
Onze index-e-mail zonder Pastan-parameters.
Dus laten we opslaan ga terug naar onze pagina.
Of mijn website en kijk wat we krijgen als we verversen.
Oké, dat is een mooie, behoorlijk lelijke website, maar het lijkt alsof we tenminste iets weergeven, maar we merken
meteen dat, hmm, het lijkt alsof er geen succes wordt toegepast.
Het lijkt erop dat we wat e-mail hebben, maar de links werken ook niet.
Dus nogmaals, dit komt omdat we de koppelingen tussen de bestanden moeten bijwerken.
Dus wat we zullen doen is eigenlijk teruggaan naar indexstudie en in de head-tag zien we dat we onze stylesheet als ons
toegangsbestand hebben.
Maar nogmaals, we moeten dit bijwerken om het in de static te hebben.
Map.
Naast het JavaScript-bestand, dat als we helemaal naar beneden scrollen, hebben we het bestand hier, dat
opnieuw in de statische map zal staan.
Oké, laten we sparen.
En ga terug en kijk of dat de dingen beter maakt.
En kijk eens aan, dat is best cool.
Let wel, dit ziet er een beetje groot uit omdat ik de grootte van mijn website vergroot door het commando plus en min uit
te voeren, zodat we het beter kunnen zien.
Maar dat is best geweldig.
Nu, als ik klik op laten we zeggen dat het werkt, hmm, ik krijg werkstudie HTML bestaat niet.
Dus hoe kunnen we dat oplossen?
We weten al hoe dat moet, toch?
Het enige dat we hoeven te doen, is deze verschillende routes bij te werken, zodat ze naar de juiste sjabloon verwijzen.
In de volgende video laat ik je zien hoe je dat doet.
Maar ik wil dat je dit zelf probeert te doen, omdat we dit inmiddels hebben geleerd.
Probeer dus de website precies zo te laten werken als wij hem hadden.
Hier op onze mash-up-sjablonen, en ik zie je in de volgende video.