Al giorno d’oggi è possibile usufruire di svariati editors online che possono risparmiarci l’utilizzo di softwares a pagamento, come il noto Dreamweaver. Ho navigato a lungo per il web nel tentativo di trovarne uno in grado di soddisfare le mie esigenze, e alla fine ho fatto centro. Vediamo quindi insieme tre ottimi strumenti, e alla fine dell’articolo scoprirai qual è il miglior editor online per lavorare con i linguaggi HTML, CSS e JavaScript.
Dabblet
Dabblet è indubbiamente il più semplice dei tre, in quanto se non siamo registrati, potremo usufruire di un editor piuttosto essenziale.
Lo spazio di lavoro è personalizzabile, permettendoci di scegliere tra un layout verticale, orizzontale, oppure uno in cui ogni sezione è separata dalle altre.
Nelle impostazioni inoltre avremo la possibilità di aumentare o ridurre a piacimento la dimensione del testo del codice che scriveremo.
Questo, unito al comodo pulsante Result che ci consentirà di visualizzare l’anteprima del nostro progetto a schermo intero, e alla piacevole interfaccia grafica, fa di Dabblet un editor online semplice ma efficiente.
Codepen
Passiamo a Codepen, nonché il mio secondo editor preferito.
Anche qui lo spazio di lavoro è personalizzabile e ci offre un layout verticale, orizzontale, e uno in un cui l’output del nostro codice si troverà a sinistra anzichè a destra.
Nelle impostazioni di Codepen troveremo delle features davvero interessanti. Prima tra queste, la possibilità di utilizzare dei preprocessori per HTML, CSS e JS allo scopo di strutturare il nostro codice in maniera più agevole e conveniente.
Altra caratteristica invitante, è il fatto di poter integrare nel nostro progetto il file Normalize.css, indispensabile per non andare incontro a frustranti differenze visive tra i vari browsers.
C’è di più. Potremo infatti aggiungere files CSS e JS esterni, con la possibilità di attingere anche da quelli messi a disposizione dall’editor, come Bootstrap per quanto riguarda i CSS, o note librerie come JQuery per JS.
Infine, tramite il pulsante Share, saremo in grado di salvare sul PC il nostro progetto, che verrà esportato in un comodo file ZIP.
Liveweave: il miglior editor HTML CSS Javascript online
Eccoci arrivati al pezzo forte. Liveweave è senza ombra di dubbio l’editor online più completo che abbia mai provato, perché racchiude in sé tutto quello (o quasi) che si possa desiderare.
Come in Dabblet e Codepen, anche qui lo spazio di lavoro è personalizzabile. Possiamo scegliere fra un layout “quadrato”, orizzontale e verticale.
La prima caratteristica che manca negli altri due, e che invece è presente in Liveweave, sono i suggerimenti. Ciò significa che quando andremo a strutturare il nostro codice, sarà l’editor stesso a suggerirci cosa scrivere, un pò come quando ricerchiamo qualcosa su Google. Inutile dire che questa feature ci farà risparmiare del tempo prezioso, ed è stata una di quelle che personalmente ho apprezzato di più.
Cliccando su Tools in alto a sinistra potremo esplorare gli interessanti strumenti che l’editor ci mette a disposizione. Il primo è rappresentato dalla palette dei colori HTML, una pagina dove avremo accesso ai più svariati colori con i relativi codici.
Il secondo, consiste nel salvare il progetto, con la possibilità di esportarlo sia tramite un singolo file HTML, sia in formato ZIP.
Il terzo, è un utilissimo generatore di testi.
Non manca infine la possibilità di importare nel progetto le più note librerie CSS e JS tramite il pulsante Library.
Ricapitolando
Dabblet Pro
- interfaccia grafica gradevole
- layout personalizzabile
Dabblet Contro
- assenza di tools significativi
- impossibilità di salvare il progetto su PC
Codepen Pro
- interfaccia grafica gradevole e rilassante
- layout personalizzabile e flessibile
- features interessanti come l’integrazione di files esterni CSS e JS
- possibilità di salvare il progetto su PC
Codepen Contro
- assenza dei suggerimenti
Liveweave Pro
- interfaccia grafica gradevole e rilassante grazia alla modalità notte
- layout personalizzabile
- suggerimenti durante la strutturazione del codice
- tools vari ed interessanti
- possibilità di salvare il progetto su PC
Liveweave Contro
- nessuno
Appare quindi chiaro chi sia il vincitore fra i tre.
E tu? Conosci degli altri editors completi come Liveweave o semplicemente con cui ti trovi bene? Faccelo sapere commentando l’articolo.
provato livewavw con libreria Bootstrap, ma non da segni di vita nel riquadro di anteprima … 🙁
Mi spiace ma non so che dirti. Se non sbaglio però hai detto che con Codepen è tutto ok giusto? L’unica idea che mi viene in mente è quella di provare a cambiare browser.