PRIMI PASSI CON BRACKETS!

Questa è la tua guida!

Benvenuto in questa versione preliminare di Brackets, un nuovo editor open-source per la nuova generazione del web. Noi siamo grandi fan degli standard e vogliamo realizzare degli strumenti migliori per lavorare in JavaScript, HTML, CSS e altre tecnologie aperte del web. Questo è il nostro umile inizio.

Brackets è un editor differente. Un importante differenza è che questo editor è scritto in JavaScript, HTML e CSS. Questo significa che la maggior parte di coloro che utilizzano Brackets, sono in grado di modificare e ampliare l'editor. Infatti, noi usiamo Brackets ogni giorno per costruire Brackets. Brackets è inoltre dotato di caratteristiche uniche come Modifica Rapida, Anteprima Live e altre caratteristiche che non trovereste altrove.

Stiamo provando alcune cose nuove

Modifica rapida per CSS e JavaScript

Non c'è più bisogno di spostarsi continuamente da un documento all'altro. Quando si lavora al codice HTML, è possibile digitare Cmd/Ctrl + E per aprire un'area di modifica rapida che mostra il CSS corrispondente. Una volta effettuata una modifica al codice CSS, basta premere ESC e si ritorna sull'HTML chiudendo l'area di modifica rapida, o è possibile lasciare aperta tale area continuando a lavorare sull'HTML. Premendo invece ESC al di fuori di tale area, tutte le aree di modifica rapida verranno chiuse.

Vuoi vederlo in azione? Posiziona il cursore nel tag sopra e premi Cmd/Ctrl + E. Dovresti vedere un'area di modifica rapida del CSS apparire sopra. Sulla destra vedrai la lista delle regole CSS corrispondenti a questo tag. Scorri semplicemente le regole con Alt + Up/Down per trovare quella che intendi modificare. Uno screenshot che mostra una finestra di modifica rapida CSS

Puoi usare la stessa combinazione di tasti per il codice JavaScript e vedere il corpo di una funzione posizionando il cursore nel nome della funzione chiamata. Per il momento gli editor in linea non possono essere nidificati, quindi è possibile usare la modifica rapida solo quando il cursore è posizionato nell'editor generale.

L'anteprima del CSS cambia in tempo reale nel browser

Conosci la solita procedura "salva/ricarica" che abbiamo fatto per anni? Fai una modifica tramite editor, premi "salva", passi alla finestra del browser e aggiorni la pagina per vedere il risultato? Con Brackets non avrai più bisogno di questo procedimento.

Brackets aprirà una connessione in tempo reale con il tuo browser e gli manderà tutte le modifiche del CSS non appena tu le avrai digitate! Forse oggi stai già facendo qualcosa di simile con qualche strumento browser-based, ma con Brackets non avrai bisogno di copiare e incollare il codice CSS definitivo nel tuo editor. Il tuo codice gira nel browser, ma risiede già nell'editor!

L'anteprima mette in risalto gli elementi HTML e le regole CSS.

Brackets rende semplice vedere come le proprie modifiche all'HTML e al CSS hanno effetto sulla pagina. Quando il cursore è su una regola CSS, nel browser verranno messi in risalto tutti gli elementi che vengono influenzati da quella regola. Similmente, quando stai modificando un file HTML, Brackets metterà in risalto nel browser gli elementi HTML corrispondenti.

Se hai Google Chrome installato, puoi provare da te. Clicca nell'icona con il fulmine nell'angolo in alto a destra della finestra di Brackets oppure premi Cmd/Ctrl + Alt + P. Quando Anteprima Live è abilitata in un documento HTML, tutti i documenti CSS collegati possono essere modificati in tempo reale. L'icona cambierà colore, dal grigio al dorato, quando Brackets stabilisce una connessione con il tuo browser. Adesso, posiziona il cursore sul tag sopra. Noterai un highlight blu apparire attorno all'imagine su Chrome. Successivamente, usa Cmd/Ctrl + E per aprire le regole CSS. Prova a cambiare la grandezza del bordo da 10px a 20px o cambia il colore di sfondo da "transparent" a "hotpink". Se Brackets e il tuo browser sono posizionati fianco a fianco, noterai istantaneamente i cambiamenti anche nel tuo browser. Bello, vero?

Oggi, Brackets supporta solo l'Anteprima Live per il CSS. Comunque, nella versione corrente, i cambiamenti ai file HTML e JavaScript sono automaticamente ricaricati quando si salva. Al momento stiamo lavorando al supporto di HTML e JavaScript nell'Anteprima Live. Inoltre le anteprime live sono supportate solo su Google Chrome, ma per il futuro speriamo di portare questa funzionalità anche sugli altri browser più comuni.

Visualizzazione Rapida

Per coloro che non hanno ancora memorizzato i colori associati ai valori HEX o RGB, Brackets rende facile e veloce vedere esattamente qual è il colore corrispondente. Nei documenti CSS e HTML basta semplicemente posizionare il mouse sopra il valore di ogni colore e Brackets mostrerà automaticamente un'anteprima di quel colore. La stessa cosa vale per le immagini: basta spostare il mouse sopra il link dell'immagine all'interno dell'editor Brackets ed esso mostrerà una miniatura di quell'immagine.

Prova la Visualizzazione Rapida, posiziona il cursore sopra il tag nella parte superiore di questo documento e premi Cmd/Ctrl + E per una modifica rapida del CSS. Adesso posiziona il mouse sopra un valore di qualche colore. Inoltre puoi vederla in azione sui gradienti aprendo una modifica veloce CSS sopra il tag e posizionando il mouse sopra qualche valore corrispondente all'immagine di sfondo. Prova l'anteprima dell'immagine, posiziona il cursore sopra lo screenshot presente all'inizio di questo documento.

Partecipa

Brackets è un progetto open source. Sviluppatori web da ogni parte del mondo stanno contribuendo per realizzare un editor migliore. Altri ancora stanno realizzando estensioni che espandono le funzionalità di Brackets. Dicci cosa ne pensi, condividi le tue idee o contribuisci direttamente al progetto.