6 tool per testare online i codici HTML, CSS e Javascript

6 strumenti online per editare HTML, CSS e Javascript visualizzandone in tempo reale e in anteprima il risultato prima della pubblicazione del codice

Chi si occupa di pubblicazione sul web ha spesso a che fare con i linguaggi di programmazione di cui deve testare i codici prima di inserirli in un post, in un Tema o in una pagina web.

I linguaggi per il web sono diversi e vanno dal Javascript al Python ma il linguaggio che li riunisce tutti è quello denominato HTML giunto alla versione HTML5. Tale linguaggio è quello che viene riconosciuto dai browser e che permette loro di effettuare il rendering del codice di una pagina web per mostrarne il layout risultante.

Per rispondere alla domanda su come verrà mostrato dal browser un determinato codice esistono gli Editor professionali che servono appunto per creare le pagine web ma, per le piccole esigenze di un webmaster, sono eccessivi e poco pratici. Ci sono infatti molti Editor HTML online che ci mostrano in tempo reale come verrà visualizzato un oggetto HTML incollandone il relativo codice in una sezione dell'Editor.

Chi non avesse nessuna conoscenza di codici di programmazione e avesse invece la voglia di intraprendere l'avventura del blogging, può scaricare gratuitamente il mio ebook Guida all'HTML e al CSS per avere quelle conoscenze propedeutiche necessarie per chi gestisce anche un piccolo blog.

Tanto per fare un esempio i codici per incorporare audio e video in un sito li ho testati con uno strumento online. Si tratta di un grande risparmio di tempo rispetto a dover pubblicare un post di prova. C'è da dire che questi strumenti online funzionano solo se si tratta di codici universali. Non possono quindi mostrare il rendering di codici che usano dei tag specifici di Blogger o che hanno bisogno di server come nel linguaggio PHP.

1) REAL-TIME EDITOR

Real Time Editor è uno degli Editor Online più semplici. Nella parte alta si incolla il codice mentre in quella bassa se ne controlla il rendering. Si possono fare modifiche che verranno applicate in tempo reale.

Oltre al codice HTML vengono rilevati anche il codice CSS e Javascript. Tali codici dovranno però essere inseriti con la modalità inline ovvero il codice CSS deve essere compreso tra i tag <style> e </style> e quello javascript tra i tag <script> e </script>. Si può modificare il codice e vederne l'effetto in tempo reale. La scelta di Real-Time Editor come Editor HTML Online è quella più semplice e alla portata di tutti.

2) CODEPEN

CodePen è un Editor Online molto più professionale utilizzato dagli sviluppatori per condividere con i colleghi le loro realizzazioni. Infatti ci si può registrare per salvare i nostri codici, per condividerli o per creare delle copie dei codici creati da altri. Il codice non va incollato in modo inline come su Real-Time Editor.

Ci sono infatti tre riquadri in cui digitare rispettivamente i codici HTML, CSS e Javascript. Per quest'ultimo è anche possibile caricare delle Librerie esterne come jQuery, Prototype, Scriptacoulus, Mootools, ecc.

A chi volesse saperne di più su questo Editor Online consiglio di leggere il post che ho dedicato a CodePen. Gli sviluppatori professionisti si loggano con account Pro per avere Raccolte e Pen privati al costo 9$ al mese.

3)  JSFIDDLE

JsFiddle è specifico per chi ama "giocare" con il javascript. Anche in questo tool ci sono tre riquadri in cui inserire rispettivamente HTML, CSS e javascript, quest'ultimo anche attraverso librerie esterne.

Ho già dedicato un post a questo editor e ho anche pubblicato un video tutorial su Youtube.

Il rendering del codice verrà mostrato in tempo reale nel riquadro in basso a destra. Dopo aver modificato il codice occorre andare su Run per visualizzare la nuova anteprima. Con Save si può salvare il lavoro dopo che si sia creato un nostro account gratuito. JsFiddle è disponibile anche come estensione di Chrome.

4) JSBIN

JsBin è un altro Editor HTML che però utilizza un altro sistema, vale a dire ha preimpostato i tag HTML fondamentali per una pagina web cioè <html>, <head>, <title>, <body> e le loro chiusure. Il codice HTML va quindi inserito tra <body> e </body> mentre i codici CSS e Javascript saranno aggiunti in altri riquadri

L'output del codice verrà mostrato sulla destra. JsBin contrariamente ai due strumenti visti in precedenza permette di aggiungere Librerie Javascript esterne solo se predefinite (jQuery, Angular, ecc) e non tramite URL. JsBin è uno strumento gratuito che può essere usato senza registrazione; per ottenere più funzionalità come contenitori privati o sincronizzazione in Dropbox occorre avere un account Pro.

5) LIVEWEAVE

LiveWeave è un tool molto simile al precedente ma con una interfaccia più piacevole anche con un Dark Theme

Oltre ai soliti strumenti per il rendering del codice permette di aggiungere delle Librerie Javascript e, nella colonna posta a sinistra, ha anche strumenti aggiuntivi come CSS Explorer, Color Explorer e Vector Editor. CSS Explorer fornisce uno strumento WYSIWYG per la creazione di stili CSS. Color Explorer aiuta a scegliere i colori migliori per il tema e infine l'editor vettoriale consente di creare grafica vettoriale per il sito.

6) HTML HOUSE

HTMLhouse consente il rendering del solo HTML e non del CSS e del Javascript. È quindi un editor più minimalista che ha preimpostati i tag fondamentali per le pagine web insieme a un messaggio di benvenuto tra i tag <h1> e <p> che deve essere eliminato dal codice prima di incollare quello da testare

Una caratteristica interessante di questo tool è la possibilità di pubblicare il codice HTML o di condividerlo privatamente con un URL che ci viene fornito. È semplice ma efficace per i test di solo HTML.

In conclusione, per quello che può contare la mia esperienza decennale di blogging, personalmente uso Real-Time Editor quando voglio testare un codice e nient'altro mentre utilizzo CodePen quando voglio anche salvare il codice che ho realizzato e magari condividerlo in un post o con altre modalità.