Ben tornato.
Quindi abbiamo imparato le basi di flask, capiamo cosa fanno i server e sappiamo anche cosa fanno i
browser.
Ma siamo onesti qui.
Questo è un po' noioso.
Voglio dire, questo non è impressionante.
Se lo mostri a un possibile datore di lavoro, ti guarderanno come un pazzo.
Quindi costruiamo un portfolio dall'aspetto gradevole basandoci su ciò che abbiamo imparato fino ad ora.
Ora ho un piccolo regalo per te.
Questo è il fatto che non dovrai scrivere il tuo HTML e JavaScript perché, ancora una volta, questo non è un corso
di sviluppo Web.
E fortunatamente per noi, se sei su Google e sei online per qualcosa come modelli gratuiti o
modelli HTML gratuiti, puoi trovare alcuni siti web davvero carini che puoi usare gratuitamente.
Ad esempio, diamo un'occhiata all'universo qui e ti collegherò a questa risorsa in modo che tu possa dare un'occhiata
anche tu stesso se lo visualizzo in anteprima.
Dai un'occhiata, hai un bel piccolo sito web o una pagina di portfolio che puoi semplicemente usare.
Che bello, ed è già compatibile con tablet e dispositivi mobili, quindi tutto è già pre-costruito per
te.
È piuttosto bello, vero?
Quindi come possiamo usarlo?
Bene, scarichiamolo e comunque, mentre segui, puoi effettivamente usare quello che
vuoi.
Ma per ora, usiamo solo quello dell'universo, solo perché qui c'è un piccolo astronauta, sembra piuttosto
bello.
Scarichiamolo e vediamo cosa succede.
Tutto bene.
Ricevo una piccola domanda che dice, come vogliamo scaricare il modello?
Nel nostro caso, vogliamo scegliere HTML.
Ed ecco qua, abbiamo una piccola cartella Zeph e ora abbiamo questa scaricata, quindi apriamola.
E oh, ragazzo, sono un sacco di file e cartelle.
Quindi cosa dovremmo prendere da qui?
Beh, ci sono alcune cose.
Innanzitutto, questa è la pagina di esempio, in realtà non ne abbiamo bisogno, quindi spostiamola nel cestino.
Successivamente, abbiamo risorse.
Queste sono, beh, diverse risorse per far funzionare la nostra pagina, come la pagina degli astronauti.
Quindi lo terremo in giro.
E poi abbiamo le nostre pagine HTML.
Di cui abbiamo decisamente bisogno.
E poi sembra che abbiamo alcuni file JavaScript e file CSS.
Ora c'è un punto gov qui, che è quello che chiamiamo un file compresso, un file compresso con zip G.
Quindi questo è solo un modo per il server di inviare un file o il file JavaScript, che puoi vedere
è di centotrentotto kilobyte, ma in una forma compressa, quindi quarantaquattro kilobyte.
Quindi in questo modo inviamo meno dati al front-end.
E poi abbiamo anche qualcosa come map che in realtà ci aiuta durante il debug.
Ma nel nostro caso, non dobbiamo preoccuparci di questo per ora.
Quindi rimuoviamo semplicemente tutti i file gipped e map.
Quindi li sposteremo nel cestino in modo da avere solo un file e un file JavaScript e poi tutti gli altri
sono file HTML per le nostre diverse pagine.
Ora, quello che faremo è copiare questo e spostarlo nella cartella del nostro progetto.
Ricordi questa cartella qui?
Quindi, idealmente, spostiamo i file ASML nei modelli e nei file statici.
Questi sono i file CSIS e JavaScript e forse le risorse qui.
Quindi queste sono le immagini qui.
Quindi facciamolo.
Ho il mio server Web qui.
Per prima cosa copio e incollo ciò che abbiamo appena copiato.
E spostiamo tutti i nostri file HTML.
Nei nostri modelli.
E sai una cosa, rimuoviamo anche i nostri modelli esistenti, perché non ne abbiamo più bisogno,
abbiamo il grazioso HTML Fana.
E poi, avendo tutti questi, abbiamo un nuovo indice HMO che sarà molto più carino del nostro
vecchio sito Web, quindi vogliamo usarlo.
Quindi spostiamo tutto questo nei modelli.
E poi facciamo i lavori e con successo così come la cartella delle risorse nella statica.
Stupendo.
Quindi, ora che l'abbiamo impostato, torniamo al nostro progetto e guardiamolo.
Abbiamo molte più e-mail che non abbiamo ricevuto, ma fortunatamente sono già state create per noi.
Ora, l'ultima parte della configurazione è che poiché abbiamo spostato i nostri file, dobbiamo regolare i collegamenti tra
HTML, CSS, JavaScript e tutti i file di risorse.
Quindi, se scorriamo, andiamo all'HTML indicizzato.
Vediamo che stiamo cercando il Vaticano nelle risorse Vaticano, ma poiché questo è in una cartella statica,
dobbiamo aggiungere statico qui.
Quindi scopriamo dove altro stiamo usando le risorse qui.
Va bene, quindi sembra che facciamolo un po' più grande.
Così sembra qui per la nostra immagine di sfondo.
Stiamo ancora una volta cercando l'immagine spaziale, ma è come sappiamo nella cartella statica e
vediamo dove altro abbiamo qui oltre a fare statico.
Continuiamo ad essere statici. Va bene.
Va tutto bene.
Ora abbiamo la cartella statica e dobbiamo assicurarci di aggiungere una barra davanti al punto.
Punto significa solo directory corrente e quindi cerca nella cartella statica.
Quindi torniamo indietro, assicurati di farlo per tutto.
Ci siamo.
E ci siamo.
Ora, salviamo questo, e non credo che abbiamo ancora finito, ma per ora, entriamo nel
nostro server, DCPI.
E per il nostro percorso di casa, rimuoviamo quello che abbiamo avuto prima.
E chiamiamola semplicemente la mia funzione home che non accetta parametri e invece tornerà per noi.
La nostra e-mail di indice senza parametri Pastan.
Quindi salviamo torniamo alla nostra pagina.
O il mio sito Web e guarda cosa otteniamo quando aggiorniamo.
Va bene, è un sito web carino, piuttosto brutto, ma sembra che almeno stiamo visualizzando qualcosa, ma notiamo
subito che, hmm, sembra che non ci sia successo applicato.
Sembra che abbiamo qualche e-mail, ma neanche i link funzionano.
Quindi, ancora una volta, questo è dovuto al fatto che dobbiamo aggiornare i collegamenti tra i file.
Quindi quello che faremo è tornare effettivamente allo studio dell'indice e nel tag head, vediamo che abbiamo il nostro foglio di stile il nostro file
di accesso.
Ma ancora una volta, dobbiamo aggiornarlo per averlo nello statico.
Cartella.
Oltre al file JavaScript, che se scorriamo fino in fondo, abbiamo il file qui, che
ancora una volta sarà nella cartella statica.
Va bene, salviamo.
E torna indietro e vedi se questo migliora le cose.
E guarda questo, è piuttosto bello.
Intendiamoci, questo sembra un po' grande perché aumento le dimensioni del mio sito Web eseguendo i comandi più e
meno solo così possiamo vedere meglio.
Ma è davvero fantastico.
Ora, se clicco su diciamo che funziona, hmm, ho trovato lavoro studio HTML non esiste.
Quindi come possiamo risolverlo?
Sappiamo già come farlo, giusto?
Tutto ciò che dobbiamo fare è aggiornare questi diversi percorsi in modo che puntino al modello appropriato.
Ora, nel prossimo video, ti mostrerò come farlo.
Ma voglio che provi a farlo da solo, perché l'abbiamo imparato ormai.
Quindi cerca di far funzionare il sito esattamente come lo avevamo noi.
Qui sui nostri modelli di mash up e ci vediamo nel prossimo video.