Pubblicato il 07/08/15e aggiornato il

HTML Fire e Javascript Editor sono app di Chrome per Editor in Real Time.

Come visualizzare immediatamente il risultato di un codice HTML, CSS e Javascript con le applicazioni di Chrome HTML Fire e Javascript Editor.
Con questo articolo inizio una serie di post su alcune interessanti estensioni (o applicazioni) che possono sostituire dei programmi del computer o dei tool online utilizzati da blogger dilettanti e professionisti. Per testare il funzionamento di un codice con linguaggio HTML i meno esperti lo pubblicano in un post di un blog di prova mentre quelli con qualche conoscenza in più possono usufruire di uno dei tanti strumenti online. Il più sofisticato è Codepen che però serve anche per la condivisione di tali codici.

HTML Fire è una applicazione di Chrome che ci permette di vedere in tempo reale il risultato visivo di un codice HTML. Per la sua installazione si va su +Aggiungi

html-fire

quindi si va nuovamente su Aggiungi. HTML Fire è una applicazione che può essere aperta da desktop anche senza aprire il browser Chrome. Da Desktop si clicca sulla icona con 9 quadretti multicolori oppure da Chrome cliccando sempre sulla stessa icona ma in alto a sinistra

html-fire[5]

Ricordo che tutte le estensioni e applicazioni di Chrome possono essere abilitate o disabilitate singolarmente aprendo la pagina chrome://extensions/ oppure andando su Menù > Altri Strumenti > Estensioni.  Dopo aver cliccato su HTML Fire si apre una pagina come questa

html-fire[7] 

che è divisa in due parti. Nella parte alta con sfondo rosa si incolla il codice e nella parte bassa si visualizza come il browser lo traduce. Si può spostare il cursore per avvicinare codice e rendering visivo. Si tratta di una app che non ha bisogno della connessione a internet per funzionare.

html-fire[9]

HTML Fire però ha la limitazione di fare il rendering solo dell'HTML e non legge il javascript. Per avere uno strumento paragonabile a Real Time Editor bisogna quindi usare un'altra app. 

Javascript Editor è l'app che fa al caso nostro perché legge HTML, CSS e Javascript.

javascript-editor-chrome

Si va su Aggiungi poi di nuovo su Aggiungi. Anche questa app di Chrome si può aprire cliccando sulla icona delle applicazioni visibile in alto a sinistra di Chrome o nella barra di stato di Windows.

javascript-editor

Si incolla separatamente HTML, CSS e Javascript nei rispettivi campi quindi si ha il risultato

javascript-editor[4]

Il test è stato fatto con lo script del countdown personalizzato per Natale. Per visualizzare il campo del CSS si deve cliccare su Less. Entrambi le app presentate possono essere disabilitate quando non servano ma per la mia esperienza non appesantiscono Chrome in modo sensibile.




Nessun commento :

Posta un commento

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.