Html, i tools necessari per iniziare
Questo è il post #5 di 31 nella serie “HTML 101 - Le basi”
Quando impariamo cose nuove, la cosa migliore che possiate fare è quella di fare pratica e ci sono dei tools necessari per HTML. Sperimentare con varianti and ovviamente anche sbagliare, fa tutto parte del processo di apprendimento.
Ci sono vari modi per esercitarsi, alcuni che non richiedono alcun setup o software sul nostro computer ma necessitiamo di una connessione. Un altro modalità è quella che possiamo installare ciò che ci serve sul nostro computer e possiamo lavorare offline.
Vedremo entrambe le soluzioni in questo post!
Online Tools
Ci sono diversi tool gratuiti su Internet che possono venirci in supporto alla nostra pratica per imparare l’ HTML.
Codepen
Codepen è un tool online molto potente con diverse funzionalità avanzate che richiedono un account premium. La versione gratuita è più che sufficiente per consentirci di fare pratica mentre studiamo l’ HTML e lo sviluppo Web in generale.
Quello che utilizzeremo al momento di Codepen sono quelli che vengono appunto definiti Pens.
Pens offrono la possibilità di scrivere codice HTML, CSS e JavaScript automaticamente linkati fra di loro.
Questo tool è veramente utile quando per testare del codice o fare pratica con le cose che vedremo in questa
serie di articoli.
Quando creiamo un nuovo Pen, ci viene presentata una finestra divisa in 4 aree, 3 per la parte di codice, rispettivamente una per ognuno dei linguaggi usati (HTML, CSS, JavaScript) e una finestra che ci mostra il risultato renderizzato.
Vediamo un esempio in cui scriviamo del codice HTML nella rispettiva area e il risultato viene renderizzato nella finestra a destra.
Jsfiddle
Jsfiddle è un tool molto comodo che ci permette di testare codice usando non solo HTML, ma anche CSS e JavaScript.
È un mix fra un editor e un browser integrato in un unico tool quindi possiamo digitare il nostro codice e immediatamente vedere il risultato:
Jsbin
Jsbin è molto simile a Jsfiddle e fornisce funzionalità simili. Vediamo lo stesso esempio precedente:
Una caratteristica comune sia a Jsfiddle che Jsbin è la capacità importare librerie JavaScript da poter utilizzare all’interno del nostro codice.
Gli ultimi due tools sono leggermente diversi e consentono di creare anche progetti complessi usando dei templates.
I templates sono un punto di partenza su cui aggiungere ed estendere il nostro codice ma questo esula lo scopo di questa serie di post.
Per quel che riguarda un semplice template per esercitarsi con l’ HTML, entrambi forniscono un template base. Questo template riproduce lo stesso workflow che utilizzeremo nella prossima sezione dove vedremo un installazione sul nostro computer locale.
Il primo di questi tools è stackblits e il secondo è Plunker.
Stackblitz
Stackblitz offre la possibilità di creare una grande varietà di progetti, che siano lato front-end o back-end grazie al suo estensivo set di templates.
Possiamo creare progetti front-end usando uno fra i frameworks più usati:
oppure utilizzare un template per il back-end:
Fra le molteplici altre opzioni, fornisce la possibilità di creare un template (anche detto boilerplate code) vanilla, fra cui c’è quello a cui siamo interessati che è il sito statico:
questo creerà una serie di files che possiamo trovare in un progetto Web statico e vediamo, anche qui, di riprodurre l’esempio mostrato precedentemente:
Plunker
Plunker è l’ultimo tool in questa lista ed è molto simile a Stackblitz tranne che ha una scelta più limitata di template:
scegliendo il template default, abbiamo un qualcosa di veramente simile a quello che abbiamo con Stackblitz:
Concludiamo con una nota di nota di merito per Stackblitz che essendo una PWA, può essere installato in locale sul nostro computer.
Lavorare sul nostro computer
Per lavorare sul nostro computer abbiamo bisogno di tre cose:
- un editor di testo
- Una struttura di cartelle per organizzare le nostre pagine html
- un Web browser
Un editor di testo è un programma che ci permette di scrivere “plain text” (cioè testo senza particolare formattazione) quindi un word processor come Microsoft Word non è adatto.
Un editor di testo per Windows può essere Notepad e per MacOS si può usare TextEdit.
Questi sono editor di testo sono diversi da quelli che vengono chiamati IDEs che sono molto più potenti ma anche
più complicati da utilizzare.
Il mio consiglio, se siete completamenti nuovi all’ HTML, è quello di usare un semplice editor di testo.
Non avrete aiuti come l’auto-completamento o il syntax highlighting e questo vi costringerà a sforzarvi a ricordare
le cose, successivamente andrà bene usare un IDE.
Se siete curiosi e volete, potete provare altri tools che sono più potenti di un semplice editor di testo quali per esempio: