Nella scorsa lezione abbiamo introdotto il programma Brackets che utilizzeremo per sviluppare un sito Internet e grazie al quale avremo modo di velocizzare tutti i processi necessari alla corretta esecuzione del nostro lavoro. Passiamo ora alla personalizzazione dell'ambiente di sviluppo.
Come personalizzare l'area di lavoro con Brackets
Dopo aver creato il primo documento HTML, procediamo al salvataggio dello stesso attraverso la Top Bar e alla voce "File > Salva come…".
Prima di salvare il documento, creiamo una cartella dedicata dove salveremo tutti i file che creeremo. Per fare ciò dobbiamo cliccare sul pulsante "New folder" e indicare un nome, per questo esempio ha scelto il nome brackets-sito-web.
All'interno della cartella appena creata assegniamo il nome del primo file che per comodità chiameremo index.html e procediamo con il salvataggio.
Per facilitare la lettura dei file ed il collegamento tra di essi possiamo includere la cartella di lavoro appena creata all'interno di Brackets, in questo modo avremo la visione di tutti i file a lato della main area e potremo inoltre lavorare in maniera diretta e più veloce.
Per importare una cartella all'interno di Brackets dobbiamo posizionare il mouse nella sidebar di sinistra e cliccare sul progetto di esempio chiamato "Primi Passi" per poi procedere con "Apri cartella...":
Ora basterà semplicemente cercare la nostra cartella creata in precedenza (brackets-sito-web), selezionarla e cliccare su "Apri/Open".
A questo punto potremo vedere all'interno della sidebar di sinistra la nostra cartella di lavoro da cui accedere con estrema semplicità ai file che comporranno il nostro progetto e grazie alla quale potremo modificare ogni file in tempi estremamente rapidi.
Preparazione degli strumenti di lavoro
Adesso che abbiamo integrato la cartella di lavoro all'interno di Brackets, possiamo procedere con la preparazione degli strumenti che ci consentiranno di lavorare in modo migliore ed ottimizzare i tempi di sviluppo.
Brackets consente infatti di installare ed utilizzare delle funzionalità aggiuntive oltre a quelle presenti di default. Per accedere a tali strumenti dobbiamo raggiungere l'icona situata all'interno della sidebar di destra contraddistinta con il simbolo del Brick/Mattoncino e cliccare su di essa.
A questo punto noteremo l'apertura di una schermata contenente quattro diverse tab, concentriamoci sulla prima chiamata "Disponibili". All'interno di questa prima scheda troviamo l'elenco delle estensioni ovvero gli strumenti di lavoro e funzionalità aggiuntive che sarà possibile installare all'interno di Brackets.
Una volta installate, le nuove estensioni diventeranno parte del software e consentiranno di velocizzare la realizzazione del lavoro ed effettuare operazioni a volte complesse in maniera estremamente semplice.
Autosave every edit!
La prima estensioni che installiamo si chiama Autosave every edit!. Immagino che tu abbia già capito per quale funzione viene usata, come dice anche il nome infatti questa estensione consente di salvare in maniera automatica i documenti dopo uno specifico lasso di tempo.
Cerchiamo quindi il nome all'interno della barra di ricerca e procediamo all'installazione cliccando sul tasto "Installa". Successivamente attiviamo l'estensione attraverso la voce "File > Enable Autosave" presente all'interno della Top Bar di Brackets.
In maniera automatica ogni modifica che andremo ad eseguire sarà salvata dopo un solo secondo.
Qualora volessimo cambiare il tempo di auto-salvataggio non dovremo far altro che cliccare sulla voce sottostante chiamata "File > Autosave config" e modificare tale parametro.
HTML Skeleton
Proseguiamo, dopo aver messo in sicurezza il lavoro grazie al salvataggio automatico possiamo passare all'installazione del secondo strumento utile allo sviluppo di un sito Web chiamato HTML Skeleton.
Torniamo all'interno del repository delle estensioni e cerchiamo il nome di quest'ultima estensione all'interno della barra di ricerca, quindi procediamo con l'installazione.
A questo punto notiamo che all’interno della sidebar di destra è comparsa una nuova icona interamente dedicata all'utilizzo dello strumento.
Clicchiamo su di essa e analizziamo le voci contenute all'interno della finestra dedicata.
Questa estensione consente di inserire delle stringhe di codice predefinite ed ovviamente modificarle a piacimento una volta introdotte nel documento.
Emmet
Altro strumento che tornerà molto utile durante lo sviluppo del sito Web che andremo a sviluppare nelle prossime lezioni si chiama Emmet.
Dopo averlo installato attraverso la solita procedura, vediamo come funziona. Emmet è un'estensione che consente di abbreviare la scrittura del codice utilizzando istruzioni specifiche.
Lo scopo dello strumento è quello di ridurre il tempo di scrittura attraverso un linguaggio di semplice comprensione. Ipotizziamo infatti di voler creare due elementi <div> e di voler inserire al loro interno altri due elementi <p>, la corretta struttura sarà la seguente:
<div>
<p><p>
<div>Grazie all'utilizzo dell’estensione Emmet potremo ottimizzare la scrittura del codice attraverso la seguente istruzione:
div>div>p*2Stiamo quindi sfruttando la scrittura semplificata di Emmet per creare due elementi <div> con all'interno due elementi <p>.
Per visualizzare il risultato finale, dopo aver scritto l'istruzione attraverso le regole di Emmet basterà cliccare il tasto TAB della tastiera oppure andare all'interno della Top Bar di Brackets alla voce "Emmet > Expand Abreviation".
Avremo modo di entrare nel dettaglio di Emmet e delle istruzioni che mette a disposizione durante le prossime lezioni.
Installare un tema per lo sviluppo
Infine per organizzare al meglio l'ambiente di lavoro è importante avere un tema di sviluppo su misura per le nostre preferenze, in maniera da poter lavorare meglio, non distrarsi durante la scrittura e facilitare inoltre la riconoscibilità dei tag.
Brackets dispone di centinaia di temi, i quali modificano l'aspetto dell'area di lavoro assegnando colori differenti agli elementi. Di default Brackets fornisce due temi, una versione chiara e una versione scura, assegnabili attraverso la sezione "Vista > Temi…".
Nel caso volessimo aggiungerne di altri dovremmo accedere al repository delle estensioni ed attraverso la tab chiamata "Temi" selezionare ed installare il tema che preferiamo.
A seguito dell'installazione non dovremo far altro che tornare all'interno della voce di menu "Vista > Temi…" e selezionare il nuovo tema come predefinito.
