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.
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
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.
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!
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, usaOggi, 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.
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.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.