Uso di Atom per il progetto d'esame

• Installazione
• Aggiunta dei package
• Strutturazione dei file
• Sviluppo di uno sketch

Installazione

Atom può essere usato su Windows, macOS e Linux. Per l'installazione è sufficiente scaricare il file di setup dalla home del sito ufficiale ed eseguirlo come qualsiasi altro normale software di installazione.

Per Windows è possibile ottenere una versione portatile, eseguibile direttamente dopo la decompressione e senza installazione, scaricando il file "atom-x64-windows.zip" o "atom-windows.zip" (per sistemi a 32 bit) dalla pagina con i link a tutti gli eseguibili.

Aggiunta dei package

I package sono moduli esterni che aggiungono nuove funzionalità ad Atom. Fra quelli disponibili, si consigliano:

scrittura del codice:

• atom-p5js-snippets per avere suggerimenti sulla sintassi delle istruzioni p5.js contenenti il testo che si sta digitando;
• atom-beautify per rendere più leggibile il codice quando le indentazioni diventano troppo caotiche;

visualizzazione del risultato:

• atom-live-server per mostrare sui browser del computer locale il risultato dell'esecuzione del codice;
• atom-html-preview per mostrare, in tempo reale su un secondo pannello Atom, le modifiche a un file HTML (che potrebbe contenere direttamente del codice p5.js);

caricamento su un sito personale:

• remote-sync per caricare i file su un server direttamente da Atom, anche a ogni salvataggio dei file.

Nelle pagine di presentazione dei package possono essere indicate diverse modalità di installazione ma si consiglia di usare sempre il pannello di gestione dei package di Atom.

Strutturazione dei file

Non esiste un'unica possibile strutturazione dei file perché le indicazioni sugli attributi grafici degli elementi della pagina (CSS) e il codice da eseguire (JavaScript) possono essere sia incorporati nell'index.html (il file principale caricato dal browser) che definiti in file esterni linkati.

Con p5.js gli attributi grafici della pagina si limitano spesso a una sola regola CSS che può essere incorporata nell'index.html. Il codice dello sketch è invece meglio metterlo in un file distinto (sketch.js) linkato all'interno dell'index.html.

Per i progetti costituiti da una singola pagina è più comodo utilizzare una struttura a singolo sketch.

Se il progetto è articolato su più pagine o si vogliono fare più sketch di prova con le stesse librerie e/o gli stessi assets, è meglio usare una struttura multi sketch.

Attraverso la pagina sketch di base è possibile trovare cartelle già strutturate per l'uso immediato dei file.

Sviluppo di uno sketch

La dotazione minima per lo sviluppo di uno sketch è costituita da Atom con installato atom-live-server e da Google Chrome (o un altro browser con buoni strumenti di analisi del codice).

Per accelerare lo sviluppo del codice conviene attivare:

• l'autosave di Atom, che evita di dover salvare manualmente le modifiche ogni volta che si vuole vedere il risultato, e
• il pannello di debugging del browser che, attraverso la console, permette di avere maggiori informazioni su eventuali errori di esecuzione.

Per intervenire sullo sketch è meglio aprire l'intera cartella con Atom. In Windows è possibile farlo attraverso il menu contestuale delle cartelle dopo aver attivato l'opzione "File / Settings / System / Show in folder context menus". In macOS si può bloccare l'icona di Atom nel Dock e trascinarvi sopra la cartella.
Dopo l'apertura della cartella si possono aprire i file semplicemente selezionandoli nel pannello di sinistra. I pannelli aperti possono essere spostati per visualizzare contemporaneamente il contenuto di due o più file o anche più parti dello stesso file.

Per visualizzare lo sketch (o una cartella con più sketch) si può avviare il package atom-live-server [dal menu "Packages"] che aprirà automaticamente il browser. Grazie all'autosave di Atom e al ricaricamento automatico delle pagine modificate, sarà sufficiente scrivere il codice e passare direttamente al browser per vedere subito il risultato.