Brackets è un programma di editing e scrittura codice open source fornito da Adobe, software house statunitense nota soprattutto per i suoi prodotti di video e grafica digitale quali Photoshop e Illustrator.
Viene rilasciato gratuitamente ed è disponibile sia in versione per Mac che per Windows.
Chi dovrebbe utilizzare questo programma? Brackets è utile per tutti i programmatori e Web Designer che hanno bisogno di un software con cui ottimizzare la scrittura di codice HTML, CSS, PHP, C, C++, JavaScript, jQuery ed altri linguaggi di programmazione e markup.
Perché Brackets è un buon code editor? Brackets si rivela particolarmente efficace in quanto, oltre ad essere estremamente intuitivo, fornisce suggerimenti e aiuti durante la scrittura del codice, rendendo il lavoro di gran lunga più veloce specialmente per chi è alle prime armi con la programmazione o con il Web Design.
In aggiunta, tra le principali features è presente la funzione di Live Editing, o Anteprima, che permette di vedere in maniera istantanea le modifiche per come saranno visualizzate all'interno del browser.
Prima di entrare nel vivo della guida e scoprire tutte le funzionalità del programma, vediamo quali sono i principali punti di forza di Brackets:
- Interfaccia estremamente pulita e facile da utilizzare.
- Disponibili centinaia di temi utili a modificare l'aspetto grafico dell'interfaccia.
- Possibilità di personalizzare i colori del codice, migliorando quindi la scrittura e la riconoscibilità degli elementi.
- Disponibili centinaia di estensioni aggiuntive che permettono di integrare funzionalità avanzate al programma.
- Live editing (Anteprima) che consente la modifica in diretta browser.
- Modifica di più file all'interno della stessa schermata di lavoro.
- Possibilità di estrapolare parti di codice direttamente da file PSD (ottenuti attraverso Photoshop).
Ora che ti ho incuriosito, passiamo alla pratica, cosa impareremo a fare in questa guida?
Entreremo nel dettaglio di ogni funzionalità offerta da Brackets e scopriremo tutti gli strumenti a disposizione per scrivere codice al fine di ottimizzare il lavoro in termini di tempo e organizzazione dei contenuti.
Installare Brackets
Partiamo dalle basi, come installare Brackets? Come anticipato in apertura, il software è disponibile gratuitamente con licenza MIT Open Source ed è scaricabile dal sito ufficiale www.brackets.io.
Apriamo il browser e andiamo quindi all'indirizzo di riferimento dove troveremo la presentazione del programma e delle funzionalità presenti all'interno, la documentazione, l'elenco delle estensioni ed il supporto.
Il sito ufficiale riconosce il nostro sistema operativo e cliccando sul tasto "SCARICA" procediamo al download della versione per il nostro sistema operativo.
Qualora il sistema operativo non fosse riconosciuto, o preferissimo scaricare una versione diversa da quello in uso, potremo cliccare sotto al tasto di download alla dicitura "Altri download".
Una volta scaricato il pacchetto di installazione lo apriamo e seguiamo l'installazione guidata del programma, al termine ovviamente lanciamo Brackets e siamo pronti per iniziare.
L'interfaccia utente
Passiamo all'utilizzo dell'area di lavoro, aprendo il software noteremo infatti che ci viene proposto un file HTML di esempio, dove si possono evidenziare le 4 macro aree di Brackets:
Top Bar
Situata in alto a sinistra permette di creare nuovi documenti, salvare file, cercare specifiche regole, cambiare la navigazione e molto altro, ma approfondiremo questi aspetti nel corso della guida.
Project bar
Situata a sinistra, racchiude tutti i file aperti e consente di mantenere ordine all'interno del main folder di progetto qualora stessimo lavorando su più file organizzati in cartelle, come ad esempio durante lo sviluppo di un sito Internet
Main section
Situata nella parte centrale, è lo spazio che di fatto useremo di più all'interno del quale è possibile scrivere codice.
Sidebar di servizio
Situata a destra, racchiude l'anteprima live, ovvero quella funzionalità che ci consentirà di visualizzare l'anteprima del lavoro direttamente nel browser, restituendo in tempo reale ogni modifica e consentendo di vedere il risultato finale fin da subito.
Oltre alla funzione anteprima, all'interno della Sidebar di servizio troviamo l'elenco delle estensioni, un vero e proprio "Store" dove sono collocate tutte le estensioni installabili all'interno di brackets.
Cosa sono le estensioni? Sono funzionalità aggiuntive installabili all'interno di Brackets come ad esempio Beautify, che permette di migliorare la lettura del codice organizzandolo per elementi, oppure Emmet, che permette di scrivere il codice in maniera accelerata attraverso espressioni specifiche.
Veniamo al sodo e creiamo il primo documento con Brackets. Per creare un nuovo file basta posizionarsi sul menu chiamato "File" all'interno della Top bar e cliccare sulla voce "Nuovo".
Una volta aver creato un nuovo documento, possiamo decidere l'estensione del file, ad esempio HTML, CSS, PHP o altro.
Per effettuare questa operazione ed assegnare il linguaggio di programmazione o di markup che useremo all'interno del file, dobbiamo posizionarci con il mouse all'interno del piccolo menu situato a piè di pagina e cambiare l'estensione TEXT assegnata di default in quella che preferiamo.
In questa lezione prenderemo come esempio un file HTML, quindi procediamo selezionando tale estensione.
Questa selezione permetterà in fase di sviluppo di ricevere consigli e auto-compilazioni in linea con il linguaggio che stiamo scrivendo.
Una volta stabilita la tipologia del file possiamo procedere con il salvataggio del primo documento, attraverso "Top Bar > File > Salva come…".
Prima di salvare il documento creiamo una cartella dedicata, guida-brackets, cliccando sul tasto "New folder". Procederemo quindi al salvataggio del nostro documento e successivamente inseriremo in essa tutti i file che svilupperemo all'interno di questa guida.
Nella 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, Brackets permette di lavorare in maniera diretta all'interno di una cartella di lavoro, procediamo quindi all'apertura di guida-brackets in modo da renderla visibile all'interno dell'interfaccia.
Importare una cartella di lavoro in Brackets
Chiudiamo il file index.html appena creato, passando con il mouse sopra di esso e cliccando sulla "X".
Dopodiché clicchiamo sul progetto di esempio chiamato "Primi Passi" e procediamo con "Apri cartella..."
Ora basterà semplicemente cercare la nostra cartella (guida-brackets), selezionarla e cliccare su "Apri/Open".
A questo punto siamo in grado di vedere all'interno della sidebar di sinistra la nostra cartella di lavoro dove potremo trovare con estrema semplicità tutti i file che comporranno il progetto e dove saremo in grado di modificare ogni file in tempi rapidi.