Interfaccia di lavoro e strumenti principali | Editor


Nella scorsa lezione siamo entrati nel dettaglio della voce “File” presente all’interno della Top Bar ed abbiamo analizzato le principali voci e funzionalità che consentono di creare, salvare e gestire file oltre ad esserci soffermati anche sui primi strumenti utili per ottimizzare il lavoro con Brackets.

In questa lezione proseguiamo alla scoperta della Top bar, e finiamo di analizzare gli strumenti presenti.

Opzioni di modifica

La seconda voce che troviamo si chiama “Modifica” e cliccando su di essa noteremo la funzionalità “Modifica > Annulla”, questa opzione è estremamente utile, in quanto permette di annullare un’operazione errata, se ad esempio durante la scrittura di codice ci accorgessimo di aver sbagliato a scrivere un Tag HTML (elemento che compone il codice HTML), grazie all’opzione “Annulla”, sarà possibile tornare indietro e cancellare la scrittura del Tag.

Al contrario della precedente, la seconda voce che troviamo è “Modifica > Ripristina”, questa funzionalità permette di ripristinare un’operazione dopo averla annullata, insomma grazie a questi primi due strumenti non correremo il rischio di perdere il codice che stiamo digitando.

2 ripristinare operazioni brackets

Proseguiamo, scendendo ulteriormente troviamo le voci “Taglia”https://www.html.it/”Copia”https://www.html.it/”Incolla” che consentono di tagliare o copiare parti di codice per poi permetterci di incollarle dove vogliamo che si collochino.

3 strumento taglia brackets

Successivamente troviamo le opzioni “Seleziona tutto” e “Seleziona riga” che permettono di selezionare tutto il contenuto della Main section, ovvero la parte centrale che contiene il codice, oppure di selezionare la singola riga dove è posizionato il cursore.

4 seleziona tutto brackets5 selezionare riga brackets

Sempre parlando di una specifica riga di codice, grazie alla funzione “Modifica > Sposta la riga in alto” oppure “Modifica > Sposta la riga in basso” è possibile cambiare la posizione fisica della riga selezionata. Questa funzionalità è una buona soluzione alternativa al classico taglia & incolla.

6 spostare line brackets

Ricerca

Proseguiamo, ed entriamo alla scoperta delle migliori funzionalità presenti all’interno del menu “Cerca”, dove come prima opzione troviamo quella che ci permette di cercare del testo all’interno della nostra main area, velocizzando così il lavoro.

7 cercare brackets

8 ricerca avanzata brackets

Appena sotto, sempre correlato alla prima voce abbiamo “Cerca > Cerca il successivo” e “Cerca > Cerca il precedente”.

Questi due strumenti permettono di cercare velocemente una stringa di testo che è presente più volte all’interno del codice inserito nella main area.

Questa funzione è spesso utilizzata per cercare elementi di codice presenti ripetutamente in un file.

9 cerca successivo brackets

10 cerca precedente brackets

Passiamo alla voce successiva e scopriamo uno strumento degno di nota, ovvero “Cerca > Trova tutto e seleziona”.

Questa voce permette di trovare e modificare contemporaneamente elementi uguali.

Basta selezionare un elemento all’interno del documento e cliccare sulla voce in questione, a questo punto notiamo che tutti gli elementi coinvolti vengono selezionati permettendo di apportare modifiche istantanee a tutti gli elementi eseguendo l’operazione una sola volta.

11 ricerca multipla brackets

Vista

Parliamo ora del menu “Vista”, dove all’interno sono presenti strumenti e funzionalità invidiabili da parte di altri software di code editing.

Come prima opzione abbiamo la voce “Vista > Temi…” che come fa presagire anche il nome permette di cambiare il tema attualmente in uso, di default Brackets infatti prevede la scelta tra 2 diversi temi di lavoro, Dark e Light.

All’interno della prossima lezione approfondiremo questo argomento e vedremo come sia possibile installarne di nuovi e trovare il tema adatto alle nostre esigenze.

Tornando alla prima voce presente all’interno del menu “Vista > Temi…” abbiamo la possibilità di modificare il tema, quindi l’aspetto estetico dell’interfaccia lavoro di Brackets ma anche la possibilità di modificare la dimensione del carattere ed il tipo di carattere.

12 cambiare tema brackets

13 modificare tema brackets

Proseguiamo e vediamo insieme le tre sottovoci che seguono, “Vista > Nessuna Divisione”, “Vista > Dividere Verticalmente” ed infine “Vista > Dividere Orizzontalmente”.

Attraverso l’opzione “Nessuna Divisione” (impostata di default) sarà possibile mantenere la Main area di lavoro pulita in un’unica schermata, ma se scegliamo l’opzione “Dividere Verticalmente” noteremo invece che l’area di lavoro si divide in due parti consentendo di aprire contemporaneamente e di lavorare su due file.

14 dividere verticalmente interfaccia lavoro brackets

La stessa divisione può essere fatta anche orizzontalmente attraverso la voce “Dividere Orizzontalmente”.

15 dividere orizzontalmente interfaccia lavoro brackets

