Ciao, oggi finalmente scriveremo del codice, e
ti spiegherò come puoi usare un editor.
Una delle più grandi insidie che ho visto fare molti dei miei studenti è che ascoltano
troppo attentamente quello che sto dicendo, piuttosto che cercare di immergersi e
iniziare a codificare, se stessi.
Quindi, mentre ti incoraggio a stare seduto e guardare quello che faro' adesso,
tra un po' spero che tu ti sieda e tu decida con me.
Il primo passo è che devi creare e modificare i tuoi file.
Una delle più grandi insidie che incontrerai è che
salverai i tuoi file dappertutto, non sarai in grado di trovarli in seguito.
Decidi quindi come organizzerai i tuoi file.
Come chiamerai la tua cartella?
Dove lo metterai?
In secondo luogo, è necessario decidere su una convenzione di denominazione.
Questo e' solo un modo elegante per dire di decidere come nominare i tuoi file.
Quindi, anche se molte persone usano un Mac e ti è permesso utilizzare spazi nei
nomi dei file, questo non è qualcosa che vuoi fare quando scrivi codice.
Quindi decidi che se hai due parole che vuoi mettere insieme,
userai i caratteri di sottolineatura per collegarli o userai qualcosa che chiamiamo camelCase,
dove metti in maiuscolo la prima lettera di ogni parola.
Ricorda, non usare mai spazi ed
essere molto coerente con la tua maiuscola se hai intenzione di usarlo.
Infine, è necessario decidere su un editor.
Se si utilizza un computer Windows, Blocco note è già integrato.
Puoi anche considerare l'utilizzo di Notepad ++ o Sublime.
Se usi un Mac, TextEdit è l'editor predefinito,
sebbene molte persone utilizzino anche TextWrangler.
Userò Sublime per tutto il resto del corso, ma per oggi
vi mostrerò esempi di come modificare anche in Blocco note e TextEdit.
Quindi, per iniziare, esaminiamo rapidamente i cinque passaggi che
faremo, alcuni di loro ripetutamente.
Inizierai aprendo il tuo editor e poi salverai il file,
aggiungerai dei contenuti, salverai di nuovo il file e aprilo nel tuo browser.
Voglio guidarti attraverso un rapido esempio, e
userò Sublime per farlo.
Ma non ti preoccupare, vado avanti e
ti mostrerò anche altri modi per farlo.
Quindi ho portato qui il mio editor Sublime, un bel file nero.
Comincerò andando a archiviare.
E salvare.
E lo chiamerò solo firstpage.html.
Ora una delle cose che devi decidere subito è dove
salvarlo.
Speriamo che tu abbia deciso su questo prima ancora di iniziare a lavorare.
Terro' la mia in una cartella chiamata pagine web che ho messo sul mio desktop.
Ma puoi scegliere qualsiasi cosa qui, o anche se vuoi,
se fai clic sul lato qui, puoi creare una nuova cartella.
Quello che non vuoi fare è salvare tutto il codice sul desktop.
Andiamo a salvare.
E ora, anche se ci sono molte volte che ti costringerò a sederti e
guardarmi scrivere orribilmente sullo schermo, questa, solo per risparmiare tempo,
vado avanti e imbrogliare e incollare in un codice che ho già scritto.
Come potete vedere, ho il mio tipo di dottore, la sezione della testa e il corpo.
Nella testa, ho incluso la mia codifica e il mio titolo.
Nel corpo, stiamo per salutare.
Sono entrato e l'ho salvato usando Ctrl+S.
Puoi sempre fare File> Salva, ma trovo che Ctrl+S sia molto più veloce.
E per ogni editor che usi ci sono questi piccoli
tasti utili per aiutarti a sapere se hai cambiato o meno qualcosa.
Quindi se guardi in questo momento firstpage.html, che potrebbe essere difficile
da vedere per te, se dovessi entrare e cambiare qualcosa.
In realtà si ottiene un piccolo cerchio per farti sapere che non si risparmia da
un po' di tempo.
Così sono andato avanti, ho creato contenuti e ora è il momento per me di aprire la mia pagina.
Un modo per farlo è dirigermi qui nella mia cartella.
E oh, ecco firstpage.HTML.
Per me, c'è una piccola icona di Chrome fuori di lato.
Per te, potrebbe essere un browser diverso.
Ho intenzione di andare avanti e fare clic su di esso e portare la mia FirstPage, e ho successo.
Non posso sottolineare abbastanza che la maggior parte delle volte quando digiti qualcosa all'inizio,
in realtà non funzionerà per te.
Per me, fortunatamente, ho il potere di editing.
Non hai idea che in realtà mi ci siano voluti alcuni tentativi per far funzionare quel file,
perché stavo scherzando con alcune cose.
Durante tutto il corso,
cercherò di mostrarti le aree in cui potresti avere un problema.
Speriamo che non lo farai, ma se lo fai, sono tutti molto semplici da sistemare.
Uno dei problemi più comuni è che quando fai clic con il pulsante destro
del mouse sul file, invece di aprirsi bene nel browser, apre invece il tuo editor.
Se vuoi risolvere questo problema, tutto quello che devi fare è fare clic con il pulsante destro del mouse sul file e
selezionare Apri con.
Un altro problema che accade un bel po 'è che quando apri il tuo file, invece
di vedere una pagina web ben formattata, invece di vedere in realtà tutti i tuoi tag.
Quando ciò accade, è necessario controllare l'estensione del file e
assicurarsi che dicano .html, e non qualcosa come .text o .rtf.
Un altro problema che si verifica un po 'è che cambi il tuo codice, ma
la tua pagina sembra esattamente la stessa.
Ci sono due ragioni per cui questo tende ad accadere.
Uno è che devi fare qualcosa chiamato aggiornare il tuo browser.
Questo significa solo che carichi i contenuti.
La seconda cosa che accade abbastanza spesso è che hai dimenticato di verificare il
nome del file.
Lascia che ti mostri un esempio di questo.
Quindi torniamo al nostro file originale.
Come potete vedere, ho scritto Hello World qui.
Questa è una cosa molto informatica da dire e
dato che sto cercando di sembrare più normale, cambierò questa cosa in Hello Everybody.
Vado dentro e salvero' il mio fascicolo.
Fatto.
Beh, quando torno alla mia pagina web, c'e' ancora scritto «Ciao Mondo».
Non e' cambiato e sono un po' arrabbiata per questo.
Quindi, ora ricordo che è spesso necessario aggiornare la tua pagina.
Ci sono molti modi per farlo,
in genere si può andare alla piccola area circolare qui e fare clic su Aggiorna.
È possibile fare clic con il pulsante destro del mouse e fare clic su Ricarica o si può anche andare a Visualizza, scusa.
Puoi anche farlo attraverso la barra degli strumenti in alto.
Quindi, vado avanti e mi rinfremo proprio qui.
E potete vedere ora che ho il «Hello Everything».
L' altro problema che ho menzionato è che a volte le persone cambiano il loro nome di file.
Quindi forse non stai più lavorando sulla tua FirstPage.
Quindi hai deciso che salverò questo come File> Salva come seconda pagina.
Risparmiatelo.
Tornero' qui e aggiornero' il file.
Ciao a tutti.
Beh, non e' successo niente.
Scoprirai che questo accada ancora e ancora e ancora.
Quando hai a che fare con un sacco di file tutti allo stesso tempo,
devi assicurarti che quello che stai guardando sul browser corrisponda a quello
che stai digitando.
Poiché ho cambiato il nome del mio file,
devo ricordarmi di cambiarlo anche qui nella barra degli URL.
Boom.
Un altro problema che si presenta abbastanza spesso è questa idea che si ottiene,
quello che chiameremo, personaggi strani.
Uno dei motivi numero uno per
questo accade è il mio vecchio preferito, copia e incolla.
Ogni volta che ti do il codice e lo stai guardando tramite PowerPoint,
il problema è che quando lo copi e lo incolla, molti dei personaggi non traducono
esattamente nel modo in cui li speravi e ottieni quelli che chiamiamo caratteri strani.
Il colpevole numero uno sono le citazioni.
Quindi ogni volta che stai digitando e hai una sorta di cosa strana che non ti
aspetti, torna indietro e prova a digitare il codice a mano.
Quindi ti ho mostrato come creare e modificare un file in Sublime.
Ma voglio assicurarmi che tutti abbiano la possibilità di vedere
come posso creare file usando gli editor che hanno sul proprio computer.
Quindi ho anche intenzione di mostrarti un esempio in TextEdit e anche in Blocco note.
Spero davvero che quando guardi questi esempi, avrai il tuo computer fuori,
e scriverai insieme a me.
Vai avanti e metti in pausa, ferma le cose, non andare avanti nel video finché non
ti senti sicuro di essere al punto che ho raggiunto me stesso.
Ciao a tutti!
Ora andremo avanti e fare un file con TextEdit.
E se volessi essere malvagio, vorrei passare attraverso e
mostrarti un esempio molto veloce e semplice di creare un file in TextEdit.
Ma invece, sarò molto onesto con te e ammetto che mi ci sono voluti circa
15 o 20 minuti per capire come creare un file davvero semplice in TextEdit.
Quindi prima, lascia che ti mostri cosa ho sbagliato.
Tutto bene?
Andrò avanti e incollerò il mio codice per la mia pagina molto semplice.
Ok, sbarazziamoci di questo.
Ci siamo. Abbiamo appena ricevuto la nostra intestazione e il nostro contenuto.
Quindi, puoi scriverlo mentre andiamo avanti, o puoi aspettare.
Quindi e' ora che io salvi il file.
E quello che devo fare è che devo assicurarmi di salvare nella cartella corretta
con il nome del file.
Quindi ho intenzione di andare avanti e chiamare questo FirstPage e
ho intenzione di andare qui e voglio assicurarmi di salvare questo come una pagina web.
Quindi una delle opzioni è.html, quindi ho intenzione di fare clic su questo.
So che ho il mio firstpage.html,
è nella cartella che voglio e sento davvero che dovremmo essere pronti per andare.
Quindi ho intenzione di andare avanti e salvarlo.
Ora, vado qui nella cartella delle mie pagine web e la apro.
E si aprirà in Chrome.
Allora, vediamo come va.
Non è quello che speravo quando stavamo registrando questo segmento,
e mi ci è voluto molto tempo per capire cosa stava succedendo.
La prima cosa che sono andato a controllare, lasciami chiudere questo,
è voglio assicurarmi che la mia estensione del file fosse davvero stata .html.
Ed era, non c'era un .txt o un .rtf dopo di esso.
La prossima cosa che sono entrato e
controllato è che tutte le mie citazioni stavano andando nel modo giusto.
Quindi andiamo avanti e mettiamo questi dentro, perché se ricordi,
ti dico sempre che copia e incolla a volte può darti cattive virgolette.
Cosi' possiamo tornare indietro.
Ancora nessuna fortuna.
Se hai intenzione di utilizzare TextEdit, devi effettivamente entrare e
apportare alcune modifiche al programma TextEdit.
Non ha niente a che fare con quello che stai digitando.
Ha a che fare con il programma TextEdit.
Quindi vado avanti, copialo nel caso lo perda e lo ripulisco.
E io vado su TextEdit, selezionare Preferenze, e
si può vedere che abbiamo due opzioni.
Nuovi documenti e Apri e Salva.
Quindi una delle prime cose che diro' e' hey,
ogni volta che ho un nuovo documento, vorrei che fosse in testo normale.
Non rtf, o rich text, ma testo normale.
La seconda cosa che vuoi fare e' andare qui all'apertura.
Vedi i file HTML di visualizzazione è codice HTML?
Andremo avanti e cliccarci sopra.
E poi, infine, la cosa più importante è quando si salvano i file,
vogliamo salvarlo come utf8.
Quindi ho intenzione di fare una pausa qui per un secondo,
solo un secondo, mentre guardi il tuo menu TextEdit.
Vuoi assicurarti di avere queste caselle selezionate e di
averle cambiate in unicode, utf8.
Ok?
Se hai incasinato le cose, vai giù per ripristinare tutte le impostazioni predefinite e riprova.
Chiudero' questo.
Vado avanti e faccio Nuovo, incolla il mio codice.
Oh, e' molto piccolo per te, ma va bene cosi'.
Fare File > Salva.
E chiamiamolo FirstPage2.html.
Puoi vedere subito che dice, vuoi usare l'estensione HTML o
il testo del punto?
E lo diro', usa l'HTML.
Prima di fare clic su questo anche se voglio sottolineare che quaggiù,
sta mostrando che salverà come unicode utf.8.
Posso sbarazzarmi di questo avviso, se voglio, deselezionando questo,
se non viene fornita alcuna estensione, usare.txt.
Quindi useremo html.
Andiamo qui, incrociamo le dita, speriamo per il meglio.
E ora ho una pagina di successo.
Quindi, se stai usando TextEdit, non c'è molto che devi fare,
tranne che per la prima volta che lo configuri.
Assicurati di entrare nelle preferenze.
Da lì ora posso entrare, fare dei cambiamenti, ce l'abbiamo fatta.
Salvare e aggiornare.
Quindi, spero che ora tu possa salvare e modificare con successo un file.
Ok, quindi supponiamo che tu stia usando un PC per creare i tuoi file.
Quello che vuoi fare è probabilmente vuoi usare il Blocco note in un primo momento
poiché è la versione gratuita dell'editor che è già sulla tua macchina.
La prima cosa che ho fatto,
è stato che ho fatto una cartella direttamente sul desktop dove posso tenere i miei file.
So che è piccolo, probabilmente non riesci a vederlo, ma si chiama pagine web.
Se non sai come creare una cartella, basta
sapere, puoi fare clic con il pulsante destro del mouse sulla parte superiore della scrivania, passare a Nuova e Crea una cartella.
Una volta creata la cartella in cui si desidera salvare i file, sto,
subito fuori dal pipistrello, andando avanti e dire File> Salva,
e ho intenzione di nominare questo firstpage.html.
È molto, molto importante includere il.html.
Se non lo includi,
il computer penserà che stai lavorando su qualsiasi altro vecchio tipo di file.
Quindi andro' qui e lo cambiero' da documenti di testo a tutti i file.
Vai avanti e salva.
Ops, esiste gia', ma diro' ok.
Ora, è tempo per me di mettere un po' di contenuto.
Ho intenzione di imbrogliare un po 'qui e copiare e incollare il mio contenuto,
anche se dovrai digitarlo a poco a poco.
Quindi, di nuovo, ho il mio doctype, il mio linguaggio HTML è uguale all'inglese, il
meta charset è uguale a UTF-8, il mio titolo e il mio contenuto.
Giusto per essere al sicuro, andro' qui dentro e rimettero' le mie citazioni.
Perché le citazioni mi rendono sempre nervoso quando faccio copia e incolla, che forse ho messo
in una sorta di carattere che il mio editor non riconoscerà.
Ora che sono abbastanza felice e sicuro di avere le cose che voglio nel mio
file, ho intenzione di andare avanti salvare di nuovo,
andare nella mia cartella, e fare clic su FirstPage.
Ed eccoci qui.
Quindi ora, ogni volta che cambierai il tuo file, puoi tenere
entrambe le finestre aperte se hai la stanza.
Apporta le tue modifiche.
Job, ho un fascicolo.
Salvare.
E ricaricare.
Bel lavoro.
È stato creato un file utilizzando Blocco note.