Qualora avessi bisogno di maggiore spazio potrai invece utilizzare la prossima voce, “Vista > Nascondi barra laterale” che farà chiudere la Project bar ed estendere la Main area

16 nascondere barra laterale interfaccia brackets

17 modifica multipla file brackets

Un’altra funzione interessante è la prossima, o meglio, le prossime, attraverso le voci successive sarà infatti possibile “Aumentare la dimensione del testo” o “Diminuire la dimensione del testo” in questo modo potremo impostare le preferenze visuali ed infine, con la voce sottostante “Ripristinare la dimensione del testo”, riportando la grandezza alla dimensione default di Brackets.

18 aumentare dimensione font brackets

19 ingrandire font brackets

Continuiamo e vediamo nel dettaglio le principali funzioni della voce di menu “Naviga”.

All’interno di questa voce troviamo come prima funzionalità “Naviga > Apri velocemente”, questa opzione apre un pannello che permette di cercare rapidamente uno specifico file presente all’interno della cartella del progetto, ed ovviamente consente anche di aprirlo.

20 aprire file brackets

Proseguiamo a parliamo della seconda voce presente all’interno del menu “Naviga”, ovvero la voce “Naviga > Vai alla linea” che consente di andare rapidamente ad una specifica riga del documento.

Questa funzione è estremamente utile all’interno di file con tante righe di codice, perché ovviamente potremo raggiungere la posizione desiderata tramite una semplice specifica.

21 scorciatoie brackets

Scendiamo e troviamo altre due voci molto interessanti, ovvero “Naviga > Documento successivo” e “Naviga > Documento precedente”, esse sono molto utili per passare da un file all’altro, è infatti possibile passare da un file ad un altro inserendoli all’interno della stessa cartella di lavoro e usando queste due funzioni specifiche.

22 modifica documento brackets

Ultima opzione che esaminiamo all’interno del menu “Naviga” è quella chiamata “Naviga > Modifica veloce”, se ben usata è una vera e propria compagna di lavoro.

“Modifica veloce”, consente di modificare le regole stilistiche assegnate tramite codice CSS, semplicemente posizionando il mouse sulla parte di codice HTML interessata e grazie ad una finestra in sovraimpressione potremo modificarne il codice CSS e lo stile assegnato.

23 modifica veloce brackets

Window

Parliamo velocemente anche della voce di menu “Window”, la quale consente di effettuare operazioni di servizio come minimizzare la finestra di lavoro, abbassandola nella barra delle applicazioni, oppure ingrandendola occupando l’intera grandezza dello schermo.

Insomma attraverso il menu Windows è possibile migliorare l’efficienza del lavoro su Brackets.

24 interfaccia brackets

Debug

Veniamo al menu “Debug”, il quale consente di sfruttare in particolare due funzioni, la prima riguarda la voce chiamata “Debug > Riavvio con le Estensioni”, per il riavvio del sistema e il ricaricamento di ogni file di sistema.

È utile usare la funzione “Riavvio con le Estensioni” in quanto, come vedremo nelle prossime lezioni, Brackets permette di installare estensioni aggiuntive che integrano ed aumentano gli strumenti di lavoro.

Delle estensioni parleremo nel dettaglio all’interno di una lezione interamente dedicata, per il momento basti sapere che non sempre dopo aver installato una nuova estensione questa risulta funzionante fin da subito.

Ecco che quindi, grazie alla funzione “Riavvio con le Estensioni”, sarà possibile ricaricare Brackets aggiornando così ogni funzione, estensioni comprese.

25 estensioni brackets

La seconda funzione rilevante presente all’interno del menu “Debug” è quella che consente di cambiare la lingua del programma, “Debug > Cambia la lingua.”

Opzione semplice ma estremamente utile e pratica, in quanto con Brackets e possibile scegliere la lingua che preferiamo a differenza di molti code editor che vengono forniti solamente in lingua inglese.

26 cambiare lingua brackets

Insomma, Brackets mette a disposizione molti strumenti e molte preferenze di sistema, adattandosi al meglio alle esigenze comuni degli utilizzatori.

Aiuto

All’interno dell’ultima voce di menu chiamata “Aiuto” troviamo una guida all’utilizzo accessibile tramite la voce “Come usare Brackets” ed un supporto attraverso la voce “Aiuto > Supporto per Brackets” oltre che un collegamento diretto con il sito Web ufficiale (“Aiuto > Sito WEB di Brackets”).

27 supporto aiuto brackets

28 documentazione ufficiale brackets

Chiudiamo la lezione dedicata ai principali strumenti di lavoro anticipando che nelle prossime lezioni entreremo ancor più nel dettaglio degli strumenti e delle estensioni, mostrando inoltre le funzionalità attraverso esempi pratici.



https://www.html.it/

Articolo Originale-Fonte

Hey, ciao 👋

Iscriviti alla Newsletter di TivuStream , aggiornamenti , novità , e molto altro

Non inviamo spam! Leggi la nostra Informativa sulla privacy per avere maggiori informazioni.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.